Creating precise custom colliders for Arcade Physics on Phaser JS - Skate Platformer Game Devlog #03
Written in September 17, 2020 - 🕒 1 min. readHey guys, another game devlog of skate platformer, this time I added the hero’s movement animation and created a 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:
- coding
- games
- javascript
- phaser
- phaser 3
- game devlog
- gamedev
- skate platformer
- super ollie vs pebble corp
- webpack
- tiled
Related posts
Post a comment
Comments
No comments yet.