0
227
ViewsPixel accuracy using Phaser 3 and JavaScript
I'm just learning how to write mobile games using Phaser 3 and JavaScript (using Chrome as the browser, and live-server for the web-server, all running on a standard Windows 10 machine).
I'd like to produce graphics in the browser that accurately reflect (pixel by pixel) images that I want displayed, but I can't figure out what the best approach is to do this using Phaser (and perhaps HTML and CSS).
For example, the following code renders a .png image that is 64 by 64 pixels square. But even when using pixelArt: true in the config sent to Phaser.Game() in the JavaScript portion, the image is scaled to take up a certain amount of space and the pixels aren't scaled proportionally. Hopefully the screenshot clarifies (the image on the left shows how it appears in a browser, the image on the right is how it appears without scaling):
Here is the code for the JavaScript file:
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 ()
{
}
And here is the corresponding index.html file:
<!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>