Jump to content

physics body messes with animation


raychow
 Share

Recommended Posts

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:

  1. The first (dude1) is created via sprite sheet and works as expected.
  2. The second (dude2) is created with an atlas with no physics and plays the animation as expected
  3. 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/phaser@3.22.0/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>

 

platform.png

king_spriteSheet.png

king_atlas.png

king_atlas.json

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...