How to make a LEVEL EDITOR in Unity

in this video I'll show you a super cool trick on making a quick and easy level editor for unity the trick was inspired by a live stream by Kool Aid team so credit goes to him for the idea basically what we'll do is create a low resolution image and use the color data from that image to populate our level that means that we can use any image editing software to paint pixels on top of our image and when we start the game unity will then replace each pixel with some kind of prefab that could be a ground tile a coin an enemy or even the player spawn point so without further ado let's jump into it that's what I'm using here from the 2d mega pack you can get it from devastate calm as with everything else it's pay what you want that will be a link in the description I have a player a ground object and a coin and if we collide with the coins here we will pick it up if you want to learn how to set this stuff up check out my course on creating a 2d platformer so let's begin by right-clicking in the hierarchy creating an empty object lets you reset the transform on this and let's call it level generator let's drag it to the top here so we can always see it let's add a component and let's create a custom script called level generator as well it's going to be of type C sharp and let's say create an ad let's double click it to open it up in visual studio so first off we can delete the two using tags at the top and we can also delete the update method you can easily have the level generator create multiple different levels but in our case we'll focus on making a level from a single map let's first off create a variable for this map it's going to be public so that we can access it in the inspector and it's going to be of type texture 2d this will allow us to put an image into this slot let's just name it map meaning inside of our start method we want to generate a level based on the color data inside of our map let's call a function called generate level let's make this function it's going to be of type void because we don't need it to return anything it's going to be called generate level and it's not going to take any arguments now in order to generate a level we need to load data from our map to do that we'll loop through each individual pixel that makes up our texture and depending on the color of the pixels will then spawn a corresponding tile so to do through our texture we'll create two for loops the first one will loop through the width of our textures so let's go for we'll create an integer variable called X and set it equal to zero we don't want to keep looping as long as X is less than map cut with and each time we loop through we want to increase X by one then for each of the pixels on the x-axis we also want to do through all the pixels only Y so we'll create another for loop here where we create another integer called Y and set it equal to zero and we want to continue as long as Y is less than map guide height and again after each iteration we'll add one on to our Y variable so we are now looping through all of the pixels in our map you might think holy smokes that's a lot of iterations and yes if your texture is huge this is going to take some time but luckily the computer can handle operations like this super fast so for each pixel in our map we want to check if that pixels color corresponds to a certain tile let's call a method called generate tile and we want to feed it our x and y coordinates then when we create this method generate tile we want to take in an integer X and an integer Y the first thing that we want to do here is get the color of the pixel that we're looking at look at the unity has a function that makes this really easy all we need to do is call map dot get pixel and input the X&Y coordinates but this is going to return a color and so we can store this in a variable of type color and let's call it pixel color and now we can start doing things based on the color of the pixel for example we can check if pixel color guard alpha is equal to zero that means that our pixel is totally transparent and in that case we want to just totally ignore it so we'll go ahead and return before we get to spawn any tiles and it's also leave a comment here saying that the pixel is transparent let's ignore it if it's not transparent well then we want to check what tile we should spot but before we do that let's just check if everything is working let's write debug deadlock and let's write out the pixel color so now we should see that when we start the game it's going to try and generate a level by looping through all of the pixels in our map for each pixel it's going to call the generate child function which is then going to get the color data from that particular pixel and stored inside of pixel color if the pixel is transparent then we simply skip it and if it's not we without a message to the console with its calidad let's save this and head into unity and we now have an empty slot for our map let's go ahead and create one for this you can use any image editing tool I'm going to be using Photoshop all we need to do is go ahead and create a new image we can call this level one I'm going to make it 64 by 16 pixels that's it okay let's zoom in on it I'm going to create a new layer I'm going to switch to the pencil tool by holding down this button and selecting pencil tool and then going to right click make sure this size is set to one pixel and the height next to 100 and as the color and then going to select a total black now I can start painting out some ground elements and use the eraser if I mess up here through each one of these pixels are now going to represent one tile I'm using eight old black as the color for my crates make sure to disable whatever layer you have in the background so that everything else is transparent nor to save this file let's go file save as let's navigate to a project now because I'm using Photoshop I can save it directly as a Photoshop file if you're using any other software I recommend saving as a PNG this unlike a jpg will keep the transparent background so it's now saved okay we're now going to unity we should see the level 1 texture we want to make sure that the filter mode here is set to point and our compression to none this way unity won't play out our texture in any way let's also go under advanced and it's very important here to remember to check read/write enabled otherwise we won't be able to load color data from our texture and it'll throw us an error let's then hit apply let's select our level generator let's drag in our level 1 texture that's also remove our ground and our coin from the scene and when we now hit play we can see in the console that for each pixel it throws out a debug log statement and you can see all of these have Syria on the red 0 in the green and 0 on the blue which means that they are black and an alpha of 1 also note that I made 46 pixels and we now have 46 messages so now we need to tell unity that whenever we get a black pixel we want to spawn a ground prefab normally when you want to associate two values like this you use a dictionary and that is definitely the fastest way to go about it unfortunately unity by default doesn't allow us to edit dictionaries inside the inspector and so we would have to create some kind of editor script to allow us to do that or pick up an asset on the asset store like Odin or full inspector instead let's use a normal array where each item in the array is a class that we create starring both a color and a prefab let's right click in our project hit create c-sharp script and it's called this class color - prefab let's then double click it click reload all let's remove the two namespaces at the top let's also make sure this doesn't derive from monobehaviour and it's delete both our methods now in this class we want to have a public color let's call that color we also want a public game object which is going to be our prefab to make sure that this will draw in the inspector we want to mark it at the top as system dot serializable so now when we say this head into the level generator script and at the top create a new public color - prefab array where every element in our array is a color - prefab storing a color that maps to a specific prefab so we can call this array our color mappings when we then save this and hit into unity we can see a color mappings array appear and if we now increase the size we can see an element here with first a color we want this to be totally black which it is already and we also want to bump up the Alpha to 255 and we can then drag in our ground prefab now all we need to do is go to the bottom here and inside this function that is called for each pixel we also want to loop through all of the elements in our color - prefab array so we'll go for each color - prefab and we'll call the element we are currently looking at a color mapping in our color mappings array so we'll loop through each element in our color mappings array and check if the current element that we are looking at which is called color mapping dot color is equal to so we'll use dot equals the pixel color and if it is well then it's a match and so we can instantiate the prefab so we call instantiate and the prefab that we want to instantiate is now our color mapping dot prefab and the position where we want to instantiate it is given by our coordinates up here and so we can go and create a vector to called position and set it equal to a new vector to where we give it our x and y pixel coordinates which are now real unity coordinates and we then simply feed it our position we don't care about the rotation so we'll just go quaternion identity which means no rotation in other words a rotation of zero zero zero and then just to clean everything up we can also parent it to this current object so the object that we want to specify the parent is our transform so now if we save that and go into unity double check that our color mapping is set up correctly between eight old black and our ground prefab and hit play voila we've got a map generated from a texture that we can very easily edit in order to change our level I don't know about you guys but I think that's super cool awesome and from here on it's super easy to add new elements to our array we simply increase the size choose a color for our coin we could go for a yellow color so let's give it 255 on a red and 255 on our green to make sure that we're using the exact same color we can even copy the hex code down here then drag in our coin prefab and inside a photoshop or whatever else you are now using let's create a new layer and will now set the red channel to 255 and the green Channel to 255 as well and so we can paint in some coins it's good to reward your player with plenty of coins let's now say this and as soon as we now go into unity and hit play our level has updated and we can play through and get all of the coins we can even control where our player spawns using this same method if you had enemies in your game you could spawn those as well to spawn our player recently go to our level generator add a third element for this one that you say a total blue color as the prefab let's dragon all player inside a photoshop let's now change the color to blue create a new layer and let's set the spawn point here then when we save this go into unity delete our player and hit play voila I'll play responds in the middle of our scene so if you will take this and apply it to any game that you are currently working on I find it's a great tool especially when doing Ludum dare games because it allows you to really quickly cram out new levels that's pretty much it for this video I hope you enjoyed it if you did make sure to subscribe so you don't miss a future one also if you want to grab the script for yourself you can do so at the brackish farm just go farm brackish calm that will also be a link in the description I recently pushed an update to the forum so it should now be faster and more stable and most importantly spam free so if you have any questions i really suggest posting them there alright thanks for watching and I will see you in the next video thanks two of the awesome patreon supporters who donated in May and the special thanks to Derek James Kirk fatal Merrifield stone gamer Cmdr fine stone 38 Thomas royally James Calhoun cyborg Nami and Jason the teeter if you want to become a picture in your thoughts you can do so at patreon.com slash brekkie

Channel: Brackeys

Views: 232,422

Keywords: brackeys, unity, unity3d, beginner, easy, how, to, learn, series, tutorial, tutorials, game, development, develop, games, programming, coding, basic, basics, C#, level, levels, editor, level editor, corresponding, tiles, coins, image, color, data, edit, scenes, 2D

Id: B_Xp9pt8nRY

Length: 12min 13sec (733 seconds)

Published: Sun Jun 18 2017

Reddit Comments

[u/RamonDev]

Interesting tutorial, opened my mind about certain things (creating the ColorMapping script is very smart). Thanks for sharing.

[u/DolphinsAreOk]

Why though? Why wouldnt you just use the Unity Editor.