game maker
Gebruikersnaam:
Wachtwoord:
Home Info Forums Help
Welkom, Gast. Alsjeblieft inloggen of registreren.
+  Forums
|-+  Werken met Game Maker
| |-+  Tutorials en Uitbreidingen (Moderator: Maarten Baert)
| | |-+  [Tut+Exa] Tekstvakken met scrollbar maken
Pagina's: [1]
« vorige volgende »
Print
Advertenties

haasje
Gebruiker


Offline Offline

Berichten: 64


« Gepost op: 13 Oktober 2012, 14:26:01 »

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


Naar boven Gelogd

Florian van Strien
Jurylid


Offline Offline

Berichten: 2420


« Antwoord #1 Gepost op: 14 Oktober 2012, 15:24:00 »

Mooie exa. Gemoedelijk Nu nog er een RichTextBox van maken... en dan zou het echt handig zijn (volgens mij is dat wel erg moeilijk, zeker als je het bewerkbaar wilt hebben).

Je zou die rechthoeken misschien kunnen wegwerken door de tekst op een surface te drawen (die even groot is als het vlak), en dan die surface te drawen. Of de hele tekst op een surface met grote hoogte, en dan een deel van die surface te drawen. Daar heb je dan wel pro/standard/Studio voor nodig.


Mijn spellen: Swapblocks, circloO, BLcGR, 80 Seconds Cave, TRrBL, The Contact Machine
Ik heb meegewerkt aan: Lines (WP, iOS)
Tutorials: Shaders - de basis, Asynchrone functies

Mijn oude forumnaam was flori9.
Naar boven Gelogd

haasje
Gebruiker


Offline Offline

Berichten: 64


« Antwoord #2 Gepost op: 14 Oktober 2012, 22:54:17 »

Mooie exa. Gemoedelijk Nu nog er een RichTextBox van maken... en dan zou het echt handig zijn (volgens mij is dat wel erg moeilijk, zeker als je het bewerkbaar wilt hebben).
Wat is dat?

Je zou die rechthoeken misschien kunnen wegwerken door de tekst op een surface te drawen (die even groot is als het vlak), en dan die surface te drawen. Of de hele tekst op een surface met grote hoogte, en dan een deel van die surface te drawen. Daar heb je dan wel pro/standard/Studio voor nodig.
Goede tip! Ik pas het misschien in de herfstvakantie aan. Ik moet bekennen dat ik nog niet zo bekend ben met surfaces, dus ik zal me daar eerst even in moeten verdiepen...


Naar boven Gelogd

Florian van Strien
Jurylid


Offline Offline

Berichten: 2420


« Antwoord #3 Gepost op: 15 Oktober 2012, 11:56:48 »

Wat is dat?
Een RichTextBox is een tekstvak waarin ook opmaak, in meer of mindere mate, kan voorkomen. Dus dan kan tekst bijvoorbeeld vet, schuin of onderstreept zijn, er kunnen kopjes in voorkomen, verschillende lettertypen, verschillende uitijningen, en soms zelfs afbeeldingen, tabellen of grafieken (en nog veel meer). Een belangrijk element van een RichTextBox is dat er verschillende soorten opmaak mogelijk zijn in een tekst.
Een voorbeeld van een RichTextBox is het 'tekstvak' van Word, of Wordpad. Een voorbeeld van een normale TextBox is het tekstvak van Notepad (daarin kun je slechts één lettertype kiezen voor de hele tekst).


Mijn spellen: Swapblocks, circloO, BLcGR, 80 Seconds Cave, TRrBL, The Contact Machine
Ik heb meegewerkt aan: Lines (WP, iOS)
Tutorials: Shaders - de basis, Asynchrone functies

Mijn oude forumnaam was flori9.
Naar boven Gelogd

ojima510
Gebruiker


Offline Offline

Berichten: 245


« Antwoord #4 Gepost op: 15 Oktober 2012, 14:44:55 »

@haasje:

Ziet er goed uit, duidelijke tutorial. Ik zou alleen de variabelen anders noemen, maar dat ligt eraan wat je zelf fijn vindt / wat je gewend bent.

@flori9:

Hoe zou je dat willen doen?
Je zou iets kunnen doen dat je een soort van bb-codes gebruikt (dus &b wordt bold[b/] en &n zet het weer op normaal), maar dan zou je de tekst letter voor letter moeten berekenen, en de draw-event (denk ik) traag worden bij langere teksten.

- ojima


Tijdelijk weg wegens computer-omstandigheden.

Mijn content:
[Scr + Exa] draw_text_bb
Naar boven Gelogd

Advertenties
« vorige volgende »
Pagina's: [1]
Print


Topic Informatie
0 geregistreerde leden en 1 gast bekijken dit topic.

Ga naar:  

Powered by SMF 1.1.21 | SMF © 2006-2007, Simple Machines
www.game-maker.nl © 2003-2020 Nederlandse Game Maker Community