DEV Community: lajbel

[EN] How to separate my files in Kaboom.js

lajbel — Wed, 17 Jan 2024 01:33:55 +0000

It's normal that as our games grow in size, we want to maintain better file organization. In this post, you'll learn a practical way to apply it to your projects.

Initial Project

First, let's put ourselves in the situation of a newly started project:


// main.js
// Initialize our Kaboom instance
const k = kaboom({
    width: 320,
    height: 240,
    scale: 2,
    background: [0, 0, 0],
});

// Load assets
k.loadSprite("player", "sprites/player.png");
k.loadSprite("enemy", "sprites/enemy.png");
k.loadSound("shoot", "sounds/shoot.wav");
// ...

// Our scenes
k.scene("main", () => {
    // main scene code
});

k.scene("gameover", () => {
    // gameover scene code
});

// Initial scene
k.go("main");`

You can already imagine how much code these files can end up having.

Exporting our Instance

Before we start separating our files, we should begin by exporting our Kaboom instance. I will do this using export k:

// main.js
export const k = kaboom();
// ...

If you don't use the prefix

If you use global functions, it is equally necessary to perform the export step. Then you can continue using global functions (e.g., add() instead of k.add()).

Separating our Asset Loading

The easiest way to start is by separating the file imports; it will take a lot of lines off our shoulders. We will create a file where we will have the asset loading, for example, loader.js


// loader.js
import { k } from "./main";

// It is important to export our function
export const loadAssets = () => {
    k.loadSprite("player", "sprites/player.png");
    k.loadSprite("enemy", "sprites/enemy.png");
    k.loadSprite("bullet", "sprites/bullet.png");
    k.loadSprite("gun", "sprites/gun.png");
    k.loadSound("shoot", "sounds/shoot.wav");
}

Now, we import it into our main.js file


// main.js
import kaboom from "kaboom.js";
import { loadAssets } from "./loader.js";

export const k = kaboom({
    width: 320,
    height: 240,
    scale: 2,
    background: [0, 0, 0],
});

loadAssets();

k.scene("main", () => { /*...*/ });
k.scene("gameover", () => { /*...*/ });

k.go("main");

This way, we are already loading our assets from a different file. We use a function because we need to execute that code after the Kaboom instance is created; you will see that it is a pattern that repeats.

Separating our Scenes

The next logical step will be to separate our scenes, inside a folder, for example, scenes/, and from here, we will put our files. Let's see an example with the main scene.

// scenes/main.js
import { k } from "../main";

// Export a function, which will simply create the scene
export const loadMainScene = () => k.scene("main", () => {
    const bean = k.add([
        k.pos(20, 20),
        k.sprite("bean"),
    ]);

    const gun = bean.add([
        k.pos(0, 0),
        k.sprite("gun"),
    ]);
});

And we can replicate this for multiple scenes. Now, we simply load them in our main file.


// main.js
import kaboom from "kaboom.js";
import { loadAssets } from "./loader.js";
import { loadMainScene } from "./scenes/main.js";
import { loadGameOverScene } from "./scenes/gameover.js"

export const k = kaboom({
    width: 320,
    height: 240,
    scale: 2,
    background: [0, 0, 0],
});

loadAssets();
loadMainScene();
loadGameOverScene();

k.go("main");

This way, we have modularized our different scenes; our code starts to be more organized.

I will write a blog about how to separate objects soon since I think it's an extensive topic, and there are many ways to organize it. This is my first tutorial blog; I hope you can support it.

[ES] Como separar mis archivos en Kaboom.js

lajbel — Wed, 17 Jan 2024 00:35:39 +0000

Es normal que a medida que nuestros juegos crecen en tamaño, queramos mantener una mejor organización de archivos. En este post aprenderás una manera práctica de aplicarlo en tus proyectos.

Proyecto inicial

Primero, vamos a ponernos en la situación de un proyecto recién iniciado:

// main.js
// Iniciamos nuestra instancia de Kaboom
const k = kaboom({
    width: 320,
    height: 240,
    scale: 2,
    background: [ 0, 0, 0, ],
});

// Cargamos assets
k.loadSprite("player", "sprites/player.png");
k.loadSprite("enemy", "sprites/enemy.png");
k.loadSound("shoot", "sounds/shoot.wav");
// ...

// Nuestras escenas
k.scene("main", () => {
    // main scene code
});

k.scene("gameover", () => {
    // gameover scene code
});

// Escena inicial
k.go("main");

Ya podrás imaginar cuanto código pueden llegar a tener estos archivos.

Exportando nuestra instancia

Antes de empezar a separar nuestros archivos, deberíamos empezar exportando nuestra instancia de Kaboom, yo lo haré usando export k:

// main.js
export const k = kaboom();
// ...

Si no utilizas el prefijo

Si usas las funciones globales, es igualmente necesario que hagas el paso de la exportación, luego puedes continuar usando las funciones globales, (ej: add() en vez de k.add())

Separar nuestra carga de assets

Lo más fácil para iniciar, es separar la importación de archivos, nos va a quitar muchas líneas de encima. Crearemos un archivo donde tendremos la carga de assets, por ejemplo, loader.js

// loader.js
import { k } from "./main";

// Es importante exportar nuestra función
export const loadAssets = () => {
    k.loadSprite("player", "sprites/player.png");
    k.loadSprite("enemy", "sprites/enemy.png");
    k.loadSprite("bullet", "sprites/bullet.png");
    k.loadSprite("gun", "sprites/gun.png");
    k.loadSound("shoot", "sounds/shoot.wav");
}

Ahora, importaremos en nuestro archivo main.js

// main.js
import kaboom from "kaboom.js";
import { loadAssets } from "./loader.js";

const k = kaboom({
    width: 320,
    height: 240,
    scale: 2,
    background: [ 0, 0, 0, ],
});

loadAssets();

k.scene("main", () => { /*...*/ });
k.scene("gameover", () => { /*...*/ });

k.go("main");

De esta manera ya estaremos cargando nuestros assets desde un archivo diferente. Utilizamos una función, ya que necesitamos ejecutar ese código luego de la creación de la instancia de Kaboom, vas a ver que es un patrón que se repite.

Separar nuestras escenas

El siguiente paso lógico será separar nuestras escenas, dentro de una carpeta, por ejemplo scenes/, de aquí, pondremos nuestros archivos, veamos un ejemplo con la escena main.

// scenes/main.js
import { k } from "../main";

// Exportamos una función, la cual simplemente creara la escena
export const loadMainScene = () => k.scene("main", () => {
    const bean = k.add([
        k.pos(20, 20),
        k.sprite("bean"),
    ]);

    const gun = bean.add([
        k.pos(0, 0),
        k.sprite("gun"),
    ]);
});

Y esto mismo lo podemos replicar en múltiples escenas. Ahora simplemente las cargamos en nuestro archivo principal.

// main.js
import kaboom from "kaboom.js";
import { loadAssets } from "./loader.js";
import { loadMainScene } from "./scenes/main.js";
import { loadGameOverScene } from "./scenes/gameover.js"

const k = kaboom({
    width: 320,
    height: 240,
    scale: 2,
    background: [ 0, 0, 0, ],
});

loadAssets();
loadMainScene();
loadGameOverScene();

k.go("main");

De esta manera, ya tendremos modulados nuestras distintas escenas, nuestro código empieza a ser más ordenado.

Haré un blog acerca de como separar objetos próximamente, ya que creo que es un tema extendido, ya que hay muchas formas de organizarlo. Este es mi primer blog tutorial, espero puedas darle apoyo.