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  Pro vereist: nee Niveau: gemiddeld/gevorderd
Voorbeeld: Dropbox
|  |
|
1. Resources aanmakenDe 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 invoerenVervolgens 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:
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.
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. TekenenNu 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.
//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 muiswieltjeNu 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:
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:
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 klikkenScrollen 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.
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 slepenTen 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:
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:
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:
slepen=false;
7. NawoordIk 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