Добавление спрайта в Phaser js

Мне нужно знать, как добавить 2-ю, 3-ю, 4-ю строки этого изображения спрайта для движения влево, вправо и вверх (вверх) соответственно.

Код ниже предназначен для движения снизу, и поскольку это первая строка спрайта, я могу его перемещать.

Если я создам длинный спрайт по горизонтали, я смогу этого добиться, есть ли другой способ?

Пожалуйста, помогите мне понять, как включить 2-й ряд и далее.

Изображение спрайта (пользователь/игрок) : Изображение спрайта (пользователь, игрок)

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');
        }
}

javascript phaser-framework
person abhiklpm    schedule 08.08.2014    source источник

Ответы (3)


arrow_upward
12
arrow_downward

Просто определите дополнительные анимации, как вы сделали для дна:

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 для клавиш анимации.

person PhotonStorm    schedule 09.08.2014
comment
Я пробовал это раньше и получаю сообщение об ошибке в консоли: TypeError: frame is undefined localhost/game/js/ Phaser.js Строка 31278 Есть ли способ указать начальные координаты x, y перед этой строкой: player.animations.add('left', [12,13,14,15,16,17,18, 19,20], 12, верно, верно); - person abhiklpm; 09.08.2014
comment
Вы правы, я думаю, что проблема в спрайт-листе, который я использовал, в котором кадры неверны. - person abhiklpm; 09.08.2014
comment
Чтобы load.spritesheet работало, каждый кадр на листе должен быть одинакового размера, без дополнительных отступов по бокам листа. Если вы предпочитаете использовать кадры разного размера, вам нужно вместо этого использовать атлас текстур, что в любом случае может оказаться проще, но все зависит от того, на что похожи ваши исходные ресурсы. - person PhotonStorm; 10.08.2014
comment
@photonstorm приведут ли несоответствия между размером или количеством спрайтов к ошибке или искаженным кадрам? - person expiredninja; 19.05.2015
comment
@expiredninja зависит от несоответствия. Если он не может математически разрезать кадры, вы получите ошибку при загрузке. Если это возможно, но значения не соответствуют реальному листу спрайтов, вы увидите искажение во время воспроизведения анимации. - person PhotonStorm; 19.05.2015

arrow_upward
3
arrow_downward

Измените предварительную загрузку на это:

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();

Протестировал и заставил работать. Таблица спрайтов не на 100% верна, но выглядит нормально.

person Zaute    schedule 27.08.2014

arrow_upward
1
arrow_downward

чтобы упростить мой подход:

 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);
 }
person elad silver    schedule 25.04.2015