How can I make a tile appear on top of another without completely blocking the tile below?

Question

Making a small RPG with libdgx just for learning about how to draw tiled maps and move around in them. I've got the tiles drawn and OrthographicCamera stuff figured out so I can see my world. My question is, how can I put character on a tile, so that he appears to be standing on the tile?

My idea is to give each tile a separate texture that has the character drawn on the tile. So for example, I would have grass.png and then I would have grass-hero.png. And then based on where the hero is upon the next render loop, if the hero has moved to a tile that was previously "grass", instead this time draw "grass-hero".

Example:

Now, I haven't done it yet, but I'm pretty sure that would work. My question is, is there some way that I can bypass having to use a separate "combined" tile like grass-hero, and just have my hero walk on top of the grass tile? I imagine if I use another tool like .NET Paint I could "cut" the hero out of the black background and make the background transparent, but I still don't know how to make one tile appear on top of another.

To provide some abbreviated semi psuedo code, let me show what I have:

GameScreen (implements Screen)

@Override
public void render(float delta)
{
    worldrenderer.render();
}

WorldRenderer

public void render()
{
    spriteBatch.begin();
    drawTiles();
    drawHero();
    spriteBatch.end();
}

private void drawTiles()
{
    for (Tile tile : world.getTiles())
    {
        switch(tile.getTileType())
        {
             case GRASS:
                 spriteBatch.draw(grassTexture, tile.getPosition());
                 break;
             case FOREST:
                 spriteBatch.draw(forestTexture, tile.getPosition());
                 break;
             case STONE:
                 spriteBatch.draw(stoneTexture, tile.getPosition());
                 break;
        }
    }
}

private void drawHero()
{
    Hero hero = world.getHero();
    spriteBatch.draw(heroTexture, hero.getPosition());
}

Answer 1

Judging from a quick look at the libgdx wiki's SpriteBatch entry, alpha blending is on by default.

Blending is enabled by default. This means that when a texture is drawn, translucent portions of the texture are merged with pixels already on the screen at that location.

This means that you can do what you said: open the Hero texture in Paint .NET and "delete" the background portion. Your render method already draws the sprites in the proper order (world then hero)!

Answer 2

I'm not familiar with libgdx specifically, but in general terms what you probably want here is to use alpha blending. You'd add an alpha channel to your hero texture, which would contain white in all the pixels where the hero is, but black in all the pixels that should be transparent. You'd then have to enable blending when drawing the hero sprite. The graphics hardware will then use the alpha channel to composite the sprite over the background.