Sprite Animation

• The Goal
• Design Story
• The Visual
• The Code

//Declaring a variable to store the sprite character

let flyfox;

//setting up the canvas background by loading the image asset
function setup() {
  bg = loadImage("assets/Mountain.png");
  new Canvas(720, 410);
  //Defining the location and dimension of the sprite
  flyfox = new Sprite(200, 150, 400, 400);
  //Adding an animation to the flyfox sprite by inserting a series of frames for the defined action of run
  //Tried multiple ways of adding the animation without taking this inefficient path including using sequence mode and sprite sheet mode. None of them worked and the code wouldn't be able to locate the asset. I triple checked the locations. So I believe I have a conceptual gap in understanding why those methods didnt work
  flyfox.addAni(
    "run",
    "assets/foxrun/Run_0001.png",
    "assets/foxrun/Run_0002.png",
    "assets/foxrun/Run_0003.png",
    "assets/foxrun/Run_0004.png",
    "assets/foxrun/Run_0005.png",
    "assets/foxrun/Run_0006.png",
    "assets/foxrun/Run_0007.png",
    "assets/foxrun/Run_0008.png",
    "assets/foxrun/Run_0009.png",
    "assets/foxrun/Run_0010.png",
    "assets/foxrun/Run_0011.png",
    "assets/foxrun/Run_0012.png",
    "assets/foxrun/Run_0013.png",
    "assets/foxrun/Run_0014.png",
    "assets/foxrun/Run_0015.png",
    "assets/foxrun/Run_0016.png"
  );

  //Adding the idle animation to the sprite flyfox again by using the list method
  flyfox.addAni(
    "idle",
    "assets/foxidle/Idle_0001.png",
    "assets/foxidle/Idle_0002.png",
    "assets/foxidle/Idle_0003.png",
    "assets/foxidle/Idle_0004.png",
    "assets/foxidle/Idle_0005.png",
    "assets/foxidle/Idle_0006.png",
    "assets/foxidle/Idle_0007.png",
    "assets/foxidle/Idle_0008.png",
    "assets/foxidle/Idle_0009.png",
    "assets/foxidle/Idle_0010.png",
    "assets/foxidle/Idle_0011.png",
    "assets/foxidle/Idle_0012.png",
    "assets/foxidle/Idle_0013.png",
    "assets/foxidle/Idle_0014.png",
    "assets/foxidle/Idle_0015.png",
    "assets/foxidle/Idle_0016.png",
    "assets/foxidle/Idle_0017.png",
    "assets/foxidle/Idle_0018.png",
    "assets/foxidle/Idle_0019.png",
    "assets/foxidle/Idle_0020.png"
  );
}

//initiating the draw function
function draw() {
  //saw this in most the examples I looked at. Not sure why this is required. I did try to run the sketch without this and it did not make any difference.
  clear();
  //using the preloaded image as the background
  background(bg);
  //scaling the sprite down to be proportionate with the background
  flyfox.scale = 0.75;
  //building conditionals to control the movement of the sprite
  if (kb.pressing("left")) {
    //changing action mode of the sprite to run
    flyfox.changeAni("run");
    //changing direction of travel
    flyfox.vel.x = -1;
    //mirroring the sprite to make sure it faces the right direction
    flyfox.mirror.x = true;
    //applying the same conditionals for the right direction
  } else if (kb.pressing("right")) {
    flyfox.changeAni("run");
    flyfox.vel.x = 1;
    flyfox.mirror.x = false;
    //applying conditional for the idle action mode of the sprite
  } else {
    flyfox.changeAni("idle");
    flyfox.vel.x = 0;
  }
  //applying conditional to pause all movement on press of space bar and resume movement on release
  if (kb.pressing("space")) {
    flyfox.ani.stop();
  } else {
    flyfox.ani.play();
  }
}