答案 0 :(得分:3)
我认为你需要创建这些精灵的精灵图集(有时也称为精灵纹理)。
精灵地图集是PNG文件和JSON文件(有时是XML文件)的组合。 PNG文件包含整齐地打包在一起的所有精灵,JSON文件包含该PNG文件中每个精灵的坐标。 see more info here
Phaser(和其他库)支持这种格式,可以加载和显示这些精灵。所以你能做什么:
有用的名称我指的是walk_1.png
,walk_2.png
,walk_3.png
,duck_1.png
,duck_2.png
,teleport_1.png
等名称。
要将单独的小精灵打包到一个精灵地图集中,我使用Leshy SpriteSheet Tool这是一个免费工具。还有Texture Packer这是一个商业实用程序,有更多的选项,还有更多的工具可以做同样的事情,如ShoeBox,Phaser Editor等。
在Phaser.js中,你可以加载精灵图集并添加一个像这样的精灵:
// either use .atlasJSONArray or .atlasJSONHash, depends on your JSON format
game.load.atlasJSONHash('myspriteatlassheet1', 'img/myspriteatlasfile.png', 'img/myspritefile.json');
var mysprite = game.add.sprite(10, 20, 'myspritesheet1', 'walk_1');
并添加如下动画:
mysprite.animations.add('jump', ['jump_1', 'jump_2', 'jump_3', 'jump_4'], 20, true); // 20fps, loop=true
mysprite.animations.add('duck', ['duck_1', 'duck_2', 'duck_3'], 30, true);
// etc.
mysprite.animations.play('jump');