How To Make A 2D Game (Unity Basics)!

guys this is what I look like put together right this is put together as I can be comb my hair I've trimmed my beard a little bit I've got a hat on I've got a nice t-shirt on but this is what I really look like when I wake up in the morning I promise you this is exactly what I look like the reason I'm sharing this with you is simply because not everything is as it seems so I want to open up the hood of one of my games it's called once upon a coma and I'm launching this game in the summer this year and so on open it up take a look at it and show you really that it is kind of a mess under the hood so let's get started guys and I want to show you once upon a coma under the hood so this is my game when it's in play mode looks pretty good right you have a little character that runs around you have some fun enemies you can kill you know you've got a beautiful looking scene everything looks really put together but I want to show you what it really looks like behind the scenes so let's get out of play mode and take a look now before we take a look under the hood of once upon a coma I want to talk about something that happens outside of your game right your game needs to be distributed data needs to be stored especially if you're creating a multiplayer game or even if it's a small game that even has just a leaderboard or maybe you have a portfolio of games and you need to store them somewhere you're going to need a place to store this data you could store this data on a VPS service called Lin node the node is a great option for you to store data or if you're tired of making games and just want to play games you can play games like csgo terraria minecraft you name it with lid nodes VPS service so if you guys want a $20 credit use the promo code t brush 19 using the link in the description so if we enter scene mode you can see that it's kind of a mess right it's pretty crazy we've got these things called screen boxes here these red boxes these are just debugging into editor and drawing these boxes to give us an idea of where each screen box is and you can see that the screen boxes are actually listed here and they are we have a lot of different things here that are outside of the screen boxes but for the most part everything is placed inside of these screen boxes which I call frames so let's go ahead and break down what's actually going on in this screen box here so this is frame six and it's the labeling of all my screen boxes are a little bit disoriented because I move my levels around as I'm creating the game so this is frame six and it's got a screen box script down here all of these scripts were written by the developer of this game his name is Eric Coburn and I've also written a couple scripts myself but inside of this screen box we have all of our various game objects and as you can see it can get pretty messy really fast and it doesn't stop there right you can keep collapsing and inside of this PSD game object it's called PSD because these are all of my Photoshop images specific for frame six if I open this up oh my goodness we've got even more art in prefabs so things you get obviously very messy very fast so I want to show you side-by-side frame six show you exactly what's going on so we can actually put both of them side-by-side so this is the game view on the left side here and this is our editor view right here so you can see all of our ray casts and our D bugs and you can see all of the game objects sort of bleeding outside of this red screen box here now before we move on to the camera system I won't explain to you why we're using something called screen boxes we don't really want to have all of our artwork active all at one point because for some platforms especially something like Nintendo switch things can get really slow really fast so if we actually zoom out you can see all of our screen boxes here have deactivated all of the children inside of those screen boxes some objects are global and they sort of stay there at all times so for example this crazy man sleeping in this cage he's there at all times because he actually starts screaming at one point we want to hear the screams echoing throughout the forest technically we could deactivate the artwork but I'm not really worried here so as we move from frame to frame you will notice that that screen box that we're currently in will deactivate and this next one activates right so they're all loaded into the actual memory of your computer or whatever device you're using but there's nothing happening visually so it saves on your GPU and your CPU so let's talk about the camera really quick so if you look at the play mode view on the left side here you'll notice that there's some parallax going on and that basically means things in the background move slower than things in the foreground things in front of Pete in our character's name is Pete here move very fast so you can see that the black foreground here is actually moving pretty quickly compared to the ground that people walks on so that parallax effect is actually not real we're not using a perspective camera we're using an orthographic camera now without getting too detailed here using perspective cameras is great for a first-person shooter or really any 3d game but when you're creating a 2d side-scroller game perspective cameras can get really finicky and really difficult to put artwork together so I found that using an orthographic camera was easy as long as my developer was able to put together a system that made it look like it was a perspective camera so you'll notice that as I move objects are actually moving so this background image is all shifting and what's even stranger is that it appears that the parallaxing is actually inverted right things in the foreground should move what faster than things in the background but because our camera is moving the background image this one especially the sky image moves much faster because it's following the camera so as we go deeper into the z-axis the camera is calculating all of the various objects it needs to and those objects move now you can imagine this could get really difficult for your computer to handle if you had a ton of objects parallaxing at once but fortunately we only have about 10 here that are parallaxing so the computer's CPU can handle it the movement speed of all of our various elements are simply determined by the z-axis so in the case of this background image here it's at 60 and so it's going to move a lot slower than something like this which is at 8 so as the Z position gets greater and further away from the camera it will move faster or slower relative to the camera so let's talk really quickly about how this art is actually laid out and how its created now in my previous game Pinstripe every piece of artwork was its own Photoshop file now if you want to create a game like pinstripe or Once Upon a coma or maybe a game like Machinarium where the artwork feels almost like a storybook and it's very unique and there's not a lot of repeated objects then every single scene will have its own set of layers everything will be different and each one will be stored inside of a Photoshop file so if we look at frame 2 here you can see that we have a game object called PSD with all these different children each one is a separate layer a separate PNG so I could drag this up if I wanted to it's just a PNG image we have BG ground we have bushes we have mist we have Pines now fortunately every single one of these objects every single one of these P and G's it's actually stored inside of one Photoshop file so if we actually select the sprite you'll see where they're stored in our folder so this is a folder called frame 2 you can see we have a Photoshop image called frame 2 that we can open up so as you can see we have all of our art stored inside of one giant Photoshop file the Photoshop file is seven thousand six hundred eighty pixels by 2164 pixels we click okay here we can actually zoom in and just see all of our artwork is stored in separate layers so once all of my artwork is completed and I feel good about it and make sure it's all the right size make sure it's cropped and clean then what you can do is simply right click on all of your images use quick export as PNG and just save out every single one of these layers as a PNG and those get imported into unity and then you can put together your scene there now believe it or not unity has a great tool a PSD importer which I will be using in future videos but in this case you can simply drag all of your images into the scene and put the scene together one quick tip that I've learned recently is you want to make sure that your images are as big as they can possibly be because you really never know when you're going to upgrade to a platform upgrade to a new screen size or resolution so with all of my Photoshop screen boxes and make sure that they're basically 4k now you don't need to be worried because once you've exported all of your PNG s you can actually change the resolution inside of unity on-the-fly so for example if this grass here was a little bit too high resolution and was eating up a lot of memory in my game I could simply select the grass here and I could change it to 32 if I wanted to and hit apply look how terrible it looks now it almost looks like mist or I could change it to 256 hit apply so if we were on like a I don't know a Nintendo DS or something that might work I could make it as big as I possibly can so in this case 8,192 pixels wide if I hit apply and I know you can't see it but down below my face you can actually see the file size is 18 point 2 megabytes that's huge that is way too big we should be able to achieve 4k resolution in all of our images and get below a megabyte and I want to show you how I'm gonna do that really really quick here so as you can see there's something here called use crunch compression so we could use crunch compression this grass graphic here if we wanted to but unfortunately it says only textures with a width height being a multiple of 4 can be compressed so if we open up our actual grasp PNG image here and go to our canvas size you'll notice that it's seven thousand six hundred eighty pixels now here's the problem seven thousand six hundred eighty pixels is divisible by four so that's good but the height is not so we can simply change it to six twenty we go back into unity here we can use crunch compression now you'll see that it's enabled we can set the compressor quality to zero and hit apply watch what happens this is amazing so even though it's eight thousand 192 pixels wide we zoom in you'll see there's a lot of compression happening right there see that so you can see at this screen size the grass looks amazing it's eight thousand pixels wide but it's only a hundred and sixty one kilobytes it's not even a megabyte so if we have all of these different layers here stacked up on top of each other and they're all eight thousand pixels wide it really doesn't affect the memory of the game because each one can use crunch compression so that's the really difficult thing about the artwork in 2d games especially if you're creating a storybook type game with lots of unique artwork you have to be very vigilant and careful about each images file size so just be sure you use something like crunch compression and lower that compression quality as much as you can and it's really not gonna affect how your game looks and overall it's going to increase your frame rate in your performance so as you can see there's a lot going on in this little screen box here that isn't necessarily in our Photoshop file again this is our Photoshop file but there's a lot going on in the actual game and those other objects are what are called prefabs so if we exit play mode we can see all of our various prefabs are colored blue in our game object hierarchy so here is frame two so you can see we have a ton of different prefabs and what prefabs are is the repeated objects and you can change some variables in a prefab so for example we could change the hitbox area of these books so that you could hit them and they explode or we could change the actual volume of this box breaking here but every single thing here that's listed in blue is a prefab basically it's a saved object that you can use over and over and over in the game there's plenty of tutorial videos on YouTube that will show you how to create prefabs but in it all you have to do is drag it into a folder and it's going to create a prefab for you so a prefab can really be any kind of game object you want it to be so it can be an enemy it can be a box it can be particle effects so here's a particle emitter that slowly drops leaves down very subtly or you can have some fog particles here so you can slowly see it as some mist going across the screen kind of like what happens in breath of the wild so filling your screen box strategically with particle effects and prefabs and various pngs and game objects can really make it come to life you want to be sure that your pre fabbing as much as you possibly can so that you're saving on memory for your game because overall this scene is gonna be filled with a lot of content so you really have to be careful with what's a prefab and what's not a prefab so guys this is just one level here it's got all of my various audio loops and game objects and pngs and scripts all in one giant scene called forest level now we really wouldn't want to be putting three levels inside of one scene it would just get crazy busy it'd be a lot to handle both for me in my mind and also a computer so you want to separate out all of your levels into different scenes we also have a field level here with all these different screen boxes again the screen boxes are red we can hit play so again all of our screen boxes for this particular level are stored in these red frames here and as we move over all the objects in a loop suddenly become active you also you can also see the parallaxing occurring based on the camera movement so as we move to the right camera identifies and activates all of the objects even if there are enemies or breakable objects so in my game I've got about 10 different scenes 6 are levels some of them are pause menus or main menus others are cutscenes or introductions or logo intros or the credits of scene so you can have all kinds of scenes that activate and deactivate as the character moves throughout the world and those scenes are simply loaded and activated using little triggers here so this in this case this takes us to the forest this little yellow trigger so if the player hits this yellow trigger area the player will move to a transition position here and all of these are just scripts written by my developer Erik Coburn so it's pretty chaotic under the hood and this is true for a lot of games most games out there aren't as pretty as what's presented to you when you're actually playing them so be encouraged when you're creating a game if you feel like it's getting a little chaotic you know try and clean it up as much as you can but just know that this is the way it is with games don't stress too much if you guys like this video please hit the subscribe button or leave a comment and I'd love to answer as many questions or comments that you guys have thank you so much for watching I'll talk to you next time bye you [Music]

Channel: Thomas Brush

Views: 386,331

Keywords: thomas, brush, unity, unity3d, tutorial, asset, model, texture, material, beginner, easy, javascript, java, function, skyrim, rpg, first, person, 1st, settings, how, to, howto, learn, learning, course, series, tips, tricks, tutorials, workflow, fix, tip, technology, game, development, develop, games, programming, coding, make, #1, nr., nr. 1, get, started, Unity (Software), do, you, create, videogame, video, Java (Programming Language)

Id: cqd1u_dfrkc

Length: 16min 36sec (996 seconds)

Published: Wed Jun 19 2019