El juego que estoy creando no requiere ninguna física, sin embargo, puedes interactuar cuando pasas el cursor sobre el sprite o haces clic en él usando sprite.setInteractive({cursor: "pointer"});, sprite.on('pointermove' , función (punto activo) {...}); y similares
Me encontré con algunos problemas con el área interactiva y quería depurarlo mostrando el "área" que es interactuable. Sin embargo, solo pude encontrar formas de hacerlo relacionadas con Arcade Physics. ¿Hay alguna forma de obtener algo como un esquema de depuración alrededor de mi área interactuable sin Física?
Fuera de la caja , sin física, no sé de ninguna manera, pero uno podría obtener esta función/característica con una pequeña función de ayuda. (pero tal vez hay algo, ya que Phaser es un marco realmente extenso. Pero tampoco pude encontrar nada).
Algo como esto, podría hacer el truco, y es reutilizable:
function debugSpriteArea(scene, sprite){ let debugRect = scene.add.rectangle( sprite.x, sprite.y, sprite.displayWidth, sprite.displayHeight, 0xff0000).setOrigin(sprite.originX, sprite.originY); debugRect.setDepth(-1); }Aquí la función de ayuda en acción:
let Scene = { preload () { this.load.spritesheet('brawler', 'https://labs.phaser.io/assets/animations/brawler48x48.png', { frameWidth: 48, frameHeight: 48 }); }, create () { // Animation set this.anims.create({ key: 'walk', frames: this.anims.generateFrameNumbers('brawler', { frames: [ 0, 1, 2, 3 ] }), frameRate: 8, repeat: -1 }); const cody = this.add.sprite(200, 100, 'brawler') .setOrigin(0.5); debugSpriteArea(this, cody); cody.play('walk'); cody.setInteractive(); this.mytext = this.add.text(10, 10, 'No Hit', { fontFamily: 'Arial' }); cody.on('pointerdown', function (pointer) { let originXOffset = cody.displayWidth * cody.originX; let originYOffset = cody.displayHeight * cody.originY; let x = (pointer.x - cody.x + originXOffset ) / (cody.displayWidth / cody.width) let y = (pointer.y - cody.y + originYOffset) / (cody.displayHeight / cody.height); if(cody.anims && cody.anims.currentFrame){ let currentFrame = cody.anims.currentFrame; let pixelColor = this.textures.getPixel(x, y, currentFrame.textureKey, currentFrame.textureFrame); if(pixelColor.a > 0) { this.mytext.text = 'hit'; } else { this.mytext.text = 'No hit'; } } }, this); } }; function debugSpriteArea(scene, sprite){ let debugRect = scene.add.rectangle( sprite.x, sprite.y, sprite.displayWidth, sprite.displayHeight, 0xff0000).setOrigin(sprite.originX, sprite.originY); debugRect.setDepth(-1); } const config = { type: Phaser.AUTO, width: 400, height: 200, scene: Scene }; const game = new Phaser.Game(config); <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>