Breaking News: Grepper is joining You.com. Read the official announcement!

phaser create animation on sprite

Add Answer

Himanshu Jangid answered on May 30, 2022 Popularity 5/10 Helpfulness 2/10

answer phaser create animation on sprite

related phaser create animation from sprite sheet

related phaser aseprite animation

related phaser create animation from sprite config.js

related phaser sprite animation event

phaser create animation on sprite

Comment

preload ()
    {
        this.load.atlas('soldier', 'assets/animations/soldier.png', 'assets/animations/soldier.json');
        this.load.image('bg', 'assets/pics/town-wreck.jpg');
    }

    create ()
    {
        this.add.image(400, 300, 'bg');

        const rambo = this.add.sprite(500, 500, 'soldier');

        //  The following animation is created directly on the 'rambo' Sprite.

        //  It cannot be used by any other sprite, and the key ('walk') is never added to
        //  the global Animation Manager, as it's kept local to this Sprite.
        rambo.anims.create({
            key: 'walk',
            frames: this.anims.generateFrameNames('soldier', { prefix: 'soldier_3_walk_', start: 1, end: 8 }),
            frameRate: 12,
            repeat: -1
        });

        //  Now let's create a new 'walk' animation that is stored in the global Animation Manager:
        this.anims.create({
            key: 'walk',
            frames: this.anims.generateFrameNames('soldier', { prefix: 'Soldier_2_walk_', start: 1, end: 8 }),
            frameRate: 12,
            repeat: -1
        });

        //  Because the rambo Sprite has its own 'walk' animation, it will play it:
        rambo.play('walk');

        //  However, this Sprite will play the global 'walk' animation, because it doesn't have its own:
        this.add.sprite(200, 500, 'soldier')
            .play('walk');
    }

Popularity 5/10 Helpfulness 2/10 Language javascript

Source: github.com

Tags: animation javascript phaser sprite

Link to this answer
Share Copy Link

Contributed on May 30 2022

Himanshu Jangid

0 Answers Avg Quality 2/10

Closely Related Answers

phaser create animation from sprite sheet

Comment

 preload ()
    {
        this.load.spritesheet('brawler', 'assets/animations/brawler48x48.png', { frameWidth: 48, frameHeight: 48 });
        this.load.image('grid', 'assets/textures/grid-ps2.png');
    }

    create ()
    {
        // Text section
        this.add.tileSprite(400, 300, 800, 600, 'grid');

        this.add.image(0, 0, 'brawler', '__BASE').setOrigin(0, 0);

        this.add.grid(0, 0, 192, 384, 48, 48).setOrigin(0, 0).setOutlineStyle(0x00ff00);

        this.add.text(200, 24, '<- walk', { color: '#00ff00' }).setOrigin(0, 0.5);
        this.add.text(200, 72, '<- idle', { color: '#00ff00' }).setOrigin(0, 0.5);
        this.add.text(200, 120, '<- kick', { color: '#00ff00' }).setOrigin(0, 0.5);
        this.add.text(200, 168, '<- punch', { color: '#00ff00' }).setOrigin(0, 0.5);
        this.add.text(200, 216, '<- jump', { color: '#00ff00' }).setOrigin(0, 0.5);
        this.add.text(200, 264, '<- jump kick', { color: '#00ff00' }).setOrigin(0, 0.5);
        this.add.text(200, 312, '<- win', { color: '#00ff00' }).setOrigin(0, 0.5);
        this.add.text(200, 360, '<- die', { color: '#00ff00' }).setOrigin(0, 0.5);
        this.add.text(48, 440, 'Click to change animation', { color: '#00ff00' });
        const current = this.add.text(48, 460, 'Playing: walk', { color: '#00ff00' });

        // Animation set
        this.anims.create({
            key: 'walk',
            frames: this.anims.generateFrameNumbers('brawler', { frames: [ 0, 1, 2, 3 ] }),
            frameRate: 8,
            repeat: -1
        });

        this.anims.create({
            key: 'idle',
            frames: this.anims.generateFrameNumbers('brawler', { frames: [ 5, 6, 7, 8 ] }),
            frameRate: 8,
            repeat: -1
        });

        this.anims.create({
            key: 'kick',
            frames: this.anims.generateFrameNumbers('brawler', { frames: [ 10, 11, 12, 13, 10 ] }),
            frameRate: 8,
            repeat: -1,
            repeatDelay: 2000
        });

        this.anims.create({
            key: 'punch',
            frames: this.anims.generateFrameNumbers('brawler', { frames: [ 15, 16, 17, 18, 17, 15 ] }),
            frameRate: 8,
            repeat: -1,
            repeatDelay: 2000
        });

        this.anims.create({
            key: 'jump',
            frames: this.anims.generateFrameNumbers('brawler', { frames: [ 20, 21, 22, 23 ] }),
            frameRate: 8,
            repeat: -1
        });

        this.anims.create({
            key: 'jumpkick',
            frames: this.anims.generateFrameNumbers('brawler', { frames: [ 20, 21, 22, 23, 25, 23, 22, 21 ] }),
            frameRate: 8,
            repeat: -1
        });

        this.anims.create({
            key: 'win',
            frames: this.anims.generateFrameNumbers('brawler', { frames: [ 30, 31 ] }),
            frameRate: 8,
            repeat: -1,
            repeatDelay: 2000
        });

        this.anims.create({
            key: 'die',
            frames: this.anims.generateFrameNumbers('brawler', { frames: [ 35, 36, 37 ] }),
            frameRate: 8,
        });

        const keys = [ 'walk', 'idle', 'kick', 'punch', 'jump', 'jumpkick', 'win', 'die' ];

        const cody = this.add.sprite(600, 370);
        cody.setScale(8);
        cody.play('walk');

        let c = 0;
        this.input.on('pointerdown', function () {
            c++;
            if (c === keys.length)
            {
                c = 0;
            }
            cody.play(keys[c]);
            current.setText('Playing: ' + keys[c]);
        });
    }

Popularity 5/10 Helpfulness 3/10 Language javascript

Source: github.com

Tags: sprite-sheet animation phaser javascript

Link to this answer
Share Copy Link

Contributed on May 30 2022

Himanshu Jangid

0 Answers Avg Quality 2/10

phaser aseprite animation

Comment

function preload ()
{
    this.load.path = 'assets/animations/aseprite/';

    this.load.aseprite('paladin', 'paladin.png', 'paladin.json');
}

function create ()
{
    var tags = this.anims.createFromAseprite('paladin');

    var sprite = this.add.sprite(500, 300).play({ key: 'Magnum Break', repeat: -1 }).setScale(6);

    for (var i = 0; i < tags.length; i++)
    {
        var label = this.add.text(32, 32 + (i * 16), tags[i].key, { color: '#00ff00' });

        label.setInteractive();
    }

    this.input.on('gameobjectdown', function (pointer, obj) {

        sprite.play({
            key: obj.text,
            repeat: -1
        });

    });

    this.input.on('gameobjectover', function (pointer, obj) {

        obj.setColor('#ff00ff');

    });

    this.input.on('gameobjectout', function (pointer, obj) {

        obj.setColor('#00ff00');

    });
}

Popularity 5/10 Helpfulness 2/10 Language javascript

Source: github.com

Tags: animation javascript phaser

Link to this answer
Share Copy Link

Contributed on May 30 2022

Himanshu Jangid

0 Answers Avg Quality 2/10

phaser create animation from sprite config.js

Comment

function preload ()
{
    this.load.atlas('gems', 'assets/tests/columns/gems.png', 'assets/tests/columns/gems.json');
}

function create ()
{
    //  Define the animations first

    this.anims.create({ key: 'ruby', frames: this.anims.generateFrameNames('gems', { prefix: 'ruby_', end: 6, zeroPad: 4 }), repeat: -1 });
    this.anims.create({ key: 'square', frames: this.anims.generateFrameNames('gems', { prefix: 'square_', end: 14, zeroPad: 4 }), repeat: -1 });

    //  The Sprite config

    const config = {
        key: 'gems',
        x: { randInt: [ 0, 800 ] },
        y: { randInt: [ 0, 300 ] },
        scale: { randFloat: [ 0.5, 1.5 ] },
        anims: 'ruby'
    };

    //  Make 16 sprites using the config above
    for (var i = 0; i < 16; i++)
    {
        this.make.sprite(config);
    }

    //  A more complex animation config object.
    //  This time with a call to delayedPlay that's a function.
    const config2 = {
        key: 'gems',
        frame: 'square_0000',
        x: { randInt: [ 0, 800 ] },
        y: { randInt: [ 300, 600 ] },
        scale: { randFloat: [ 0.5, 1.5 ] },
        anims: {
            key: 'square',
            repeat: -1,
            repeatDelay: { randInt: [ 1000, 4000 ] },
            delayedPlay: function ()
            {
                return Math.random() * 6000;
            }
        }
    };

    //  Make 16 sprites using the config above
    for (let i = 0; i < 16; i++)
    {
        this.make.sprite(config2);
    }
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: github.com

Tags: javascript phaser sprite animation

Link to this answer
Share Copy Link

Contributed on May 30 2022

Himanshu Jangid

0 Answers Avg Quality 2/10

phaser sprite animation event

Comment

  preload ()
    {
        this.load.atlas('sf2', 'assets/animations/sf2.png', 'assets/animations/sf2.json');
    }

    create ()
    {
        var animConfig = {
            key: 'ryu',
            frames: this.anims.generateFrameNames('sf2', { prefix: 'frame_', end: 22 }),
            frameRate: 20,
            repeat: 3
        };

        this.anims.create(animConfig);

        const sprite = this.add.sprite(550, 600, 'sf2', 'frame_0')
            .setOrigin(0.5, 1)
            .setScale(2);

        const text = this.add.text(32, 32, 'Click to Start Animation', { color: '#00ff00' });

        let log = [];
        let u = 0;
        let ui = 0;

        sprite.on(Phaser.Animations.Events.ANIMATION_START, function (anim, frame, gameObject) {

            log.push('ANIMATION_START');
            text.setText(log);

            u = 0;
            ui = 0;

        });

        sprite.on(Phaser.Animations.Events.ANIMATION_STOP, function (anim, frame, gameObject) {

            log.push('ANIMATION_STOP');
            text.setText(log);

            u = 0;
            ui = 0;

        });

        sprite.on(Phaser.Animations.Events.ANIMATION_UPDATE, function (anim, frame, gameObject) {

            if (u === 0)
            {
                log.push('ANIMATION_UPDATE x0');

                u++;
                ui = log.length - 1;
            }
            else
            {
                log[ui] = 'ANIMATION_UPDATE x' + u.toString();
                u++;
            }

            text.setText(log);

        });

        sprite.on(Phaser.Animations.Events.ANIMATION_REPEAT, function (anim, frame, gameObject) {

            u = 0;

            log.push('ANIMATION_REPEAT');

            text.setText(log);

        });

        sprite.on(Phaser.Animations.Events.ANIMATION_COMPLETE, function (anim, frame, gameObject) {

            log.push('ANIMATION_COMPLETE');

            text.setText(log);

        });

        this.input.on('pointerdown', function () {

            if (sprite.anims.isPlaying)
            {
                sprite.stop();
            }
            else
            {
                log = [];

                sprite.play('ryu');
            }

        });
    }

Popularity 4/10 Helpfulness 1/10 Language javascript

Source: github.com

Tags: animation phaser javascript sprite

Link to this answer
Share Copy Link

Contributed on May 30 2022

Himanshu Jangid

0 Answers Avg Quality 2/10

phaser create animation on sprite

Contents

More Related Answers

phaser create animation on sprite

Closely Related Answers

phaser create animation from sprite sheet

phaser aseprite animation

phaser create animation from sprite config.js

phaser sprite animation event

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.