0
238
VistasPrecisión de píxeles usando Phaser 3 y JavaScript
Estoy aprendiendo a escribir juegos móviles usando Phaser 3 y JavaScript (usando Chrome como navegador y un servidor en vivo para el servidor web, todo ejecutándose en una máquina estándar con Windows 10).
Me gustaría producir gráficos en el navegador que reflejen con precisión (píxel por píxel) las imágenes que quiero que se muestren, pero no sé cuál es el mejor enfoque para hacerlo usando Phaser (y quizás HTML y CSS).
Por ejemplo, el siguiente código representa una imagen .png de 64 x 64 píxeles cuadrados. Pero incluso cuando se usa pixelArt: true en la configuración enviada a Phaser.Game() en la parte de JavaScript, la imagen se escala para ocupar una cierta cantidad de espacio y los píxeles no se escalan proporcionalmente. Con suerte, la captura de pantalla aclara (la imagen de la izquierda muestra cómo aparece en un navegador, la imagen de la derecha es cómo aparece sin escalar):
Aquí está el código para el archivo JavaScript:
var config = { type: Phaser.AUTO, width: 480, height: 360, backgroundColor: "#111111", parent: "game_div", pixelArt: true, scene: { preload: preload, create: create, update: update }, physics: { default: "arcade", arcade: { gravity: { y: 0 } } } }; var game = new Phaser.Game(config); function preload () { this.load.image('star', 'star.png'); } function create () { this.add.image(50, 50, 'star').setOrigin(0, 0); } function update () { }Y aquí está el archivo index.html correspondiente:
<!DOCTYPE html> <html> <head> <script src="phaser.js"></script> <style> html, body { margin: 0; padding: 0; } </style> </head> <body> <div id="game_div"></div> <script type="module" src="game.js"></script> </body> </html>