Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[spine-phaser] bounds not correct while using physics and scaleX -1 #2425

Open
StreakingMan opened this issue Nov 23, 2023 · 2 comments
Open

[spine-phaser] bounds not correct while using physics and scaleX -1 #2425

StreakingMan opened this issue Nov 23, 2023 · 2 comments
Assignees
@badlogic
Labels
bug

Comments

@StreakingMan
Copy link

Here's my test of the mix-and-match-example.html, which has left me confused:

2023-11-23.22.47.23.mov

What I did was add physics and use scaleX=-1 to turn left.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.js"></script>
    <title>Spine Phaser Example</title>
</head>

<body>
    <h1>Mix and match</h1>
</body>
<script>
    const config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        type: Phaser.WEBGL,
        scene: {
            preload: preload,
            create: create,
            update: update,
            pack: {
                files: [
                    { type: "scenePlugin", key: "spine.SpinePlugin", url: "../dist/iife/spine-phaser.js", sceneKey: "spine" }
                ]
            }
        },
        physics: {
            default: 'arcade',
            arcade: {
                debug: true,
                gravity: { y: 200 },
            },
        },
    };

    const game = new Phaser.Game(config);

    function preload() {
        this.load.spineBinary("mix-and-match-data", "assets/mix-and-match-pro.skel");
        this.load.spineAtlas("mix-and-match-atlas", "assets/mix-and-match-pma.atlas");
    }

    let cursors;
    let mixAndMatch;
    function create() {
        mixAndMatch = this.add.spine(400, 500, 'mix-and-match-data', "mix-and-match-atlas", new spine.SkinsAndAnimationBoundsProvider(null, ["full-skins/girl"]));
        mixAndMatch.scale = 0.5;
        mixAndMatch.animationState.setAnimation(0, "walk", true);

        this.physics.add.existing(mixAndMatch);
        mixAndMatch.body.setCollideWorldBounds(true);

        const skeletonData = mixAndMatch.skeleton.data;
        const skin = new spine.Skin("custom");
        skin.addSkin(skeletonData.findSkin("skin-base"));
        skin.addSkin(skeletonData.findSkin("nose/short"));
        skin.addSkin(skeletonData.findSkin("eyelids/girly"));
        skin.addSkin(skeletonData.findSkin("eyes/violet"));
        skin.addSkin(skeletonData.findSkin("hair/brown"));
        skin.addSkin(skeletonData.findSkin("clothes/hoodie-orange"));
        skin.addSkin(skeletonData.findSkin("legs/pants-jeans"));
        skin.addSkin(skeletonData.findSkin("accessories/bag"));
        skin.addSkin(skeletonData.findSkin("accessories/hat-red-yellow"));
        mixAndMatch.skeleton.setSkin(skin);
        mixAndMatch.skeleton.setToSetupPose();

        if (this.input.keyboard) cursors = this.input.keyboard.createCursorKeys();
    }

    function update(){
        if (cursors.left.isDown) {
            mixAndMatch.scaleX = -0.5;
        }else {
            mixAndMatch.scaleX = 0.5;
        }
    }
</script>

</html>

Is there something wrong with the Spine source file, or am I using scaleX incorrectly?
@StreakingMan StreakingMan changed the title spine-phaser: bounds not correct while using physics and scaleX -1 [spine-phaser] bounds not correct while using physics and scaleX -1 Nov 23, 2023
@badlogic badlogic self-assigned this Nov 28, 2023
@badlogic badlogic added the bug label Nov 28, 2023
@badlogic
Copy link
Collaborator

You're not using it incorrectly. This appears to be a bug triggered by adding a physics component. I'm not super familiar with that Phaser sub-system, so I'm not sure what's going wrong. I'll update the issue once I've figured it out.

@davidetan
Copy link
Collaborator

In Phaser, if you use arcade physics and set the scaleX to a negative number will result in having the physics body reflected regardless on the usage of a SpineGameObject or a normal GameObject.

It's possible to get the very same result of the video on this phaser playground example adding block.scaleX = -block.scaleX; as latest line of the create function. The debug bounding box is reflected on the right of the brown box:
image

We have to consider that to flip a GameObject in Phaser, it seems that there are flip methods. In this case the setFlipX(boolean) should be used.
It's important to notice this part of the Phaser flip documentation:

If this Game Object has a physics body, it will not change the body. This is a rendering toggle only.

So in general it's the user that has to take care of the GameObject body position for some operation (such as rotation) on the GameObject - at least for arcade physics.

However, when using setFlipX(boolean) on a SpineGameObject, it is not flipped. We should do that probably and will make a fix to it.

In any case, my advice is to explore also the matter physics system. That is definitely more advanced and your use case would work out of the box.
Indeed, scaling with negative numbers in matter won't produce the effect of reflecting the GameObject body.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@badlogic badlogic

Labels
bug
Milestone
No milestone
Development

No branches or pull requests
3 participants
@badlogic @davidetan @StreakingMan