tutorial.basic.12
Hi, welcome back to this tutorial in which we’ll talk about how to use the mouse and how to implement scrolling!
To check how your mouse is interacting with a certain object, use the uiz_mouse_isOver_object_leftCheck function. You can find more info on this function by extending the "Mouse" section in the wiki sidebar and clicking uiz_mouse_isOver.
uiz_mouse_isOver_object_leftCheck will give you the following values:
- uiz_nomouse: The mouse is not clicking the frame nor hovering over it.
- uiz_mouseover: The mouse is hovering over the frame but not clicking it.
- uiz_mousepressed: The mouse is hovering over the frame and has justbeen clicked. (only counts for one single step)
- uiz_mouseclick: The mouse is hovering over the frame and holding themouse button.
- uiz_mousereleased: The mouse is hovering over the frame and has just been released. (only counts for one single step)
So, when your mouse clicks an object, you can expect uiz_mouse_isOver_object_leftCheck for that object to return a value of uiz_mouseclick, while if the mouse wouldn’t be over the object at all, it would be uiz_nomouse. The pressed and released values (uiz_mousepressed and uiz_mousereleased) work just like you expect them to in Game Maker.
There are a multiple ways to implement scroll wheels. In this tutorial, I will show you a method using a obj_uiZ_frame object. A obj_uiZ_frame is a lot like a obj_uiZ_canvas. However, the frame has some more advanced features, like scrollbar support.
To showcase this variables properly, create a new object in a new room, and in it’s create event, init uiz, and create a frame somewhere in the middle of the screen, just an empty frame object.
You code should look somewhat like this:
EXAMPLE 44:
//init uiz
uiz_init()
//create a frame
frame = uiz_c(obj_uiZ_frame);
//set values
uiz_position_t(frame, uiz_center, uiz_center);
uiz_size(frame, 1,dp, 0.5, dp);
//fix our frame
uiz_fix(frame)Which looks like:
IMAGE 57
Now, we can’t see anything because the frame is invisible, but let’s add an object. In these cases I prefer using a gradient square, because it’s edges are easy to see and thus makes for a great debugging object. The default values for it might not be that pretty, but they are fine to showcase it to you now. We’ll make our gradientsquare higher than our frame though. You can make it twice or even trice as high.
EXAMPLE 45:
//init uiz
uiz_init()
//create a frame
frame=uiz_c(obj_uiZ_frame);
//set values
uiz_position_t(frame, uiz_center, uiz_center);
uiz_size(frame, 1,dp, 0.5, dp);
//fix our frame
uiz_fix(frame)
//create gradientsquare
grad=uiz_c(obj_uiZ_gradientsquare)
//put it in our frame
uiz_setParent(grad,frame)
//make it fill our frame
uiz_position_t(grad, uiz_fill, uiz_top);
uiz_size_h(grad, 2,dp);
//fix our grad
uiz_fix(grad)Now, this should look like:
IMAGE 58
Now you can clearly see that the gradientsquare is not being fully drawn. This is because of the containment system uiz has. The left-bottom of the gradientsquare is c_aqua and that of the right-bottom is c_purple, which isn’t what we are seeing here.
There is functionality build into frames that allow them to easily have scroll bars. To get started with using scrollbars you simply need the uiz_frame_setscrollable function. This line will say “This frame is now able to have a scrollbar.” It doesn’t have to mean that there is a scrollbar. If the content inside the frame is smaller than the frame itself, a scrollbar doesn’t have to be drawn at all, so uiZ disables it.
However, there are a few problems with this. First, the frame must know all the positions of all the objects inside the frame. But that requires the objects inside the frame to know the position of the parent. And having or not having a scrollbar can influence the usable space of the frame. It almost looks like some sort of stupid loop. However, it is not if you use the function
Making a more custom scrollbar using objects. Another way of making our frame completely scrollable, we’ll add the object “obj_uiZ_framescrollbar” However we need to position the object ourselves and when we’ve done that we just need to set the variable “frame” to the frame we want to scroll, and we’re automatically done.
EXAMPLE 46:
//init uiz
uiz_init()
//create a frame
frame=uiz_c(obj_uiZ_frame);
//set values
uiz_position_t(frame, uiz_center, uiz_center);
uiz_size(frame, 1,dp, 3, dp);
uiz_frame_setscrollable(frame, false, true);
//fix our frame
uiz_fix(frame)
//create gradientsquare
grad=uiz_c(obj_uiZ_gradientsquare)
//put it in our frame
uiz_setParent(grad,frame)
//make it fill our frame
uiz_position_t(grad, uiz_fill, uiz_top);
uiz_size_h(grad, 8,dp);
//fix our grad
uiz_fix(grad)
//fix our frame
uiz_fix(frame)Which looks like:
IMAGE 60
Congrats, you now know how to make a scrollable frame.
That was actually the last part in the basic tutorial. In the future other tutorials will be added. Anyways, I hope you are now able to create your own ui. This tutorial didn’t go too far into all the settings of objects, and you will have to look at the manual for that. But at least you know how to position them anywhere in a structured ui. From here I would recommend following the “make your own object” tutorials. Good luck!
And remember, if you have any questions, hit me up on the game maker forum: https://forum.yoyogames.com/index.php?members/tthecreator.233/
Or make an issue on GitHub:
https://github.com/Tthecreator/uiZ/issues