Анимация таблицы спрайтов пропадает p5. js - PullRequest
Новая
       6

Анимация таблицы спрайтов пропадает p5. js

3 голосов
/ 19 января 2020

Я хочу оживить драгоценности (см. Ниже код и драгоценность). Анимация работает, но, к сожалению, в конце анимации отображается «белый пи c». Я имею в виду, что анимация не плавная, пи c исчезает на секунду (или кадр).

пи c:

enter image description here

Json: 

{
    "frames": [
        {
            "name": "sprite-00",
            "position": {
                "x": 0,
                "y": 0,
                "w": 32,
                "h": 32
            }
        },
        {
            "name": "sprite-01",
            "position": {
                "x": 32,
                "y": 0,
                "w": 32,
                "h": 32
            }
        },
        {
            "name": "sprite-02",
            "position": {
                "x": 64,
                "y": 0,
                "w": 32,
                "h": 32
            }
        },
        {
            "name": "sprite-03",
            "position": {
                "x": 96,
                "y": 0,
                "w": 32,
                "h": 32
            }
        },
        {
            "name": "sprite-04",
            "position": {
                "x": 128,
                "y": 0,
                "w": 32,
                "h": 32
            }
        },
        {
            "name": "sprite-05",
            "position": {
                "x": 160,
                "y": 0,
                "w": 32,
                "h": 32
            }
        },
        {
            "name": "sprite-06",
            "position": {
                "x": 192,
                "y": 0,
                "w": 32,
                "h": 32
            }
        },
        {
            "name": "sprite-07",
            "position": {
                "x": 224,
                "y": 0,
                "w": 32,
                "h": 32
            }
        },
        {
            "name": "sprite-08",
            "position": {
                "x": 256,
                "y": 0,
                "w": 32,
                "h": 32
            }
        }
    ]
}

Спрайт. js: 

function Sprite(animation, x, y, speed) {
    this.speed = speed;
    this.x = x;
    this.y = y;
    this.len = animation.length;
    this.animation = animation;
    this.index = 0;

    this.show = function() {
        let index = floor(this.index) % this.len;
        image(this.animation[index], this.x, this.y);
    }

    this.animate = function() {
        this.index = this.index + this.speed;
    }
}

Эскиз. js: 

let spritesheetJewelGreen32;
let spritedataJewelGreen32;
let greenJewel = [];
let greenJ = [];

function preload() {
spritedataJewelGreen32 = loadJSON('green-jewel32.json');
  spritesheetJewelGreen32 = loadImage('assets/crystals/crystal-32-green.png');
}

function setup() {
let frames = spritedataJewelGreen32.frames;
  for (let i = 0; i < frames.length; i++) {
    let pos = frames[i].position;
    let img = spritesheetJewelGreen32.get(pos.x, pos.y, pos.w, pos.h);
    greenJewel.push(img);
  }
  for (let i = 0; i < 5; i++) {
    greenJ[i] = new Sprite(greenJewel, i * 100,100, 1);
  }
}

function draw() {
for (let greenJs of greenJ) {
      greenJs.show();
      greenJs.animate();
    }
}

Что я могу сделать?

Ждем ваших ответов!

1 Ответ

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

Вопрос прост. Спрайт-лист содержит 8 изображений с индексами от 0 до 7. Но у вас есть 9 записей в JSON, с индексами от 0 до 8. Это приводит к тому, что последний спрайт не может быть прочитан с листа и greenJewel содержит «пустую» запись в конце массива.
Удалите последнюю запись ("name": "sprite-08", ...) из JSON, чтобы решить проблему.

...