Átjárás a pályák közt és a főellenfél létrehozása

A Godot Engine alapjai - II. Arkanoid
2021-06-21 · 00:56
Hiába van már több pályánk, ha nem tudunk átmenni egyikről a másikra. Ebben a leckében ezt fogjuk megoldani, a végén pedig létrehozunk egy főellenfelet is.


Pálya végi menü létrehozása


Nyissuk meg újra a PalyaSablon scene-t, majd kattintsunk a Kijelzok node-ra és adjunk hozzá egy ColorRect-et "Kozep" néven.
A Layout legyen Center, a Position (x: 520; y: 285), a Size pedig (x: 240; y: 150).

Ehhez adjunk hozzá egy VBoxContainer-t, "Gombok" néven. A Layout legyen Full Rect, az Alignment Center, a Left és Top Margin legyen 10, a Right és Bottom pedig -10, végül a Custom Constants - Separation értéke szintén legyen 10.

Adjunk hozzá egy Button-t, amihez adjuk hozzá a szokásos betűtípust. A Min Size - y értéke legyen 60. Duplikáljuk, és a két gombot nevezzük el "Folytatas"-nak illetve "Kilepes"-nek.

Hozzunk létre mindkettőből egy pressed() signal-t és kössük be a PalyaSablon-ba, majd módosítsuk a script-et az alábbiak szerint:

extends Node2D
[...]
# létrehozunk egy beviteli mezőt a jobb oldali panelen,
# ahol kiválaszthatjuk a következő pályát
export var Kovetkezo : PackedScene

[...]

func _process(delta):
    # ha az összes téglát kiütöttük
    if $Teglak.get_child_count() == 0:
        # láthatóvá tesszük a középső menüt
        $Kijelzok/Kozep.visible = true
        # ha nincs több pálya
        if Kovetkező = null:
            # akkor letiltjuk a gombot
            $Kijelzok/Kozep/Gombok/Folytatas.disabled = true


# ha a Folytatás gombra kattintunk
func _on_Folytatas_pressed():
    # váltson át a fent kiválasztott scene-re
    get_tree().change_scene_to(Kovetkezo)


# ha a Kilépésre kattintunk
func _on_Kilepes_pressed():
    # akkor visszatérünk a Főmenübe
    get_tree().change_scene("res://Menu.tscn")

Rejtsük el a Kozep nevű node-ot, a neve melletti szem ikonra kattintva, majd nyissuk meg a Palya01 nevű scene-t. láthatjuk, hogy automatikusan hozzáadásra került a középső panel. Ez az inherited scene-ek nagy előnye, ha 100 pályánk is van, elég csak a sablont változtatni, a többi automatikusan frissül.

Ha a Palya01 node ki van jelölve, akkor a jobb oldali panelen tallózzuk be a 2. pályát a Kovetkezo nevű mezőbe, majd a második pályán tallózzuk be a harmadikat, és így tovább, míg el nem fogynak a pályáink.


Főellenfél létrehozása


Készítsünk egy újabb Inherited Scene-t a PalyaSablon-ból és nevezzük el "PalyaFoellenfel"-nek. Mentsük el, majd adjuk meg ezt a pályát az utolsó általunk létrehozott pálya Kovetkezo mezőjében.

A főellenfelet is egy téglából fogjuk létrehozni, némi módosítással. Adjunk egy Tegla-t a Teglak node-hoz és nevezzük el "Foellenfel"-nek. Ezután kattintsunk a scene tree-ben a Foellenfel-re jobb egérgombbal és kapcsoljuk be az Editable Children lehetőséget.

Válasszuk ki a Foellenfel Sprite node-ját és állítsuk a Scale - x és y értékét 2-re. Láthatjuk, hogy ettől homályos lett a tégla. Semmi gond, mindjárt kijavítjuk.

A scene tree alatt keressük meg a tégla sprite-ot, majd fent váltsunk át az Import fülre. Itt kattintsunk a Preset feliratra (ez valójában egy gomb, még ha nem is néz ki annak) és válasszuk a 2D Pixel lehetőséget, végül kattintsunk a Reimport gombra.  Így pixelgrafikaként fogja kezelni a képet és a pixelek mindig élesek maradnak, függetlenül attól, mekkorára nagyítjuk.

importálási beállítások


Váltsunk vissza a Scene fülre és jelöljük ki a Foellenfel CollisionShape2D node-jára, majd Shape mező melletti lefelé mutató nyílra kattintva válasszuk a Make Unique lehetőséget, ezután növeljük az extents értékeit is a duplájára, hogy pontosan akkora legyen, mint a sprite.


Főellenfél scriptelése


Eddig bármit módosíthattunk a téglán, az nem volt kihatással az eredetire. A script-tel már nem ez a helyzet, mivel ott ugyanazt használják mindketten. Nem kell azonban teljesen újat írnunk, elég csak egy hivatkozást létrehozni az eredetire és onnan folytatni.

Jelöljik ki a Foellenfel node-ot és kattintsunk fent, a piros x-es tekercs ikonra, hogy eltávolítsuk róla a script-et. Ezután kattintsunk ismét, az immár zöld pluszos tekercsre és "Tegla.gd"-t írjuk át "Foellenfel.gd"-re, majd kattintsunk a Create-re. Írjuk át az extends StaticBody2D részt így:

extends "res://Tegla.gd"

Ezáltal minden funkciót elérünk, ami az eredeti tégla script-ben szerepelt. Láthatjuk, hogy a Pajzs mező és a színválasztó továbbra is ott van a jobb oldali panelen. Adjunk is meg a Pajzs értékének például 50-et, hogy ne legyen olyan könnyű dolgunk. Persze, ha csak annyi lenne a különbség, hogy felnagyítottunk egy téglát, akkor még nem lenne igazi főellenfél. Adjunk hát neki egy kis személyiséget!

Először is, adjunk hozzá egy AnimationPlayer-t a Foellenfel-hez, ezzel fogjuk mozgatni. Kattintsunk lent az Animation gombra, válasszuk a New lehetőséget és nevezzük el "mozgas"-nak.

animáció létrehozása


Ha ezután a Foellefel-re kattintunk, láthatjuk, hogy kis kulcsok jelentek meg minden értéke mellett, ezekkel kulcskockákat hozhatunk létre az animációnkhoz. Mozgassuk a Foellenfel-et a játékterület bal szélére, majd kattintsunk a Position - melletti kulcsra.
Egy üzenetet kapunk, kattintsunk a Create gombra, a megerősítéshez. A Constant Linear Velocity értékének adjunk meg 100-at és itt is kattintsunk a kulcsra (ez valójában nem mozgatja a téglát, csak az Engine tudtára adja, hogy mozgó SaticBody2D-vel van dolga). Ezután húzzuk a csúszkát 0.5 másodperchez:

csúszka elmozdítása


Most mozgassuk a Foellenfel-et a játékterület jobb szélére (ha nyomva tarjuk a [Shift]-et, akkor egyenes vonalban húzhatjuk) és kattintsunk ismét a kulcs ikonra, hogy egy újabb kulcskockát hozzunk létre. A Constant Linear Velocity értéke ezúttal -100 legyen (azaz balra megy), kattintsunk itt is a kulcsra. Ezután kapcsoljuk be az AutoPlay-t (1), és a Loop-ot (2), az Interpolation Mode-ot (3) pedig állítsuk Cubic-re.

animáció beállításai


Kattintsunk ismét az AnimationPlayer-re és Playback Options - Speed értéke legyen 0.5, ezzel felére lassítjuk az animációt. Nyissuk meg újra a Labda scene-t és a jobb oldali panelen a Continuous Cd mezőben válasszuk a Cast Shape lehetőséget a pontosabb ütközésvizsgálathoz.


Bombák létrehozása


Hozzunk létre egy új scene-t, a típusa legyen RigidBody, nevezzük el "Bomba"-nak és mentsük el. Adjuk hozzá az alábbi sprite-ot:

bomba


Végül adjuk hozzá egy CollisionShape2D-t, a Shape legyen Capsule, a Radius 25, a Height pedig 75. Kattintsunk a Bomba node-ra, majd módosítsuk az alábbiak szerint:

a bomba tulajdonságai


Ezután nyissuk meg az Uto scene-t, és módosítsuk ott is a Collision mezőt:

az ütő tulajdonságai


Ezzel egy külön rétegre tettük a Bombát, amin csak az ütővel fog tudni ütközni, és gond nélkül átmehet a főellenfélen vagy a labdán.

Mentsük el a scene-eket, majd térjünk vissza a PalyaFoellenfel scene-re. Kattintsunk a Foellenfel-re és adjunk hozzá egy Timer-t. A Wait Time legyen 5, az Autostart pedig legyen bepipálva. Kössük be a timeout() signal-t a Foellenfel-be és módosítsuk a kódot az alábbiak szerint:

extends "res://Tegla.gd"

var labda_scene = preload("res://Labda.tscn")
# bomba scene előtöltése
var bomba_scene = preload("res://Bomba.tscn")

[...]

# ha a Timer lejárt (jelen esetben 5 másodpercenként)
func _on_Timer_timeout():
    # készítünk egy új példányt a bombából
    var Bomba = bomba_scene.instance()
    # beállítjuk, hogy véletlenszerű pozícióból érkezzen a pályán kívülről (-64), egyszerű matek:
    # 800 pixel széles a játékterület, ebből nekünk 600 kell: randi() % 600
    # így a játékterület két szélétől legalább 100 pixel távolságra lesznek
    # mivel a játékterület 240 pixelnél kezdődik, ezért azt még hozzáadjuk a 100-hoz, így lesz "+340"
    Bomba.global_position = Vector2(randi() % 600 + 340, -64)
    # hozzáadjuk a parent node-hoz (Teglak) a Bomba-t
    get_parent().add_child(Bomba)

Na, maga a játék már nagyjából kész is van, csak pár apróság van hátra.