How to animate different properties in addition to PATH ?
krumza February 12th, 2017

So I continue to try to deal with the interface elements
With modal Windows is kind of understandable, there are a few ways - either to create an object with all the sprites which are complex modal window, turn it into a picture, create an object and apply PATH, and the completion of show all objects on the ground where they should be. the second way is to animate the PATH each element of the complex structure.

Now I have to queue tooltips. In CSS they are again elementary - there is a block with position relative or absolute and there is another invisible, attached to this unit. When the mouse is over the parent - we make visible tip and may change its coordinates 

As I do in WADE.
I created an object with two sprites - one is what I need on the game screen, and the second invisible - the tooltip.

Next i create onMouseIn 

this.setSpriteOffset(1,{x:0,y:-60})
this.getSprite(1).setVisible(true)

then onMouseOut

this.setSpriteOffset(1,{x:0,y:0})
this.getSprite(1).setVisible(false)

It work like-tooltips. But this happens without the animation. Not enough easing functions.

how to make tooltip flew up smoothly and also smoothly changing its opacity from 0 to 1 and back

I see that in the PATH there is a custom user-defined fields. But I don't know how to pass the right object?

I might not want to do it inside the object, like the doll, because it can deprive of flexibility - because the tooltip should be something written (level of a building for example)
I can make a tooltip in another layer on the similarity of the modal window.
Well, now it is necessary to consider the position of an object on the screen, because the tip should not fly up if it is the top border of the screen.
How to link a fixed interface layer with a layer of the game which the user can zoom and pan?

So, to sum up - I have two questions:
- how to smoothly animate any parameter in the game?
- how to relate coordinates between the different layers?

1 Comment
Gio February 14th, 2017

First let me answer your questions:

If you have a path, anything you use in the node data can be interpolated. You can add anything to the node Custom Properties. If the same value is present in both a node and the next node, the value will be tweened. Then you can use this value as you like, for example say that you add a custom property called myOffset, in the object's onUpdateFunction you can do

this.setSpriteOffset(0, this.myOffset);

If you are using layers with different transforms, you can convert coordinates using wade.worldPositionToScreen and wade.screenPositionToWorld. So if you want to know the screen coordinates for something on your game layer:

var screenCoordinates = wade.worldPositionToScreen(gameLayerId, position);

If you want you can then transform these coordinates again into another layer's coordinate space:

var coords = wade.screenPositionToWorld(anotherLayerId, screenCoordinates);

Now having said all that, I would not do a tooltip like that. When I've had to do this, I've always used a separate object for the tooltip. One single object with (a few) text sprites in it. Then for each object in the game that needs a tooltip I set a property called tooltip (for simplicity say that this is a string with the text that will be displayed).

When you do that, in the tooltip object's onUpdate function you can do

var screenPosition = wade.getMousePosition();
var screenArea = {};
screenArea.minX = screenArea.maxX = screenPosition.x;
screenArea.minY = screenArea.maxY = screenPosition.y;
var sprites = wade.getSpritesInScreenArea(screenArea);
var tooltip;
for (var i=0; i<sprites.length && !tooltip; i++)
{
    if (!sprites[i].isVisible())
    {
        continue;
    }
    var obj = sprites[i].getSceneObject();
    tooltip = obj && obj.tooltip || sprites[i].tooltip;
}
if (tooltip)
{
    this.setVisible(true);
    this.setPosition(screenPosition);
    this.getSprite().setText(tooltip);
}
else
{
    this.setVisible(false);
}

 

Post a reply
Add Attachment
Submit Reply
Login to Reply