Melonjs Display And Scaling
Use this skill when a melonJS game looks blurry, soft, shimmering or cropped, or when...
Install
npx skills add melonjs/melonJS --skill melonjs-display-and-scaling -g -a claude-code -y- Repository
- melonjs/melonJS6.4k
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Use this skill when a melonJS game looks blurry, soft, shimmering or cropped, or when choosing how the canvas fills its page. Covers the design resolution, scale and scaleMethod, scaleTarget, scaleRounding for pixel-perfect integer scaling, antiAlias, textureFilter and linear-mipmap for what is drawn small, subPixel, syncToDisplay for steady motion, devicePixelRatio, and which setting does which job. Triggers on: blurry, soft, fuzzy, shimmering, pixel art, pixel perfect, crisp, nearest, linear, scale, scaleMethod, scaleTarget, scaleRounding, integer scaling, antiAlias, textureFilter, linear-mipmap, mipmaps, minimap shimmer, zoomed out, subPixel, syncToDisplay, stutter, judder, uneven scrolling, devicePixelRatio, retina, hidpi, design resolution, canvas size, canvas cropped, letterbox, image-rendering, upscale, resolution.
Display and scaling
Seven settings decide how a game looks on screen, and they are easy to get individually right and collectively wrong. This is what each one actually does, and which one to reach for.
The four jobs
A pixel travels from your source art to a physical pixel through four separate decisions. Knowing which setting owns which is most of the work.
| job | setting | what it decides |
|---|---|---|
| how big the frame is drawn | width/height on Application | the design resolution everything is authored against |
| how it uses the space | scale, scaleMethod, scaleTarget | fit, fill, stretch, and what it measures to decide |
| may the factor be fractional | scaleRounding | whole device pixels per source pixel, or any factor |
| how a texture is sampled | antiAlias, textureFilter | nearest or linear, and the CSS upscale filter |
subPixel is a fifth, orthogonal to all of them: it decides whether a
renderable may sit on a fractional position WITHIN the frame. syncToDisplay
is about the frames in a row rather than one frame: whether motion advances
by the same amount on each.
Design resolution
const app = new Application(480, 270, { scale: "auto" });
The game is drawn at 480x270 whatever the window is, and the canvas is scaled to the container. Everything in world coordinates is in those units. This is the usual arrangement: author once, scale to whatever you are given.
scale and scaleMethod
scale: "auto" turns on automatic scaling; a number is a fixed multiplier and
scaleMethod is then ignored.
scaleMethod decides how the available space is used:
