Анимируйте летящую птицу в п5. js - PullRequest
Новая
       3

Анимируйте летящую птицу в п5. js

2 голосов
/ 17 января 2020

Я хочу создать анимацию птицы с p5 js. У меня есть 6 изображений птицы - когда крылья подняты, посередине и так далее ... Когда я нажимаю клавишу «пробел» на клавиатуре, птица должна летать - поэтому все картинки должны отображаться в виде анимации. (как будто птица действительно летит). Я хочу построить этот фрагмент кода без spritemap. Это мой код, но почему-то он не работает .. 

let time = 0;
let frame = 0;
let img = [];

function preload() {
  img.push(loadImage("assets/Bird/bird-1.png"));
  img.push(loadImage("assets/Bird/bird-2.png"));
  img.push(loadImage("assets/Bird/bird-3.png"));
  img.push(loadImage("assets/Bird/bird-4.png"));
  img.push(loadImage("assets/Bird/bird-5.png"));
}

function draw() {

  function keyPressed() {
    if (key == ' ') {
      const speed = 1;
      const numImage = img.length;
      let current = frame % numImage;
      let display = img[current];
      image(display, width / 2, height / 2, display.width, display.length);
      time += speed;
        if (time > 5) {
          time = 0;
          frame++;
        }
    }
  }
}

Будем рады прочитать некоторые идеи! Заранее спасибо.

1 Ответ

1 голос
/ 21 января 2020

Перво-наперво вам не нужно обрабатывать кадры и тому подобное. Лучше использовать функцию keyPressed вне области действия draw, поскольку она является функцией специального события и автоматически вызывается при нажатии клавиши.

Лучше использовать функциональность setup вместо preload, так как предварительная загрузка - немного более ранняя функция, чем нам было нужно. Настройка более актуальна для таких вещей, как загрузка массива и т. Д.

Я вижу, что вы забыли создать холст для рисования на нем изображения. Я добавил это при настройке, а также установил частоту смены холста в соответствии с размером массива img. 

function setup() {
  createCanvas(400, 400);
  background(51);

  img.push(loadImage("1.png"));
  img.push(loadImage("2.png"));
  img.push(loadImage("3.png"));
  img.push(loadImage("4.png"));

  frameRate(img.length * 2); // double speed on animate sprites
}

С этого момента нужно только проверить keyCode и выполнить цикл по массиву. 

function draw() {
  if (keyIsDown(32)) {
    background(51);
    const numImage = img.length;
    let current = frameCount % numImage;
    let display = img[current];
    image(display, width / 2 - display.width , height / 2 - display.height , display.width, display.length);
  }
}

Здесь в проверке keyIsDown(32), 32 представляет пробел. Отсюда вы можете легко проверить другие: http://keycode.info/

Вы хотите переустановить фон холста на каждом дисплее спрайта. Если нет, они все равно будут отображаться при каждом рендере.

Вы можете увидеть рабочую версию вашего кода здесь: https://editor.p5js.org/darcane/sketches/rVl22hkv7

...