FoxyOfJungle
Kazan Games
I'm trying to make a simple scrollbar work, I managed to do the main thing, which is to move it.
The scrollbar function returns a value between 0 and 1. What I want to do is move the Y of an area according to that 0 and 1.
The video below shows what happens:
The video is a bit long, but I did some tests just to show what happens if I modify something.
This is what I have:
Below is the code that makes drawing the scrollbar and scrolling the area:
I caused the scroll size to decrease if the list size passes:
^ Note that the
This script takes information from a struct "
If you need more information I will show you.
I will be very grateful who can help me!
Thank you!
The scrollbar function returns a value between 0 and 1. What I want to do is move the Y of an area according to that 0 and 1.
The video below shows what happens:
The video is a bit long, but I did some tests just to show what happens if I modify something.
This is what I have:
Below is the code that makes drawing the scrollbar and scrolling the area:
GML:
//--- These variables below are the ones that will be used later: ---
// position
var _x1 = vx1 + 2;
var _y1 = vy1 + 2;
var _x2 = vx2 - 10;
var _y2 = vy2 - 2;
var _yyl = _y1 + gui_area_index[av].scrollarea_y;
var _hh = _y2 - _y1;
for (var i = 1; i < array_length(global.Layer_Wp_Array); i+=1)
{
var _thh = string_height(_nn) + 24;
var _sep = 4;
/*-------------------
Draw the array list here
--------------------*/
_yyl += (_thh + _sep);
}
//The height of the complete list can be obtained using the variable "_yyl"
//--- Draw the scrollbar ---
// set the height of the scroll (note that it is the size between the tip of the scroll and the end of the scroll area)
var _scroll_hh = max(1, _yyl - _y2); // limit scrollbar height between "1" and "the size that passes"
// draw scrollbar (return between 0 and 1)
draw_scrollbar(gui_area_index[av], vx2-7, vy1+2, vx2-2, vy2-2, _scroll_hh);
// move area
// "gui_area_index[av].scrollarea_y" goes from 0 and N/A. This is the variable that moves the array list from 0.
gui_area_index[av].scrollarea_y = -gui_area_index[av].scrollbar_pos * _hh;
I caused the scroll size to decrease if the list size passes:
^ Note that the
_scroll_hh
variable is precisely that value that passes ^
GML:
function draw_scrollbar(area_index, x, y, w, h, scrollh)
{
/// @func draw_scrollbar(area_index, x, y, w, h, scrollh)
/// @arg area_index
/// @arg x
/// @arg y
/// @arg w
/// @arg h
/// @arg scroll_h
// vai retornar um valor de 1 a 0
var _old_color = draw_get_color();
var _but_col = global.col_list_bg_lighter;
var aa = area_index;
var hhr = h - y;
var scroll_h = hhr - scrollh;
if (scroll_h <= 32) {scroll_h = 32;}
// enable drag
if point_in_rectangle(gui_mouse_x(), gui_mouse_y(), x, y+aa.scrollbar_y, w, y+aa.scrollbar_y+scroll_h)
{
_but_col = global.col_text;
if mouse_check_button(mb_left)
{
aa.scrollbar_drag = true;
}
}
// scroll
if (aa.scrollbar_drag)
{
// drag
_but_col = global.col_list_bg_lighter;
aa.scrollbar_y = gui_mouse_y() + aa.scrollbar_yd;
if (!mouse_check_button(mb_left))
{
aa.scrollbar_drag = false;
}
}
else
{
aa.scrollbar_yd = aa.scrollbar_y - gui_mouse_y();
if gui_area_inside(aa)
{
if mouse_wheel_up() aa.scrollbar_y -= 30;
if mouse_wheel_down() aa.scrollbar_y += 30;
}
}
// calculate height pos
var _height_pos = y + hhr - y - scroll_h;
// clamp scroll y
aa.scrollbar_y = clamp(aa.scrollbar_y, 0, _height_pos);
// get percentage
aa.scrollbar_pos = aa.scrollbar_y / _height_pos;
// draw scrollbar
draw_set_color(_but_col);
draw_rectangle(x, y+aa.scrollbar_y, w, y+aa.scrollbar_y+scroll_h, false);
draw_set_color(_old_color);
return aa.scrollbar_pos;
}
This script takes information from a struct "
area_index
", referring to each area, these are the variables within the struct:
GML:
// scrollbars
scrollarea_y = 0;
scrollbar_drag = false;
scrollbar_pos = 0;
scrollbar_yd = 0;
scrollbar_y = 0;
If you need more information I will show you.
I will be very grateful who can help me!
Thank you!
Last edited: