Currently, I am working on developing a skateboarding game using the Phaser 3 framework in JavaScript. The challenge I'm facing is related to implementing a triangular hitbox for a ramp image I have loaded onto the screen. Initially, I used the "arcade" physics engine, but realized that to achieve a non-rectangular hitbox, I need to switch to the matter physics engine. However, integrating this with a triangular hitbox has been proving tricky.
I possess both the .png image file of the ramp and its corresponding .json hitbox file.
Despite attempting to follow a tutorial online regarding creating new hitboxes for the matter physics engine, my efforts resulted in everything falling off the screen. Additionally, I struggled with utilizing the .json file associated with the ramp.
// Physics engine configurations
var physicsConfig = {
default: 'arcade',
arcade : {
debug : true //TOGGLE TO TRUE FOR DEBUG LINES
}
}
// Game setup
var config = {
type: Phaser.AUTO,
width: 1200 ,
height: 600,
physics: physicsConfig,
scene: {
preload: preload,
create: create,
update: update
}
}
// Initialize the game
var game = new Phaser.Game(config);
function preload() {
// Loading images
this.load.image('sky', 'archery_assets/images/sky.png');
this.load.image('ground', 'skate_assets/images/ground.png');
this.load.image('up_ramp', 'skate_assets/images/up_ramp.png')
// Spritesheets
this.load.spritesheet('player', 'skate_assets/spritesheets/skater.png', {frameWidth: 160, frameHeight: 160});
}
function create() {
// Background setup
skyImg = this.add.image(600, 300, 'sky');
skyImg.setDisplaySize(1200, 600);
groundImg = this.add.image(600, 600, 'ground');
groundImg.setDisplaySize(1200, 250);
// Player creation
this.player = this.physics.add.sprite(100, 410, 'player');
this.player.setCollideWorldBounds(true);
// Animation setup
this.anims.create({
key: 'move',
frames: this.anims.generateFrameNumbers('player', {start: 0, end: 3}),
frameRate: 16,
repeat: -1
});
this.anims.create({
key: 'push',
frames: this.anims.generateFrameNumbers('player', {start: 4, end: 8}),
frameRate: 16
});
this.player.anims.play('move', true);
// Up ramp properties
this.upRamp = this.physics.add.sprite(700, 330, 'up_ramp');
this.upRamp.setSize(320, 150).setOffset(0, 175);
this.upRamp.enableBody = true;
this.upRamp.setImmovable();
this.upRamp.body.angle = 150;
// Input setup
this.cursors = this.input.keyboard.createCursorKeys();
this.spacebar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
this.physics.add.collider(this.player, this.upRamp);
}
function update() {
var playerPushSpeed = 0;
if (this.spacebar.isDown) {
this.player.anims.play('push', true);
playerPushSpeed += 175;
this.player.setVelocityX(playerPushSpeed);
}
if (this.upRamp.body.touching.left) {
this.player.setVelocityY(-200);
}
}
The main hurdle lies in figuring out how to incorporate the .png ramp image in conjunction with its respective .json hitbox file, enabling the player to smoothly traverse the ramp as intended.