Your game is set against a fixed size called the Reference Resolution. When your game runs it is generated at this resolution and then gets scaled uniformly to fit whatever window or screen size the player actually has.
By default the Reference Resolution is set to: 1280×720
Settings
This can be changed in the Project Settings under
Display → Resolution and be set to the desired size.
Runtime Scaling
The whole game renders inside a single #game box, sized exactly <width>px × <height>px at the reference resolution. On load and on every window resize, the runtime computes:
const scale = Math.min(
window.innerWidth / referenceWidth,
window.innerHeight / referenceHeight,
);
game.style.transform = `scale(${scale})`;
A few things fall out of this:
- It's one uniform scale factor applied to both axes. The game is never stretched non-uniformly, so nothing gets squashed or distorted.
- Whichever axis has leftover space gets centered, producing letterbox bars (top and bottom) or pillarbox bars (left and right) as needed.
- Those bars are coloured black (
body { background: black; }). - The scale factor is a plain floating-point ratio.
What this means for scene nodes and art
Every position and size you set on a node in the Scene Editor, x, y, w, h, is a literal pixel value in the reference resolution's coordinate space, not the player's actual screen. The Scene Editor's own canvas is sized to exactly display.width × display.height, so what you see while placing nodes is a 1:1 preview of that reference frame. The runtime scale transform is applied uniformly on top of everything afterward, so proportions and relative positioning are always preserved exactly as authored.
Some practical guidance follows from this:
- Author full-bleed art, like backgrounds, at exactly the reference resolution. For a Full HD project that means exactly 1920×1080, so it fills the canvas edge to edge with no gaps at scale 1. The engine will auto-fit a background to the canvas if it doesn't match these dimensions, but this could result in unwanted stretching.
- It's best to ensure that all art produced for your game is made with the Reference Resolution in mind so that when it's imported into the project it is the correct size when placed on the sized canvas.
Best Practices
When Making art for games it's a good idea to make the art larger that what is needed and scale it down to the correct size when importing it into the project.
This ensures that a higher quality version of the art is always available if things need to be resized at a later date, or you are producing a HD remake of your game in the future.
When artists make art for the game they should make their canvases twice the size it needs to be, and then when exporting they can half the size to make it engine ready.
Some tools that are good for this purpose:
- Windows: Power Toys
- Mac: Set up Quick Actions