Sablon létrehozása a pályák számára

A Godot Engine alapjai - II. Arkanoid
2021-06-13 · 01:10
Magát a játékot most is a pálya elkészítésével kezdjük, de ezúttal egy kicsit összetettebb módszert fogunk használni, ami hosszabb távon valójában sok időt spórolhat meg.


Játékterület létrehozása


Hozzunk létre egy új 2D Scene-t "PalyaSablon" néven és mentsük is el. Ezt a sablont fogja használni az összes pályánk, így azokat nem kell minden egyes alkalommal újra elkészítenünk nulláról.

Kattintsunk fent az ikonsor végén lévő View gombra és pipáljuk be az Always Show Grid lehetőséget. Ezután kattintsunk a Grid Snap ikonra, majd mellette a Snapping Options-re és a lenyíló menüből válasszuk a Configure Snap... lehetőséget. A Grid Step mindkét értéke legyen 10 px.

Grid Snap és Snapping Options


Ha ez megvan, adjunk a scene-hez egy StaticBody2D-t "Fal" néven, majd ehhez adjunk hozzá egy CollisionPolygont és rajzoljunk valami hasonlót:

falak a pályán


Amint látható, a fal a pálya teljes magasságában tart és a két szélétől 240 pixelre található. Minden nagy négyzet 8 kis négyzetnyi - tehát 80 pixel - szélességű és magasságú. Azért nem 10 négyzet van, mert az 1280 és a 720 nem osztható maradék nélkül 100-zal.
(Ha akarjuk, beállíthatunk 10 négyzetet is, menjünk vissza a Configure Snap... menübe és a Primary Line Every értékét állítsuk 10 steps-re.)

Adjunk hozzá egy ColorRect-et a Fal-hoz és méretezzük át úgy hogy teljesen kitöltse a falat. Az átlátszóságát lejjebb vehetjük jobb oldalon a Color-ra kattintva, hogy ne legyen ennyire szembetűnő. Erre a téglalapra csak azért van szükségünk, hogy lássuk a játékteret, mert ahogy az előző részből emlékezhetünk, a CollisionPolygon nem látszik a játékban.

Kattintsunk a scene tree-ben a CollisionPolygon melletti szem ikonra, hogy elrejtsük az Editorban is, mivel már nem lesz rá szükségünk. Kattintsunk a Fal nevű node-ra majd fent a lakat ikonra és a mellette lévő négyzetes ikonra. Így megakadályozzuk, hogy a szerkesztő felületen véletlenül kijelöljük vagy elmozdítsuk a Fal node-ot és a child node-jait. A scene tree-ben a Fal node bal oldalán lévő kis nyílra kattintva össze is csukhatjuk azt, így már végképp nem fog aggatni.

kattintsunk erre a két ikonra


Bal oldali kijelző létrehozása


A pálya két oldalán lévő területen egy-egy kijelzőt fogunk létrehozni. Először is adjunk hozzá egy Control node-ot a PalyaSablon-hoz és nevezzük el "Kijelzok"-nek. Mivel most nem ez a root node, így a Full Rect Layout nem fog működni, ezért kézzel kell beállítanunk a méretét. Kattintsunk jobb oldalon a Margin-ra és a Right legyen 1280, a Bottom pedig 720.

Kattintsunk a Kijelzok node-ra, adjuk hozzá kedvenc VBoxContainer-ünket és nevezzük azt el "Bal"-nak. Ennél már használhatjuk a Layout-ot, válasszuk a Left Wide lehetőséget. A Rect - Min Size - x értéke legyen 240, így pont a pálya bal széléig fog érni.

Adjunk hozzá egy Label-t, ahhoz pedig adjuk hozzá a korábban létrehozott menu_font.tres nevű fájlt a Custom Font mezőben. Az Align-t állítsuk Center-re (a VAlign-hoz ne nyúljunk). Hozzunk létre ebből a címkéből még 5 másolatot és nevezzük el őket az alábbiak szerint:

bal oldali kijelző node-jai


A "Szam" végű címkék Text mezőjébe írjunk 0-t, a többinek pedig írjuk be a nevét értelemszerűen. A Rekord, RekordSzam és a PontSzam Min Size - y értékét állítsuk 100-ra. A Rekord VAlign értékét állítsuk Bottom-ra. Ha minden jól ment, akkor egy ehhez hasonló végeredményt kell kapnunk:

bal oldali kijelző az editorban




Jobb oldali kijelző létrehozása


Jöhet a jobb oldali kijelző. Kattintsunk ismét a Kijelzok node-ra és adjunk hozzá egy újabb VBoxContainer node-ot, "Jobb" néven. A Layout ennél Right Wide legyen, a Rect - Min Size - x értéke pedig szintén 240. Mivel így túlnyúlik a pályán, állítsuk a Grow Direction - Horizontal értékét Begin-re, így már befelé fog terjeszkedni és pont a játékterület jobb széléig fog érni.

Adjunk hozzá egy Label-t "Golyo" néven, a Text mezőbe is írjuk be, hogy Golyó. Az Align legyen Center, a VAlign Bottom, a Rect - Min Size - y pedig 100, a Custom Font pedig szokás szerint a korábban létrehozott fájl.

A Golyo nevű node-hoz pedig adjunk egy HBoxContainer-t, és nevezzük el "Ikonok"-nak. Ez annyiban tér el az eddig használt társától, hogy ebbe nem egymás alá, hanem egymás mellé pakolhatjuk a dolgokat. Legyen a Rect - Min Size - y értéke 80, a Margin - Top pedig 0.

Adjunk hozzá az Ikonok node-hoz egy TextureRect-et és a Texture mezőbe töltsük be a lenti képet.

labda


A Stretch Mode legyen Keep Centered, a Min Size - x pedig 80. Nevezzük el a node-ot "Ikon1"-nek és készítsünk két másolatot belőle, "Ikon2" és "Ikon3" néven. A Jobb kijelző node-jai így néznek ki:

jobb oldali kijelző node-jai


Ezzel be is fejeztük a pálya sablon elkészítését, ami így néz ki teljes pompájában:

az elkészült sablon


Az [F6] billentyű megnyomásával közvetlenül el is indíthatjuk, hogy megtekintsük a játékban. Sok minden azonban nem fog történni, hiszen még nem írtunk hozzá kódot.