Rpg Stick

Setting Up RPG Stick for Basic Character Movement

RPG Stick is a lightweight 2D stick-figure RPG engine built for the browser. It started as a personal project by a developer who wanted something simpler than Phaser but more flexible than basic HTML5 canvas tutorials. Over time it grew a community around it, mostly on GitHub and a couple of Discord servers. The documentation is incomplete, which is expected, but the core functionality works solidly enough once you figure out how everything connects. You download it from the GitHub repository. Clone the repo or grab the zip, open a terminal in the folder, and run npm install if you plan to use the build tools. Most people skip the build process and just open index.html in their browser, which works fine for testing. The engine loads immediately. There is no server required unless you want multiplayer, which is a separate module anyway. The first thing most people miss is that RPG Stick doesn't come with a visual editor. Everything is code-driven. I spent about an afternoon trying to find a drag-and-drop level builder before realizing one doesn't exist. You write your tile maps as JSON objects or use the built-in grid function to place tiles programmatically. Once I stopped looking for a GUI, things moved much faster.

Here's a minimal player setup that took me about five minutes: var game = new RPGStick({ width: 800, height: 600 });
var player = game.addCharacter("stickman", { x: 400, y: 300 });
player.setAnimation("idle", ["frame1", "frame2"]);
game.start(); That gets a stick figure standing in the middle of the canvas. No movement yet, but it proves the engine is working. Frame data comes from sprite sheets, and RPG Stick expects them to be named consistently. If your animation frames aren't labeled correctly, the character just won't render any animations past idle. This cost me two hours once because I named my walk cycle frames wrong.

Common Pitfalls and What the Docs Don't Cover

The biggest issue people hit early on is collision detection. RPG Stick uses AABB (axis-aligned bounding box) collision by default, which means your characters and walls don't account for diagonals. A stick figure can clip through a corner at certain speeds if you don't slow it down or add a proper collision margin. I ended up adding a 4-pixel padding to every character's collision box, which completely eliminated the clipping problem without making movement feel floaty. Another thing the documentation glosses over is how the event system works. RPG Stick has an event bus, but it's not intuitive. You have to explicitly subscribe to events on the game instance, not on individual objects. If you try to listen for a collision event on a single character, it won't fire. You listen on the game object itself and then filter by entity ID inside the callback. I had a bug where enemies weren't triggering death events, and the problem turned out to be exactly this. Here's what that looks like in practice:

game.on("collision", function(event) {
  if (event.entity.id === "enemy_1") {
    enemy_1.takeDamage(event.damage);
  }
}); Performance is another area where RPG Stick shows its limits. It runs fine with maybe twenty active entities on screen before frame drops become noticeable on older machines. If you're building something with a lot of moving parts, you'll want to implement entity pooling rather than constantly creating and destroying objects. I added a simple pool manager to my project and cut the garbage collection spikes by about eighty percent. The difference was immediately noticeable during combat-heavy scenes. The lighting system is interesting but not very well optimized. It uses a simple radial gradient approach for torch and lantern effects, which looks decent but adds CPU overhead every frame. I disabled it entirely for a top-down dungeon crawler and swapped to pre-baked shadow sprites instead. The result looked just as atmospheric with a fraction of the performance cost.

Building a Simple Combat Loop

Combat in RPG Stick is entirely up to you to design. There is no built-in damage formula or stat system. You need to create health bars, attack states, and cooldown timers yourself. The engine gives you the hooks but nothing more. I built mine around a simple state machine. Each character has states for idle, walking, attacking, and hurt. Transitions happen based on input and collision events. When the player presses the attack key, the character switches to the attack state, a hitbox appears in front of them for a few frames, and any enemy within that range takes damage. The attack state has a short cooldown before you can switch back to idle or walk. Without the cooldown, players can spam attacks endlessly, which breaks the entire pacing of the game. Enemy AI is where most people struggle. RPG Stick doesn't include any pathfinding. I ended up using a basic grid-based BFS (breadth-first search) implementation for enemies that need to navigate around walls. It's not the most efficient solution, but it works for small maps. For larger levels, you'd want to bake navigation meshes at load time instead of calculating paths every frame.

One counter-intuitive thing I learned is that you should separate your update loop from your render loop. RPG Stick does this by default through requestAnimationFrame, but if you start adding custom game loops for things like AI or physics, they can get out of sync. I had a bug where enemies moved smoothly but their animations stuttered because the animation frames were tied to the render rate instead of the logic rate. Fixing it meant running game logic at a fixed tick rate and interpolating visuals between ticks. That alone made everything feel significantly smoother. If you're coming from other engines like Godot or Unity, RPG Stick will feel bare bones. It doesn't hand-hold you through anything. But for what it is, it's a reasonable starting point if you want to make a simple 2D stick figure RPG without the overhead of a full game engine. Just expect to write more code than you might at first realize.