gamemaker best way to handle drawing 3d sprites

How-do-you-do everyone, and welcome to the kickoff of 4 web log posts covering some of the basics of GameMaker. My proper noun is Nathan Ranney, and I have been using GameMaker for well-nigh half dozen years. When I started making games I knew literally nothing about programming, or game development in general. Starting with GameMaker was a really not bad option for me because information technology had its ain programming language, GML, which was a little more lenient and less obtuse than a lot of other languages out at that place. I accept fabricated dozens upon dozens of prototypes and a handful of pocket-sized completed games. I desire to apply these web log posts to show you 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

Nosotros are going to be talking a lot about sprites in this post. A sprite is basically just an image that is being shown on your screen. A sprite tin exist a unmarried paradigm, or a serial of images that class an animation.

Start we demand to break downwardly what draw_sprite_ext(); is, and all of the arguments it uses. Draw_sprite_ext(); is an extended version of draw_sprite(); and gives us much more control over the sprite we are drawing. Primarily this function is used to draw sprites to the screen. Using this role, we can modify the calibration, angle, color blending, and blastoff of the sprite being drawn. Check the tabular array beneath for all of the arguments this role requires:

Statement	Description
sprite	Index of the sprite you want to draw.
frame	Private frame of the sprite you are drawing.
x	X position of where you are drawing the sprite.
y	Y position of where you lot 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	Blastoff of the sprite. Range from transparent (0) to opaque (1).

In that location is a bit of setup required earlier we tin actually apply this function effectively. We are going to define these arguments as variables, and throw all of it into a script and so it can be used on any object.

Create a script and name it animation_init. Add the following lines:

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

By setting the sprite variable to sprite_index, it will utilise the sprite that the object has set. While we are creating scripts, nosotros 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(outset, end, shift);  if(argument0 < argument1){     render min(argument0 + argument2, argument1);  }else{     render max(argument0 - argument2, argument1); }                  

This script allows you to increment a value by some other value, until it reaches a maximum value. I'll evidence you what we can practise with this a lilliputian later. Moving on! Create another script and proper name information technology player_buttons. Add the following code:

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

All we are doing here is storing our keyboard inputs into variables. These are all booleans, meaning they can either be true or false. This makes it much easier to address button presses later on.

At present that nosotros have our animation_init script set to go, nosotros are ready to commencement drawing… that is… one time we accept a sprite to describe! Go ahead and create a new sprite, and proper name information technology sprPlayer_Idle. Make sure this sprite has multiple frames, and each frame is different. Otherwise you won't be able to tell it's animating! Set the sprite origin to the x center, and y lesser. If you are using the sprites that I am using, that is sixteen and 32 respectively.

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

Next we need an object. Create a new object and proper name it oPlayer. Ready your sprPlayer_Idle sprite every bit the object sprite. Add the Create, Pace, End Step, and Draw events. Add together the Execute Lawmaking action to each upshot. Open the Create event lawmaking and add the following lines:

                      //animation  animation_init();  //movement left = false; right = simulated; upwardly = false; downwardly = false;                  

Next we move on the to Draw result. In the Draw event, add the following lines:

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

Now we are almost ready to run the game and see our sprite being fatigued on screen. Pretty exciting right? Create a room, name it whatever you want, and identify your oPlayer object in the room. When you run the game you should run into the sprPlayer_Idle sprite being drawn. Nevertheless that sprite isn't blithe, and it doesn't motility. It'due south only sitting in that location being deadening. Let'due south ready that.

Animation

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

          //increase frame past frameSpeed frame += frameSpeed;                  

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

          //reset frame if information technology 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, will increment the frame nosotros are drawing by the frameSpeed. The following script is there to keep frame from counting on forever and always. This is too useful for animation purposes subsequently. The sprite_get_number() function returns the full number of frames in whatever given sprite. So if our frame is greater than or equal to that number, reset frame to 0. If y'all need to alter the animation speed of your sprite, all you lot demand to do is alter the value of frameSpeed.

That's plenty script creation for now. Let'south put all of this stuff to use. Open the Footstep consequence of your oPlayer object, and add the following lines:

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

Open End Footstep and add the following lines:

          //blitheness  frame_reset();                  

Go alee and run the game. You should see your lilliputian dude animating! Depending on your frameSpeed, the animation may not look correct. Try adjusting the frameSpeed value and find something that looks correct 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 blitheness they are on.

Scale

Let's move on to the x and y scaling. Nosotros will showtime past flipping the sprite to the left and correct. This is something that I've seen a lot of folks use the image_xscale variable for, and you don't necessarily want to do that all the time. Image_xscale will flip the sprite, but information technology 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 congenital-in variables that can cause issues. Add together a couple more than lines to the step event, below the code we just added:

          //change facing if(left){     facing = -1; }else if(right){     facing = one; }                  

irresolute the facing management

Run your game, and if everything was done correctly, you should be able to flip the direction your newly animated sprite is at present facing past pushing the left and right arrow keys. This is because in the Draw event, nosotros are multiplying xScale by facing. The best part well-nigh this is that your sprite mask is not changing when your sprite is flipped! Now, do you remember the Approach script we added? Using that to brand your sprites squash and stretch is a great manner to add some life to your animations. Add together the post-obit lines below what we just added:

          //modify scale if(keyboard_check_pressed(vk_space)){     xScale = 1.5;     yScale = one.five; } xScale = approach (xScale,1,0.03); yScale = approach (yScale,1,0.03);                  

Run your game and slap the infinite bar. Your sprite should grow by fifty% and then shrink back down to normal scale. Adjusting the x/y calibration of your sprite can accept a huge impact on the feeling of your game. Experiment with this a fleck and find some values that feel right to you. I like to create a squash_stretch script because I use this play a joke on all the time. Here is what that script looks similar.

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

You can then replace the xScale and yScale lines with squash_strech(1.5, 1.5).

Calibration!

Angle and rotation

Up next nosotros have angle, which is basically simply rotation. When using angle, be certain to use values between 0 and 360.  I'yard sure that by now yous tin figure out how this will work. Become ahead and effort to adjust the angle using the upward and down pointer keys. Did you take whatever luck? Bank check out the code below and see if your code is like:

          //modify angle/rotation if(up){     angle -= two; }else if(downwardly){     bending += 2; }                  

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 at present, which means in that location is no color blending, and your sprite appears as normal.

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

Blastoff

Finally nosotros take fabricated 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. Yous could utilize this for all kinds of stuff similar making your graphic symbol blink afterwards taking damage, or turning partially invisible when they are sneaking around. Attempt adjusting the alpha variable and run into what happens! Here is the code I used to change the alpha. This uses the A and S keys to subtract and increase the alpha.

          //alter alpha if(keyboard_check(ord("A"))){     blastoff = approach(alpha,0,0.05); }else if(keyboard_check(ord("S"))){     alpha = approach(blastoff,1,0.05); }                  

This is another skilful place to use approach, as information technology prevents the alpha value from going beneath 0 or above 1.

Blastoff adjustments

That should comprehend the ins and outs of what I believe is 1 of the nearly important functions in GameMaker. One time you get the hang of draw_sprite_ext(); you'll exist able to create a lot of really interesting furnishings, and squeeze the most juice out of your sprites. You can download this GameMaker project file below.

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

Important Links

• Part two of GameMaker Nuts: State Machines
• Function 3 of GameMaker Basics: Juicing Your Movements
• Part 4 of GameMaker Basics: Hitboxes and Hurtboxes
• Sprites and animation past Alexander Prokopiev
• Boosted reading on GameMaker draw functions
• GameMaker Project File

Nathan Ranney is the founder of punk house game dev shop, RatCasket. He's all-time known for the creation and development of Kerfuffle, an online indie fighting game.

collinstherrown.blogspot.com

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

Share this post