How to make body follow shape movement

Paul Bonneau · January 17, 2019

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/[email protected]/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>

Telinc1 · January 18, 2019

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.

Paul Bonneau · January 18, 2019

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>

Sign In

How to make body follow shape movement

Recommended Posts

Paul Bonneau

Link to comment

Share on other sites

Telinc1

Link to comment

Share on other sites

Paul Bonneau

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

Activity