Kyle M

Posted on Mar 27 • Originally published at blog.makko.ai

From Alignment to Hitboxes: The Full 2D Pixel Art Character Pipeline (Week of March 24)

#ai #gamedev #pixelart #indiedev

This post originally appeared on the Makko AI blog.

Most pixel art tutorials treat alignment, anchor points, debug positioning, and hitboxes as four separate topics. This week we treated them as one. Every piece of content built directly on the last, covering the complete pipeline any solo developer needs to get a 2D character working correctly in a game engine.

We are walking through this week in reverse, starting with Friday's payoff and working backwards to show how each day's content set it up. This is part of the broader one character, two games series — showing how a single 2D character created in Makko Art Studio can power completely different games without rebuilding the art from scratch.

Friday: hitbox alignment, the payoff of the whole pipeline

Friday's video is the fourth episode in the Horror Platformer series featuring Granny's Night-Terror and its playable character Grandma Elara. It is also the payoff of everything this week built toward.

Attacks that miss enemies standing directly in front of the player. A character that clips through geometry it should fit through. These are the hitbox problems that make a 2D game feel broken even when the art, animation, and code are all technically correct. The cause is almost always the same: a hitbox configured for the wrong animation state, sized to the maximum extent of the character rather than the majority state, or never updated after the animation was changed.

The video walks through configuring hitboxes per animation state in Makko's Alignment Editor. The core rule: fit the hitbox to the majority state of the animation, not the maximum extent. A character whose arm extends forward during an attack should not have a hitbox that covers the fully extended position for every frame of the cycle. That produces hits that register before the animation looks like a hit, which feels wrong even if the player cannot articulate exactly why.

The episode closes the full series arc: one pixel art character, two games, zero duplication. Everything from alignment to hitboxes, built once, configured per game through the manifest system.

Thursday: debug collision boxes, making the invisible visible

Hitbox configuration only works if you can see what the engine is doing. Floating or buried sprites are almost never a pure art problem. They are a positioning problem, and you cannot fix what you cannot see.

Enabling visual debug collision boxes during runtime makes the engine's understanding of your character visible. If the collision box is centered instead of aligned to the feet, that is the problem. If the box is not moving with the sprite, that is the problem. If the box is sized for one animation state but not updated for another, that is where attacks miss and characters clip through geometry they should pass through cleanly.

The fix is always the same: drag, reposition, lock it in, test again. You need to see what the engine sees before you can configure hitboxes correctly.

Wednesday: anchor points, the single pixel that controls everything

Before you can diagnose positioning with debug boxes, the anchor point has to be set correctly. An anchor point is the single pixel the engine uses to calculate position, rotation, and collision.

Most engines default to the center of the sprite rather than the feet. The result is characters that float above the ground by exactly half their height, sink into the ground by exactly half their height, or jitter unpredictably between animation frames. None of those are art problems. They are anchor point problems.

Makko lets you set the anchor point once at the manifest level and it updates automatically across every frame in every animation state. This is a small thing that has a large practical effect on how long it takes to get a 2D character feeling right in-engine.

Tuesday: two posts, one underlying question

Tuesday was the heaviest publishing day of the week. Two posts, two completely different angles on the same underlying question: what does it actually take to get game-ready art out of an AI tool and into a working 2D game?

The Art Studio deep dive answered the workflow question directly. Most solo developers are running four separate tools just to get one character into their engine. Makko Art Studio replaces that entire stack. Describe what you want, and the output arrives with transparent backgrounds, animation frames, and the correct file format already handled.

The second post was a devlog from Tony Valcarcel, one of Makko's co-founders, documenting how he built over 100 unique card assets for Sector Scavengers, a roguelike salvage game, in 7 days for under $500 with no dedicated artist on the team.

blog.makko.ai

Monday: character alignment, where the pipeline starts

Everything this week traced back to Monday's post. Perfect art and animation can still look completely wrong in-engine if alignment is off. A character that floats above platforms, sinks into the ground, or shifts position between animation frames is almost never an art problem. It is an alignment problem.

Monday's post established the three variables that have to work together: anchor point, scale, and position. Makko's manifest puts all three in a single editor so you can see exactly what you are changing and what effect it has before you commit.

If alignment is wrong at the manifest level, no amount of correct anchor point or hitbox work will fix how the character behaves in-game.

The complete pipeline in order

Step 1: Alignment. Anchor point, scale, and position must be correct at the manifest level first.

Step 2: Anchor point. Set the anchor to the character's feet. Set it once and it propagates across every frame automatically.

Step 3: Debug collision boxes. Enable them during runtime before configuring hitboxes. Diagnose rather than guess.

Step 4: Hitboxes per animation state. Fit to the majority state, not the maximum extent. Test with debug boxes active.

Everything published this week

Start Building Now at Makko AI

For technical walkthroughs and live demos, visit the Makko YouTube channel.

DEV Community