gamemaekr 3d optimal way to draw walls

Hello everyone, and welcome to the commencement of four blog posts covering some of the nuts of GameMaker. My proper name is Nathan Ranney, and I have been using GameMaker for most 6 years. When I started making games I knew literally nothing about programming, or game development in general. Starting with GameMaker was a actually great option for me considering information technology had its own programming language, GML, which was a little more lenient and less obtuse than a lot of other languages out there. I accept made dozens upon dozens of prototypes and a handful of pocket-size completed games. I want to use these blog posts to bear witness you lot some of the things I wish knew when I started out.

This blog assumes you are already somewhat familiar with GameMaker and GML.

Overview and setup

We are going to exist talking a lot about sprites in this post. A sprite is basically just an image that is being shown on your screen. A sprite can be a single image, or a series of images that form an animation.

First nosotros need to pause downwards what draw_sprite_ext(); is, and all of the arguments it uses. Draw_sprite_ext(); is an extended version of draw_sprite(); and gives the states much more control over the sprite we are drawing. Primarily this function is used to draw sprites to the screen. Using this office, we can change the scale, angle, color blending, and alpha of the sprite being drawn. Cheque the table below for all of the arguments this role requires:

Argument	Description
sprite	Alphabetize of the sprite you want to draw.
frame	Individual frame of the sprite you lot are cartoon.
x	Ten position of where you are drawing the sprite.
y	Y position of where you are drawing the sprite.
xscale	Horizontal scaling of the sprite.
yscale	Vertical scaling of the sprite.
rot	Angle/rotation of the sprite.
color	Color blending (c_white displays as normal).
alpha	Alpha of the sprite. Range from transparent (0) to opaque (1).

At that place is a fleck of setup required before we tin really employ this function effectively. We are going to define these arguments every bit variables, and throw all of it into a script then information technology can exist used on whatsoever object.

Create a script and proper name it animation_init. Add the post-obit lines:

          //initialize variables for drawing, and animation. //draw sprite = sprite_index; frame = 0; xPos = x; yPos = y; xScale = ane; yScale = i; angle = 0; color = c_white; alpha = ane;  //blitheness frameSpeed = 1; facing = i;                  

By setting the sprite variable to sprite_index, information technology will use the sprite that the object has ready. While we are creating scripts, we may as well create a couple of helper scripts we will need subsequently. Create a new script chosen approach and add the following lines:

          //approach(start, terminate, shift);  if(argument0 < argument1){     return min(argument0 + argument2, argument1);  }else{     render max(argument0 - argument2, argument1); }                  

This script allows you to increment a value by another value, until information technology reaches a maximum value. I'll show you lot what we can do with this a piffling later. Moving on! Create another script and proper noun it player_buttons. Add together the following code:

          left = keyboard_check(vk_left); right = keyboard_check(vk_right); upward = keyboard_check(vk_up); downwards = keyboard_check(vk_down);                  

All we are doing hither is storing our keyboard inputs into variables. These are all booleans, significant they can either exist true or false. This makes information technology much easier to address button presses later on on.

Now that we have our animation_init script prepare to become, we are set to showtime drawing… that is… once we have a sprite to draw! Go alee and create a new sprite, and name it sprPlayer_Idle. Brand certain this sprite has multiple frames, and each frame is different. Otherwise you lot won't be able to tell it's animating! Set the sprite origin to the x center, and y bottom. If you are using the sprites that I am using, that is 16 and 32 respectively.

Hither is a link to all of the sprites I am using. I recommend downloading them and following along.

Next we need an object. Create a new object and name it oPlayer. Set your sprPlayer_Idle sprite as the object sprite. Add the Create, Step, Finish Stride, and Draw events. Add together the Execute Code activeness to each event. Open up the Create event code and add the post-obit lines:

                      //blitheness  animation_init();  //motility left = false; right = false; up = false; down = false;                  

Side by side we move on the to Draw outcome. In the Draw event, add the following lines:

          //describe sprite draw_sprite_ext(sprite,frame,xPos,yPos,xScale * facing,yScale,bending,color,alpha);                  

Now nosotros are almost ready to run the game and run into our sprite being drawn on screen. Pretty exciting right? Create a room, name information technology whatever you desire, and place your oPlayer object in the room. When y'all run the game you should run into the sprPlayer_Idle sprite being drawn. Nonetheless that sprite isn't animated, and it doesn't move. It's simply sitting there beingness ho-hum. Permit'south gear up that.

Animation

Assuming that your sprite has multiple frames, we need to animate that sprite! Since we are manually cartoon the sprite, we tin't apply built in variables similar image_speed to animate. Nonetheless we did already define our own image_speed equivalent with frameSpeed. Create a new script, name it frame_counter, and add the following lines:

          //increment frame past frameSpeed frame += frameSpeed;                  

Then, create another script and name it frame_reset. Add the following lines:

          //reset frame if it is greater than the total number of frames in the sprite if(floor(frame) >= sprite_get_number(sprite)){     frame = 0; }                  

The first script, frame_counter, volition increase the frame nosotros are drawing by the frameSpeed. The following script is there to keep frame from counting on forever and ever. This is likewise useful for animation purposes afterward. The sprite_get_number() function returns the full number of frames in any given sprite. So if our frame is greater than or equal to that number, reset frame to 0. If you lot need to change the blitheness speed of your sprite, all you lot need to do is change the value of frameSpeed.

That's plenty script creation for at present. Let's put all of this stuff to employ. Open the Step outcome of your oPlayer object, and add the following lines:

          //buttons player_buttons();  //animation frame_counter();                  

Open End Footstep and add together the following lines:

          //blitheness  frame_reset();                  

Go ahead and run the game. You should encounter your little dude animating! Depending on your frameSpeed, the blitheness may not look right. Endeavor adjusting the frameSpeed value and find something that looks right to you.

The guy on the left is animating at a frameSpeed of 0.10. His hyperactive friend on the right is animating at a frameSpeed of i. This is running at 60fps in game. The number above their heads indicate the current frame of animation they are on.

Scale

Let's motion on to the ten and y scaling. We will start by flipping the sprite to the left and right. This is something that I've seen a lot of folks employ the image_xscale variable for, and yous don't necessarily want to do that all the time. Image_xscale will flip the sprite, but it also flips the sprite mask, which can cause problems. Part of the reason we are using draw_sprite_ext(); is that we are bypassing all of these built-in variables that tin can cause issues. Add a couple more lines to the stride upshot, below the code nosotros just added:

          //modify facing if(left){     facing = -i; }else if(right){     facing = 1; }                  

changing the facing direction

Run your game, and if everything was done correctly, you should exist able to flip the direction your newly animated sprite is now facing by pushing the left and right arrow keys. This is because in the Describe event, we are multiplying xScale by facing. The best part about this is that your sprite mask is not irresolute when your sprite is flipped! Now, do you remember the Approach script we added? Using that to make your sprites squash and stretch is a great way to add some life to your animations. Add the following lines below what we just added:

          //change scale if(keyboard_check_pressed(vk_space)){     xScale = 1.5;     yScale = 1.5; } xScale = approach (xScale,1,0.03); yScale = arroyo (yScale,one,0.03);                  

Run your game and slap the space bar. Your sprite should grow by 50% and then shrink back downward to normal scale. Adjusting the x/y scale of your sprite tin take a huge impact on the feeling of your game. Experiment with this a bit and observe some values that feel right to you. I similar to create a squash_stretch script because I use this flim-flam all the time. Here is what that script looks like.

          //adjust x and y scale xScale = argument0; yScale = argument1;                  

You tin can and then supercede the xScale and yScale lines with squash_strech(1.5, one.five).

Calibration!

Angle and rotation

Up side by side we have angle, which is basically merely rotation. When using angle, be sure to use values between 0 and 360.  I'm sure that by now you tin figure out how this will work. Go ahead and endeavour to adjust the bending using the up and down arrow keys. Did you have whatsoever luck? Check out the code below and see if your code is like:

          //change angle/rotation if(upward){     angle -= 2; }else if(down){     bending += ii; }                  

Rotation

Color Blending

The next statement is color, specifically, this refers to colour blending. Whatever color you put in here (such as c_red) will blend your current sprite into that color. We are going to use c_white for now, which means there is no color blending, and your sprite appears as normal.

Colors from left to right: c_white, c_red, and c_lime

Alpha

Finally we have made it to the last argument in draw_sprite_ext();! Alpha is the transparency of your sprite. It ranges from 0, which is totally transparent, to 1, which is totally opaque. You could use this for all kinds of stuff similar making your character blink afterwards taking damage, or turning partially invisible when they are sneaking around. Endeavour adjusting the alpha variable and encounter what happens! Hither is the code I used to alter the alpha. This uses the A and S keys to decrease and increase the alpha.

          //change blastoff if(keyboard_check(ord("A"))){     alpha = arroyo(alpha,0,0.05); }else if(keyboard_check(ord("Southward"))){     blastoff = arroyo(alpha,1,0.05); }                  

This is some other expert place to use approach, as information technology prevents the alpha value from going below 0 or above 1.

Alpha adjustments

That should cover the ins and outs of what I believe is one of the virtually of import functions in GameMaker. Once you get the hang of draw_sprite_ext(); you'll be able to create a lot of really interesting effects, and clasp the nearly juice out of your sprites. You can download this GameMaker project file beneath.

You tin follow me on twitter, and on my website for more gamedev related stuff!

Important Links

• Part 2 of GameMaker Basics: Land Machines
• Part 3 of GameMaker Basics: Juicing Your Movements
• Part 4 of GameMaker Nuts: Hitboxes and Hurtboxes
• Sprites and blitheness past Alexander Prokopiev
• Additional reading on GameMaker draw functions
• GameMaker Project File

Nathan Ranney is the founder of punk business firm game dev shop, RatCasket. He's best known for the cosmos and development of Kerfuffle, an online indie fighting game.

fisherphrovis.blogspot.com

Source: https://developer.amazon.com/blogs/appstore/post/d5832ec5-fd9b-4bcb-bcc1-27decfb5fb8d/gamemaker-basics-drawing-sprites

Share this post