Pong! : Stap 7

Stap 7 : Score!

Scores en high-scores zijn een groot onderdeel van games. Sommige games hebben een heel uitgebreid score-systeem met nationale en internationale ranglijsten etcetera en ook voor Pong zou je zoiets kunnen maken.
Voor nu is een simpel script wat alleen de score bijhoudt en toont goed genoeg.
Dat bijhouden doe je door het score getal op te slaan in een ‘variabel’ en er steeds een punt bij op te tellen als een speler scoort.
Zie een variabel als een doos waar je informatie in kunt stoppen.
(Voor meer informatie over variabelen zie de ExtraUitleg pagina erover in de menu balk van deze blog)

Maak een nieuw script in de Scripts map in de Project view met de rechter-muisknop en ‘Create > C# Script’.
Geef het script de naam ‘PongScores’ en open het door erop te dubbelklikken:

Creëer player1Score en player2Score variabelen boven de Start () functie zoals hieronder.
(Het is conventioneel om de namen van variabelen te beginnen met een kleine letter, om gemakkelijk onderscheid te kunnen maken tussen wat variabelen zijn en wat functies zijn die worden geschreven met een hoofdletter. Als een variabel uit meerdere woorden bestaat geef je het eerste woord een kleine letter en ieder daar op volgend woord een hoofdletter) :

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PongScores : MonoBehaviour
{
    public int player1Score = 0;
    public int player2Score = 0;

    // Start is called before the first frame update
    void Start()
    {
        
    }

Sla het script op met Ctrl + S en keer terug naar Unity.

Klik bovenaan in Unity in de menu balk op GameObject > UI > Canvas om een Canvas GameObject te maken waarop we de score in beeld kunnen tonen:


Het canvas is een soort glasplaat die voor de game camera wordt geplaatst, waarop je dingen kunt schrijven met text objecten en plaatjes op kan plakken met image objecten!

Selecteer het Canvas in de Hierarchy view en druk onderaan in de Inspector view op Add Component en selecteer Scripts > PongScores om het PongScores script aan het Canvas vast te maken.
(of sleep het PongScores script uit de Project view op het ‘Canvas’ GameObject in de Hierarchy view):

Klik daarna met de rechter-muisknop op het Canvas GameObject in de Hierarchy view en selecteer UI > Legacy > Text om een standaard Text GameObject aan het canvas vast te maken.
Doe dit twee keer:

Geef de twee Text GameObjects de namen Text (1) en Text (2) zodat we ze makkelijk uit elkaar kunt houden en zodat je er makkelijk naar kunt zoeken vanuit een script:

Text objecten kun je gebruiken voor gewone informatie teksten maar omdat je de tekst die het weergeeft ook via een script kunt programmeren kun je ze ook gebruiken om de score te tonen.

Als je in de Scene view heel ver uit-zoomt met je scroll-wiel zie je dat er een groot vak met witte lijnen is verschenen. Dat zijn de randen van het canvas.
(Unity laat het canvas er zo ontzettend groot uitzien in de Scene view om te zorgen dat 1 unit/meter in de game wereld overeenkomt met 1 pixel van het Canvas):


Je ziet ook dat er in het midden ‘New Text’ staat geschreven. Dat is de standaard placeholder tekst van het UI Text component.

Klik op de ‘Text’ objecten in de Hierarchy view en verander in de Inspector view de tekst “New Text” naar het getal 0:

Je kan de tekst groter maken in door de ‘Font Size’ aan te passen en zet dan ook ‘Horizontal Overflow’ en ‘Vertical Overflow’ op ‘OverFlow’ of pas de width/height aan in het Rect Transform component om te zorgen dat de tekst in het vakje past.

Om de tekst op de juiste plek te zetten, klik je op het Text (1) object in de Hierarchy view en verander je in de Inspector view de Rect Transform Pos X en Pos Y getallen naar die van hieronder:

De Rect Transform van Text (2):

De tekst staat nu klaar om de score te tonen, en er zijn variabelen gemaakt om de scores in op te slaan:

Nu moeten die scores nog opgeteld worden tijdens het spel en daarna in beeld vertoond worden.

Open het PongBallBehaviour script en schrijf bovenaan in het script de blauwe ‘using UnitiyEngine.UI’ regel om te zorgen dat je makkelijk naar de UI componenten kunt verwijzen:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

Voeg de blauwe regels in de if-statements toe aan de Update () functie:

    void Update()
    {
        if(transform.position.x > 10)
        {
            int score = GameObject.FindObjectOfType<PongScores>().player1Score += 1;
            
            GameObject.Find("Text (1)").GetComponent<Text>().text = "" + score;
            
            Instantiate(gameObject, new Vector3(0, 0.75f, 0), Quaternion.identity);
            Destroy(gameObject);
        }
        
        if(transform.position.x < -10)
        {
            int score = GameObject.FindObjectOfType<PongScores>().player2Score += 1;
            
            GameObject.Find("Text (2)").GetComponent<Text>().text = "" + score;

            Instantiate(gameObject, new Vector3(0, 0.75f, 0), Quaternion.identity);
            Destroy(gameObject);
        }
    }

In gewone taal:
“Zoek het PongScores script in het level en tel 1 op bij de player1Score variabel in het script”
en daarna:
“Zoek het object met de naam “Text (1)” en het Text component wat eraan vast zit en verander de tekst in de score van Player (1)”

Save het script met Ctrl + S, keer terug naar Unity en test de game.
Scores worden nu netjes opgeteld en getoond in de tekstvelden boven de spelers!

Ga verder naar Stap 8 : Graphics

 

Website Powered by WordPress.com.