Hi

You are right, if you set a SceneObject on a Path, all the object's sprites are affected separately, and in the same way.

There is a size property that you can use for your tweening, it is a vector with x and y components that are updated separately. But this is not a scale factor, just a size in world units. Unless you want your sprites to be the same size, you should create separate paths for them. This may be easier than you think:

var newPath = myPath.clone();
newPath.getNode(0).size = {x: ... , y: ...};

> And if we add a textsprite to object - it create a error!

This is also right - probably something that we can fix, i.e. we can avoid throwing an exception and getting an error. However, as you cannot set a size for a TextSprite, you can't expect TextSprites to be affected by the size parameter of the path. A TextSprite draws some text using a font - you can change the font size, but can't change the pixel size of the whole TextSprite directly. If you want you can draw the TextSprite to an off-screen image, create a normal Sprite with that image, and then you'll be able to interpolate/tween its size.

myTextSprite.drawToImage('myTextSpriteImage', true);
var normalSprite = new Sprite('myTextSpriteImage');
mySceneObject.removeSprite(myTextSprite);
mySceneObject.addSprite(normalSprite);

Thank for explanation.

Now i create a modal with 2 path - for modal container and for button and it look smoothly.However, it some complicated.

For example it expand fron center to fullscreen (opacity from 0 to 1, x from 192 to 1920)

Button expanded by another patn - and it must move to be strongly in left corner.

OnClick button launch new pathses - for collapse this objects

This is 5(or less) min of work.

But how create different speed for opacity and expanding? Opacity must some faster than size create one more path?

But what happen if be not only one button, but full complete UI modal with more 50 objects - shop, with title, product cards, buttons for goods etc. and if not one modal, but 20 different for units, trade etc -  50*20 pathes for expand and the same number for collapse and 5 min * 1000 ... 

I'm frightened by the prospect  8^)

Maybe there is a way to connect the objects in the one image and apply animation to this object?

i try in snippets:

        var logo = new Sprite('/snippets/samples/cc_logo.png');
        var callout = new Sprite('/snippets/samples/callout.png');
        var text = new TextSprite('Hello World Wide Web', '22px Arial', 'blue', 'center');
        var obj = new SceneObject([logo, callout, text]);
        obj.setSpriteOffset(1, {x:-100, y: -140});
        obj.setSpriteOffset(2, {x:-100, y: -145});   


        obj.drawToImage('my', true)
        var normalSprite = new Sprite("my");
        var spr = new SceneObject(normalSprite);
        
        wade.addSceneObject(spr);

But it return only text sprite  - its right?

And how be work buttons on this object or another listeners if it be in image?

If you draw everything to an image and use it as a single Sprite, then it'd be easy to apply a single Path to the whole group of objects, but of course then they wouldn't be individually clickable. This could be a good way of dealing with transitions, provided that when the transition is finished you remove your single image and re-add your individual objects.

I don't think you should multiply the time it takes you to do this with 2 objects by 1000 if you want to do it with 2000 objects. This is true if you want to manually create path0, path1, path2.... up to path1999. I would instead create a for loop, which would take perhaps another 5 minutes.

However in practice, most people use WADE for games, and if you want to write individual transitions for your UI elements, you are looking at 10 maybe 20 objects, not 2000. If you wanted to make an e-commerce website, while you could still do everything with WADE, I'd recommend using WADE for some parts, and normal HTML (perhaps with jQuery-ui) for the rest

a good game needs a good interface :)
if we want to create a well-selling game we should try to make it look so that people pay

something like this (picture that give google on "game ui"):

everything should be of high quality even in small things, for example 

ButtonBehavior = function()
{
    this.onMouseIn = function()
    {
        document.body.style.cursor = 'pointer';
    };
    this.onMouseOut = function()
    {
        document.body.style.cursor = 'default';
    };
};