# Scaling modes

> The same 160 × 120 game fitted to the page four ways while it runs, with useGame().setScaling: integer, contain, fill and none.

Example `scaling-modes`, running at https://nacatamalon.com/en/examples/scaling-modes. The whole catalogue: https://nacatamalon.com/llms/examples.md.

The same game of 160 × 120 pixels fitted to the page four ways, changed while it runs with `useGame().setScaling`. The game draws the same pixels every time: only how big they are painted changes. Make the window bigger and smaller to see each one follow it.

1 is `'integer'`, the largest whole multiple of the screen's own pixels: crisp, with bars when it does not fit exactly. 2 is `'contain'`, as large as fits, with fractions: the frame and the stripes show pixels of different widths. 3 is `'fill'`, stretched both ways. 4 is `'none'`, its own size. T switches the pixels between square and a television's 8:7 (`setPixelAspect`).

## Code

`index.ts`:

```ts
import { createGame } from 'nacatamalon';

import * as Settings from './settings';
import { Level } from './scenes/demo';

const game = createGame('#app', {
    width: Settings.WIDTH,
    height: Settings.HEIGHT,
    scaling: 'integer',
    background: '#000000'
});

// Declare Scenes
game({
    Level
});
```

`art/card.ts`:

```ts
import { createPixels, fillChecker, fillRect } from 'nacatamalon/pixels';

import * as Settings from '../settings';

export const createCard = () => {
    const pixels = createPixels(Settings.WIDTH, Settings.HEIGHT, '#1b1f3a');

    fillChecker(pixels, 8, '#262d57', '#1b1f3a');

    for (let x = 4;x < Settings.WIDTH - 4;x += 2) {
        fillRect(pixels, x, Settings.HEIGHT - 12, 1, 8, '#f2d16b');
    }

    fillRect(pixels, 0, 0, Settings.WIDTH, 1, '#7be38f');
    fillRect(pixels, 0, Settings.HEIGHT - 1, Settings.WIDTH, 1, '#7be38f');
    fillRect(pixels, 0, 0, 1, Settings.HEIGHT, '#7be38f');
    fillRect(pixels, Settings.WIDTH - 1, 0, 1, Settings.HEIGHT, '#7be38f');

    return pixels;
};
```

`components/display.ts`:

```ts
import { SCREEN, createSprite, createText, useGame, useKeyboard, useLoadTexture, useUpdate } from 'nacatamalon';
import { createPixelTexture } from 'nacatamalon/pixels';

import * as Settings from '../settings';
import { createCard } from '../art/card';

export const Display = () => {
    const game = useGame();
    const keys = useKeyboard();

    createSprite({
        texture: createPixelTexture(createCard()),
        anchor: {
            x: 0,
            y: 0
        }
    });
    createSprite({
        texture: useLoadTexture({
            src: '/example-assets/assets/gammix.png',
            key: 'gammix'
        }),
        transform: {
            x: 80,
            y: 62
        }
    });

    const label = createText({
        text: '',
        transform: {
            x: 6,
            y: 6
        }
    });

    const shape = createText({
        text: '',
        transform: {
            x: 6,
            y: 18
        },
        tint: '#9aa3c7'
    });

    createText({
        text: '1-4 MODE',
        transform: {
            x: 6,
            y: 92
        },
        tint: '#9aa3c7'
    });
    createText({
        text: 'T SHAPE',
        anchor: {
            x: 1,
            y: 0
        },
        transform: {
            x: Settings.WIDTH - 6,
            y: 92
        },
        tint: '#9aa3c7'
    });

    const show = () => {
        label.text = Settings.MODES.find((mode) => mode.scaling === game.getScaling())!.name;
        shape.text = game.getPixelAspect() === 1 ? 'PIXELS 1:1' : 'PIXELS 8:7';
    };

    show();

    useUpdate(() => {
        for (const mode of Settings.MODES) {
            if (keys.justPressed(mode.key)) {
                game.setScaling(mode.scaling);
                show();
            }
        }

        if (keys.justPressed('t')) {
            game.setPixelAspect(game.getPixelAspect() === 1 ? SCREEN.CONSOLES.snes.pixelAspect : 1);
            show();
        }
    });
};
```

`scenes/demo.ts`:

```ts
import { createScene, useSpawn } from 'nacatamalon';

import { Display } from '../components/display';

export const Level = () => {
    useSpawn(Display)();

    return createScene();
};
```

`settings.ts`:

```ts
import type { TCanvasScaling } from 'nacatamalon';

export const WIDTH = 160;
export const HEIGHT = 120;
export const MODES: Array<{ key: string; scaling: TCanvasScaling; name: string; }> = [
    {
        key: '1',
        scaling: 'integer',
        name: 'INTEGER'
    },
    {
        key: '2',
        scaling: 'contain',
        name: 'CONTAIN'
    },
    {
        key: '3',
        scaling: 'fill',
        name: 'FILL'
    },
    {
        key: '4',
        scaling: 'none',
        name: 'NONE'
    },
];
```