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.

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.

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).

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")
    [...]

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

# 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