The first of many tutorials in a series of GUI design. I'm aware that there are currently several menu systems already out there, this is to give others an idea of how they can make their own or understand how others might have done it. While this may work in DBC, it and the next few chapters are written with DBP in mind.
This tutorial is 5 pages(short compared to my others) but an easy read. It starts by defining the various components of what makes a scrollable window, draws a very basic example, then explains how to control user interaction with the scrollbar.
It's overall purpose is to give a basic understanding of how to create these kind of GUI components, not how to make them look pretty or use them in conjunction with others. At the end of the series, I may write a final chapter which brings everything together into a full menu system, but don't hold your breath.
Please let me know if you find any errors or have suggestions regarding either the code or the explanation. I encourage even the skilled coders to review it as you would be more likely to find any mistakes or offer improvements that could eventually benefit others.
Future chapters:
- Menubar
- Progress meter / loading bar
- Sliders
- Buttons
- Radio Buttons
- Tabs
- Text boxes
Not sure of the order yet, but if I left anything out let me know!
Final Code:
dim textlines$(40)
for i = 1 to 40
textlines$(i) = "This is just a test. More text!"
next i
thumbY# = 0.2
sync on
DO
cls
ink rgb(128,128,128),0
drawBox(100,100,400,300)
line 384,100,384,300
ty = 180*thumbY#
box 384,100+ty,400,100+ty+20
if mouseclick() = 1 and flag = 0
flag = 1
if mousewithin(mousex(),mousey(),384,100+ty,400,100+ty+20) = 1
dragThumb = 1
offsetY = mousey() - (100+ty)
endif
endif
if mouseclick() = 0 then flag = 0 : dragThumb = 0
if dragThumb = 1
ty = mousey() - offsetY
thumbY# = (ty - 100.0) / 180.0
if thumbY# < 0 then thumbY# = 0
if thumbY# > 1 then thumbY# = 1
endif
startP = ceil((440*thumbY#) / 16.0)
endP = startP + 12
ink rgb(255,255,255),0
for i = startP to endP-1
ty = 100 + i*16 - (440*thumbY#)
text 100,ty,str$(i+1)+". "+textlines$(i+1)
next i
set cursor 0,0
print "FPS: ", screen fps()
print "Scroll amount: ",thumbY#
print "Displaying lines ",startP+1," through ",endP
sync
LOOP
function drawBox(x1,y1,x2,y2)
line x1,y1,x2,y1
line x1,y1,x1,y2
line x1,y2,x2,y2
line x2,y1,x2,y2
endfunction
function mouseWithin(mx,my,x1,y1,x2,y2)
if mx>=x1 and mx<=x2 and my>=y1 and my<=y2 then exitfunction 1
endfunction 0
"Any sufficiently advanced technology is indistinguishable from magic" ~ Arthur C. Clarke
