tutorial.basic.3
Welcome back!, this time we’ll cover position types. Remember the weird third and fifth argument to the uiz_position(instanceid, posX, posXType, posY, posYType) function from the first tutorials? We filled in px for "posXType" and "posYType" but not a lot of further explanation was given. Well, we’re going to talk about position types in this tutorial.
Let’s get some terms and macros down. Uiz has quite a few of its own macros. (macro is the same as a constant). The one we’ve seen so far is “px”. What px stands for is pixels. Just “pixels”. When we defined a position by setting using this code:
uiz_position(square, 25,px, 25,px);We’ve setting the position of square at a position of 25 pixels to the right, and 25 pixels down.
What “posX/YType” does is it changes the way posX/Y” behaves and works. There are a few different basic modes:
- dp: stands for density pixel.
- fc: stands for factor.
- uiz_snapleft
- uiz_snapright
- uiz_snaptop
- uiz_snapbottom
- uiz_center
- uiz_fill
"Dp" means “density pixel” and those who have developed before on mobile platforms might be familiar with this term (also know as dpi). Practically this looks at the density of your pixels (as the name suggests). What is does is it takes a the amount of pixels that fit into one real life inch, which will differ per screen. On a computer your density might be very low, and a simple button can be only a few 100 pixels wide and even less than 100 pixels high. But if you would take a button that was say, 200x75, on a phone with a small screen, you would get a very tiny button and the user would have a hard time pressing it. That’s where dp comes in.
If the density of your computer screen is 100 pixels per inch, and that of your phone is 500 pixels per inch, then the button would need to be 5 times as big to get the desired result. That’s where the DP data type comes in. saying a distance should be “3 dp” would mean that it would be 300 pixels wide on your computer screen , and 1500 pixels wide on you phone’s screen.
IMAGE 7
Now, how do I put an object at a position of say ,(2dp ,1dp)? Easy, just use following code:
uiz_position(square, 2,dp, 1,dp);This should give you a total code of:
EXAMPLE 7:
//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, 2,dp, 1,dp);
uiz_size(square, 50,px, 50,px);
//fix our square object.
uiz_fix(square)This should give this result:
IMAGE 8
You can see that dp is quite a different scale from px.
"Fc" can be very useful when working with the scaling, animating, etc. of objects. What it does is it takes the size of your parent (which is the size of you window/screen when no parent has been set), and when it has that size, it multiplies that size by a given value and uses that size.
For example, if we want to put an object in the middle of the screen, we’d have to give it an fc value of 0.5 fc. This gives us the middle of the screen. An fc of 0 would give you the left side of the screen, and a value of 1 fc the right of the screen. You can say the same about an object when it has a parent, just replace “screen” with “parent”.
IMAGE 9
We can apply this to our code:
EXAMPLE 8:
//create event of a newly created object.
//initialize uiz
uiz_init()
//create our square object
square=uiz_c(obj_uiZ_square)
uiz_position(square, .3,dp, .6,dp);
uiz_size(square, 50,px, 50,px);
//fix our square object.
uiz_fix(square)This will give:
IMAGE 10
If we get back to example 6 from tutorial 2, in which we used parents, we can apply the same values (of 0.3x0.6 fc) to the square inside the gradient. We’ll get something like this:
EXAMPLE 9:
//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, .3,fc, .6,fc);
uiz_size(square, 50,px, 50,px);
//fix our square object.
uiz_fix(square)Which looks like:
IMAGE 11
We can add lines and to make thing a little more clear again:
IMAGE 12
Some values for posXType and posYType disable the use of posX and posY, as they aren’t needed for the purpose of what posX/YType is set to. Some examples of these values are:
- uiz_snapleft
- uiz_snapright
- uiz_snaptop
- uiz_snapbottom
- uiz_center
- uiz_fill
From the name you can kind of guess what they do. If we set posXType to "uiz_snapleft” than that will mean that the object will be placed on the left of it’s parent, or on the left of the screen if no parent is set. The argument "posX" takes no part in this.
Example 10:
//create event of a newly created object.
//initialize uiz
uiz_init()
//create our square object
square=uiz_c(obj_uiZ_square)
uiz_position(square, 0,uiz_snapleft, .6,fc);//It doesn't matter what the value of argument1 is.
uiz_size(square, 50,px, 50,px);
//fix our square object.
uiz_fix(square);
IMAGE 13a
If we want our object to be in the right bottom of the screen we could set posYType to "uiz_snapbottom” and posXType to "uiz_snapright” like this:
EXAMPLE 11:
//create event of a newly created object.
//initialize uiz
uiz_init()
//create our square object
square=uiz_c(obj_uiZ_square)
uiz_position(square, 0,uiz_snapleft, 0,uiz_snapright);//It doesn't matter what the value of argument1 or argument3 is.
uiz_size(square, 50,px, 50,px);
//fix our square object.
uiz_fix(square)Which looks like:
IMAGE 13b
There is also an macro called uiz_center, which as the name suggests centers the object. A code like this will give following results:
EXAMPLE 12:
//create event of a newly created object.
//initialize uiz
uiz_init()
//create our square object
square=uiz_c(obj_uiZ_square)
uiz_position(square, 0,uiz_center, 0,uiz_center);//It doesn't matter what the value of argument1 or argument3 is.
uiz_size(square, 50,px, 50,px);
//fix our square object.
uiz_fix(square)
IMAGE 14a
This is a special type, since it not only ignores the input from posX and posY arguments, it also completely ignores the size of the object. Using the function uiz_size has no effect whatsoever when your object is set to uiz_fill in both vertical and horizontal dimensions. After setting posXType to uiz_fill, posX, and width and widthType will be rendered useless.
If we set the y to fill, we get this result:
EXAMPLE 13:
//create event of a newly created object.
//initialize uiz
uiz_init()
//create our square object
square=uiz_c(obj_uiZ_square)
uiz_position(square, 0,uiz_center, 0,uiz_fill);//It doesn't matter what the value of argument1 or argument3 is.
uiz_size_w(square, 50,px);//We don't need the normal uiz_size function, as the height and heightType arguments don't work anymore.
//fix our square object.
uiz_fix(square)
IMAGE 14
Well, that was it for this relatively long tutorial. You learned:
- How dp positioning works.
- How fc positioning works.
- How uiz_snapXXX positioning works.
- How uiz_center positioning works.
- How uiz_fill positioning works.
Next time we’ll look at how to use these types on the size of your object.