¿Por qué no colisionan mis sprites e imágenes y hasta desaparecen si es que colisionan?
Mis sprite e imágenes colisionaban antes de modificar la Hitbox y ahora que la modifique no colisionan y no sé el por que pasa esto.
Aclaro que se ve perfectamente la Hitbox y todo con respecto a donde la coloque está bien pero no colisiona y si lo hace el objeto desaparece.
De ante mano quiero disculparme por las molestias y agradezco nuevamente por su ayuda.
Creo tener algún errror de logica pero no sé muy bien. Es la primera vez que programo un videojuego.
-
Uso un servidor creado con la función express.
-
Código de la platilla del juego:
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
scene: [Game],
physics: {
default: "arcade",
arcade: {
gravity: { y: 400 },
debug: false
}
}
};
var game = new Phaser.Game(config);
- Aquí les proporciono el código de mi única escena por el momento:
export class Game extends Phaser.Scene {
constructor() {
super({key:'game'});
};
preload() {
this.load.image("background","imagenes/Legacy-Fantasy - High Forest 2.3/Background/Background.png");
this.load.image("mapa","Fondos/mapa.png");
this.load.spritesheet("caballero_Idle","caballero/Colour2/NoOutline/120x80_PNGSheets/_Idle.png",{ frameWidth: 120, frameHeight: 80 });
this.load.spritesheet("esqueleto","Skeleton/Sprite Sheets/Skeleton Idle.png",{frameWidth: 24, frameHeight: 30});
};
create() {
//Colisiones del mundo
this.physics.world.setBoundsCollision(true, true, true, true);
//Fondo
this.background = this.physics.add.image(window.innerWidth / 2, window.innerHeight / 2, "background");
this.background.setScale(window.innerWidth / this.background.width, window.innerHeight / this.background.height);
this.background.body.allowGravity = false;
this.mapa = this.physics.add.image(0,800,"mapa").setImmovable();
this.mapa.setScale(window.innerWidth,0.8);
this.mapa.body.allowGravity = false;
//Plataformas
console.log("Por ahora no tengo plataformas");
console.log(`Ancho: ${(this.background.scaleX)*32}`);
console.log(`Alto: ${(this.background.scaleY)*32}`);
//Personajes
this.caballero_Idle = this.physics.add.sprite(400,340,"caballero_Idle");
//this.caballero_Idle.body.allowGravity = false;
this.esqueleto = this.physics.add.sprite(450,340,"esqueleto");
this.esqueleto.body.allowGravity = false;
//Animaciones
this.anims.create({
key: 'caballero_Idle',
frames: this.anims.generateFrameNumbers('caballero_Idle', { start: 0, end: 7 }),
frameRate: 10,
repeat: -1,
yoyo: true,
});
this.anims.create({
key: "esqueleto",
frames: this.anims.generateFrameNumbers("esqueleto",{start: 0, end: 7}),
frameRate: 10,
repeat: -1,
yoyo: true,
});
this.caballero_Idle.anims.play('caballero_Idle');
this.esqueleto.anims.play("esqueleto");
//colisiones
this.background.setCollideWorldBounds(true);
this.mapa.setCollideWorldBounds(true);
this.caballero_Idle.setCollideWorldBounds(true);
this.esqueleto.setCollideWorldBounds(true);
this.background.setBounce(0);
this.mapa.setBounce(0);
this.caballero_Idle.setBounce(0);
this.esqueleto.setBounce(0);
this.physics.add.collider(this.esqueleto,this.caballero_Idle);
this.physics.add.collider(this.esqueleto,this.mapa);
this.physics.add.collider(this.caballero_Idle,this.mapa);
//Controles
this.cursor = this.input.keyboard.createCursorKeys();
//Camara
this.cameras.main.setBounds(0, 0, window.innerWidth, window.innerHeight);
this.cameras.main.startFollow(this.caballero_Idle);
//Tamaño de las HitBox
this.caballero_Idle.setSize(30, 40); // Define el tamaño del hitbox
this.caballero_Idle.setOffset(20, 0); // Posiciona el hitbox dentro del sprite
this.esqueleto.setSize(30, 32);
this.esqueleto.setOffset(15, 15);
this.mapa.setSize(50,200);
this.mapa.setOffset(0,15);
};
update(){
if(this.cursor.left.isDown){
this.caballero_Idle.setVelocityX(-500);
}else if(this.cursor.right.isDown){
this.caballero_Idle.setVelocityX(500);
}else if(this.cursor.up.isDown){
this.caballero_Idle.setVelocityY(-200);
}else{
this.caballero_Idle.setVelocityX(0);
};
//this.physics.moveToObject(this.esqueleto, this.caballero_Idle, 100);
//this.cameras.main.startFollow(this.caballero_Idle);
// Dibujar un rectángulo de depuración alrededor del hitbox del sprite
var graphics = this.add.graphics();
graphics.clear(); // Limpia el gráfico si ya se dibujó en el último frame
graphics.lineStyle(2, 0xff0000, 1); // Establece el color y el grosor de la línea
// Dibuja un rectángulo basado en el tamaño y posición del hitbox del sprite
//graphics.strokeRect(
//this.esqueleto.x - this.esqueleto.body.offset.x,
//this.esqueleto.y - this.esqueleto.body.offset.y,
//this.esqueleto.body.width,
//this.esqueleto.body.height,
//graphics.clear()
//);
//graphics.strokeRect(
//this.caballero_Idle.x - this.caballero_Idle.body.offset.x,
//this.caballero_Idle.y - this.caballero_Idle.body.offset.y,
//this.caballero_Idle.body.width,
//this.caballero_Idle.body.height,
//graphics.clear()
//);
graphics.strokeRect(
this.mapa.x - this.mapa.body.offset.x,
this.mapa.y - this.mapa.body.offset.y,
this.mapa.body.width,
this.mapa.body.height,
);
};
};
Nuevamente una disculpa por todas las molestias y les agradezco por todo el tiempo que le dedican a esto.
Respuestas
Todavía no se han recibido respuestas a esta pregunta. ¿Quieres enviar la primera?