Handling different aspect ratios in your Unity 2D games [RNDBITS-030]

welcome back to another random bits in this one we're going to have a look at how you can handle different aspect ratios for your 2d unity games so for instance I have this little demo scene here which if I run I can shoot the little duck targets and everything's all very nice for all my it sprites all around the edge all nicely lined up however if I were to change to a different resolution perhaps that one has a different aspect ratio you'll see that I've got pieces of my just design cut off or worst case if I go to a portrait mode I completely lose everything to the left and the right and that's because unity by default does make it attempts to maintain the height of your design and chops off things at the width and this is not very useful for our 2d games particularly if you have games that have edges that you need to preserve this for instance if you hey we're doing a breakout game and it had walls along the side luckily there is a reasonably straightforward way to fix this and that is with an asset from the asset store so if we go to the asset store and do a search for letterbox we'll see this Auto a letterbox it's a free asset out of the empty store and we can select that and download and import that into our project I'm not going to import the demos I'll leave the documentation and I'll import the other key components as well all right we're just give it a moment to import excellent cuts into our scene now the first thing you'll notice is once you've imported it is that there are a number of errors listed here so and a warning as well and that's because this asset is built for a slightly older version of unity unity 5 and I'm currently running unity 20 17.2 that's if we can double click on that these are easy to fix the first thing we need to do here is where it says util dot loop we can just change that to math if and same for the second error all right and in terms of this warning here where it says allow HDR instead select that one over here that's just because this attribute has changed from HDR to allow HDR so that's easy to fix awesome now that we've fixed up the script we shouldn't have any errors and what we now get is under our game object menu there is a create false camera ratios object and if we select that we get a new game object added to our scene with this false camera ratio script attached to it and this basically allows you to enforce the aspect ratio of your game and what it will do is if your game if the screen that you currently displaying or running your game on doesn't match that aspect ratio it will effectively add litter boxes like black bars like you see in movies when there am widescreen and don't quite fit on your TV so in my case my game is set to a is a design for a 16 by 9 aspect ratio so I'll leave that at 16 by 9 and we can now run the game and we can see it's now added some black bars to keep the game at that 16 by 9 F Victoria and if I was to select a different mode the one I originally designed for the original resolution you can see that it's all nice and clean if I select another mode once again it's added seven black bars and if I then I go and select say portrait mode you'll see that it adds black bars to keep the thing on the screen so just basically shrinks down the window probably not something you would generally do unless your game could work like this and but you can see how it's busy keeping the game correctly sized by adding these black bars at the top and the bottom cool so there's a bunch of options for this firstly you can change the color of the bars instead of being black we might make them say a blue actually it's pick a color make it this orange color so if we run that now now we see we've got the orange bars let's do something more in keeping something like that would work and you can actually see that there's a bunch of options here around not automatically creating a camera and that allows you to define your own camera and this particular asset will then allow you for instance to have a background instead of just a colored bars you can actually put imagery and other things in the background so we can do that there now once you run your game you'll see you'll see that there is actually yet another warning that shows up when you run your game and it talks about a tiled GPU performing and this is because I'm running in Android or emulating Android the way that the camera that gets created automatically by this asset is created in such a way that the unity is warning that it the render texture it uses isn't being cleared which means on a mobile device it copies the previous version and instead of clearing it and that apparently is a performance hit took me a while to figure out what's going wrong yeah but basically if we jump back to the code where we have this allow HDR equal to false you can also add or also need to add allow box camera dot allow msaa get books false and now when you run the game you'll no longer get those warnings and you should get the right kind of performance that you're after so the other thing is there's a lot of other options and all of the ease can be found in the documentation folder so if I just show that in Explorer and open this up it's got some decent documentation here it tells you how to set it up standard usage how you set up your own camera and also other things you can do with the cameras if you need to so that you can tweak it to exactly the way you want it to work all right well that's about it if you like this video please hit the like button and share it with others and as always thank you for watching

Channel: Rabidgremlin

Views: 37,884

Keywords: Unity, gamedev, 2D, tutorial, aspect ratio

Id: hXU-ZJb6GHw

Length: 8min 14sec (494 seconds)

Published: Sat Oct 21 2017