Paul Bonneau

How to make body follow shape movement

Recommended Posts

Hi everyone !

I'm trying to add to a circle and multiple polygon shapes in order to test collision between those elements.

My problem is that I can't figure out how to make those shapes body follow the shape they are attached to.

Also I was wondering if there where a way to shape bodies automaticaly according to the shape they are attached to ?

Here is my code if you want to take a look (https://codepen.io/paulbonneau/pen/KGGbGO):

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"></script>
</head>

<body>

    <script>
        var polygons, player;
        var Polygon = new Phaser.Class({
            Extends: Phaser.GameObjects.Arc,
            initialize:
                function Polygon(scene) {
                    rotationPosibilities = [0, 40, 90, 140, 280]
                    Phaser.GameObjects.Arc.call(this, scene);
                    this.setPosition(game.config.width / 2, game.config.height / 2);
                    this.setRadius(600);
                    this.setStartAngle(0);
                    this.setEndAngle(300);
                    this.setIterations(0.2);
                    this.setOrigin(2.5);
                    this.lineWidth = 40;
                    this.strokeColor = 0xFF0000;
                    this.strokeAlpha = 1;
                    this.isStroked = true;
                    this.setClosePath(false);
                    this.scale = 1
                    this.rotation = rotationPosibilities[Math.floor(Math.random() * Math.floor(4))]
                    
                }

        });

        var config = {
            type: Phaser.AUTO,
            width: 800,
            height: 600,
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { y: 0 },
                    debug: true
                }
            },
            scene: {
                preload: preload,
                create: create,
                update: update,
                render: render
            }
        };

        var game = new Phaser.Game(config);
        var polygon, player;

        function preload() { }
        function create() {
            polygons = [];
            polygons.push(this.children.add(new Polygon(this)));
            createPlayer(this);
        }

        function createPlayer(gameObj) {
            player = gameObj.add.circle(game.config.width / 2, game.config.height / 2, 20, 0x6666ff)
            player.setOrigin(4);
            
            gameObj.physics.add.existing(player);
            player.body.isMoving = true
            
            
            
            gameObj.input.on('pointermove', function (pointer) {
                player.rotation = (Math.atan2(pointer.position.x - game.config.width / 2, - (pointer.position.y - game.config.height / 2)) * (180 / Math.PI)) / 10
                
                
            });

        }
        function update() {
            gameObj = this;
            polygons.forEach((polygon, index, object) => {
                polygon.scaleX -= 0.004;
                polygon.scaleY -= 0.004;
                polygon.rotation += 0.01;
                if (polygon.scaleX <= 0) {
                    object.splice(index, 1)
                    polygon.destroy()
                }
                if (polygons.length < 2 && polygon.scaleX < 0.5) {
                    var newPolygon = new Polygon(gameObj);
                    this.physics.add.existing(gameObj);
                    polygons.push(this.children.add(newPolygon));
                }
            });
        }

        function render(){

        }


    </script>

</body>

</html>

 

Share this post


Link to post
Share on other sites

Arcade Physics only support AABBs (that is to say, rectangles with no rotation) and circles. Polygons, ellipses, and any other shape you could think of are not supported for the sake of speed.

If you need more complicated collision and aren't critically concerned with performance, you can use Matter.js physics. There also the option of using a library like SAT.js and handling the polygonal collision yourself, but that's a little complicated, especially if you're a beginner.

Share this post


Link to post
Share on other sites

Thank you for your reply ! So i'm giving a try to Matter.js but i can't figure out (as with arcade physics) how to make the boy of my shape follow the shape movements.

For example, I added a matter JS body to my player object. The body keep the rotation but not the origin of the rotation ( in createPlayer function ). Am I doing something wrong ?

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.15.1/phaser.js"></script>
</head>

<body>

    <script>
        var polygons, player;
        var Polygon = new Phaser.Class({
            Extends: Phaser.GameObjects.Arc,
            initialize:
                function Polygon(scene) {
                    rotationPosibilities = [0, 40, 90, 140, 280]
                    Phaser.GameObjects.Arc.call(this, scene);
                    this.setPosition(game.config.width / 2, game.config.height / 2);
                    this.setRadius(600);
                    this.setStartAngle(0);
                    this.setEndAngle(300);
                    this.setIterations(0.2);
                    this.setOrigin(2.5);
                    this.lineWidth = 40;
                    this.strokeColor = 0xFF0000;
                    this.strokeAlpha = 1;
                    this.isStroked = true;
                    this.setClosePath(false);
                    this.scale = 1
                    this.rotation = rotationPosibilities[Math.floor(Math.random() * Math.floor(4))]
                    
                }

        });

        var config = {
            type: Phaser.AUTO,
            width: 800,
            height: 600,
            physics: {
                default: 'matter',
                matter: {
                    gravity: {
                        y: 0
                    },
                    debug: true
                }
            },
            scene: {
                preload: preload,
                create: create,
                update: update,
                render: render
            }
        };

        var game = new Phaser.Game(config);
        var polygon, player;

        function preload() { }
        function create() {
            polygons = [];
            polygons.push(this.children.add(new Polygon(this)));
            createPlayer(this);
        }

        function createPlayer(gameObj) {
            player = gameObj.add.circle(game.config.width / 2, game.config.height / 2, 20, 0x6666ff)
            gameObj.matter.add.gameObject(player);
            player.setOrigin(4);


            gameObj.input.on('pointermove', function (pointer) {
                player.rotation = (Math.atan2(pointer.position.x - game.config.width / 2, - (pointer.position.y - game.config.height / 2)) * (180 / Math.PI)) / 10
            });
        }
        function update() {
            gameObj = this;
            polygons.forEach((polygon, index, object) => {
                polygon.scaleX -= 0.004;
                polygon.scaleY -= 0.004;
                polygon.rotation += 0.01;
                if (polygon.scaleX <= 0) {
                    object.splice(index, 1)
                    polygon.destroy()
                }
                if (polygons.length < 2 && polygon.scaleX < 0.5) {
                    var newPolygon = new Polygon(gameObj);
                    polygons.push(this.children.add(newPolygon));
                }
            });
        }

        function render(){

        }


    </script>

</body>

</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.