Primeros pasos

La mayoría de las funciones de Floaty se parecen mucho a las funciones de Pico-8. La diferencia principal es que en lugar de funciones globales, Floaty usa un método scope() que proporciona todas las funciones del motor. Esto funciona mejor en un contexto web donde pueden existir múltiples elementos en la misma página.

La forma más rápida de empezar es usar el siguiente fragmento como punto de partida:

import Engine from 'https://floaty.dev/engine-v2.js';

const engine = new Engine();

engine.scope(({ start, cls, spr }) => {
    const sprites = {
        player: [
            0, 0, 0, 0, 0, 0, 0, 0,
            0, 0, 7, 7, 7, 7, 0, 0,
            0, 7, 7, 7, 7, 7, 7, 0,
            7, 7, 0, 7, 7, 0, 7, 7,
            7, 7, 7, 7, 7, 7, 7, 7,
            0, 7, 7, 7, 7, 7, 7, 0,
            0, 0, 7, 7, 7, 7, 0, 0,
            0, 0, 0, 0, 0, 0, 0, 0,
        ],
    };

    const sounds = {};

    function draw() {
        cls(1);
        spr('player', 60, 60);
    }

    start({
        target: document.querySelector('.game'),
        sprites,
        sounds,
        draw,
    });
});

El método scope()

En Pico-8, funciones como cls(), spr() y btn() siempre están disponibles. En Floaty, accedes a estas mismas funciones a través del método scope():

engine.scope(({ start, cls, spr, btn, text }) => {
    // All engine functions are available in this closure
    // No global pollution, no this.engine references needed

    start({
        target: document.querySelector('.game'),
        draw() {
            cls();
            text('hello world', 40, 60, 7);
        }
    });
});

Listas las funciones que quieres usar entre paréntesis y se vuelven disponibles dentro de tu código. Este enfoque funciona bien para JavaScript ejecutándose en un navegador web donde muchos scripts diferentes pueden estar corriendo en la misma página.

Múltiples juegos

A diferencia de Pico-8 donde ejecutas un juego a la vez, puedes ejecutar múltiples juegos de Floaty en la misma página web simultáneamente:

// First game
const engine1 = new Engine();
engine1.scope(({ start, cls }) => {
    start({
        target: document.querySelector('.game1'),
        draw() { cls(8); }
    });
});

// Second game - no conflicts!
const engine2 = new Engine();
engine2.scope(({ start, cls }) => {
    start({
        target: document.querySelector('.game2'),
        draw() { cls(12); }
    });
});

Sistema de audio

Como Pico-8, puedes crear sonidos usando arrays de frecuencias. A diferencia de Pico-8, también puedes cargar archivos de audio directamente (wav/ogg/mp3). La función sfx() soporta tres formatos:

engine.scope(({ sfx }) => {
    // Synthesized sound (array format)
    const sounds = {
        jump: [523, 587, 659],
    };

    // Audio file (wav/ogg/mp3)
    sfx('/sounds/explosion.wav');

    // Data URI
    sfx('data:audio/wav;base64,UklGRiQAAABXQVZFZm10...');
});

Puedes reproducir música de fondo con la función music():

engine.scope(({ music }) => {
    // Play background music at 50% volume
    music('/music/theme.mp3', { volume: 0.5 });

    // Stop the music
    music(false);
});

Carga de recursos remotos

Usa queue() para marcar sprites o sonidos para carga diferida, luego llama a await load() dentro de un init() asíncrono para obtenerlos todos antes de que comience el juego:

engine.scope(({ start, queue, load, cls, text }) => {
    const sprites = {
        player: queue('https://example.com/player-sprite.json'),
    };

    const sounds = {
        jump: queue('https://example.com/jump-sound.json'),
    };

    start({
        target: document.querySelector('.game'),
        sprites,
        sounds,
        async init() {
            await load();
        },
        draw() { /* ... */ },
    });
});

Valores por defecto

Como Pico-8, Floaty tiene valores por defecto sensatos para que empieces rápidamente:

Tamaño de pantalla

La pantalla tiene 128 píxeles de ancho y 128 píxeles de alto. Si el contenedor es más grande, el canvas se escalará para ajustarse manteniendo una relación de aspecto cuadrada. Tu juego siempre se verá pixelado, incluso si cada píxel es en realidad un bloque cuadrado de píxeles.

El resto de la pantalla alrededor del canvas del juego será del mismo color que el color 0. Si quieres cambiarlo, puedes proporcionar un color de fondo diferente a la función start():

engine.scope(({ start }) => {
    start({
        target: document.querySelector('.game'),
        background: '#FF77A8', // any CSS color
        draw() { /* ... */ }
    });
});

Puede ser complicado hacer que el contenedor se estire, especialmente si no estás muy familiarizado con CSS o HTML. Prueba algo así:

<div style="width: 100vw; height: 100vh">
    <div class="game" style="width: 100%; height: 100%"></div>
</div>

Sprites

Los sprites son de 8x8 píxeles o un múltiplo. Los sprites más grandes se dibujan usando parámetros opcionales en la función spr. Usa este patrón para definir sprites:

const sprites = {
    player: [
        0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 7, 7, 7, 7, 0, 0,
        0, 7, 7, 7, 7, 7, 7, 0,
        7, 7, 0, 7, 7, 0, 7, 7,
        7, 7, 7, 7, 7, 7, 7, 7,
        0, 7, 7, 7, 7, 7, 7, 0,
        0, 0, 7, 7, 7, 7, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0,
    ],
};

En los arrays de sprites, -1 significa que no se dibuja color en ese píxel (transparente). Los demás números (0-15) corresponden a colores de la paleta.

Colores

Como Pico-8, Floaty usa una paleta de 16 colores: