# Effects switch

> The "CRT filter: on / off" of a game's options: F turns every screen effect off at once with useGame().setPostProcessEnabled; D, only the dither.

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

The "CRT filter: on / off" of a game's options. The game is shown through two effects: a `crt()` for the whole game, in `createGame`'s `post` chain, and a `dither()` the scene puts on with `usePostProcess`, down to the Mega Drive's eight steps a colour.

F turns every effect off at once, the game's and the scene's, with `useGame().setPostProcessEnabled`. D turns only the dither off, with its own `enabled`. Nothing is forgotten: turn the dither off, then everything off and on again, and the dither stays off.

## 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',
    post: [
        {
            builtin: 'crt'
        }
    ],
});

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

`art/card.ts`:

```ts
import { createPixels, fillCircle, fillGradient, fillPolygon } from 'nacatamalon/pixels';

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

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

    fillGradient(pixels, {
        colors: ['#1b1440', '#6a2a6e', '#e0705a', '#f4c27a']
    });
    fillCircle(pixels, 160, 96, 26, '#ffe6a0');
    fillPolygon(pixels, [
        {
            x: 0,
            y: 112
        },
        {
            x: 70,
            y: 92
        },
        {
            x: 140,
            y: 118
        },
        {
            x: 240,
            y: 100
        },
        {
            x: 240,
            y: 160
        },
        {
            x: 0,
            y: 160
        }
    ], '#2a1a3a');
    fillPolygon(pixels, [
        {
            x: 0,
            y: 136
        },
        {
            x: 110,
            y: 124
        },
        {
            x: 240,
            y: 140
        },
        {
            x: 240,
            y: 160
        },
        {
            x: 0,
            y: 160
        }
    ], '#120a1c');

    return pixels;
};
```

`components/display.ts`:

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

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

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

    const steps = usePostProcess({
        ...dither({
            levels: POST_EFFECTS.COLOR_LEVELS.genesis
        })
    });

    createSprite({
        texture: createPixelTexture(createCard()),
        anchor: {
            x: 0,
            y: 0
        }
    });

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

    const own = createText({
        text: '',
        transform: {
            x: 8,
            y: 20
        },
        tint: '#c9b8e8'
    });

    createText({
        text: 'F ALL   D DITHER',
        transform: {
            x: 8,
            y: 146
        },
        tint: '#c9b8e8'
    });

    const show = () => {
        all.text = game.isPostProcessEnabled() ? 'EFFECTS ON' : 'EFFECTS OFF';
        own.text = steps.enabled ? 'DITHER ON' : 'DITHER OFF';
    };

    show();

    useUpdate(() => {
        if (keys.justPressed('f')) {
            game.setPostProcessEnabled(!game.isPostProcessEnabled());
            show();
        }

        if (keys.justPressed('d')) {
            steps.enabled = !steps.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 = 240;
export const HEIGHT = 160;
```