Creating precise custom colliders for Arcade Physics on Phaser JS - Skate Platformer Game Devlog #03

Written in September 17, 2020 - Games

Hey guys, another game devlog of skate platformer, this time I added the hero’s movement animation and created an helper function to create custom collisions straight from Tiled.

The most interesting part of this week’s changes is the helper function to create the collisions, as in the video you couldn’t see the full function properly since it’s quite big, I’ll make it available for you to see it below.

const getTilesetCustomColliders = (scene, tilesetLayer) => {
    const customColliders = [];
    tilesetLayer.tilemap.layer.data.forEach((tiles) => {
        tiles.forEach((tile) => {
            const { index } = tile;
            const tilesetCustomColliders = tilesetLayer.tileset[0].tileData[index - 1];
            // check if we have a tileset on that position
            // and if it has custom colliders
            if (index !== -1 && tilesetCustomColliders) {
                const { objectgroup } = tilesetCustomColliders;
                const { objects } = objectgroup;
                objects.forEach((objectData) => {
                    const { height, width, x, y } = objectData;
                    const properties = tilesetLayer.tileset[0].tileProperties[index - 1];
                    const {
                        collidesLeft,
                        collidesRight,
                        collidesUp,
                        collidesDown,
                    } = properties;

                    // if the custom collider is the same size as the tile
                    // then we enable the normal tile collider from Phaser
                    if (height === TILESET_HEIGHT && width === TILESET_WIDTH) {
                        tile.setCollision(collidesLeft, collidesRight, collidesUp, collidesDown);
                        return;
                    }

                    const customCollider = new GameObjects.Rectangle(
                        scene,
                        (tile.x * TILESET_WIDTH) + x,
                        (tile.y * TILESET_HEIGHT) + y,
                        width,
                        height
                    ).setOrigin(0, 0);

                    if (IS_DEV) {
                        customCollider.setFillStyle(0x741B47);
                    }

                    scene.physics.add.existing(customCollider);
                    customCollider.body.setAllowGravity(false);
                    customCollider.body.setImmovable(true);
                    if (properties) {
                        customCollider.body.checkCollision = {
                            ...customCollider.body.checkCollision,
                            left: collidesLeft,
                            right: collidesRight,
                            up: collidesUp,
                            down: collidesDown,
                        };
                    }

                    customColliders.push(customCollider);
                });
            }
        });
    });

    return new GameGroup({
        scene,
        children: customColliders,
        name: tilesetLayer.tileset[0].name,
    });
};

The GameGroup class is a class that creates a Phaser Game Group with some custom properties that I need.

Tags:


Post a comment

Comments

No comments yet.