This repo is a minimal reproducible example of bad rendering behavior of Phaser within Electron. It has been created to supplement this question on StackOverflow.
Note: I have only tested this on MacOS.
yarn && yarn start
After dependencies are installed and the app builds, a new application window will open. Within that window, you'll see:
- the page has a white background
- there is a black
<canvas>
rectangle in the top-left, with dimensions 400px by 200px; there is nothing else on the page - in the top-left corner of the
<canvas>
, you'll see a red square that's 100px on a side, with a 1px green border that's visible on all four sides of the square
Open src/scene.js
and look at line 23: the sprite is being placed at coordinates (200,100)
even though it displays in the top-left corner.
To the best of my knowledge, the correct coordinates for that position should be (0,0)
.
Notably, (200,100)
is half the canvas dimensions. If you increase the canvas size to e.g. 600px by 300px, to achieve the same position, you must place the sprite at (300,150)
, which is also not how it's supposed to work.
There's nothing else going on in this repo.
Note that this repo does not do hot-reloading, because this is supposed to be a minimal example. If you want to see your changes, you must kill the Electron app and then re-run yarn start
.