codinggames

Criando colisões precisas com Arcade Physics no Phaser JS - Skate Platformer Game Devlog #03

Escrito em 17 de setembro de 2020 - 🕒 1 min. de leitura

Fala galera, mais um game devlog do skate platformer, dessa vez adicionei a animação de movimento do hero e criei uma função auxiliar para criar colisões customizadas direto do Tiled.

A parte mais interessante das mudanças dessa semana é a função auxiliar para criar as colisões, como no vídeo não deu pra ver direito a função completa já que ela é grandinha, então deixo ela disponível para vocês verem abaixo.

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,
    });
};

A classe GameGroup é uma classe que cria um Phaser Game Group com algumas propriedades personalizadas de que eu preciso.

Tags:


Publicar um comentário

Comentários

Nenhum comentário.