Instalación

La forma más sencilla de utilizar KAPLAY es la CLI tool, la cual genera el proyecto por ti.

$ npx create-kaplay mygame
$ cd mygame
$ npm run dev

Esto va a crear tu juego en el directorio mygame, y va a iniciar un servidor de desarrollo para que puedas previsualizar tu juego. Si editas src/main.js y refrescas la página, verás tus cambios.

Para ver todas las opciones, ejecuta:

$ create-kaplay --help

Usando un CDN

Si prefieres usar KAPLAY sin ningún bundler, puedes usar un CDN para incluirlo directamente en tu archivo HTML, o importarlo con módulos ECMAScript.

<script type="module">
    // importa kaplay
    import kaplay from "https://unpkg.com/kaplay@3001.0.0-alpha.19/dist/kaboom.mjs";

    // inicia kaplay

    kaplay();

    </script>

También puedes simplemente incluirlo con una etiqueta <script>.

<script src="https://unpkg.com/kaplay@3001.0.0-alpha.19/dist/kaboom.js"></script>

<script>
    kaplay();
</script>

Configura tu propio entorno Node.js

Con Node.js y npm es más fácil tener otros paquetes y usar control de versiones, también es más fácil obtener soporte de autocompletado de TypeScript, pero requiere un poco más de configuración. (Esta es la forma de create-kaplay)

$ npm install kaplay

Vas a necesitar un bundler para usar Kaboom con NPM. Hay muchas opciones como:

esbuild,
webpack,
parcel,
vitejs,

Este es un ejemplo corto de cómo usar Kaboom con “esbuild”.

Una vez que tengas esbuild instalado, y tengas esto en un archivo .js o .ts:

import kaplay from "kaplay";

kaplay();

Solo ejecuta:

$ esbuild game.js --bundle > build.js

y va a encontrar el paquete de KAPLAY y lo va a incluir en el archivo build.js, incluye build.js en tu HTML y listo. Siéntete libre de automatizar este proceso.

Cargando assets

Tal vez hayas encontrado errores al intentar loadSprite() desde el sistema de archivos local, eso es porque el navegador no permite cargar archivos locales con JavaScript. Para evitar eso, necesitarás usar un servidor de archivos estáticos que sirva los archivos a través de HTTP. Hay muchos programas que te ayudan a hacer eso.

$ python3 -m http.server si tienes python3 instalado
$ python -m SimpleHTTPServer si tienes python2 instalado
$ serve si tienes serve instalado
$ caddy file-server si tienes caddy instalado

Vamos a decir que tienes una estructura de carpetas como esta:

.
├── sprites
│   ├── froggy.png
│   └── cloud.png
├── sounds
│   └── horse.mp3
└── index.html

y tienes el servidor de archivos estáticos corriendo en el puerto 8000, simplemente ve a http://localhost:8000/index.html, y deberías ser capaz de cargar cosas desde rutas relativas como

loadSprite("froggy", "sprites/froggy.png");
loadSound("horse", "sounds/horse.mp3");

Para aprender más, revisa esta documentación de MDN.