javascript - Spritesheet 动画消失 p5.js
问题描述
我想为珠宝制作动画(参见下面的代码和珠宝)。动画有效,但不幸的是在动画结束时显示了“白色图片”。我的意思是动画不流畅,图片消失了一秒钟(或帧)。
图片:
杰森:
{
"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
}
}
]
}
Sprite.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();
}
}
我能做些什么?
期待您的回答!
解决方案
问题很简单。精灵表包含 8 个图像,索引从 0 到 7。但是您在 JSON 中有 9 个条目,索引从 0 到 8。这导致无法从表中读取最后一个精灵并greenJewel
包含“空" 数组末尾的条目。
从 JSON 中删除最后一个条目 ( "name": "sprite-08", ...
),以解决该问题。
推荐阅读
- java - 如何使用 Selenium 中的以下子项检索没有标签的元素的文本
- python - 抓取:UnboundLocalError:分配前引用的局部变量“内容”
- meson-build - 如果已配置,介子无输出
- python - 读取带有二进制内容的 XML
- vue.js - 在 vue.js 中的组件之间传递数据
- sql - 使用 sql 查询获取偶数和奇数行
- c# - C# .net core Confluent.Kafka Avro 反序列化
- python - 我用pycharm定义了一个列表,名字是src。但是变量名下面总有一条红色波浪线
- ruby-on-rails - 无论如何要在 ActiveRecord 验证上添加 HTTP 状态代码?
- react-native - 无效的校验和反应本机