tutorial.basic.2

Tutorial 3: Parenting system

Introduction

Hi, welcome back to the second beginners tutorial to uiz!
Today we’ll cover what “parents” are. It is quite important that you understand them properly since it is the way you will have to structure all of your ui.

Parenting in abstract

Sometimes, we want to put one object into another. Why do we want to do this?

This might be because we have a window for example, with a few buttons inside of it. You want those buttons to be “connected” to the window. This way when we drag the window around, the buttons that are "inside" the window are also dragged around.

Another example might be is that you have some sort of square, in which you want to put some health bars, stamina bars, etc…. That square with the different bars could be snapped to the right side of your screen. When we change the size of our window, the square should move with it, but we also want our bars to move with it.

That’s where parenting comes in. It literally allows us to put one object inside another. The object which were putting in another object is called the “child” and the object we’re putting stuff in is called the “parent”. A child can also be another parent for another object.

Does this still sound vague to you? On the parent documentation page is another good example and explanation of how parenting works. Please read the page before continuing this tutorial.

What we ABSOLUTELY CANNOT do, is making a child the parent of it’s own parent. This will cause a lot of issues. Bugs, loops, crashes, etc.

The things that parents do, is they dynamically influence their children’s data. For example, when the position of a parent moves 5 pixels to the left, the child will also move 5 pixels to the left. The parent’s size only has effect on it’s children in some cases, which we’ll cover later.

Another thing to note is that “positions” are added together. For example: a parent might be at position (100px, 150px). The specified position of the child is (100px, 25px). What will happen now is that the position of the parent stays (100px, 150px]) but the position of the child will add up and change to (200px, 175px).

If you would make the position of a child (0,0) it will always be placed inside the top-left corner of that parent.

It is very important that you understand how parenting works in order to properly use uiz.

Parenting in code

Now let’s look at how we actually define our parents. Simple, we just call the uiz_setParent function. It takes 2 arguments: The object we want to give/set a parent (our new “child”) and the object we want to put our object in (our new “parent”). So if we wanted put our “square” inside an “circle”, we would do this by calling uiz_setParent(square, circle).

Now, remember the 4 important points from the last tutorial? "Creating, parenting, variables and fixing." Parenting is in here because it is gives the structure to your ui. You don’t always need to set a parent but more often that not you will need to set a parent.

Quick technical detail here: If you didn’t set a parent for your object, then the default parent for your object is obj_uiZ_controller. Which is an object from which only one exists and should exist. This object is created by using uiz_init().

Example:
Here we put a “square” inside a “gradientsquare”:

///Example 6:
//create event of a newly created object.
//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)
//set the parent
uiz_setParent(square,gradient)
//setup some variables
uiz_position(square, 25,px, 25,px);
uiz_size(square, 40,px, 50,px);
//fix our square object.
uiz_fix(square)