Game juice

A Godot Engine alapjai - II. Arkanoid · sztrovacsek

A játékunk már játszható formában van, akár már így is kiadhatnánk, de lássuk be, még mindig egy kissé unalmas, semmi extra nincs benne, itt jön képbe a game juice.


Mi az a game juice?


Magyarra nem nagyon lehet lefordítani, talán azt mondhatnánk, hogy ez adja a játék sava-borsát. A game juice minden olyan elemet magában foglal, amivel érdekesebbé tehetjük a játékot, anélkül, hogy bármilyen lényegi változás történne a játékmenetben. Lehet szó animációról, hangokról, részecske effektekről, stb. Kezdjük talán a legegyszerűbbel, a hangokkal.

Töltsük le innen  a Sound02ogg.zip nevű fájlt és másoljuk be a játék könyvtárába a coin01, a key01 és a jump01 nevű fájlokat. Az Import fülön vegyük ki a pipát a Loop elöl mindháromnál.

Import beállítás


Nyissuk meg a Labda scene-t és adjunk hozzá egy AudioStreamPlayer-t, majd készítsünk még 2 másolatot belőle. Nevezzük el őket "UtoHang", "TeglaHang" és "FalHang" néven. Kattintsunk az UtoHang-ra és jobb oldalon a Stream mezőbe tallózzuk be a jump01 nevű fájlt, a TeglaHang-hoz a coin01-et, a FalHang-hoz pedig a key01-et.

Nyissuk meg újra a PalyaSablon scene-t, jelöljük ki a Fal node-ot és adjuk hozzá a fal group-hoz. Ezután nyissuk meg a Labda script-et és adjuk hozzá a következő sorokat, hogy lejátszuk a hangokat:

func _on_Labda_body_entered(body):
    if body.get_name() == "Uto":
        $UtoHang.play()
        [...]
	
    if body.is_in_group("tegla"):
        $TeglaHang.play()
        [...]
	
    if body.is_in_group("fal"):
        $FalHang.play()


Szöveg animálása


Nyissuk meg a PalyaSablont és válasszuk ki a PontSzam node-ot. Jobb oldalon a Custom Fonts - Font mezőben kattintsunk a lefelé mutató nyílra és válasszuk a Make Unique lehetőséget. Ezután adjunk hozzá egy AnimationPlayer-t a Pontszám node-hoz. Kattintsunk az Animation (1) gombra és hozzunk létre egy új animációt "pont" (2) néven. A hossza legyen 0.2 másodperc (3).

Jelöljük ki a PontSzam node-ot és kattintsunk jobb oldalon a Font - Settings - Size melletti kulcs ikonra, hogy létrehozzunk egy új sávot az animációban. Ezután mozgassuk a csúszkát 0.1 másodperchez és állítsuk a Size értékét 60-ra, majd ismét kattintsunk a kulcsra. Végül mozgassuk 0.2-hez, írjuk vissza a Size-t 40-re és kattintsunk harmadszor is a kulcsra.

Ezután tekerjünk vissza 0-hoz és a Custom Colors - Font Color mezőben válasszuk ki a fehér színt majd kattintsunk a kulcsra mellette. Tekerjünk 0.1-hez válasszunk egy zöldes színt, kattintsunk a kulcsra, tekerjünk 0.2-hez, válasszuk újra a fehér színt és kattintsunk a kulcsra. Az animáció ezzel elkészült, de az Interpolation Mode-ot (4) még át kell állítanunk Cubic-re, az Update Mode-ot pedig Continuous-ra, mindkét sávon, hogy szebb legyen.

pont animáció


Csináljuk végig a fentieket a SzorzoSzam-mal is (Make Unique, AnimationPlayer, stb), de itt az animáció neve legyen "szorzo_fel". Ha ez is kész, kattintsunk az Animation (1) gombra és válasszuk a Duplicate lehetőséget. Kattintsunk ismét az Animation gombra, majd válasszuk a Rename lehetőséget és nevezzük át az új animációt "szorzo_le"-re.

Ebben az animációban kattintsunk a custom_colors sávon a zöld négyzetre, majd jobb oldalon válasszunk helyette egy pirosas színt. Mivel most közvetlenül szerkesztjük a kulcskockát így itt nem kell külön kulcsra kattintani (nem is lehet).

kulcskocka szerkesztés


Adjuk hozzá a pont animációt a PalyaSablon script-hez:

extends Node2D

onready var SzorzoAnim = $Kijelzok/Bal/SzorzoSzam/SzorzoAnim
[...]

func _on_Tegla_pont():
    # animáció lejátszása
    $Kijelzok/Bal/PontSzam/PontAnim.play("pont")
    [...]

A szorzó animációkat pedig a Labda-hoz:

func _on_Labda_body_entered(body):
    if body.get_name() == "Uto":
        get_parent().SzorzoAnim.play("szorzo_le")
        [...]

    if body.is_in_group("tegla"):
        get_parent().SzorzoAnim.play("szorzo_fel")
        [...]

func _exit_tree():
    get_parent().SzorzoAnim.play("szorzo_le")
    [...]


Téglák animálása


A téglákat AnimationPlayer helyett Tween-nel fogjuk animálni. Nyissuk meg a Tegla scene-t és adjunk hozzá egy Tween node-ot, majd kössük be a tween_completed() signal-ját, és módosítsuk a kódot az alábbiak szerint:

# eltüntetjük a téglát
func eltunes():
    # először töröljük a CollisionShape2D, hogy amíg tart az animáció,
    # ne érzékelhessen újabb ütközést
    $CollisionShape2D.queue_free()
    # ezután a Tween-nel, a Sprite nevű node, scale értékét, egyszeresről, kétszeresre növeljük,
    # 0.1 másodperc alatt, az utolsó két érték az animáció típusát adja meg,
    # nyugodtan lehet cserélgetni őket és újakat kipróbálni
    $Tween.interpolate_property($Sprite, "scale", Vector2(1, 1), Vector2(2, 2), 0.1, Tween.TRANS_CUBIC, Tween.EASE_OUT)
    # hasonló az előzőhöz, de itt a Sprite modulate értékét változtatjuk,
    # az eredeti értékből indulunk és végül fehér, de teljesen átlátszó lesz
    # a 0fff a szín hexakódja, az első számjegy az átlátszóság, majd sorban vörös, zöld, kék
    $Tween.interpolate_property($Sprite, "modulate", modulate, Color("0fff"), 0.1, Tween.TRANS_CUBIC, Tween.EASE_OUT)
    # végül el is kell indítanunk az animációt
    $Tween.start()


# ha véget ért az animáció
func _on_Tween_tween_completed(object, key):
    # töröljük a téglát
    queue_free()


Exportálás és záró gondolatok


Készen állunk rá, hogy a nagyvilág elé tárjuk a játékunkat, most egy Windows build elkészítését fogjuk megnézni (de hasonló módon tudunk Linux és macOS buildet is készíteni).

Project -> Export... majd a megjelenő ablakban válasszuk az Add... lehetőséget és adjuk hozzá a Windows Desktop-ot a listából. Ezután lent kattintsunk az Export Project-re, a felugró ablakban kattintsunk a Create New Folder-re és nevezzük el pl "win_export"-nak, majd kattintsunk a Save-re és... ennyi. Ezt a mappát már elküldhetjük bárkinek, hogy játszhasson a játékunkkal.

És ezzel el is érkeztünk a sorozat második részének a végéhez. Elég sok új dolog jött elő ebben a részben, gratulálok a kitartásodhoz, hogy ezt is végigcsináltad! :)

A játékot ugyan befejeztük, de még bőven van mit csiszolni rajta. A gomboknak is lehet hangot adni, a bombát is lehet a téglákhoz hasonlóan animálni, ha becsapódott, a rekord pontszám is animálható még. Viszont van egy dolog amit nem csináltunk meg, de az eredeti Arkanoidban benne volt: a téglákból kihulló megszerezhető bónuszok. Ezt már magadtól kell elkészítened (a bomba nagy segítség ennek az elkészítésében).

Illetve, ha extra kihívásra vágysz és minden eddig megtanult dolgot fel akarsz használni, akkor készíthetsz egy Galaxian klónt is, ha belegondolsz, nem sok mindenben különbözik a most elkészített játékunktól. Sok sikert!
Ha esetleg elakadnál, a Discord szerverünkön a Godot szobában nyugodtan kérdezhetsz! :)