Javascript 在Phaser js中添加精灵
我需要知道如何添加这个精灵图像的第二、第三、第四行,以便进行相应的左、右和向上(顶部)移动 下面的代码是底部移动,因为它是sprite中的第一行,所以我可以移动它 如果我水平创建一个长精灵,我可以实现它,还有其他方法吗 请帮我弄清楚如何包含第二排以后的内容 精灵图像(用户/玩家):Javascript 在Phaser js中添加精灵,javascript,phaser-framework,Javascript,Phaser Framework,我需要知道如何添加这个精灵图像的第二、第三、第四行,以便进行相应的左、右和向上(顶部)移动 下面的代码是底部移动,因为它是sprite中的第一行,所以我可以移动它 如果我水平创建一个长精灵,我可以实现它,还有其他方法吗 请帮我弄清楚如何包含第二排以后的内容 精灵图像(用户/玩家): function preload(){ myGame.load.spritesheet('user', 'user4.png', 95, 158, 12); } var player; function c
function preload(){
myGame.load.spritesheet('user', 'user4.png', 95, 158, 12);
}
var player;
function create(){
player = myGame.add.sprite(500, 100, 'user');
myGame.physics.arcade.enable(player);
player.animations.add('bottom', [0,1,2,3,4,5,6,7,8,9,10,11], 12, true, true);
}
function update(){
if (cursors.left.isDown) {
// Move to the left
player.body.velocity.x = -150;
player.animations.play('left');
}
else if (cursors.right.isDown)
{
// Move to the right
player.body.velocity.x = 150;
player.animations.play('right');
}
else if (cursors.up.isDown)
{
// Move to the right
player.body.velocity.y = -50;
player.animations.play('top');
}
else if (cursors.down.isDown)
{
// Move to the right
player.body.velocity.y = 50;
player.animations.play('bottom');
}
}
只需按照为底部所做的方式定义额外的动画:
player.animations.add('bottom',[0,1,2,3,4,5,6,7,8,9,10,11],12,true,true);
player.animations.add('left',[12,13,14,15,16,17,18,19,20],12,true,true);
player.animations.add('right',[21,22,23,24,25,26,27,28,29],12,true,true)代码>
等等。显然,我刚刚猜到了上面的帧号,您需要将它们更正为您实际需要的任何帧号。但完成此操作后,只需调用动画关键点上的play
。将“预加载”更改为:
function preload() {
game.load.spritesheet('user', 'user4.png', 95, 158, 48);
}
并为所有方向添加动画:
player.animations.add('bottom', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 12, true, true);
player.animations.add('left', [12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23], 12, true, true);
player.animations.add('right', [24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35], 12, true, true);
player.animations.add('top', [36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47], 12, true, true);
还要记住在create()函数中捕获光标输入:
cursors = game.input.keyboard.createCursorKeys();
测试并使其工作。Sprite表不是100%正确,但看起来还可以。为了使事情变得简单,我的方法是:
animation_arr = ['idle', 'walk', 'jump', 'idle_towel', 'walk_towel', 'jump_towel' ];
for(var i=0; i < animation_arr.length; i++){
player.animations.add(animation_arr[i], [0+(i*10), 1+(i*10), 2+(i*10), 3+(i*10), 4+(i*10), 5+(i*10), 6+(i*10), 7+(i*10), 8+(i*10), 9+(i*10)], 10, true);
}
animation_arr=['idle','walk','jump','idle_tob','walk_tob','jump_tob'];
对于(变量i=0;i
我以前尝试过这个东西,但控制台中出现错误:TypeError:frame未定义第31278行是否有方法指定该行之前的起始x,y坐标:player.animations.add('left',[12,13,14,15,16,17,18,19,20],12,true,true);你是对的,我认为问题在于我使用的spritesheet中的帧不正确。对于load.spritesheet
,工作表中的每个帧都必须是完全相同的大小,并且在工作表的两侧没有额外的填充。如果您希望使用不同大小的帧,那么您需要使用纹理图集,这可能会更容易-但这完全取决于您的源资源是什么样的。@photonstorm将导致精灵大小或数量之间的不匹配导致错误或帧混乱?@expiredninja取决于不匹配。如果它不能在数学上切割帧,那么在加载过程中就会出现错误。如果可以,但这些值不能精确映射到实际的精灵表,则在播放动画时会看到损坏。