Sprites and Maps

Understanding the game logic is only half the story...the other half (and arguably the more important one) is the graphics.
After all, if the player can't see what's going on...what good is the game?!

So let's take a look at using the map and sprite editors, as well as the map() and spr() functions...

SPRITE EDITOR

The Sprite editor is extremely simple. Just click on a slot and start drawing your sprite.
Be sure to try out all the different tools below the drawing area.
I suppose I could go into more detail than that...but it seems kinda pointless.

Take note of the Sprite ID# at the top:

This is the number that refers to that exact slot you drew your sprite in.
We'll be using it to tell the spr() function what sprite to use where.

MAP EDITOR

The map editor is nearly as simple as the sprite editor...just use the Sprite Pull-Down Menu to pick a sprite...

and start drawing your map...

Here's the sprite sheet for this tutorial:
watchtower_sprites

just download it, then open TIC-80 and type:

>import sprites  

Navigate to the watchtower_sprites and select it.
TIC-80 will load it into the sprite editor of the cart you have up.

MAP() FUNCTION

So at this point you should have a sprite sheet drawn, and a map built.

NOTE
if your map is larger than the screen area, you'll need to use a "camera" to follow your character.
Have a look at either of these tutorials to learn how to set that up:
Camera Tutorial by Trelemar
Grid-Based Camera Movement By me :)

In order to draw your map onscreen we'll need to call the map() function in your script:

map(start_x,start_y,width,height)

There are more arguments available in the map function. For an overview of using them, look here

The start_x and Start_y is looking for the map cell coordinate to start drawing from.
To find that, go to the map editor and select the top left cell in your map:

In this case I drew my map starting at the first cell (0,0) so that's:

map(0,0,width,height)

Now for the width and height...
TIC-80's screen can display a maximum of 30x17 map cells onscreen.
Since the map is intended to take up the whole screen we'll use 30 and 17:

map(0,0,30,17)

now the largest visible map area is being draw to the screen:

Next we need to use sprites for objects and characters:

SPR() FUNCTION

The spr() function is how we can draw sprites to the screen.
It's called like this:

spr(sprite_id,x,y,alpha)

The sprite id is the number I pointed out to you in the sprite editor.
Now the easiest way to keep all the numbers straight is to store them in a variable with a descriptive name:

SPACE=0
FLOOR=1
WALL =17
DUDE =33

You'll notice I'm only putting the first floor sprite id into the variable FLOOR...
Same with the WALL variable...
This is for collision detection, which I already covered here do don't worry about it.

So now we can call spr() like this:

spr(DUDE,x,y,alpha)

This will draw the DUDE sprite at the x,y coordinates specified.
For those we can simply reference a player object:

p={x=8,y=10}

spr(DUDE,p.x,p.y)

Now for the alpha argument...
It specifies the color index to use as transparency.
for example:

Here the color I'm using for transparency is Light Green...
And you can find a colors index by counting the slots from left to right (starting with 0) until you get to your color. So:
Black is 0...
Purple is 1...
Blue is 2...
etc.
The index number for Light Green is 11. That means if we want TIC-80 treat Light Green as transparent we do:

spr(DUDE,p.x,p.y,11)

Now the background will show through wherever Light Green was used.
In my games I prefer to use Black, and if you need to use black in a sprite you can always use a different alpha index for that particluar sprite.

Now we know how to display map areas, and how to draw sprites to the screen. But if you were to run a game with these right now you'd get something like this: