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';
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();
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')
);
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]
}
}
}
});
Rendering the Tile Map
Once the tile map is set up, we can render it:
px.tileMap.render('top-down');
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);
});
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)