Making a 2D asset slowly appear or disappear

General Discussion
#1

Hi all,

I’m currently working on an experience where there are 2D icons that appear which are used as buttons. When the experience starts, I would like those 2D elements to slowly appear instead of just always being there? Is this possible without having created those 2D assets with an animation in the first place?

Thanks,

Daniel

#2

Yes! This is definitely possible within Studio.

First, you will want to create a controller with a timeline and assign the color attribute to it. (Here’s a link to the ZapWorks documentation on timelines)

For the color attribute, a value of 0 means the node is completely transparent/hidden, a value of 1 means completely opaque/visible. Within the timeline, you’ll want the color to start with a value of 0 (hidden) and then make a second key frame with the value of “1” (visible).
image

You’ll want to adjust the timing to your liking, and then the animation part is done. I also recommend making sure you link your last key frame (In this case, the frame with a color value of 1) to the “end state”. This ensures that once the animation is over, your color won’t switch to its original state accidentally. You can also link the “beginning state” node to the first key frame as well for similar reasons. Linked key frames have a line connecting them, like the one highlighted in green in the screenshot below. To link keyframes, have both selected from the timeline and then right click one of the key frames. You can then select “Make Link”. Double check that the value stayed the same, and you’re good to go.
image

Now, to get the timeline to automatically play, you’ll have to handle that via scripts. If you have an image tracked experience, you can right click on the tracking image in the hierarchy and select “New>Script>seen” to generate a script node that will run whenever ZapWorks sees the tracking image.
image

From here, just drag and drop the timeline you made earlier into the script code, and click the “play” option. Your code will look something like this:
parent.on("seen", () => {
// Runs when seen occurs on the parent node
symbol.controllers.YOURCONTROLLER.elements.YOURANIMATION.play();
});

I imagine for other types of experiences you can use some similar type of code, but my area of expertise is in image tracked experiences, unfortunately. I might suggest skimming through the scripting documentation and seeing if there’s something useful?

3 Likes
#3

Hi,

Thank you so much, this is brilliant! I really appreciate it :slight_smile:

1 Like