Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

How to make body follow shape movement


Paul Bonneau
 Share

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>

 

Link to comment
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.

Link to comment
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>

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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