Jump to content

Noob: help with simple sprite animation


Recommended Posts

Hello, I am working on a simple animation of a sprite in a little game, a mosquito that is changing state while flying towards right. These states correspond to two different images in my tile sheet. 

So far I have been doing this, but the animation is very irregular:

for (var i = 0; i < mosquitos.length; i++){   var mosquito = mosquitos[i];            setInterval (updateAnimation, 500);   mosquito.update(); //rest of code non-relevant to animation here...

and then, later:

function updateAnimation ()    {    next();   function next()       {           mosquito.state = mosquito.FLYINGRIGHT1;           setTimeout (previous, 500);           function previous()                  {                       mosquito.state = mosquito.FLYINGRIGHT;                   }       }   }

The two states are of course FLYINGRIGHT and FLYINGRIGHT1...
problem is that mosquito starts animating very quickly and very irregularly. I would like it to change state, i.e. every half of a second. I tried with different time periods but it is always the same effect.

I can produce a jsfiddle of the whole thing, if what I am missing is not so obvious. 

Thank you for any help and insights.

Link to comment
Share on other sites

Please make a jsfiddle of the whole thing :) I see there can be many different problems:


1) I think in setInterval the right time is 1000 instead of 500 (twice as much as in setTimeout in updateAnimation)

2) I think the variable mosquito in you updateAnimation function reference to the wrong object (I think it reference to the last mosquito of your array)


Anyway, for me it's a odd style. I would suggest to simply get the current time and get the state by the time

if(Date.now() % 1000 < 500) {    //state 1} else {    //state 2}

This is also not the best style, but for your problem it's a easy solution. If you want to create more advanced animations later read some articles :)

Link to comment
Share on other sites

At this point I'll publish it on my website as soon as I have time, rather than doing a jsfiddle since there are too many resources to upload... including sounds, etc. there is just one mosquito for the time being, so I don't think that the problem is the mosquito itself,

I'd rather say that I am making bad use of setTimeout and setInterval... and how they interact. I'll try the method you suggested, but I'd rather not work with Date, it's something that I didn't use in this game... there should be a good "Date-independent" solution. The whole game is "Date-independent"... Thank you for your answer. Back soon with the whole thing online. 


Link to comment
Share on other sites

Here is the link... the "game" is intended as a working exercise for the time being, and it's some sort of improvement to the "Hedgehog Apocalypse" platform game from chapter 11 of Rex Van Der Spuy's excellent book "Foundation Game Design with HTML5 & Javascript".

There are 5 levels. To end each level, first of all, you have 60 seconds to "defuse" the bomb (a reasonably long amount of time...) just collide with it. Then you have to jump on the three hedgehogs (if they hit you while you are not jumping on them, you are lost... like in the 1985 Mario game). You "embrace" the dog (just collide with it), and "smash" the mosquito (collide with it), and then reach the door on the upper right, and you're done.

So, as stated before, I would like to implement some sort of simple but regular animation of the mosquito, I have tried different methods but am still uncertain on what is best. I'd rather not work with "Date", the entire game is "Date-independent". 

On another note, I see that sometimes, after the collision with the girl, the dog "re-appears" for a small fraction of a second after the heart, and it's a bit strange since its the same function that there is for the collision with other sprites (they don't re-appear...)

Let me know what you think, any comment and suggestion is most welcome, thanks. 

Here's the link:



PS You move with left and right arrow keys, and jump with spacebar...


PPS For some reason the link has a final %C2% to the original link i put... please remove it.

Link to comment
Share on other sites

Update: I just achieved some sort of animation with the following code:


In the loadHandler() function:


  setInterval (updateAnimation, 300);

In the playGame() function:


findWaitTime = function (){	waitTime = Math.ceil(Math.random() * 6);}updateAnimation = function (){	findWaitTime();	if (waitTime >3)		{			mosquito.state = mosquito.FLYINGRIGHT;		}	else		{			mosquito.state = mosquito.FLYINGRIGHT1;		}}

This is a random animation, of course, I am sure that it can be improved and that there are better and more elegant solutions...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...