# Console screens

> SCREEN.CONSOLES.snes: 256 × 224 with pixels 8:7, as a television showed them. A disc drawn for the TV is round only with the TV's pixels.

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

`SCREEN.CONSOLES.snes` spread into `createGame`: 256 × 224 pixels, 60 pictures a second, and pixels 8:7 (`pixelAspect`), a little wider than tall, as a 4:3 television showed the NES and the SNES. With `scaling: 'integer'` the rows stay a whole multiple and the columns take that times 8/7: the television's shape exactly.

The artists of the time drew for that television. The green disc was drawn for it, an eighth narrower than tall in pixels, and with the television's pixels it is round; the yellow one was drawn for square pixels. Press T to switch the shape (`useGame().setPixelAspect`): only the size on screen changes, the game draws the same pixels. C puts a `crt()` on top, which hides that the columns are not all the same width.

## Code

`index.ts`:

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

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

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

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

`art/card.ts`:

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

import type { TColor } from 'nacatamalon';
import type { TPixels } from 'nacatamalon/pixels';
import * as Settings from '../settings';

const disc = (pixels: TPixels, cx: number, cy: number, rx: number, ry: number, color: TColor) => {
    for (let y = -ry;y <= ry;y++) {
        const half = Math.round(rx * Math.sqrt(1 - (y / ry) ** 2));

        fillRect(pixels, cx - half, cy + y, half * 2, 1, color);
    }
};

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

    fillChecker(pixels, 16, '#232a52', '#1b1f3a');
    disc(pixels, 72, 112, 48, 48, getColor('#f2d16b'));
    disc(pixels, 184, 112, 42, 48, getColor('#7be38f'));

    return pixels;
};
```

`components/display.ts`:

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

import { createCard } from '../art/card';

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

    const tube = usePostProcess({
        ...crt(),
        enabled: false
    });

    createSprite({
        texture: createPixelTexture(createCard()),
        anchor: {
            x: 0,
            y: 0
        }
    });
    createText({
        text: 'SQUARE',
        transform: {
            x: 48,
            y: 170
        },
        tint: '#f2d16b'
    });
    createText({
        text: 'FOR THE TV',
        transform: {
            x: 144,
            y: 170
        },
        tint: '#7be38f'
    });
    createText({
        text: 'T SHAPE   C TV',
        transform: {
            x: 8,
            y: 206
        },
        tint: '#9aa3c7'
    });

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

    const show = () => {
        const square = game.getPixelAspect() === 1;

        label.text = (square ? 'SQUARE PIXELS' : 'TELEVISION PIXELS 8:7') + (tube.enabled ? ' + CRT' : '');
    };

    show();

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

        if (keys.justPressed('c')) {
            tube.enabled = !tube.enabled;
            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
export const WIDTH = 256;
export const HEIGHT = 224;
```