tutorial.basic.1

Tutorial 1: basic positioning

Introduction

Hi, welcome to this 14 part basic uiZ tutorial. This is a very extensive tutorial for those who are beginner up to intermediate in using game maker. Still, a basic understanding of gml is required.

Creating an object

Let dive right into the first tutorial, shall we? We start off by creating A simple square. If you imported this asset into your project, then there should be an object called “obj_uiZ_square”. This is a simple object displaying a square of given color with an optional outline. To start off, create a new object (not the square, a new blank object) and place it in a empty room. We need initialize uiZ. We can easily do this by calling the script “uiz_init()” without any arguments inside the create event of the newly created object. To create an uiZ object, use the function uiz_c(), which is a very simple version of instance_create. Whereas instance_create takes an object, x and a y, uiz_c only takes an object. So calling uiz_c(obj_uiZ_square) in a create event should be fine. Uiz_c (and instance_create as well) should return an “instance id” about which you can read more in the game maker manual. But practically it’s a reference to our created object.

Example 1:

//create event of a newly created object.
//initialize uiz
uiz_init()
//create our square object
square = uiz_c(obj_uiZ_square)

We have created our square, and the result should look like this:

IMAGE 1

Not a lot of stuff huh?… But, try to resize your window! (if this isn’t working for you go to: Global Game Setting -> Windows -> Graphics and make sure “Allow the player to resize the game window” is checked.)
After you resized your window just A bit, you should see something like this:

IMAGE 2

Fixing

You can now see a tiny white square on the top-left of your screen. Why isn’t this square being drawn immediately? Good question! The answer is that we forgot to “fix” our object. Practically fixing is making sure that our object will we put into the right place and all object variables setup correctly. The reason why things worked when we resized the window is because every uiZ object will be automatically “fixed” when we do that. How do we “fix”? Very easy. Just call the script “uiz_fix()”. This is where the handle to our object comes in. Remember? It was the “Square” part in “square=uiz_c(obj_uiZ_square)” that now refers to the obj_uiZ_square object. We use this by putting inside the first argument of uiz_fix, like this:

Example 2:

//create event of a newly created object.
//initialize uiz
uiz_init()
//create our square object
square = uiz_c(obj_uiZ_square)
//fix our square object.
uiz_fix(square)

Now our square will look like this from the beginning of our run:

IMAGE 2

Stages of creating a uiZ object

There are generally 4 parts in uiz object generation:

Creation
Setting parents
Setting variables/settings
Fixing.

Setting up variables and settings

“Creation” and “fixing” is already covered and we’ll cover parents in a different tutorial. Let’s focus on the variables/settings part. To get a good idea of all general uiz variables, please open op the uiz documentation: https://github.com/Tthecreator/uiZ/wiki. Open it up and click the “Positioning” item. Here you can read about what ways there are to position and size your object. For now, we will just focus on positioning our object. By default, our object at position 0,0. You can see this in the screenshot above (the square is in the top-left corner). Let’s change our object position to 100x200 pixels! To do this call uiz_position(square, 100,px, 200,px); The first argument is a reference to our square. The second and third argument say that the x position of the object should be “100 pixels” (px is short for pixels). The fourth and fifth argument say that the y position of the object should be “200 pixels”. You can swap the “px” out for other values, but that is for a later tutorial.

Example 3:

//create event of a newly created object.
//initialize uiz
uiz_init()
//create our square object
square = uiz_c(obj_uiZ_square)
//setup some variables
uiz_position(square, 100,px, 200,px);
//fix our square object.
uiz_fix(square)

IMAGE 3

Ok, not so fast there! Let take a close look our function: “uiz_position(square, 100,px, 200,px);”. First of all remember our 4 points? Creation, parents, variables and fixing. Things are supposed to go in that order, thus we put our line which changes some setting of our object after setting the parent, which we didn’t do, so we have to put if between our create part, and our fixing part.

Sizing

Now let’s try sizing! If you are still on the positioning wiki page, you can scroll all the way down to read about sizing. Let's use the uiz_size(instanceid, width, widthType, height, heightType) function. Let's say we want to change our size to 50x50 pixels. The default is 10x10 pixels as you can see in all previous screen shots.

Example 4:

//create event of a newly created object.
//initialize uiz
uiz_init()
//create our square object
square = uiz_c(obj_uiZ_square)
//setup some variables
uiz_position(square, 100,px, 200,px);
uiz_size(square, 50,px, 50,px);
//fix our square object.
uiz_fix(square)