Building 2D games in JavaScript should be simple — not a constant struggle with complex APIs and endless setup.
That’s exactly why I built Pixalo.
💡 Why I Created Pixalo
I wanted a way to make 2D game development as easy as writing HTML, CSS, or even jQuery — where you can create, animate, and control elements effortlessly without writing dozens of lines of code for a single sprite.
While many JavaScript game engines exist, they often require heavy configurations or WebGL setup.
Pixalo skips the complexity while staying fast, lightweight, and flexible — using optimized rendering techniques and even OffscreenCanvas Workers to maintain excellent FPS, even with many objects on screen.
🚀 What Pixalo Can Do
Pixalo comes packed with everything you need to build smooth, feature-rich 2D games:
- 🏃 Advanced animation support with keyframes
- 🎨 Layered background management
- 📐 Grid system with customizable properties
- 🔄 Sprite sheet and asset management
- 💥 Collision detection
- ⚙️ Physics support powered by the legendary Box2D
- 🎵 Spatial audio controls
- 🗺️ Tile map system for level design
- 🎆 Particle emitter system
- 📸 Screenshot support
- 📹 Camera system (zoom, rotation, cinematic presets)
- 🎚️ Quality control & scaling options
- 🐞 Built-in debugging tools
It’s not just a game engine — you can even use it as a Canvas Editor, drawing and animating anything you want right on the canvas.
🧩 Getting Started
You can use Pixalo either via ESM import or CDN — no build tools required.
import Pixalo from 'https://cdn.jsdelivr.net/gh/pixalo/pixalo@master/dist/pixalo.esm.js';
const px = new Pixalo('#canvas', {
width: innerWidth,
height: innerHeight
});
🟦 Drawing Shapes
Creating shapes in Pixalo is ridiculously simple.
Draw a rectangle:
px.append('myRectangle', {
width: 100,
height: 100,
fill: 'blue',
borderRadius: 6
});
Draw a circle:
px.append('myCircle', {
shape: 'circle',
width: 100,
height: 100,
fill: 'red'
});
Handle click events:
px.find('myRectangle').on('click', e => {
px.append('text', {
x: px.baseWidth / 2,
y: px.baseHeight / 2,
text: 'You clicked on the rectangle',
font: '16px Arial'
});
});
🔺 Polygons Made Easy
Even complex shapes like polygons are straightforward to draw:
const size = 100;
px.append('polygon', {
width: size,
height: size,
x: (px.baseWidth - size) / 2,
y: (px.baseHeight - size) / 2,
fill: '#268984',
shape: 'polygon',
points: [
{x: -size / 2, y: -size / 2},
{x: size / 2, y: -size / 2},
{x: size / 2, y: 0},
{x: 0, y: size / 2},
{x: -size / 2, y: 0}
]
});
🕹️ Example: Player Movement
Here’s a simple player movement example using keyboard controls:
import Pixalo from 'https://cdn.jsdelivr.net/gh/pixalo/pixalo@master/dist/pixalo.esm.js';
const game = new Pixalo('#canvas', {
width : window.innerWidth,
height: window.innerHeight
});
await game.loadAsset('image', 'player', 'https://raw.githubusercontent.com/pixalo/pixalo/refs/heads/main/examples/assets/character.png');
game.start();
const player = game.append('player', {
width: 100,
height: 100,
x: 10,
y: 10,
image: 'player'
});
game.on('update', deltaTime => {
const speed = 150;
const step = speed * (deltaTime / 1000);
let dx = 0, dy = 0;
const leftKey = game.isKeyPressed('left', 'a');
if (leftKey) dx -= step;
if (game.isKeyPressed('right', 'd')) dx += step;
if (game.isKeyPressed('up', 'w')) dy -= step;
if (game.isKeyPressed('down', 's')) dy += step;
player.style('flipX', leftKey).move(dx, dy);
});
🌐 Try Pixalo Yourself
Pixalo is still evolving — WebGL support is coming soon — but it’s already stable, fast, and fun to use.
Whether you’re prototyping or building a full indie game, Pixalo aims to make your workflow smooth and intuitive.
👉 Website: https://pixalo.xyz
👉 GitHub: https://github.com/pixalo/pixalo
💬 Final Thoughts
Pixalo was built with one simple goal:
To make 2D game development feel natural, expressive, and enjoyable — not tedious.
If you love making games in JavaScript and want a fresh, developer-friendly engine, give Pixalo a try and share your feedback. Every contribution and idea helps shape its future.
SOCIAL SHARE CARD GENERATOR