tutorial.basic.6
This tutorial we’ll cover alpha & depth.
The first thing that you should know is that there are different types of alpha in uiz:
- There is alpha that will directly affect the object, and only the object itself.
- There is alpha that will affect the object, and all the children (and grandchildren) of the object.
The first one is quite straight forward. You can utilize this alpha by setting the variable image_alpha. Use this function for that:
-
uiz_alpha(instanceid, head_alpha, image_alpha): Use this function to set the alpha of an object. You may need to call uiz_fix, uiz_fixChildren or uiz_redraw to actually calculate new alpha values.
- instanceid: What instance's alpha to change
- head_alpha: What the head alpha of the object should be. Children also inherit this alpha.
- image_alpha: What the image alpha of the object should be. Children dont inherit this alpha.
Image_alpha is also a build in variable in game maker (you might have recognized it). Just like in game maker, alpha values need to be from 0 up to 1. A value of 0 means that the object is invisible, and a value of 1 (which is the default) means that the object is fully visible. In the example below we’ll make the gradientsquare object half visible, but leave the alpha of the square object. We can do this by setting image_alpha to 0.5 for gradientsquare:
EXAMPLE 18:
//initialize uiz
uiz_init()
//create our gradientsquare object
gradient=uiz_c(obj_uiZ_gradientsquare)
//our parent is the uiz controller object.
//setup some variables
uiz_position(gradient, 50,px, 50,px);
uiz_size(gradient, 200,px, 200,px);
uiz_alpha(gradient, 1, 0.5);
//fix our square object.
uiz_fix(gradient)
//create our square object
square=uiz_c(obj_uiZ_square)
//set the parent
uiz_setParent(square,gradient)
//setup some variables
uiz_position(square, .3,fc, .6,fc);
uiz_size(square, 40,px, 50,px);
//fix our square object.
uiz_fix(square)Giving this result:
IMAGE 23
Compare that with an image_alpha of 1:
IMAGE 11
Our second way of setting alpha is by using the “head alpha” value of an object. What this will do is set the alpha for that object, and then also apply that alpha to all the children (all the object that are below that object in the ui tree) We’ll set the head_alpha of “gradientsquare” to 0.5:
EXAMPLE 19:
//initialize uiz
uiz_init()
//create our gradientsquare object
gradient=uiz_c(obj_uiZ_gradientsquare)
//our parent is the uiz controller object.
//setup some variables
uiz_position(gradient, 50,px, 50,px);
uiz_size(gradient, 200,px, 200,px);
uiz_alpha(gradient, 1, 0.5); //only this line a little bit different from example 18
//fix our square object.
uiz_fix(gradient)
//create our square object
square=uiz_c(obj_uiZ_square)
//set the parent
uiz_setParent(square,gradient)
//setup some variables
uiz_position(square, .3,fc, .6,fc);
uiz_size(square, 40,px, 50,px);
//fix our square object.
uiz_fix(square)Which will give:
IMAGE 24
Compare that to the result we got in the last example (example 18):
IMAGE 23
And compare it to the same objects with an alpha of 1:
IMAGE 11
In image 24, you can see that the white square has also gotten an alpha of 0.5, while this was not the case in image 23 (which was generated by example 18 instead of 19). This showcases the difference between image alpha and head alpha.
You can also make combination of these two values, when you do this the final alpha of your object is a combination of image_alpha and head_alpha. Practically image_alpha is multiplied with head_alpha. So if image_alpha=0.5 and head_alpha=0.5 then the alpha value being shown to the user will be an alpha value of 0.25. Here is an example:
EXAMPLE 20:
//initialize uiz
uiz_init()
//create our gradientsquare object
gradient=uiz_c(obj_uiZ_gradientsquare)
//our parent is the uiz controller object.
//setup some variables
uiz_position(gradient, 50,px, 50,px);
uiz_size(gradient, 200,px, 200,px);
uiz_alpha(gradient, 0.5, 0.5);
//fix our square object.
uiz_fix(gradient)
//create our square object
square=uiz_c(obj_uiZ_square)
//set the parent
uiz_setParent(square,gradient)
//setup some variables
uiz_position(square, .3,fc, .6,fc);
uiz_size(square, 40,px, 50,px);
//fix our square object.
uiz_fix(square)This will give the following:
IMAGE 25
Compare this to image 11,23 and 24.
Depth is also a concept in game maker itself. Uiz handles depth in a much different way. Sometimes when you have two objects, you might need them to overlap, but you want a specific object to be drawn over all other objects. For example, a window needs to be drawn over/above all other non-window objects. We would way that the depth isn’t very “deep”. Objects that are deeper in the background will have a higher “depth”.
When setting an objects depth in uiz, that depth will also apply to all children and grandchildren (anything below that object in the ui tree). This means that children are always in front of their parent. You should see the uiZ parenting system as a tree. As a result, you should also see depth sorting in the same way. The depth manual page explains this well. Please read this before continuing this tutorial.
How do we set depth? You should NOT change the “depth” variable. This is handled by uiz code. What you should do is use the uiz_depth_set function:
-
uiz_depth_set(instanceid, depth):
- instanceid: The instanceid of the uiZ object that you want to modify
- depth: The depth value of this object. With lower values the object is placed further to the front, while higher values make it go further to the back.
We’ll just make 2 object purposefully overlap each other like this:
EXAMPLE 21:
///Example 21:
//*
//initialize uiz
uiz_init()
//create our gradientsquare object
gradient=uiz_c(obj_uiZ_gradientsquare)
//our parent is the uiz controller object.
//setup some variables
uiz_position(gradient, 50,px, 50,px);
uiz_size(gradient, 200,px, 200,px);
//fix our square object.
uiz_fix(gradient)
//create our square object
square=uiz_c(obj_uiZ_square)
//our parent is the uiz controller object.
//setup some variables
uiz_position(square, 100,px, 150,px);
uiz_size(square, 200,px, 120,px);
//fix our square object.
uiz_fix(square)Giving this result:
IMAGE 27
Now we want the gradient square to be in front of the white square. Let set the square depth to 5:
EXAMPLE 22:
//*
//initialize uiz
uiz_init()
//create our gradientsquare object
gradient=uiz_c(obj_uiZ_gradientsquare)
//our parent is the uiz controller object.
//setup some variables
uiz_position(gradient, 50,px, 50,px);
uiz_size(gradient, 200,px, 200,px);
//fix our square object.
uiz_fix(gradient)
//create our square object
square=uiz_c(obj_uiZ_square)
//our parent is the uiz controller object.
//setup some variables
uiz_depth_set(square, 5);
uiz_position(square, 100,px, 150,px);
uiz_size(square, 200,px, 120,px);
//fix our square object.
uiz_fix(square);Which gives this result:
IMAGE 26
Compare that to what we had before changing any depths:
IMAGE 27
That was it for this tutorial! Hope you learned something again, such as:
- How uiZ handles alpha
- How there is head alpha, and how this propagates to children.
- How there is image alpha
- How depth works in uiZ
- How to set the depth of a uiZ object.
Next time we’ll look more into how to customize objects themselves and how to use animations in uiz. Until then!