J1B2-Game-controller/docs/documentatie/User Interface.md

UI

Voor de user interface hebben wij gekozen voor een arcade thema. Hiervoor maken we gebruik van rechte hoeken, neon kleuren en wat trademarks van arcade games zoals 3 letter namen en een highscore lijst.

kleuren

De kleuren die we gebruiken zijn felle kleuren op een donkere achtergrond, dit heeft 2 redenen: het is makkelijker voor de ogen en het past bij het arcade thema.

positionering

Door gebruik te maken van rectMode(CENTER) en textAllign(CENTER, CENTER) kunnen we de positionering doen gebaseerd op de width en length van het scherm. Hierdoor is de UI semi-responsive en kan het op elke scherm grootte goed worden weergegeven.

belangrijke code

het belangrijkste stuk code van de UI is de buttonselect variabele. Deze variabele wordt gebruikt om te bepalen welke button geselecteerd is en waar je naartoe gaat als je op enter drukt.

if (keyCode == UP_ARROW) {
    buttonSelect -= 1;
    keyReleasedFlag = false;
    console.log(buttonSelect)
}
if (keyCode == DOWN_ARROW) {
    buttonSelect += 1;
    keyReleasedFlag = false;
    console.log(buttonSelect)
}
if (buttonSelect == 0) {
    if (keyCode == ENTER) {
        console.log("resume");
        pausescreenOn = false;
        keyReleasedFlag = false;
        escaped = false;
    }
}
if (buttonSelect == 1) {
    if (keyCode == ENTER) {
        console.log("main menu");
        homescreenOn = true;
        pausescreenOn = false;
        escaped = false;
        reset();
        keyReleasedFlag = false;
    }
}

Hier wordt de buttonSelect variabele aangepast als je op de pijltjes toetsen drukt. Vervolgens, gebaseerd op wat de waarde is van de buttonselect variabele, wordt er een actie uitgevoerd als je op enter drukt. Deze acties maken gebruik van een ander belangrijk iets wat we hebben gemaakt, de screenOn variabelen.

if (scorescreenOn) {
    scoremenu();

we hebben gebaseerd op de booleans homescreenOn, pausescreenOn en scorescreenOn de functies homescreen(), pausescreen() en scoremenu() gemaakt. Deze functies worden aangeroepen in de draw() functie en worden alleen uitgevoerd als de bijbehorende boolean true is. Hierdoor kunnen we makkelijk switchen tussen de verschillende schermen.

function gameOver() {
    if (lives <= 0) {
        //game over screen
        iIndex = constrain(iIndex, 0, 2);
        isDead = true;
        push();
        fill(255, 0, 0);
        textSize(60);
        textAlign(CENTER, CENTER);
        text("Game Over", width / 2, height / 2 - height / 5);

        fill(255, 255, 255)
        textSize(18);
        text("Score: " + int(time), width / 2, height / 2 - height / 8);

        textSize(32);
        textAlign(CENTER, CENTER);
        text(letters[currentIndex[0]], width / 2 - 30, height / 2);
        text(letters[currentIndex[1]], width / 2, height / 2);
        text(letters[currentIndex[2]], width / 2 + 30, height / 2);

        
        text("Restart", width / 2, height / 2 + height / 12);

        text("Main Menu", width / 2, height / 2 + height / 6);
        pop();
    }
}

Deze functies hebben allemaal hun eigen opbouw maar ook een constrain gebaseerd op het aantal knoppen, dit zorgt ervoor dat je niet oneindig door kan blijven gaan met de pijltjes intoetsen en dat je niet onder de 0 kan komen. Dit is nodig zodat de eerder benoemde buttonSelect variabele niet out of bounds gaat en de knoppen dus ook echt iets doen.

Als laatste hebben we ook nog dit stukje code:

if (buttonSelect == 0) {
    push()
    stroke(205, 205, 205)
    strokeWeight(2)
    fill(0, 0, 0, 0)
    rectMode(CENTER);
    rect(width / 2, height / 2, buttonWidth, buttonHeight)
    pop()
}
if (buttonSelect == 1) {
    push()
    stroke(205, 205, 205)
    strokeWeight(2)
    fill(0, 0, 0, 0)
    rectMode(CENTER);
    rect(width / 2, height / 2 + height / 12, buttonWidth, buttonHeight)
    pop()
        }

Dit stuk code zorgt ervoor dat er een witte rand om de geselecteerde knop komt. Dit is hoe wij duidelijk maken welke knop geselecteerd is.