Animation sequence examples

[TTn6]

I'm looking for some up-to-date examples (2015) of animation sequences, for example; user clicks on a button which triggers 3-4 short and small animations in a row.  I don't see any of this type anywhere.  I'm trying to determine if cocos2d-js the latest version 3.7 or 3.8 might be able to do this - or Phaser?  There would be no drawing involved, no 3-D, no particles, no collisions - pretty much all animation sequences involving buttons.  Need smooth animation, easing, etc.  More game logic than anything else I guess.  A tutorial on this would be ideal, but most of the tutorials I've seen are out of date.  So examples or actual games using what I've described.  Anyone seen this??  Where?

[mattstyles]

A simple way; lets say we have an entity object, this object gets drawn every frame and it renders a frame from a sprite sheet. It can keep track of its state. When you click a button, you change its state to 'animating' and tell it which animation to do. An animation consists of a list of frames to display, and maybe some timing info for how long to display each frame. So, you've clicked the button, and its animating. Each game tick calls Entity.update somehow, and the entity knows it is animating, checks the time difference and updates the animation frame. When it reaches the last animation frame it goes back to being 'idle', or whatever state you like.

 

Any 2d rendering engine will have the functionality to render a frame from a sprite sheet and I suspect many game engine (i.e. Pixi is a rendering engine, Phaser is a game engine) will come with ways of specifying a 'chain' of frames to use for animations if you dont want to write that code yourself.

 

This style of animating hasnt really changed in 30 years and was 'stolen' from artists who have been doing it for a lot longer than that.

[TTn6]

Hi,

I understand that, but I was looking for basically 2 things:

1.) Some current examples of games done in Cocos2d-js Html5 or Phaser, so that I can compare the two in terms of smooth animation - again multiple animation sequences.

and

2.)  The coding - an example or a tutorial of the above, and again UP-TO-DATE 2015, because that has changed in the past year.

Plenty of examples from 2014, 2013 but things have changed.  Most tutorials if they give an example at all, it's just user touches a button, and sprite or character fires a bullet or a stream of bullets, user presses a button and main sprite begins running, simple things like that. 

I also have to use Linux, not apple or Windows, first and then go to ios and android - making this more difficult, because usually it's ios first. 

another example:  Let's say user clicks on, touches 1 button, OK, character begins running.  touch another button and that sets off a completely different animation, let's say sprite opens up with a flame thrower fro behind a rock.  User touches another button, and cupid fires arrows at him from above.  And all of these are going on at the same time, but maybe end at different times. the sun goes down in the background, etc. etc.

Something like that, animation sequences in 2015 using ONLY Cocos2d OR Phaser.

[mattstyles]

Why do you think things have changed? Phaser has released a v3 recently, but if the tuts you have found in 2014 do what you want, use the same version, for instance, v2 of Phaser is still a superb game engine, releasing v3, v4, v5 or whatever doesnt change that.

 

The principle of what is happening is identical, sure, if you're updating a library across a major then the API might change, but its normally fairly straight forward to work out what to do; the difficult bit is always the logic, or the principle, of how to do things and with regards to animating 2d sprites, this logic hasnt changed much for years and years, to be honest, an article from the 80's (ok, maybe 90s would be more appropriate) would give you decent insight in how to do this sort of thing.

 

As for the difference between clicking a button and having one character start running and clicking a button and having 3 characters running? Do you really need advice on that? The logic is the same—whatever mechanism you are using to link button and starting the animation (pub/sub, calling a function, observers yada yada yada), just repeat it for each sprite.

 

If you're after changing animation frames, that is simply a matter of cancelling the current animation cycle and starting a new one. Sure, you can get smarter about transitional animation cycles (i.e. standing to shooting vs running to shooting vs turning to shooting), but, most of the time simply switching animation cycles immediately is good enough, and certainly makes life easier for your artist.

[TTn6]

Hi,

Thanks for your input, but back to the original question; Can you point me to any examples of what we are talking about?  I think you use Phaser, so any games or tutorials that utilize buttons controlling multiple animations.  Like I said, I suspect there are differences between Cocos and Phaser, recent differences.  Best way to find out is to look at a few examples of the same thing.  Both employ different ways of doing the same thing, Cocos Studio, Scene design, applications, Mainlayer.js, game logic function and on and on.  The question is which one results in smoother animation for what I've described.  I know that animation in general has gotten better in the whole html5, javascript, javascript bindings realm over the past few years. I'm just starting to look at Phaser.

[mattstyles]

60fps is the target for the web, both frameworks (I have good experience with neither, I use other things) will be able to achieve that without breaking a sweat for what you want to do. For that matter, you can achieve what you want fairly easily with DOM! But thats beside the point.

 

Sorry, I dont know about any tutorials, I tend to learn by poking through the code, reading API docs and trying things out, if you cant find the tutorials you're after then thats a way of learning!