# Melonjs Display And Scaling

Use this skill when a melonJS game looks blurry, soft, shimmering or cropped, or when...

- Repository: https://github.com/melonjs/melonJS (6430 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add melonjs/melonJS --skill melonjs-display-and-scaling -g -a claude-code -y`
Codex: `npx skills add melonjs/melonJS --skill melonjs-display-and-scaling -g -a codex -y`
Cursor: `npx skills add melonjs/melonJS --skill melonjs-display-and-scaling -g -a cursor -y`
Gemini CLI: `npx skills add melonjs/melonJS --skill melonjs-display-and-scaling -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add melonjs/melonJS`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

```js
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:

The rest: https://github.com/melonjs/melonJS/blob/HEAD/packages/melonjs/skills/melonjs-display-and-scaling/SKILL.md