Noob question about scripting animation

So, this is probably a super simple question… let me start by saying that I am not a programmer. I have intermediate knowledge with C# and have worked in “another popular engine” for years but Cocos is brand new to me. Most of my time working in cocos has been devoted to shader work. That being said,

I’m trying to determine if I can do something a certain way, and, if so, can someone provide a basic example of what the code would look like?

So, I am trying to create a card flip effect. Currently, my client engineer has 5 cards being dealt and each card sprite pulls from a random card image on an atlas. My client engineer is also super busy building the rest of the game and doesn’t have time to look into my question right now. I would like to put the image of the card’s back as the default sprite frame. Then, during the timeline animation clip, at the point where the card should be flipping over, is it possible to insert a frame event where the sprite image should change, and trigger it to pull random card sprite from atlas in code?

I know I can change the sprite frame image in the timeline, but it needs to pull from an array. Can we use the frame event feature in the timeline editor to do this? Or am I misunderstanding what the “insert frame event” is/does?

Edit: In case it is misleading… I know how to make the card physically look like it is flipping over. I’ve already accomplished that. Normally, I’d just change the sprite frame image right as the card is “flipping” to make it look like it really flipped over… but, as I said before, I can’t just change sprite image from timeline because the image that is used needs to be random. I guess what I’m asking is, can the inserted frame event be used a signal to trigger that change in code?

I’m not sure this can help and I have limited knowledge on this subject but you might take a look a this repository → CocosCreatorDemos: 大道至简,殊途同归。 CocosCreatorDemos主要是整理并实现了一些常用的用户需求示例,希望可以给用户提供一些使用灵感。 CocosCreatorDemos mainly organizes and implements some common user‘s needs demos, hoping to provide users with some inspiration.

1 Like

Thanks so much! This looks incredibly helpful! I’m trying to download now and it says I have to sign up first. When I go to sign up, the page just loads forever… I’m not actually able to really use any of the features on the site… do you know if this is available on github or anything?

Nvm I got it! guess it just doesnt like chrome… lol

You can eventually just clone the repository without any inscription (that’s what I did if I rembember well)

image

git@gitee.com:yeshao2069/cocos-creator-how-to-use.git

You can check out this tutorial built last year.

Yuefu mutual entertainment shares how to achieve a perfect 3D flip effect Cocos Creator using a 2D camera

I guess what I’m asking is, can the inserted frame event be used a signal to trigger that change in code?

  • Of course you can, the inserted frame events can be used as signals to trigger the code. But you need to mount the script to the animation component and add the corresponding frame events, you can refer to
1 Like

Alternatively, it is possible to control card flipping directly through code directly via tween.

Thanks for the response!
So, our art director wants everything set up using timeline as much as possible so that the artists have as much control over visual aesthetic as possible… even after animations have been properly hooked up in code, the animation clips can be changed without the art team being dependent on engineering. So I’m trying to experiment with workflows that facilitate this in different scenarios.

Almost missed this response! Thank you so much for taking the time to provide this valuable feedback! I am very new to cocos engine and web app development in general… up until now, I have always been more focused on shader development, 3d character rigs, solid modeling, and world design. All of it was in Unity engine. I’m not a programmer by trade, I learned what I know out of necessity. I am pretty capable in the unity engine, but I’m just getting my feet wet in cocos and have no previous exposure to JS or TS… your patience and assistance is appreciated more than you know! :slight_smile:

Just wanted to say I figured out how the frame events work with the animation timeline and it was exactly what we needed! Thanks so much for all the input everyone!

1 Like