Top-Down Tile-Based Map Creator

First off, here is some footage to showcase what exactly it is I am providing so you can assess if it has value to you.

I developed this last year to make top-down maps for a specific game of mine. I ended up cutting overworld traversal from that project so it’s just been sitting in my portfolio unused.
Since the code is already pretty readable, I figured I’d share what I have so other people can make top down tile-based maps with it as well.

Here is the place. I have left it uncopylocked so open it in Edit mode.

Here’s what it will look like when you open it.

Ignore the sprite of Pokemon Trainer Red and just click Play. Here’s what you will see.

Use WASD to navigate your selector, indicated by the blue selection box.
If you move to a space unoccupied by a tile, a new tile will be generated there.


Here’s what it looked like after moving around my selector a bit.

Notice the menu of tile choices in the top left corner. To select one of these, click the gui or alternatively, cycle through them with Q and E. This will change your actively selected tile.
(Note that if you want to overwrite a spot with an existing tile, you will need to press spacebar on it to do so.)

Create top-down maps of your choosing using pre-selected pieces.

Then, when you’re done working, copy the contents of the World folder somewhere safe so you don’t lose your progress when you close the place!

MAP TRAVERSAL
When game.ReplicatedFirst.EditMode.Value is set to false…
Tile-Based Map Creator: Character Movement - YouTube

You can traverse the map with Pokemon Trainer Red!

Your character should not be able to walk over water tiles or tree tiles. Yay collision detection!

ADDING IN CUSTOM TILES
Of course this map editor wouldn’t be very useful if you couldn’t add in your own tiles.
Here’s how to do it:

  1. Create a model with one part called “PrimePart” (dimensions: 8x8x8).
  2. Give the model the following name format: ###|NameOfTile
  3. Insert it into game.ReplicatedStorage.TileTypeModels!

The ### in the name should be a unique number not used by any other tile type in the TileTypeModels folder. If 000 to 007 are already occupied, use the number 008. If 000 to 103 are used, use the number 104. Basically what I’m saying is I only wrote the code to account for all the numbers being sequential. It will not work properly otherwise.

COLLISION
If you want that tile type to be one that you can’t walk onto, include a BoolValue called “Solid” in the model and make sure it’s set to true!

MAP EDITOR CONTROLS

W/A/S/D - Move selector
Spacebar - Overwrite with new tile
Q/E - Cycle through tiles
H - Hide selector. Press this before copying the map so you don’t have a stray selection box in your build.
U - Update full map. This means if you update the appearance of a tile in the TileTypeModels folder, that appearance will be updated for every one of that tile in your map.

Let me know if you find any undocumented issues and I’ll see if I can include a fix!

See also: Force Fixed Aspect Ratio

27 Likes

This is very interesting. I like the concept.

1 Like