DEV Community

Cover image for How to Make Tilemap with Pixalo Engine
Salar Izadi
Salar Izadi

Posted on

How to Make Tilemap with Pixalo Engine

Hello, dev community! I'm excited to introduce you to Pixalo, a versatile and easy-to-use game engine designed for 2D game development. Whether you're a seasoned game developer or just starting out, Pixalo provides the tools you need to create impressive games without the hassle.

If you would like to read about Pixalo, click here.

Website: pixalo.xyz
GitHub: github.com/pixalo/pixalo

Getting Started with Pixalo

Pixalo is built to be user-friendly and efficient. Below, I will show you how to create a simple top-down game using our engine.

Installation

You can import Pixalo conveniently using a CDN link in your HTML or JavaScript file as follows:

import Pixalo from 'https://cdn.jsdelivr.net/gh/pixalo/pixalo@master/dist/pixalo.esm.js';
Enter fullscreen mode Exit fullscreen mode

Setting Up the Game Canvas

First, let's initialize a new Pixalo instance and create a game canvas:

const px = new Pixalo('#canvas', {
    width: innerWidth,
    height: innerHeight,
    camera: {
        zoom: 2.5,
        bounds: {
            x: 0, y: 0,
            width: innerWidth,
            height: innerHeight,
        }
    },
    collision: true,
});

px.start();
Enter fullscreen mode Exit fullscreen mode

Loading Assets

Next, we need to load some assets for our game. Let's prepare the tilemap and character images using loadAsset method:

await px.wait(
    px.loadAsset('tiles', 'tiles', 'https://raw.githubusercontent.com/pixalo/pixalo/refs/heads/main/examples/assets/tiles/tiles.png', {
        tileSize: 64, tiles: {
            grass   : [0, 0],
            dirt    : [1, 0],
            tree    : [2, 0],
            bush    : [4, 0],
            headTree: [3, 0]
        }
    }),
    px.loadAsset('image', 'character', 'https://raw.githubusercontent.com/pixalo/pixalo/refs/heads/main/examples/assets/character.png')
);
Enter fullscreen mode Exit fullscreen mode

Creating the Tile Map

Now, we can create a tile map for our top-down game. This includes defining the layers and tiles:

px.tileMap.create('top-down', {
    layers: {
        bg: px.tileMap.fillBoxWith('G'),
        lvl: [
            '                          ',
            'TTTTTTTTTTTTTTTTTTTTTTTTTT',
            'T             B          T',
            'T  T   B    T     B   T  T',
            'T    B        B          T',
            'T       B         B    T T',
            'T T           T          T',
            'T         B         T    T',
            'T     T     B   T        T',
            'T  B     B         T   B T',
            'T                        T',
            'TTTTTTTTTTTTTTTTTTTTTTTTTT'
        ]
    },
    tiles: {
        G: 'tiles.grass',
        B: {
            tile: 'tiles.bush',
            collision: {
                type: 'solid',
                bounds: [1, 4, 26, 24]
            }
        },
        T: {
            tile: 'tiles.tree',
            parts: [
                {
                    tile: 'tiles.headTree',
                    offsetY: -1
                }
            ],
            collision: {
                type: 'solid',
                bounds: [2, -9, 25, 51]
            }
        }
    }
});
Enter fullscreen mode Exit fullscreen mode

Rendering the Tile Map

Once the tile map is set up, we can render it:

px.tileMap.render('top-down');
Enter fullscreen mode Exit fullscreen mode

Adding a Player

Let’s add a player to the game and set up controls for movement:

const player = px.append('player', {
    x: 80,
    y: 100,
    width: 24,
    height: 30,
    image: 'character',
    collision: true,
    data: {
        speed: 1.5
    }
});

// Camera follows player
px.camera.follow(player);

px.on('update', () => {
    const speedPlayer = player.data('speed');
    let dx = 0, dy = 0;

    if (px.isKeyPressed('left', 'a'))
        dx = -speedPlayer;
    if (px.isKeyPressed('right', 'd'))
        dx = speedPlayer;
    if (px.isKeyPressed('up', 'w'))
        dy = -speedPlayer;
    if (px.isKeyPressed('down', 's'))
        dy = speedPlayer;

    player.move(dx, dy).style('flipX', dx < 0);
});
Enter fullscreen mode Exit fullscreen mode

Conclusion

Pixalo aims to simplify 2D game development without sacrificing power or flexibility. I invite you to try out the engine and create your own games! You can check the website for more documentation and examples.

Feel free to clone the repository on GitHub and contribute to the project. I look forward to hearing your thoughts and seeing the amazing games you create with Pixalo!

Happy coding!

Top comments (0)