🎮 Introducing Pixalo — A Lightweight, Developer-Friendly 2D Game Engine for JavaScript

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
});
px.start();

---

🟦 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.

Comments

[Milad]

Can't wait to try this. Thank you!