Make a grid-based game with Unity: dev-log day 9

Taylor Coon
Jan 18 · 2 min read

Make a level editor

Image for post
Image for post

Goals

I’ve made a passable tileset and level generator for my game. Now, I’m going to make a level editor.

In the future, I’ll probably use a bit of procedural generation, but I want the ability to custom make certain levels and some things within levels. That’s where the level editor comes in.

How am I going to do this?

I’m going to make a web portal with js/html/css that will allow anybody to make a grid and fill it with preset tiles. It will have a button that will download the level as a JSON when they’re done.

Eventually, I'd like to put this web portal online so friends, family, and supporters can submit levels that might actually appear in the finished game.

As for the technical methods, It’s a matter of making the web page with HTML where each preset tile has a data attribute that tells it the code and color.

Then, I generate the grid based on the user’s input and add several event listeners to the cells.

Each cell will apply the currently selected color and code to itself when clicked or clicked and dragged over.

This is way quicker for me than using unity’s internal prefab placing methods.

Here is my JS file.

Eventually, I'd like to make a website for this game with a lot of cool information and features(to include this level editor incase fans want to submit potential levels), but for now I’m just going to put this into a browser emulator on codepen.io

Here is a link to the pen so you can play around with the editor if you wish.

How to use it :

The first input is the name of the file it will give you when you’re done.

Select the row and column count (best results if less than 100x100) and click generate.

Now that the base grid is on the screen, just click the tile preset you want and click and drag it over the tiles you’d like the preset to be placed.

The only rule thus far is any empty tiles within the grid must be zoned off with walls, and the up and down codes must be suffixed with a 3 digit number after “U” or “D” i.e. “U005” “D005”.

Allow me to demonstrate the level editor in action, and then I’ll put the level in my game, and it’s only going to take like 5 minutes because all this stuff I built was specifically designed to help make this process faster.

So all I have to do is keep track of some global modifiers like the up and down keywords and I can make levels very quickly.

Until next time

https://www.patreon.com/taylorcoon

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Sign up for Best Stories

By Dev Genius

The best stories sent monthly to your email. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Taylor Coon

Written by

Full stack software engineer

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Taylor Coon

Written by

Full stack software engineer

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store