Game-Maker.nl - [Tut+Exa] Tekstvakken met scrollbar maken

Tekstvakken met scrollbar maken

In deze tutorial leer je hoe je tekstvakken kunt maken met een scrollbar. Een scrollbar is een balkje rechts in je scherm waarmee je tekst kunt schuiven over je scherm. Let op: een groot nadeel van deze methode is dat er boven en onder het tekstvak een rechthoek wordt getekend in een (achtergrond)kleur. Dit heeft als doel om de tekst buiten het tekstvak te verbergen.

GM-versie: sowieso GameMaker 8

Pro vereist: nee
Niveau: gemiddeld/gevorderd

Voorbeeld: Dropbox

1. Resources aanmaken
De eerste stap is het aanmaken van resources. Je kunt natuurlijk ook resources gebruiken die je al hebt aangemaakt in je spel. De volgende resources moet je hebben:

Een object die alles doet: het tekenen en alle berekeningen enz.
Een room waarin je het tekstvak wil plaatsen.
Eventueel een font (opmaak) voor de tekst.

2. Variabelen aanmaken en tekst invoeren
Vervolgens moeten de variabelen - waarvan een de tekst is - aangemaakt worden. Doe dit in het Create event van het aangemaakte object. De volgende variabelen moeten als eerste aangemaakt worden:

GML:

tekst="Telgroep##De telgroep ... een soort subtelgroepen.";
vensterx=30;
venstery=80;
vensterb=300;
vensterh=450;
kader=20;
scrollb=30;
snelheidscroll=20;
snelheidklik=50;
kleurbuiten=c_white;
kleurachtergrond=c_lime;
kleurtekst=c_maroon;
kleurscroll=c_fuchsia;
font=font_tekst;

Natuurlijk kun je overal je eigen waarden invullen. Dit is wat alle variabelen inhouden:

tekst: de tekst die in je tekstvak komt te staan.
vensterx: de x-coördinaat van het venster (tekstvak)
venstery: de y-coördinaat van het venster
vensterb: de breedte van het scherm
vensterh: de hoogte van het scherm
kader: de lege ruimte boven en onder de tekst in het venster: het kader.
scrollb: de breedte van de scrollbar.
snelheidscroll: het aantal pixels dat de tekst verschuift als je het muiswieltje één tandje draait.
snelheidklik: het aantal pixels dat de tekst verschuift als je boven of onder de scrollbar klikt.
kleurbuiten: de kleur van de rechthoeken boven en onder het tekstvak. Geef deze zo mogelijk dezelfde kleur als de achtergrond van de room.
kleurachtergrond: de kleur binnen het tekstvak.
kleurtekst: de kleur van de tekst.
kleurscroll: de kleur van de scrollbar.
font: het font (opmaak) van de tekst.

Voeg hier vervolgens de volgende variabelen aan toe. Deze kun je niet veranderen.

GML:

tekstb=vensterb-scrollb-40;
teksth=max(vensterh,2*kader+string_height_ext(tekst,-1,tekstb));
scrollh=vensterh/teksth*vensterh;

scrolly=0;
teksty=0;
slepen=false;
slepenmuisy=0;

De variabelen houden dit in:

tekstb: de breedte van de tekst.
teksth: de hoogte van de tekst inclusief de kaders.
scrollh: de hoogte van de scrollbar.
scrolly: de positie van de scrollbar.
teksty: de positie van de tekst.
slepen: of de scrollbar wordt gesleept.
slepenmuisy: de positie van de muis ten opzichte van de scrollbar als je aan het slepen bent.

3. Tekenen
Nu deze lijst variabelen is aangemaakt kan het tekstvak worden getekend. Dat wordt gedaan met de volgende code. Deze komt in het Draw event van het aangemaakte object te staan.

GML:

//bepaal de positie van de scrollbar
scrolly=-teksty/teksth*vensterh;

//teken de achtergrond van het tekstvak
draw_set_color(kleurachtergrond);
draw_rectangle(vensterx,venstery,vensterx+vensterb,venstery+vensterh,0);
//teken de tekst
draw_set_font(font);
draw_set_color(kleurtekst);
draw_text_ext(vensterx+20,venstery+kader+teksty,tekst,-1,tekstb);
//teken de rechthoeken buiten het tekstvak
draw_set_color(kleurbuiten);
draw_rectangle(vensterx,venstery-1,vensterx+vensterb,0,0);
draw_rectangle(vensterx,venstery+vensterh+1,vensterx+vensterb,room_height,0);
//teken de scrollbar als de tekst niet in het venster past
if(scrollh!=vensterh)
{
draw_set_color(kleurscroll);
draw_set_alpha(.3);
draw_rectangle(vensterx+vensterb,venstery,vensterx+vensterb-scrollb,venstery+vensterh,0);
draw_set_alpha(1);
draw_rectangle(vensterx+vensterb-scrollb,venstery+scrolly,vensterx+vensterb,venstery+scrolly+scrollh,0);
}

4. Scrollen met het muiswieltje
Nu alle variabelen en resources zijn aangemaakt en het tekstvak wordt getekend, is het enige wat nog mist het scrollen. In de eerste plaats kan dit met het muiswieltje. Als het muiswieltje omhoog wordt gedraaid, moet de volgende code worden uitgevoerd. Zet dit in het Mouse Wheel Up event:

GML:

if(mouse_x>vensterx and mouse_x<vensterx+vensterb and mouse_y>venstery and mouse_y<venstery+vensterh)
{
teksty=min(0,teksty+snelheidscroll);
}

Deze code vereist wat uitleg: eerst wordt gecontroleerd of de muis in het tekstvak is. Dit kun je weglaten als je wil dat de speler altijd kan scrollen. De positie van de tekst begint bij 0. Als je omlaag scrollt gaat de tekst omhoog. Dat betekent dat de positie van de tekst negatief wordt. Als je vervolgens weer omhoog scrollt gaat de tekst omlaag. De positie mag echter niet boven de 0 komen, want daar houdt de tekst op. Daarom komt er bij een positieve nieuwe positie van de tekst door deze code toch 0 uit. Bij het omlaag draaien van het muiswieltje wordt deze code gebruikt in het Mouse Wheel Down event:

GML:

if(mouse_x>vensterx and mouse_x<vensterx+vensterb and mouse_y>venstery and mouse_y<venstery+vensterh)
{
teksty=max(vensterh-teksth,teksty-snelheidscroll);
}

Dit werkt in principe hetzelfde als de vorige code, met als verschil dat de laagste waarde nu de vensterhoogte min de teksthoogte is.

5. Scrollen boven of onder de scrollbar te klikken
Scrollen kan ook door boven of onder de scrollbar te klikken. Hierdoor gaat het scrollen meestal sneller dan door met het muiswieltje te draaien. Door de volgende code in het Global Left Button event te zetten is dit mogelijk.

GML:

if(mouse_x>vensterx+vensterb-scrollb and mouse_x<vensterx+vensterb and mouse_y>venstery and mouse_y<venstery+scrolly)
{
teksty=min(0,teksty+snelheidklik);
}

if(mouse_x>vensterx+vensterb-scrollb and mouse_x<vensterx+vensterb and mouse_y>venstery+scrolly+scrollh and mouse_y<venstery+vensterh)
{
teksty=max(vensterh-teksth,teksty-snelheidklik);
}

Dit werkt als volgt: er wordt gecontroleerd of de muis zich boven of onder de scrollbar bevindt. Als dit het geval is, wordt de tekst en daardoor automatisch de scrollbar verschoven. Het maximum en minimum is op dezelfde manier aangegeven als in de vorige paragraaf.

6. Scrollen door de scrollbar te slepen
Ten slotte is het ook mogelijk om te scrollen door de scrollbar met de muis te slepen. Dit gaat in drie stappen. Als je klikt op de scrollbar, wordt slepen waar (true) en de relatieve positie van de muis ten opzichte van de scrollbar opgeslagen in slepenmuisy. Dit staat in het Global Left Pressed event:

GML:

if(mouse_x>vensterx+vensterb-scrollb and mouse_x<vensterx+vensterb and mouse_y>venstery+scrolly and mouse_y<venstery+scrolly+scrollh and !slepen)
{
slepen=true;
slepenmuisy=mouse_y-scrolly-venstery;
}

Vervolgens wordt elke step aan de hand van de nieuwe muispositie de plaats van de tekst bepaald. De grenzen zijn weer hetzelfde ingesteld als in de vorige paragrafen. Dit staat in het Step event:

GML:

if(slepen)
{
teksty=max(vensterh-teksth,min(0,-teksth/vensterh*(mouse_y-venstery-slepenmuisy)));
}

Als laatste wordt bij het loslaten van de linkermuisknop de variabele slepen weer onwaar (false). Dit staat in het Global Left Released event:

GML:

slepen=false;

7. Nawoord
Ik hoop dat jullie hier iets aan hebben. Ik ben nog druk aan het nadenken hoe ik die rechthoeken buiten het tekstvak zo veel mogelijk of helemaal kan wegwerken.

haasje