3D Platformer Graphics: GameMaker Studio 2 TUTORIAL

nice hey there in this video we are gonna expand on our 2.5 d platformer by adding 3d ground if you haven't seen the first part this card will take you to it but you can still understand this video without having seen that part basically in that part we created a perspective camera and our layers were automatically aligned on the z-axis because of their depth values now we're gonna add vertex buffers to the mix we're gonna create textured faces for the ground to make it more 3d i teach a gamemaker course on udemy about making a crafting game which has 6 hours of content and over 8 000 students you can check it out through the link in the description now let's begin by going back into the project that we created in the first part before we do anything else there are a few settings we have to enable in the camera object so in the create events i'll call some functions to enable z testing which is required for proper depth ordering because we're gonna use actual 3d triangles alpha testing so that transparent pixels actually appear transparent and texture repeating so that we can repeat or tile our textures on the faces so that's done now let's create a new object which will act as our 3d ground you can give it any rectangular sprite this object is gonna need two variables the first one will be ground depth and this will be an integer it's basically the length of the ground on the z axis then the second variable will be ground offset also an integer and this can simply be used to offset the z position of the ground i'll set ground depth to 80. now let's go into our room and here we have our layers at different depth values depending on where they should appear on the z-axis these are my main layers which have a depth of 0 so here i'm gonna create a new instance layer for the 3d ground i'll unlock its depth and set it to 1 this way it will appear behind my main tiles which are at 0. in this layer i'll place instances of the 3d ground object to cover my ground tiles and now we can start working on our code to make these instances 3d first of all we need to create a couple scripts the first one is called vac3 and this contains a constructor called vect3 it takes x y and z as arguments and simply stores them in variables we are gonna use this to create structs for storing 3d points if you don't know what constructors are you can watch my video on structs and constructors next i'm going to create a script called vertex buffers here we're going to create our vertex format so we'll start writing to it then add 3d position texture coordinates and color i'll end it and store it in a global variable now vertex buffers and formats are a complicated topic but luckily i have a video explaining them from scratch you can find it in the cards here now in the same script we are gonna create a function that we are gonna use while building our vortex buffers this is called vertex create phase and it simply builds a face in a vertex buffer each phase is made up of two triangles and each triangle is made up of three points so this function is gonna handle creating all that let's set up the parameters there's the vertex buffer that we are editing and then we have the four points of the face that we are creating these are all gonna be vectors then we have the color and the alpha of the face and then its width and height these two parameters are only going to be used for the texture now let's start coding the function first we have the texture size which i'm making a static variable because it doesn't change this basically means that it'll only be initialized once no matter how many times the function is called you can also make it a global variable or a macro or whatever you want to make it then we have the texture width and height these are currently placeholder as we are gonna chain them later when we add our textures now we're gonna build our first triangle here we have the first point of the triangle the 3d position is simply taken from p1 the texture coordinates are at 0 and 0 and here we are simply passing in the color and the alpha then we have the second point the position here is taken from p2 this is the top right point so that's where the texture coordinates are and then we have the color and the alpha again now for the final point in this triangle we have p3 as the position this is the bottom right point so that's where the texture coordinates are for this now we're gonna build the second triangle with points p1 p3 and p4 p4 is the bottom left point so that's where its texture coordinates are and now we have all we need to build our 3d faces so let's go into the 3d ground objects and add the create events let's open this window in a new workspace first of all here we're gonna set the z coordinates of this object in a new variable it's gonna be equal to the depth with the ground offset added to it then we're gonna create a vertex buffer for our top face later we're gonna create a separate buffer for the faces on the sides i'm doing it this way because they're gonna use different textures i'm gonna get the texture id from the sprite of my grass texture and store it in this variable for later use and then i'm gonna call verdex begin on our vertex buffer using the vertex format that we created earlier so now we can start creating triangles in this buffer we're gonna do that with our vertex create phase function so i'm gonna call that the first argument will be our vertex buffer and now we need to pass in the four points for this phase so the first point is gonna be at the x y and z of the instance but the z is on the other end with the ground depth added to it the second point is gonna be the right most point on that edge then the right most point on the closer edge and then the point at the origin so simply the x y and z then i'll pass in the rest of the arguments the color is -1 which means white the alpha is one the width of this face is bright width as it's aligned across the x-axis and the height of the face is ground depth as it's laid across the z-axis now we're gonna end writing to our vertex buffer and then freeze it so the buffer for the top face is now finished and we just need to draw it for that i'll add the draw event and here call the vertex submit function with our vertex buffer the primitive type will be triangle list since we have passed in a list of triangles and for the texture we are gonna pass in -1 since we are not using a texture for now i'll run the game and now you can see the top faces on the ground areas so we already have a pretty nice 3d effect if you increase the ground depth for an instance you're gonna see that it gets larger on the z axis and if you set a ground offset value then the ground will move by that much on the z axis so making the offset negative means that the ground moves closer to the camera now i'm gonna reset them to their default values we are gonna go back into the create events of the ground objects and build a vertex buffer for the side faces this will be our new vertex buffer then we also need to get the texture for these side faces which uses a dirt texture and now we can begin writing to this buffer with the same vertex format let's create a face and this will be the one that's on the left side the first point is the left one on the further edge the second one is the origin point the third one is the one below that and lastly the one at the further edge so you can see that the order of our points is top left then top right then bottom right and finally bottom left this is the order that our function expects now we're gonna pass in the rest of the arguments so again we have the color and the alpha the width for this face is the ground depth and the height is the sprite height we're gonna build the right face now which uses the exact same properties except dx which is offsets by the sprite width that's all for this buffer so we're gonna end right into it and then freeze it now we also need to draw this buffer in the draw event so i'll duplicate this statement and pass in our second vertex buffer here i'll also go in the create events and for the side faces set the color to gray and now i'll run the game our side faces are also working now and it's already looking much better now let's apply textures to these faces first of all you want to make sure that your texture sprites are set to use separate extra pages since the faces are gonna draw the whole texture page on them which is why you need your textures to be on separate texture pages i'll go in the draw event and in the vertex submit calls pass in the textures for the vertex buffers if you remember we got the texture ids from the sprites and the create event i'll run the game and you can see the textures now but they are so small that you can't make out any details so now we're gonna edit our placeholder values in the create phase function which are the texture width and height variables since our texture width and height are equal to the width and height of the face it means that the size of the visible texture will be 1 pixel that's why it appears so small and to make it 32 pixels which is the size of the texture we simply need to divide the width and the height by the texture size so now the textures appear properly tiled on the faces now if you look closely between the dot tiles and the side faces you're gonna see a gap this is happening because of transparent pixels in the tiles so i'm gonna fix this by reducing the size of the ground on the x-axis but i won't do it here in the room editor i'll do it in the create event i want to reduce the width by 5 pixels on each side so 10 pixels in total so for the left edge i'll increase the x by 5 and now i want to reduce the total width of the instance by 10 pixels so for that i'll modify the image x scale so that the final size ends up being 10 pixels less than the current width we are dividing that by the actual width of the sprites to get a scale value i'll run the game and now you're gonna notice that the gap has disappeared now you can see that the player is still on the very edge of the ground so we need to move it to the center this is actually pretty simple i'll go in the room editor my player is in the instances layer and since the depth of the ground is 80 i'll set the depth of this layer to 40. so now the player is at the center of the ground on the z-axis however you'll notice that the particles coming out of the player are not so to fix this i'm gonna go to the code where the particle system was created and after creating it i'm gonna set its depth to be the same as the depth of the player now the particles will appear with the player at the correct z position the ground does look somewhat empty because all the grass and the other tiles are still on the edge so we need to spread them all across the z-axis for this i'll go in the room and create a new tile layer i'll set its depth 220 and place some tiles here then i'll do the same with another layer this one will be at 60 and now when you run the game you're gonna see the tiles at different levels of depth which gives the game a much more 3d feel now we should also create 3d ground in the background because those layers are still very much flat here i have my background tile layer and some asset layers with the clouds first you want to make sure that the depth for these layers is unlocked so that when you add a new layer the depth for these layers doesn't change automatically so the depth for my background tile layer is 140 i'll create a new instance layer for the 3d ground and set the depth of this layer to 141 so it appears behind the tile layer here i'm gonna place the ground instances and set their depth to 300 so they appear larger and now in the game you can see the 3d grounds in the background in the same way you can keep creating as many 3d grounds as you want in the background to fill all that empty space that is there now there is something i need to fix the dirt texture appears to be too dark and that's because the color for these faces is still set to gray i'm gonna reset these to minus one which is white and now the texture should appear correctly that's it for this video i have many more game maker tutorials which you can check out from here and make sure to subscribe for more game maker content i'll see you in the next video

Channel: GameMakerStation - Matharoo

Views: 33,252

Keywords: gms, gamemaker, gamemaker studio, gamemaker studio 2, game maker 2, gamemaker 2, gm2, gm 2, gms 2, gms2, gamemaker language, gml, tutorial, coding, free, make games, 3d, ground, platformer, 2.5d, 3d platformer, 2.5d platformer, vertex, buffers, mario, example, graphics

Id: Jo09qrDJtuc

Length: 15min 49sec (949 seconds)

Published: Wed Jan 27 2021