The Hero

March 9, 2026 Tutorial Series

Time to create your HERO! 🦸 Every legendary game needs a protagonist - someone the player connects with, controls, and cheers for. Whether it’s Mario jumping through pipes, Link exploring Hyrule, or Celeste climbing mountains, the hero makes the game come alive. You’re about to bring your first character into your tile-based world!

Look at that! Your hero (the red square) is standing proudly in your game world! 🔥

CREATING YOUR HERO OBJECT

What doesn’t look mighty? That red square is your HERO! 💪 Sure, they might not look like Link or Mario yet, but every legendary character started as simple shapes. The beauty of game development is that you can make this hero uniquely yours!

Modern Hero Setup: Let’s create a hero object that holds all our character’s data:

// Hero object - the star of your game!
const hero = {
    // Tile-based position (which tile are we standing on?)
    tileX: 2,
    tileY: 1,
    
    // Pixel position (exact screen coordinates)
    x: 0,
    y: 0,
    
    // Size (for collision detection)
    width: 20,
    height: 20,
    
    // PixiJS sprite (we'll create this next)
    sprite: null,
    
    // Game properties
    speed: 2,
    health: 100,
    
    // We'll add more awesome properties later!
};

Why tile AND pixel positions? Great question!

tileX/tileY: Which game tile are we standing on? Super useful for collision detection and game logic
x/y: Exact pixel coordinates for smooth movement and precise positioning

Think of it like this: tile position is your “address” (“I’m at tile 2,1”), pixel position is your exact location (“I’m at pixel 75,45”)!

BRINGING YOUR HERO TO LIFE! 🚀

Time to make your hero appear in the world! Add this amazing function to your game:

function createHero(heroData, tileSize) {
    // Create the visual representation
    const heroSprite = new PIXI.Graphics();
    
    // Draw a simple but mighty hero (you can customize this!)
    heroSprite.beginFill(0xff4444);  // Epic red color
    heroSprite.drawRect(-heroData.width/2, -heroData.height/2, heroData.width, heroData.height);
    heroSprite.endFill();
    
    // Add a cool border
    heroSprite.lineStyle(2, 0xffffff, 0.8);
    heroSprite.drawRect(-heroData.width/2, -heroData.height/2, heroData.width, heroData.height);
    
    // Save reference to the sprite
    heroData.sprite = heroSprite;
    
    // Calculate pixel position from tile position
    updateHeroPosition(heroData, tileSize);
    
    return heroSprite;
}

function updateHeroPosition(heroData, tileSize) {
    // Convert tile coordinates to pixel coordinates
    heroData.x = (heroData.tileX * tileSize) + (tileSize / 2);
    heroData.y = (heroData.tileY * tileSize) + (tileSize / 2);
    
    // Update the sprite position
    if (heroData.sprite) {
        heroData.sprite.x = heroData.x;
        heroData.sprite.y = heroData.y;
    }
}

The magic formula: (tileX * tileSize) + (tileSize / 2)

Why this works:

tileX * tileSize = Gets us to the left edge of the tile
+ (tileSize / 2) = Moves us to the center of the tile
Result: Hero appears perfectly centered in their tile! ⭐

Adding to your buildMap function:

// After rendering all your tiles, add this:
const heroSprite = createHero(hero, game.tileW);
app.stage.addChild(heroSprite);

LEVEL UP YOUR HERO! 🎨

Want to make your hero look more epic? Here are some ideas to try:

Custom Colors:

// Try these hero colors!
heroSprite.beginFill(0x00ff00);  // Green hero
heroSprite.beginFill(0x0066ff);  // Blue hero  
heroSprite.beginFill(0xff6600);  // Orange hero
heroSprite.beginFill(0x9932cc);  // Purple hero

Different Shapes:

// Circle hero
heroSprite.drawCircle(0, 0, 10);

// Diamond hero
heroSprite.drawPolygon([-10, 0, 0, -10, 10, 0, 0, 10]);

Loading Custom Sprites:

// Advanced: Load your own hero image
const heroTexture = await PIXI.Assets.load('hero.png');
const heroSprite = new PIXI.Sprite(heroTexture);
// Set anchor to center
heroSprite.anchor.set(0.5);

🏆 ACHIEVEMENT UNLOCKED: First Hero Created!

You’ve just accomplished something amazing - you created your first interactive game character! Your hero now exists in your tile-based world, perfectly positioned and ready for adventure.

What you’ve mastered:

✅ Character object design
✅ Tile-to-pixel coordinate conversion
✅ PixiJS sprite creation and positioning
✅ The foundation for ALL character movement!

Ready to make your hero MOVE? Next up: keyboard controls that’ll bring your character to life! Next: Keys to Move