Only Wonder's Map Tutorial!!

Resources used:

Words you might not recognize:

  • Tileset: a collection of square images (tiles) used in games for making maps.
  • Sprite: Image used in games. Typically used for characters or items that move but is also used as a catch-all for pixel graphics used in games.
  • Spritesheet: a collection of sprites in one image. Kinda like a tileset, but for sprites!

Let's Get Started!

First, we're going to need graphics. You can make your own with Aseprite or Pixilart (or any other art program, depending on if you want pixel graphics or not, but this tutorial will focus on pixel graphics) or you can spend some time browsing my favorite website, Spriters Resource to see if the tileset from your favorite game is available!

BONUS TIP: when searching for specific games on Spriters Resource, you should uncheck "sheets". It'll make your search so much easier!

For this tutorial, I'll be using Dragon Quest I & II for the Gameboy Color's tiles, for many reasons, but it can be boiled down to "it's my favorite nostalgia game!". Plus I ripped these tiles myself so they're extra special to me ♪(´▽｀)

Anyway! You need graphics. Try to find a tileset that has buildings (or furniture if you're doing an indoors map, which could be really cool!) or character sprites. They may be in seperate tilesets/sprite sheets but that's ok, we can work with that if needed. The buildings/furniture/character sprites will be our links, so you don't need to many.

Some of our sprites may have backgrounds, you may want to get rid of the backgrounds so it's just the building/furniture/character, without the background. I think they look better without backgrounds when you add hover-effects, but that's your decision! For the sake of the tutorial, I will not be removing backgrounds.

To make a custom spritesheet with just the sprites we plan on using, we can either arrange them in Aseprite/Pixelart or we can make them into individual images and upload them to Spritegen's Spritesheet maker, which should make the most size-effective sprite sheet it can.

If you're using Spritegen then there is an option to get the CSS already prepped for you! If you want, you can go ahead and save that CSS somewhere!

Here's my spritesheet! I'm only using 3 sprites, but I made sure to pick different sized ones for variety.

Now, decide how big of a map you want. I suggest going small-ish. It's just easier to work with and you're less likely to end up with big empty spaces. I'll be making a 5x3 tile map with 16px tiles... so 80x48px. That's really small, so we'll be resizing them to 48x48px tiles (which is 3x bigger!) when we put them on our site.

Next we need our art program, I'm using Aseprite since I paid for it, but you can use Pixilart straight in your browser. We're going to open our tilesets and start copy-pasting individual tiles to form a nice map. Only use the tiles you want in the background, but keep in mind where you want your linked sprites to go!

Here's what I came up with for a map. It' very small, but it'll work fine!

You should now have your sprite sheet and your background image. Now it's website time! First, upload your sprite sheet and your map background to your site like you'd do for any other image. Be sure to remember where you put them and what you named them!

Code Time!

I will not be using Spritegen, just so I can explain the process of not having the CSS prepared for you.

First up: HTML

The HTML is really simple.

Done! :3

Stylin' Time: CSS

This is where things get a lil complicated! You have to do some math with the map and sprite sizes now. We need to find the width of our map, in my case that would be 16 (the tile size) x 5 (number of tiles). That is 80! Now we multiply 80 x 3 to get the 48px tiles I mentioned earlier. That gets us a total of 240px width!

We'll also add a lil snippet of CSS to make sure our pixel art doesn't get blurry when resized. Along with that, we'll do a lil css reset to make sure nothing has unnecesary padding or margins. This WILL effect the rest of your site, but you should be using some sort of CSS reset anyway! Read about that here! If you choose not to, you'll have to take account for differing padding and margins in different browsers!

So we have our map background, now it's time to add some sprites!

First, we need to style the 'sprite' class for our sprite sheet. That bit is pretty simple:

Ok now we can FINALLY add the sprites! But... more math... First, for background-size we need to multiply ourfull sprite sheet width by 3. for me that was just 32x3, which is 96px. For the width of the sprite you need that specific sprite's width x 3, so 16x3 for me, or 48.

We're not done with that sprite-1 yet though! Now we need to add background-position. This will be the location top left most corner of the sprite in the spritesheet. For the top-left sprite that will be 0 0 (x, y). The top right sprite would be -48px 0 (which is the sprite-size of the first sprite but negative). We'll go ahead and do that for all 3 of my sprites.

Alright, now to move those sprites around the map! We need to add position:absolute; to each sprite, then we can start moving things using increments of 48 (our resized tile size).

Note: when you give your sprites position:absolute, they'll stack on top of eachother until you designate where they're positioned

Aaaand I think that's it! you can style what happens when you hover over one of the sprites by using .map a:hover

If you use this tutorial, I'd appreciate if you linked back to this page so others can make a cool map too!

If you have any questions feel free to email me at ansehelm.onlywodner@gmail.com or comment on my guestbook!