Example: Sprite Animation & Input Events

This example introduces sprite animation control and player input in Beast2D. We load character spritesheets for idle and running animations (both left and right). These animations are assigned to an Animator attached to the player GameObject.

Player movement is triggered by key input (A & D), and the animation switches accordingly. A physics collider is used to detect whether the player is on the ground before allowing movement. The rigidbody enables gravity and ground collision. We also include a dynamic canvas.logic function to constantly handle animation changes in real-time.

This setup is the foundation for platformer behavior, with a clean separation of animation states and physics logic. Sprite animations are updated per-frame using the Animator's Play() function based on input and state.

Checkout the live example below

DOWNLOAD EXAMPLE 

//### EXAMPLE: INPUT & EVENTS ###
images = ["bg.jpg", "RUN_RIGHT.png", "RUN_LEFT.png", "IDLE.png"];
var assetDirectory = "imgs/";
init_assets();

var myScene = scene("PhysicScene", canvas);
var myBackground = myScene.addBg(imageSet["bg.jpg"], "image");

var is_grounded = false;
var speed = 3;

var player = myScene.addGameObject("player");
player.setSize(200, 200);
var player_collider = collider(player, rectangular);
player_collider.bounce = 0;
player.materials[0].offset = [0, -40];

var player_rigidbody = rigidbody(player);
player_rigidbody.gravity = true;

var animator = player.addAnimator();
animator.delay = 20;
animator.addClip("idle", imageSet["IDLE.png"], 958, 96, 96, 96);
animator.addClip("run_right", imageSet["RUN_RIGHT.png"], 1536, 96, 96, 96);
animator.addClip("run_left", imageSet["RUN_LEFT.png"], 1536, 96, 96, 96);

var ground = myScene.addGameObject("ground");
ground.materials[0].update = function () {};
ground.setSize(500, 50);
ground.setPosition(vec(250, 465));
var ground_collider = collider(ground, rectangular);
ground_collider.static = true;
ground_collider.setBounds([800, 50]);

player_collider.trigger = function (col) {
  if (col.object.name == "ground" && !is_grounded) {
    is_grounded = true;
  }
};

canvas.logic = function () {
  if (is_grounded) {
    if (canvas.input("D").down()) {
      player.position.x += speed;
      if (animator.clip_name != "run_right") {
        animator.stop = true;
        animator.delay = 5;
        animator.Play("run_right");
      }
    } else if (canvas.input("A").down()) {
      player.position.x -= speed;
      if (animator.clip_name != "run_left") {
        animator.stop = true;
        animator.delay = 5;
        animator.Play("run_left");
      }
    } else {
      if (animator.clip_name != "idle") {
        animator.stop = true;
        animator.delay = 10;
        animator.Play("idle");
      }
    }
  } else {
    animator.delay = 20;
    animator.Play("idle");
  }
};

myScene.run();

function update() {
  clear("black");
  canvas.update();
  requestAnimationFrame(update);
}
update();
Live view