Ep. 6: Loading Textures - Let's Make Flappy Bird

Key Takeaways

hey what's up guys My Name Is AO and welcome to episode 6 of let's make Flappy Bird today we'll be talking about loading textures into our game as well as buffers since we want to be able to use Textures in our game we need a way to go from an image file to something that can be displayed on our screen the workflow is pretty simple firstly we need to load our image file then we'll grab the pixels from that image and finally use them to create an open gel texture there are a few things to pay attention to in this process and we'll address those things as we write them let's make a class called texture which will represent a seure that we load I'll put this into a package called Graphics since it refers to the graphical aspects of our game we'll need to define a few fields to hold important information such as the width and height of the texture and the ID that opengl will assign to the texture when we create it this ID will be used to activate our texture when rendering I call this field texture but you can call it ID if it makes more sense to you let's make a Constructor that text in a string this will be the file path of our texture we'll leave it blank for now we'll make a private method that also takes an string again being the file path this will be a rather large method that will essentially do everything from loading the file to creating the open gel texture it'll return an integer being the open G ID for the texture which we need to assign to our field firstly we'll use a buffer image to load our image file using image io. read with the file input stream this will throw some exceptions so let's around that line with a try and catch we can get rid of the file not found exception since IO exception includes that again handle them properly if you wish we're going to be keeping it simple if the image file is loaded successfully we'll have all the DOA we need in our buffet image object so let's set width equal to image. getet width and then do the same for height we'll create an integer array called pixels that will contain all of the pixels in our image with each integer in the array being the color of the pixel and the index of that integer referring to where the pixel is located in our image inside the tri block we'll set the size of our pixels array to be the size of our image as soon as we find that out now let's call image. getet RGB with the appropriate parameters including our pixels array arrays in Java are passed by reference which is why get RGB doesn't need to return anything it will simply set our array through the parameter what we have now is an array of pixels which makes up our texture before we can give it to open though we need to change the format of it to comply with what opengl wants basically we just need to move some byes around each color in our pixels array is represented as a RGB Alpha red green blue that's the order of our color channels because that's how buffer image loaded in our pixels if we look at an example color in hexadecimal format what this essentially means is that the leftmost two digits represent the alpha Channel then the red green and blue Channel whilst we can tell open gel to use a variety of formats none of them suit this one the easiest and most practical to adjust to is rgba or abgr if we read from left to right so as you can see we need to move around the ordering of channels luckily this isn't too difficult to do if you know what you're doing first let's make a new integer array called data which will store this new format of pixels obviously it will be the same size as our pixels array now we need a for Loop that will iterate through each of the pixels in our array since each color needs to get reformatted for each of these colors we need to extract each Channel which can be done by masking it using the bitwise and operator and then shifting it the appropriate number of bits to get it to the rightmost bits the start for example let's take a look at the alpha channel it's the leftmost channel so we need to end it by FF 0000000000 which will preserve just the required bits and finally move it to the right since each of these hex digits represents four bits we need to move it a total of 24 bits to the right the leading zeros have no effect just as they wouldn't with a decimal number so we're left with just the alpha Channel nice once we've extracted all the channels let's put them back together in the correct order to comply with our new format the alpha channel will go back to where it was no change then we'll use the bitwise or operator to combine the other channels next Blue will'll go to where red used to be green will stay where it was and red will take Blue's old place now we've got our new array data populated with pixels that are in the right format for opengl we Ed a lot of bitwise operators and bit level calculations here so make sure you research and understand them I might make a dedicated video in the future explaining them in depth since they're quite important in graphics programming the last step is to use openg GL to create this texture from our pixels firstly we'll statically import gl11 now let's generate a new texture and assign its ID to text for now to activate this texture for use we need to bind it using G bind texture it's a 2d texture hence the texture 2D flag we'll pass in text since that's the ID of the texture we want to select now that it's selected we can modify and use it think of this like selecting a layer in Photoshop or any other similar program we can't modify it if it's not selected before we feed our pixels into this texture let's set two important parameters basically what this will do is disable anti-aliasing for our textures we'll be dealing with some lowish resolution Graphics particularly for the bird and we don't want those textures to be blurred if our game runs at a high resolution this will keep our textures nice and sharp as I mentioned two episodes ago lwjgl doesn't want arays it wants buffers we'll need a way to convert arrays into buffers let's make a new utility class for this we'll need this quite frequently we'll pop it into our util package and call it buffer utils lwjgl actually has a very similar class but our one is going to be slightly different this will be a static class so once again let's add a private Constructor in this series we'll need to use bite buffers float buffers and of course int buffers for the pixels we just created let's create a static method which takes in a bite array and returns a bite buffer don't forget to hit control shift o to import things as we'll be doing this throughout the series we'll create a bite buffer result and allocate a new direct buffer with the same size as our array we'll set the order to be native order which is what lwjgl wants next we'll put the array into the buffer and flip the buffer flip basically flips the buffer and prepares it for reading again something lwl wants that's all we need to do to go from array to lwjgl compliant buffer let's duplicate this method twice and adjust it for use with float and int buffers the only real difference here apart from changing the types and appending the as float or int buffer is the size of the allocated buffer since we're still technically allocating bite arrays to begin with the size needs to be in byes one bite in Java takes up one bite however floats and integers both take out four bytes which is 32 bits because of this we need to multiply the size of the array by four or shift left two places which is mathematically identical to multiplying by four and that's our buffer utils class back in our texture class let's use this new functionality we'll call GL text image 2D setting our format to be rgba the width and height to the values the type of data to be GL unsigned by and finally fitting in our data array by calling buffer u. create in buffer data you might accidentally be using the lwjgl version of buffer utils so scroll up to the top and make sure that you're not you need to use the one you just created note that we use GL unsigned bite as the type colors are essentially unsigned bytes meaning they range from 0 to 255 inclusive Java unfortunately doesn't have unsigned types and Java's signed bite is rather useless to us since it ranges from -28 to POS 127 inclusive because it can't store anything above 127 and we need to we have to use another data type such as int short would have also worked but I chose to use ins finally we'll unbind the texture since we're done with it and can now deselect it so that we don't accidentally use it in the future we'll return our text integer which holds our ID and we are done our textures are now ready to use an openg I'm going to go ahead and add gets for the three fields we have since we'll need to access them in the future particularly the ID I'm also going to go back up to the Constructor and assign the texture field to our load method with the path as the parameter and that's it our texture class is done we can now easily use it to load images into our game and use them as open gel textures fantastic thanks for watching and I hope you enjoyed the video as always a like is greatly appreciated next episode we'll be rendering an object onto the screen goodbye