Animation

See also:

System:

ANIMATION

this is NOT necessarily movement – in fact, for frame based animation, it is likely not to be…

So, this is just for the animation bit. There will also need to be a bit that has data about the sequence:

• length (get length of array dynamically),
• x/y position of source,
• dimensions of source

This is the sort of data TILED will produce. See TILED IMAGES for info on getting the images from a tile map (you want to do this)

Onwards!

using modulo to loop stuff from a timer

• Step 1 set game frame to 0
• Step 2 set frame rate
• Step 3 set loop sequence length
• Step 4 calculate game frame divide by frame rate
• Step 5 – modulo the amount of frames in the sequence (this can be different, depending on the sequence…)
• Step 6 – return the number as a whole number (Math.floor)
• Step 7 – go to step 4

Javascript e.g.

let gameFrame = 0;
const staggerFrames = 5;
let seqLength = 6;
//
let position = Math.floor(gameFrame/staggerFrames) % seqLength;

Pico 8 e.g.

In the getframe function, we have:

• get the animation array
• for each element in the animation array
  • get the value of T
  • divide T by 15 to slow down the effective rate of increase (t/15)
  • get the floor – which rounds down to the nearest whole number flr(t/15)
  • modulo the number by the array length (use # to get array length) flr(t/15)%#ani
  • add one so that it is in the range we are using (which begins at 1…)
  • return this number now. Job done.

function getframe(ani)
return ani[flr(t/15)%#ani+1]
end

And we call the function from inside draw_game() function:

spr(getframe(p_ani),p_x*8,p_y*8)

We now have a reusable script that we plug in an animation array and it returns a frame value for it.

Using delta time for animations…

Movement patterns

Use sin/cos for 

Circular movement from JavaScript Game Development Course for Beginners@2:02:30

this.x = this.curve * Math.sin(this.angle * Math.PI/180) + (canvas.width/2 - this.width/2);
this.y = this.curve * Math.cos(this.angle * Math.PI/180) + (canvas.width/2 - this.height/2);

cos/sin curve movements

Ideas – random placement – animate towards new random location

Resources

the kittykat thing…