You have created manually for animation sprite.
this is an example create simple animation
var player = { x : 20, y : 20, animationDraw : 0, currentState : "right", anims:[158, 158,158, 158, 159, 159, 159, 159], }; //▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ // Update is called once per frame exports.update = function () { //clear render every tick update cls(); //handle input if(btn.right){ player.x += 1; player.currentState = "right"; player.animationDraw +=1; if (player.animationDraw > player.anims.length) player.animationDraw = 0; } else if(btn.left){ player.x -= 1; player.currentState = "left"; player.animationDraw +=1; if (player.animationDraw > player.anims.length) player.animationDraw = 0; } //draw player sprite(player.anims[player.animationDraw], player.x, player.y, player.currentState != "right"); //sample show text print("hello", 20, 20); };
for layer you can draw one by one on the update, but I'm not sure how to handle opacity,