Schermen aanpassen

Kleuren aanpassen

De makkelijkste manier om de standaard vensters aan te passen is door de kleuren en tekst te veranderen. Dit kun je doen met de functie gms_show_set_constant(...). Voor een lijst met alle constanten, zie de documentatiepagina van de functie.

Om de schermen vloeiend weer te geven is het handig om de room_speed op 60 te zetten.

In dit eerste deel van de tutorial zal ik een paar kleuren van het loginscherm aanpassen. In het tweede deel ga ik in op hoe de layout van een scherm kan worden aangepast.

GM:Studio:

GM:Studio heeft de functie font_add niet, dus om de fonts die GameMaker Server standaard gebruikt te hebben zul je ze handmatig moeten toevoegen:

Maak 3 fonts:

  • GM:Studio:

    Arial Black, 24pt, bold

  • GM:Studio:

    Verdana, 16

  • GM:Studio:

    Verdana, 10, bold

GM:Studio:

Roep de functie gms_show_set_fonts(...) aan en geef de fonts in bovenstaande volgorde als argumenten aan de functie. De standaardschermen kunnen nu ook van deze fonts gebruikmaken, en zullen er een stuk beter uitzien.

Allereerst het kleurenschema. Een belangrijk punt om in gedachten te houden is dat alle aanpassingen aan de vensters moeten zijn gedaan voordat je gms_show_* voor het eerst aanroept.

gms_show_set_constant("c_background1",$391506)
gms_show_set_constant("c_background2",$290F05)
gms_show_set_constant("c_button1",$72422E)
gms_show_set_constant("c_button2",$552916)
gms_show_set_constant("c_buttonhover1",$AB8778)
gms_show_set_constant("c_buttonhover2",$72422E)
gms_show_set_constant("c_border",$AB8778)
gms_show_set_constant("c_text"$AB8778)

Bovenstaande code hoeft nog niet zo veel uitleg hoop ik. Zet de bovenstaande code ergens in een create event. Ik heb het direct onder de gms_settings(...) aanroep gezet. Daarna kun je gms_show_login, of een andere gms_show_* functie aanroepen en het aangepaste kleurenschema zal worden gebruikt.

De layout aanpassen

Om de layout aan te passen moet je een bestand maken dat uit een aantal delen bestaat:

  • Een constanten-deel: Hier kun je aangepaste contstanten definieren, bijvoorbeeld een kleur die je op meerdere plaatsen gebruikt. Als je de kleur dan wil aanpassen, hoeft dat maar op een plek.

  • Een stijlen-deel: Dit deel gaat alle stijl-informatie van de UI elementen bevatten. Elke gradient en kleur van een element is hier gedefinieerd.

  • En als laatste, een layout-deel: Dit deel bevat de structuur van de UI elementen, en linkt de UI elementen aan stijlinformatie.

Het bestand zal op XML en CSS lijken, maar het is een aangepast formaat om het inladen te versnellen.

De standaardschermen kunnen worden vervangen door gms_show_replace(...) aan te roepen:

gms_show_replace(wt_login,'<constants></con......out></layout>')

De download bevat een map genaamd 'Custom Windows'. Deze map bevat alle standaard schermen die GameMaker Server gebruikt, en een programma dat Window Inspector heet. Dit programma helpt bij het ontwerpen van schermen.

Beginnend met een leeg bestand, dat automatisch wordt gemaakt als je de Window Inspector voor het eerst opent. Als het bestand window.scn nog niet bestaat, zal de window inspector daar een leeg bestand aanmaken. Anders wordt het al bestaande window.scn ingeladen. Maak een nieuw bestand, verander de extensie naar .scn en gebruik je favoriete text editor om de inhoud te veranderen naar:

<constants></constants>
<styles></styles>
<layout></layout>

Druk op Control+O in de Window Inspector om je aangepaste bestand te openen. Je ziet nu als het goed is een leeg scherm.

Er zijn een aantal basis UI elementen die je kunt gebruiken:

  • Canvas: Een element dat andere elementen in zich kan hebben. Heeft een achtergrond. Elementen worden verticaal opgestapeld.

  • Container: Hetzelfde als de canvas, maar zonder een achtergrond.

  • Multielement: Zelfde als een container, maar elementen worden horizontaal opgestapeld, zodat je meerdere elementen naast elkaar kunt zetten.

  • Textbox: De gebruiker kan tekst in dit vak typen.

  • Label: Een element dat tekst kan bevatten.

  • Button: Een element dat tekst kan bevatten. Genereert een event zodra de gebruiker er op klikt.

De window inspector bevat een help pagina (druk op F1 om het te openen) dat een lijst van alle elementen en eigenschappen bevat.

De standaard schermen worden gemaakt van bovenstaande elementen. Je kunt de standaard schermen zelfs opnenen en bewerken door in de Window Inspector op Control+O te drukken, naar de map Custom Windows uit de download navigeren, en een van de .scn bestanden in die map openen. Alle standaardschermen gebruiken een canvas met een doorzichtige, zwarte achtergrond om alles onder het scherm donkerder te maken. Voeg het volgende toe aan het bestand dat je hebt gemaakt om zo'n doorzichtige achtergrond toe te voegen.

<styles>
overlay:
{
width: max;
height: max;
background: $000000;
background-alpha: 0.5;
}
</styles>
<layout>
<canvas style[overlay]>
</canvas>
</layout>

Het 'hoogste' element, de canvas in dit geval, moet het hele scherm bevatten. De width/height van dit element veranderen werkt niet. Er mag ook niet meer dan een 'root'-element zijn. Sla het bestand op, en als je het juiste bestand in de Window Inspector open hebt staan wordt het automatisch bijgewerkt.

Nog niet erg interessant tot nu toe. Vervang de code in het bestand met deze code:

<constants>
@c_my_window: $AB8778;
@c_my_border: $391506;
</constants>
<styles>
overlay:
{
width: max;
height: max;
background: $000000;
background-alpha: 0.5;
}
window:
{
background: @c_my_window;
border-size: 3;
border-color: @c_my_border;
center: true;
width: 300;
height: max;
}
</styles>
<layout>
<canvas style[overlay]>
<canvas style[window]>
</canvas>
</canvas>
</layout>

Merk op dat constanten altijd met een @ beginnen. Merk ook op dat border-size en border-color twee verschillende eigenschappen zijn. Het is niet mogelijk om deze samen te voegen tot een border-eigenschap (in tegenstelling tot CSS). Attributen van UI elementen worden ingesteld door "attributename[value]" toe te voegen binnen de tag.

Voor groottes (width, height) zijn de speciale eigenscappen min, max en preferred beschikbaar. Min probeert de grootte zo klein mogelijk te houden, max zo groot mogelijk, en preferred probeert de grootte width/height-preferred te krijgen, maar het kan ook minder worden (tot min-width/height).

De Window Inspector laad automatisch het bestand op nieuw, en je zult een blauwe balk in het midden van je scherm zien. Aan de rechterkant van de Window Inspector staat een lijst van alle UI elementen. Door op een element te klikken kun je sub-elementen verbergen of weergeven. Door op Control+E te drukken kn je een eigenschap 'in de gaten houden'. Druk bijvoorbeeld op Control+E, druk op <W> en selecteer de width-eigenschap. De eigenschap staat nu onder alle UI elementen in de rechter balk. Met Control+R kun je dit element weer verwijderen.

Voeg een titel en invoervelden toe om het ontwerp af te maken:

<constants>
@c_my_window: $AB8778;
@c_my_border: $391506;
@c_my_button: $552916;
</constants>
<styles>
overlay:
{
width: max;
height: max;
background: $000000;
background-alpha: 0.5;
}
center-container:
{
center: true;
width: max;
height: min;
}
window:
{
background: @c_my_window;
border-size: 3;
border-color: @c_my_border;
center: true;
width: 300;
height: max;
}
input:
{
width: max;
font: @f_text;
background: $FFFFFF;
height: min;
margin: 10;
height: 40;
}
title:
{
font: @f_title;
}
button:
{
margin: 10;
background: @c_my_button;
border-color: @c_my_border;
border-size: 3;
color: $FFFFFF;
width: max;
height: 48;
font: @f_text;
}
</styles>
<layout>
<canvas style[overlay]>
<canvas style[window]>
<container style[center-container]>
<label style[title]>LOGIN</label>
<textbox style[input] name[login.username] />
<textbox style[input, input.password] name[login.password] />
<button style[button]>Login</button>
</container>
</canvas>
</canvas>
</layout>

Een paar dingen om op te merken:

  • <tag /> is hetzelfde als <tag></tag>

  • Eigenschappen lijken veel op CSS, maar zijn geen CSS.

  • Tekst op een knop of label is standaard gecentreerd.

  • Margin is een van de weinige eigenschappen die in 4 andere eigenschappen veranderd, namelijk margin-left, margin-right, margin-top en margin-bottom.

  • De name-attribute is voor het linken van UI elementen met GameMaker Server. "login.username" en "login.password" zijn twee namen die GameMaker Server gebruikt om de gebruikersnaam en het wachtwoord van te lezen. Je kunt een lijst van verplichte en optionele namen zien door op Control+A te drukken en het juiste venstertype te selecteren. Selecteer wt_login om alle eisen voor het loginscherm te zien.

De UI heeft nog geen animaties, werkende knoppen, of een echt wachtwoordveld. Om het wachtwoordveld in een echt wachtwoordveld te veranderen:

<textbox style[input] name[login.password] property[password=true] />

Animaties

Als laatste animaties. Animaties worden altijd als gevolg op een gebeurtenis getriggerd. Deze gebeurtenissen kunnen zijn:

  • hover: de muis komt op een element te staan

  • unhover: de muis beweegt van het element af

  • open: het scherm wordt geopend

  • close: het scherm wordt gesloten

  • special: afhankelijk van het schermtype

  • unspecial: afhankelijk van het schermtype

  • extrawindow: het registratiescherm wordt geopend terwijl het loginscherm nog open is

  • unextrawindow: het registratiescherm wordt weer gesloten terwijl het loginscherm nog open is

  • error: de login of registratie is mislukt

  • unerror: de foutmelding moet weer verborgen worden

Deze events kun je toevoegen op dezelfde manier als de naam en stijl:

<canvas style[overlay] open[overlay.open] close[overlay.close]>

Een animatie toevoegen kan vervolgens zo:

overlay:
{
width: max;
height: max;
background: $000000;
background-alpha: 0;
open:
{
background-alpha: 0.5;
tween-speed: 0.8;
}
close:
{
background-alpha: 0;
tween-speed: 0.8;
}
}

Merk de tween-speed eigenschap op. Deze eigenschap stelt het aantal seconden in dat de animatie duurt. In dit geval veranderd de achtergrond alpha langzaam van 0 naar 0.5 zodra het scherm wordt geopend, en verdwijnt weer zodra het scherm wordt gesloten. De namen close en open zijn niet standaardnamen, maar zijn gedeifinieerd in de stijlinformatie, en er wordt naar de namen verwezen vanuit het layout gedeelte.

Het is handig om een beetje bekend te worden met de toetsencombinaties van de Window Inspector. Het help-venster (F1) kan open blijven terwijl je de Window Inspector gebruikt. De meeste ondersteunde functies worden gebruikt in de standaardfuncties, dus neem een kijkje bij de standaard schermen als je je afvraagt hoe iets werkt. Voel je vrij om de standaardschermen aan te passen en in je game te gebruiken. Laat me het weten als je tegen problemen aanloopt in de reacties beneden deze tutorial.

Reacties (0)

Laatste bericht op 17 Oct 2020