tutorial.basic.7
Hi, so far we’ve covered a lot about positioning and a lot of other stuff using a simple white square and a gradient. Today we’re going to learn how to customize objects, then we are going to learn how to use animations!
So a little bit about customization: It is impossible to make a different tutorial about every single customizable thing for every single little object. It would take hundreds of tutorials to do that and it would just be boring. Luckily, we’ve got a manual for this. The sidebar of the manual/wiki is an entry called "objects". Go ahead and click the little triangle next to it to expand the entry. Here you see a list of all built in uiZ objects. To see how we can customize our square, go to the documentation page of "obj_uiZ_square".
Here, you can see a simple description of our object. We can see that it had an optional outline. If we want to know how to enable that outline, we’d have to look into the “Property Variables” or "Functions" list. It is very much recommended to always use the functions, as their usage are the best programming practice. Function names are more resilient to future internal changes. Also, functions provide better auto completion in game maker. Enough reason to just skip to "Functions".
The "Property Variables" and "Functions" list show every single variable that you can change. It shows that in this format:
- variable_name[default_value]: Description.
If you want to know what kind of data you have to fill in, whether it be Booleans(true of false values), colors (like c_white or c_red), reals (numbers), or strings(text), then just look at the default value (the value between the [ ]). If the default value is a number, you can set the variable to another number. If the default variable is false, then you can set the variable to either true of false. The default value is very useful as a starting point for customization.
Now, before you look at the example, I want you to try this yourself. Make a new object in a new room and make a green square with an orange outline in the center of the screen of 3 dp in width and 3 dp height. Just don’t forget to init uiz, and don’t forget our “4 points”: Creation, parenting, variables/settings and fixing. (You can ignore parenting for now though)
The answer to the code:
EXAMPLE 23:
//initialize uiz
uiz_init()
//create our square object
square=uiz_c(obj_uiZ_square)
//setup some variables
uiz_position(square, 0,uiz_center, 0,uiz_center);
uiz_size(square, 3,dp, 3,dp);
uiz_square_setcolor(square, c_green);
uiz_square_setoutline(square, true, c_orange, 1);
//fix our square object.
uiz_fix(square);Giving this result:
IMAGE 30
Beautiful isn’t it? Well… not really. But once you get into customizing other objects, then I’m sure you can come up with some amazing looking ui!
For this, we’ll use the object: obj_uiZ_rotator. What you should do now is look at the manual (open the obj_uiZ_rotator page in the objects folder) and read everything it says.
As the documentation says, this is just an object that draws a sprite and rotates it using an animation. But what about the animation? If we look at the default value of “animation” we can see that it’s set to “uiz_straight”. Well, I’m going to tell you, it’s quite easy.
Just like the immense number of settings for every objects, there are also a lot of animations. We cannot mention all of them in the tutorial. Using the documentation as a reference is the best way to look and learn to use all animations. Go to the manual and open the animation folder, and open “Animation constants”. Here, there is an entire list showing you all possible animations, and a graph of what they look like. Now just for reference, create a new empty object in a new room and create 2 objects called “obj_uiZ_rotator”. Put them in positions you’d like it to be in, making them not overlap. And just create something like this:
IMAGE 31
You should be able to create something like this completely by yourself using previous tutorials. It would be a good practice to do so. However, if you want to move on, or cheat a bit, I used this code:
EXAMPLE 24:
//initialize uiz
uiz_init()
//create our rot1 object
rot1=uiz_c(obj_uiZ_rotator)
//setup some variables
uiz_position(rot1, 0,uiz_snapleft, 0,uiz_center);
uiz_size(rot1, 1,dp, 1,dp);
//fix our rot1 object.
uiz_fix(rot1);
//create our rot2 object
rot2=uiz_c(obj_uiZ_rotator)
//setup some variables
uiz_position(rot1, 0,uiz_snapright, 0,uiz_center);
uiz_size(rot1, 1,dp, 1,dp);
//fix our rot2 object.
uiz_fix(rot2);Now you can see 2 rotating gears. But they move a little bit fast. If we want to change the animation on them, it’d be nice to easily see them rotating. Right now it takes 1 second for the sprite to rotate 360 degrees. How do I know that? The manual! If you look at the variable “rotatingtime” you can see the description of it: “how many seconds a single rotation takes”, and also that the default value is one second.
Technical details: Why do I input this value in seconds? Well, your game might run on a room_speed of 30 (30 ticks per second), or on a room speed of 60. Using values in ticks instead of seconds would mean that the animation would take different times on different room speeds. 30 ticks would take one second if the room_speed was 30. But if the room_speed was 60, then it would take only half of that time. So uiz automatically calculates how many ticks fit in all those seconds, and then uses those values. It even supports mid-animation room_speed changes which will not give you any problems.
We’ll now set the speed of the rotation to 5 seconds:
EXAMPLE 25:
//initialize uiz
uiz_init()
//create our rot1 object
rot1=uiz_c(obj_uiZ_rotator)
//setup some variables
uiz_position(rot1, 0,uiz_snapleft, 0,uiz_center);
uiz_size(rot1, 1,dp, 1,dp);
uiz_rotator_setanimation(rot1, uiz_straight, 5);//set the time to move a full circle to 5.
//fix our rot1 object.
uiz_fix(rot1);
//create our rot2 object
rot2=uiz_c(obj_uiZ_rotator)
//setup some variables
uiz_position(rot1, 0,uiz_snapright, 0,uiz_center);
uiz_size(rot1, 1,dp, 1,dp);
uiz_rotator_setanimation(rot2, uiz_straight, 5);//set the time to move a full circle to 5.
//fix our rot2 object.
uiz_fix(rot2);Great, now our sprites rotate way slower, so we can actually see what we are doing. If you look at the manual, we can see that “animation” defines what animation we use. Right now it’s set to uiz_straight. If we look at animation constants and look for the graph of uiz_straight, we can see that it’s a straight line. Now image the horizontal axis on the graph to be time, starting from 0 to our given “rotation time”. Then image the vertical axis being the rotation, the bottom being 0 degrees and the top being 360 degrees. The line is just straight meaning our rotation will be linear, and it will rotate with one speed for the entire time. If we now take uiz_quadratic_in for example, we can see that the graph will rotate way slower in the beginning and faster in the end.
IMAGE 33: graph of uiz_straight
IMAGE 32: graph of uiz_quadratic_in
So how do we change the animation? Simple, just change the variable animation of obj_uiZ_rotator to the desired animation. This can be done like this: (we are setting the right rotator’s animation to uiz_quadratic_in)
EXAMPLE 26:
//initialize uiz
uiz_init()
//create our rot1 object
rot1=uiz_c(obj_uiZ_rotator)
//setup some variables
uiz_position(rot1, 0,uiz_snapleft, 0,uiz_center);
uiz_size(rot1, 1,dp, 1,dp);
uiz_rotator_setanimation(rot1, uiz_straight, 5);//set the time to move a full circle to 5.
//fix our rot1 object.
uiz_fix(rot1);
//create our rot2 object
rot2=uiz_c(obj_uiZ_rotator)
//setup some variables
uiz_position(rot2, 0,uiz_snapright, 0,uiz_center);
uiz_size(rot2, 1,dp, 1,dp);
uiz_rotator_setanimation(rot2, uiz_quadratic_in, 5);//set the time to move a full circle to 5 using the animation uiz_quadratic_in.
//fix our rot2 object.
uiz_fix(rot2);Now we can see that the left gear still rotates at the same speed. The right one starts of very slow, but goes faster, as it keeps rotating. You might also notice that I like “stops” when it has done a full rotation. This is because of how the graph works. The slope of the graph at the beginning and end don’t line up properly, which gives the stopping effect. Uiz_quadratic_inout on the other hand does have the same starting speed as ending speed. We’ll try using that and see how it looks:
EXAMPLE 27:
//initialize uiz
uiz_init()
//create our rot1 object
rot1=uiz_c(obj_uiZ_rotator)
//setup some variables
uiz_position(rot1, 0,uiz_snapleft, 0,uiz_center);
uiz_size(rot1, 1,dp, 1,dp);
uiz_rotator_setanimation(rot1, uiz_straight, 5);//set the time to move a full circle to 5.
//fix our rot1 object.
uiz_fix(rot1);
//create our rot2 object
rot2=uiz_c(obj_uiZ_rotator)
//setup some variables
uiz_position(rot2, 0,uiz_snapright, 0,uiz_center);
uiz_size(rot2, 1,dp, 1,dp);
uiz_rotator_setanimation(rot2, uiz_quadratic_inout, 5);//set the time to move a full circle to 5 using the animation uiz_quadratic_in.
//fix our rot2 object.
uiz_fix(rot2);Way better isn’t it? We’ve now set an nice animation for the object, which first goes slow, then faster and faster, and then slows down again.
How do I know which animations to use and which not to use? Not all animations fit in every case. The quadratic_in animation for example creating a nasty looking stop in our rotator object. Does this mean we should never use uiz_quadratic_in? No, the rotator object is an object with a repeating animation. When we press a button on a scrollbar, then that scrollbar should move down a little bit. This can be done using animations in uiz and since pressing that button and moving the scrollbar is not a continuously running animation, uiz_quadratic_in would be ok to use. So just use this plan:
IMAGE 34
That concludes it for animations, Just know that you can apply your animations to a whole lot more things than rotating sprites. They are in sliders, scrollbars, and a lot of other moving things!
This tutorial you learned about:
- Finding objects in the manual
- Setting animation properties on objects that support it
- What animation types work well when having continuous animations.
Until next tutorial!