physics body messes with animation

raychow · April 9, 2020

Hello All,

I'm new to Phaser and the world of HTML game development so I'm trying to learn the ins and outs of Phaser 3. Past several days I've been trying to get some sprite animations working via an atlas but not having much luck. The feet would not stay aligned to the floor. I'm assuming it has to do with the physics body since I can get it to work as intended via a sprite sheet or with an atlas without the physics involved. I've tried messing with the body.setSize() and the setOrigin() to the sprite itself but luck.

I've attached the quick demo of the problem. The attachments go into the "assets" folder and the index.html code is below. Apologies ahead of time if I'm not going about posting the example in the proper way...let me know if I am.

In the demo I've got three versions of the sprite:

The first (dude1) is created via sprite sheet and works as expected.
The second (dude2) is created with an atlas with no physics and plays the animation as expected
The third (dude3) is created with the same atlas as the second but I've added the physics to it. As it animates it seems to jitter vertically and will go through the floor.

The atlas png/JSON was created using TexturePacker and I've added a pivot point right at the left feet of the sprite. Any help would be very much appreciated.

-Ray

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
    <style>
        body {
            background-color: grey;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        const config = {
            type: Phaser.AUTO,
            parent: "phaser-example",
            width: 600,
            height: 400,
            pixelArt: true,
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { y: 300 },
                    debug: false
                }
            },
            scene: {
                preload: preload,
                create: create,
                update: update
            }
        };
        const game = new Phaser.Game(config);

        function preload() {
            this.load.image('ground', 'assets/platform.png');
            this.load.spritesheet("dude1", "assets/king_spriteSheet.png", { frameWidth: 78, frameHeight: 58} );
            this.load.atlas("dude2", "assets/king_atlas.png", "assets/king_atlas.json");
        }

        function create() {
            let floor = this.physics.add.staticGroup();
            floor.create(0, 400, 'ground').setScale(3).refreshBody();

            this.anims.create({
                key: "dude1_idle",
                frames: [
                {
                    key: "dude1",
                    frame: 0,
                    duration: 1000
                },
                {
                    key: "dude1",
                    frame: 1,
                },
                {
                    key: "dude1",
                    frame: 2,
                },
                {
                    key: "dude1",
                    frame: 3,
                },
                {
                    key: "dude1",
                    frame: 4,
                },
                {
                    key: "dude1",
                    frame: 5,
                },
                {
                    key: "dude1",
                    frame: 6,
                }
            ],
                frameRate: 10,
                repeat: -1
            });
            

            this.anims.create({
                key: "dude2_idle",
                // frames: this.anims.generateFrameNumbers('dude2', { start: 1, end: 8 }),
                frames: [
                    {
                        key: "dude2",
                        frame: "Idle (78x58)_01",
                        duration: 1000
                    },
                    {
                        key: "dude2",
                        frame: "Idle (78x58)_02"
                    },
                    {
                        key: "dude2",
                        frame: "Idle (78x58)_03"
                    },
                    {
                        key: "dude2",
                        frame: "Idle (78x58)_04"
                    },
                    {
                        key: "dude2",
                        frame: "Idle (78x58)_05"
                    },
                    {
                        key: "dude2",
                        frame: "Idle (78x58)_06"
                    },
                    {
                        key: "dude2",
                        frame: "Idle (78x58)_07"
                    },
                    {
                        key: "dude2",
                        frame: "Idle (78x58)_08"
                    },
                    {
                        key: "dude2",
                        frame: "Idle (78x58)_09"
                    },
                    {
                        key: "dude2",
                        frame: "Idle (78x58)_10"
                    },
                    {
                        key: "dude2",
                        frame: "Idle (78x58)_11"
                    }
                ],
                frameRate: 10,
                repeat: -1
            })

            this.dude1 = this.physics.add.sprite(100, 250, "dude1");
            this.dude1.anims.play("dude1_idle");
            this.dude1.body.setSize(50, 30)
            this.physics.add.collider(this.dude1, floor);

            this.dude2 = this.add.sprite(150, 352, "dude2");
            this.dude2.anims.play("dude2_idle");

            this.dude3 = this.physics.add.sprite(200, 250, "dude2", "Idle (78x58)_01");
            this.dude3.anims.play("dude2_idle");
            this.physics.add.collider(this.dude3, floor);
            
            this.cameras.main.setBackgroundColor("#AAAAAA");
            this.cameras.main.setZoom(2);
            this.cameras.main.setScroll(-100,80)
        }

        function update() {
            console.log(
                // `D1-F: ${this.dude1.frame.height} D1-B: ${this.dude1.body.height}`,
                // `D2-F: ${this.dude2.frame.height}`,
                `D3-F: ${this.dude3.frame.height} D3-B: ${this.dude3.body.height}`
            )
        }
    </script>
</body>
</html>

king_atlas.json

Sign In

physics body messes with animation

Recommended Posts

raychow

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

Activity