Cómo distribuir tus juegos

Este tutorial fue escrito en febrero de 2026, para la v2 del motor.

Has creado un juego — ¿y ahora qué? Este tutorial cubre todo lo que necesitas saber sobre exportar tu juego Floaty y llevarlo a diferentes plataformas.

Exportar tu juego

Cuando tengas algo con lo que estés contento, puedes exportarlo como un archivo HTML independiente. En la barra de herramientas del editor del playground, haz clic en el botón Exportar (entre Captura y Ejecutar) para descargar tu juego.

Lo que obtienes

El archivo exportado es un documento HTML único y autónomo. El código del motor, tu código del juego y el CSS mínimo están todos integrados — sin dependencias externas, sin necesidad de solicitudes de red para ejecutarlo.

Así se ve la estructura:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Game - Author</title>
    <style>
        html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
        .game { width: 100vw; height: 100vh; }
    </style>
</head>
<body>
    <div class="game"></div>
    <script type="module">
        // Engine code (inlined automatically)
        // Your game code (inlined automatically)
    </script>
</body>
</html>

Puedes abrir el archivo exportado directamente en cualquier navegador para jugar tu juego a pantalla completa. Haz doble clic en el archivo o arrástralo a una ventana del navegador.

Nota: Si tu juego usa queue() para cargar recursos remotos, esas URLs deben ser accesibles desde donde se abra el archivo. Consulta la sección Servicio de recursos a continuación para más detalles.

Servicio de recursos

Al distribuir tu juego fuera de Floaty, cómo manejas los sprites y sonidos importa. Hay tres enfoques, cada uno con diferentes ventajas y desventajas.

Recursos en línea

Los sprites definidos como arrays y los sonidos definidos como arrays de frecuencias se integran directamente en tu código. No necesitan solicitudes de red y funcionan en todas partes — en el navegador, desde file://, en Electron, en dispositivos móviles y en itch.io.

engine.scope(({ start, cls, spr, sfx }) => {
    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 = {
        jump: [523, 587, 659],
    };

    // No network needed — works from file://, itch.io, Steam, mobile
    start({
        target: document.querySelector('.game'),
        sprites,
        sounds,
        draw() {
            cls(1);
            spr('player', 60, 60);
        },
    });
});

Este es el enfoque más simple y portátil, especialmente para juegos pequeños.

Recursos remotos con queue() y load()

Las funciones queue() y load() (cubiertas en la sección Carga de recursos remotos anterior) usan fetch() internamente para descargar recursos. Esto funciona muy bien cuando tu juego se sirve desde un servidor web, pero hay un detalle importante para juegos exportados:

Importante: La función queue() usa fetch() para descargar recursos. Esto requiere una URL HTTP o HTTPS. Si abres un archivo HTML exportado directamente desde tu sistema de archivos (el protocolo file://), fetch() fallará. Usa recursos en línea, URIs de datos o sirve el archivo desde un servidor web.

Si usas queue() en un juego exportado, asegúrate de que las URLs sean absolutas:

engine.scope(({ start, queue, load, cls, spr }) => {
    const sprites = {
        // Must be absolute HTTP/HTTPS URLs — not relative paths
        tileset: queue('https://your-server.com/assets/tileset.json'),
    };

    const sounds = {
        music: queue('https://your-server.com/assets/music.ogg'),
    };

    start({
        target: document.querySelector('.game'),
        sprites,
        sounds,
        async init() {
            await load();
        },
        draw() {
            cls(1);
            spr('tileset', 0, 0);
        },
    });
});

URIs de datos

Los recursos binarios como archivos de audio se pueden codificar en base64 como URIs de datos. Esto elimina la dependencia de la red pero aumenta el tamaño del archivo (la codificación base64 añade aproximadamente un 33% de sobrecarga).

engine.scope(({ start, cls, sfx }) => {
    const sounds = {
        // Base64-encoded audio — no network needed
        beep: 'data:audio/wav;base64,UklGRl9vT19...',
    };

    start({
        target: document.querySelector('.game'),
        sounds,
        draw() {
            cls(1);
            // sfx('beep') works without any network access
        },
    });
});

Qué enfoque usar

Usa arrays en línea para juegos pequeños — sprites como arrays de píxeles y sonidos como arrays de frecuencias funcionan en todas partes sin configuración. Usa URLs HTTP absolutas con queue() cuando tus recursos estén alojados en un CDN o tu propio servidor. Usa URIs de datos para integrar recursos binarios (como archivos de audio) directamente en tu código sin necesidad de un servidor.

Escritorio con Electron

Electron empaqueta aplicaciones web como aplicaciones de escritorio nativas para Windows, macOS y Linux. Tu juego Floaty exportado se ejecuta dentro de Chromium, así que todas las APIs web funcionan exactamente como en un navegador.

Configuración del proyecto

Crea un nuevo directorio para tu proyecto de escritorio
Ejecuta npm init -y
Ejecuta npm install --save-dev electron
Crea un archivo main.js con el punto de entrada mostrado a continuación
Coloca tu archivo HTML exportado como game.html en la raíz del proyecto
Actualiza tu package.json para que coincida con el ejemplo mostrado a continuación

Este es el punto de entrada main.js:

const { app, BrowserWindow } = require('electron');

function createWindow() {
    const win = new BrowserWindow({
        width: 512,
        height: 512,
        useContentSize: true,
        autoHideMenuBar: true,
    });

    win.loadFile('game.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
    app.quit();
});

Y el package.json:

{
    "name": "my-floaty-game",
    "version": "1.0.0",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    },
    "devDependencies": {
        "electron": "^35.0.0"
    }
}

Ejecución local

Ejecuta npx electron . desde el directorio de tu proyecto para lanzar el juego en una ventana de escritorio.

Compilación para distribución

Para empaquetar tu juego como un ejecutable independiente, usa Electron Forge :

Ejecuta npm install --save-dev @electron/forge
Ejecuta npx electron-forge package para crear una aplicación empaquetada
Ejecuta npx electron-forge make para crear instaladores específicos de cada plataforma

Consejos

Electron usa Chromium, así que fetch() y queue() funcionan para recursos remotos — sin limitaciones de file://
Configura el tamaño de la ventana a un múltiplo de 128 (por ejemplo, 512x512) para un escalado de píxeles limpio
autoHideMenuBar: true oculta la barra de menú para una experiencia de juego más limpia

Dispositivos móviles con Capacitor

Capacitor envuelve aplicaciones web en un contenedor nativo para iOS y Android. Tu juego Floaty exportado se ejecuta dentro de un WebView.

Configuración del proyecto

Crea un nuevo directorio para tu proyecto móvil
Ejecuta npm init -y
Ejecuta npm install @capacitor/core @capacitor/cli
Ejecuta npx cap init
Coloca tu archivo HTML exportado como www/index.html
Actualiza tu capacitor.config.ts para que coincida:

// capacitor.config.ts
const config = {
    appId: 'com.example.mygame',
    appName: 'My Floaty Game',
    webDir: 'www',
    server: {
        androidScheme: 'https',
    },
};

export default config;

Añade plataformas: npx cap add ios y/o npx cap add android

Compilación y ejecución

iOS: Ejecuta npx cap open ios para abrir el proyecto en Xcode (requiere macOS)
Android: Ejecuta npx cap open android para abrir el proyecto en Android Studio

Desde allí, compila y ejecuta usando las herramientas estándar del IDE.

Importante: Los WebViews móviles usan capacitor:// (iOS) o https://localhost (Android) como origen, no file://. Esto significa que fetch() y queue() pueden funcionar para recursos servidos desde el directorio www/, pero las URLs externas pueden necesitar configuración adicional. Prueba a fondo en cada plataforma.

Consejos

Los recursos en línea son el enfoque más fiable para dispositivos móviles
La entrada táctil se mapea a eventos de ratón en Floaty (click, mousedown, etc.)
Prueba en dispositivos reales — los emuladores pueden no representar con precisión el rendimiento
Considera bloquear la orientación de pantalla usando el plugin @capacitor/screen-orientation de Capacitor

Publicar en itch.io

itch.io es el mayor mercado de juegos independientes. Es gratis publicar y soporta juegos HTML5 de forma nativa — tu juego Floaty exportado se puede jugar directamente en el navegador.

Preparar tu juego

Exporta tu juego usando el botón Exportar en el editor del playground
Abre el archivo HTML exportado en un navegador y verifica que funciona
Si tu juego usa queue(), asegúrate de que las URLs sean absolutas y estén accesibles públicamente

Subir

Crea una cuenta en itch.io
Haz clic en "Dashboard" y luego en "Create new project"
Configura "Kind of project" como "HTML"
Sube tu archivo HTML exportado (o un zip que lo contenga)
Marca "This file will be played in the browser"
Configura las dimensiones del viewport (recomendado: un múltiplo de 128, por ejemplo, 512x512)
Guarda y publica

Consejos

Configura el viewport a un múltiplo de 128 para un escalado de píxeles limpio
itch.io sirve juegos sobre HTTPS, así que queue() con URLs absolutas funciona
Si necesitas múltiples archivos, comprímelos en un zip con el archivo HTML llamado index.html
Prueba tu juego en la vista previa del embed de itch.io antes de publicar

Publicar en Steam

Steam no ejecuta juegos HTML5 de forma nativa. Para publicar en Steam, primero envuelve tu juego con Electron (consulta la sección Escritorio con Electron anterior) y luego sube la compilación empaquetada.

Proceso general

Envuelve tu juego usando Electron y compílalo con Electron Forge
Crea una cuenta en Steamworks (requiere un crédito de $100 por aplicación)
Configura tu aplicación en el panel de Steamworks
Sube tu compilación de Electron usando steamcmd
Configura las opciones de lanzamiento para apuntar a tu ejecutable de Electron
Prueba y publica

Nota: La integración con Steam (logros, tablas de clasificación, etc.) requiere el SDK de Steamworks, que es una biblioteca en C++. Integrarlo con una aplicación Electron es posible mediante paquetes como steamworks.js pero está fuera del alcance de esta guía.