sparkade-labs/phaser-hidpi

phaser-hidpi is a small plugin for Phaser 4, a JavaScript game framework, that fixes blurry text and graphics on high resolution screens. If your Phaser game looks sharp on a standard desktop monitor but appears blurry on a phone, tablet, or high-DPI display, this plugin solves it by rendering the canvas at the device's native pixel resolution instead of the lower logical resolution. The root cause is that modern screens often use multiple physical pixels to draw each CSS pixel, a ratio called devicePixelRatio (DPR). A phone with DPR 3, for example, uses 9 physical pixels to draw each CSS pixel. If a game canvas is sized in CSS pixels but not scaled up for the backing buffer, the graphics engine stretches a low resolution image to fill the screen, causing blur. This plugin configures Phaser's canvas to use the full physical resolution. Using it involves two pieces. First, the plugin returns a Phaser configuration object with the canvas and scale settings already set up for the device's pixel density, which you merge into your normal Phaser config. Second, it provides a helper function called px() that you use to wrap pixel measurements in your scene code. On a standard DPR 1 screen, px() returns its input unchanged, on a DPR 2 or 3 screen, it multiplies the value accordingly. You wrap coordinates, sizes, font sizes, radii, and line widths with px(), but not colors, scale multipliers, angles, or durations. The project is written in JavaScript, installable via npm, and also available as a plain script file. It also reports the pointer position in physical pixels, so touch and click hit tests line up correctly without extra conversion.