let player1Sprites = []; // Array for Player 1 sprite frames

​

let direction1 = 0; // Player 1 direction: 0 down, 1 left, 2 right, 3 up, 4 bottom-left, 5 top-left, 6 bottom-right, 7 top-right

let step1 = 0; // The current step for Player 1 animation

​

let x1, y1; // The character's position

let speed = 2; // Movement speed

let frameDelay = 6; // Delay for how often to switch the frame for smoother animation

​

function preload() {

  // Load the spritesheet

  spritesheet = loadImage("cutout.png"); // Ensure the spritesheet path is correct

}

​

function setup() {

  createCanvas(500, 450);

​

  // Assuming the sheet has 12 images across and 4 down for Player 1

  let w = int(spritesheet.width / 12); // Each sprite width

  let h = int(spritesheet.height / 4); // Each sprite height

​

  // Load Player 1 sprites (first 6 sprites in each row, as specified)

  for (let j = 0; j < 4; j++) {

    player1Sprites[j] = []; // Create a nested array for each row

    for (let i = 0; i < 6; i++) { // Load the first 6 frames per row

      player1Sprites[j][i] = spritesheet.get(i * w, j * h, w, h);

    }

  }

​

  // Initial position for Player 1

  x1 = width / 2;

  y1 = height / 2;

​

  imageMode(CENTER);

}

​

function draw() {

  // Clear the screen

  background(0);

​

  // Handle player movement in the draw loop using keyIsDown for continuous movement

  handleMovement();

​

  // Draw Player 1 sprite based on direction and step

  let row, col;

​

  // Handle regular and diagonal movements

  if (direction1 >= 0 && direction1 <= 3) {

    // Regular movement (down, left, right, up)

    row = direction1; // Regular movement uses rows 0-3

    col = step1 % 3; // Use only the first 3 sprites in each row

  } else if (direction1 >= 4 && direction1 <= 7) {

    // Diagonal movement (bottom-left, top-left, bottom-right, top-right)

    row = direction1 - 4; // Diagonal movement uses rows 0-3

    col = 3 + (step1 % 3); // Use sprites 4, 5, 6 in each row for diagonals

  }

​

  // Display the corresponding sprite

  image(player1Sprites[row][col], x1, y1);

​

  // Advance to the next animation frame every few frames to smooth out movement

  if (frameCount % frameDelay === 0) {

    step1 = (step1 + 1) % 3;

  }

}

​

function handleMovement() {

  // Reset direction to prevent continuous movement when no key is pressed

  let moving = false;

​

  // Diagonal movement

  if (keyIsDown(LEFT_ARROW) && keyIsDown(DOWN_ARROW)) {

    direction1 = 4; // Bottom-left diagonal

    x1 -= speed / 1.4;

    y1 += speed / 1.4;

    moving = true;

  } 

  else if (keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW)) {

    direction1 = 5; // Top-left diagonal

    x1 -= speed / 1.4;

    y1 -= speed / 1.4;

    moving = true;

  } 

  else if (keyIsDown(RIGHT_ARROW) && keyIsDown(DOWN_ARROW)) {

    direction1 = 6; // Bottom-right diagonal

    x1 += speed / 1.4;

    y1 += speed / 1.4;

    moving = true;

  } 

  else if (keyIsDown(RIGHT_ARROW) && keyIsDown(UP_ARROW)) {

    direction1 = 7; // Top-right diagonal

    x1 += speed / 1.4;

    y1 -= speed / 1.4;

    moving = true;

  }

  // Regular movement

  else if (keyIsDown(DOWN_ARROW)) {

    direction1 = 0; // Moving down

    y1 += speed;

    moving = true;

  } 

  else if (keyIsDown(LEFT_ARROW)) {

    direction1 = 1; // Moving left

    x1 -= speed;

    moving = true;

  } 

  else if (keyIsDown(RIGHT_ARROW)) {

    direction1 = 2; // Moving right

    x1 += speed;

    moving = true;

  } 

  else if (keyIsDown(UP_ARROW)) {

    direction1 = 3; // Moving up

    y1 -= speed;

    moving = true;

  }

​

  // If not moving, don't advance the animation frame

  if (!moving) {

    step1 = 0; // Reset step to 0 when idle

  }

}

​