SpriteKit Advanced - Kuidas luua 2,5D mängu (I osa)

Sissejuhatus

See artikkel räägib Raft Challenge'i graafilisest arengust prototüübist lõpptooteni. See on mõeldud AIM-ile inimestele, kes mõtlevad luua oma mängu graafikaga nagu Raft, kuid ei tea täpselt, kuidas alustada.

Raft Challenge'i algus

Raft Challenge sündis esimese All In Mobile'i korraldatud hackathonil. Idee oli teha mäng, kus mängija väldib takistusi. Tahtsime hoida asjad võimalikult lihtsad.

Pärast nädalavahetust oli meil prototüüp, mis nägi välja järgmine:

Haftonaadi võitis Raft Challenge. Ettevõte teatas, et kogub ressursse mängu parendamiseks.

Teeme sellest 2,5D!

Projekti alguses oli Raftil võimalikult lihtne graafika. Vaade oli otse üle tasase maapinna tekstuuri, värviliste ringidega, mis tähistasid mängijat ja vaenlasi. See oli ilus ja sama lihtne kui kood all. Siis tuli meie graafiline disainer ja ajas kõik segamini. Ta ütles: "Teeme 2,5D!" Väljakutse võeti vastu ja tulemuseks oli ülalolev animatsioon.

Pärast hackathonit näitas ta end taas. Seekord oli see midagi enamat kui üks lause.

See oli kuri naeratus ja see video:

Perspektiivi selgitatud

Olgu, võtkem siis näitlemine maha :-). Tahtsin tekitada talle tunde, et ta vastutab. Aga ma olen siin boss! Perspektiivi on koodis lihtne rakendada, sõltumata sellest, millist 2D mootorit me kasutame.

Esiteks peame kindlaks tegema, kuhu tahame kadumise punkti panna. Allolevas näites on see punkt lõuendi keskel.

Raft Challenge'il on see punkt ekraani ülemises pooles, sest taevas ja kõik pea kohal pole nii olulised kui jõel olevad takistused.

Kuidas spreid ise valmistatakse? Ehkki kunstilise taustaga inimesele võib see ilmne olla, ei ole see tingimata tehnilise isiku jaoks ilmne.

On kaks reeglit:

  • Liikuvad osad tuleb joonistada mööda abistaja jooni, nagu ülal näidatud
    Kõik need jooned ristuvad kaduvas punktis

Märkus. Rannikuosa ei jõua hääbumispunkti. See peatub kuskil keskel, jättes läbipaistva ala maha.

  • Sellel tühjal alal graafika ja kaduva punkti vahel on oluline eesmärk
    See hoiab elemente, mis asuvad kaugemal.

Nende osade valmistamiseks rakendatakse iga sammu jaoks kaks korda väiksem skaala. Saadud pilt peaks olema õmblusteta, kui tekstuur on hästi tehtud.

Stseeni kokkupanek

Pärast kõigi oma varade ettevalmistamist peame need kõik sündmuskohale panema.

Vaatame, kuidas see Raft Challenge'is välja näeb.

Algusest:

  1. Taustakihid
    Taust
    Rohi
    Udu põhi
    Päike
    Mäed
    Horisondi joon
  • Need kihid on kõik staatilised ja neid ei liigutata
  • Taust toimib nii taeva kui ka vee jaoks
  • Taust on tavaline gradient
    See on venitatud, et täita kogu seadme ekraan
    Kuvasuhet eiratakse
  • Võime toimivuse suurendamiseks ühendada muid kihte kui taust, välja arvatud juhul, kui soovime mõnda atribuuti muuta
  • Päike võib mängu ajal liikuda
     või asendada mäed millegi erinevaga

2. Perspektiivkihid
Puud peegeldustega
Rannik
Takistused

  • Ülaltoodud pildi selguse huvides grupeeriti sarnase sisuga kihid
    Seal olid:
    2 kihti takistusi
    8 kihti rannikut
    8 kihti peegeldustega puid
  • Neid kihte suurendatakse kahega, kui mängija liigub edasi
  • Nende kihtide järjekord sõltub
    kaugus
    lähedasemad on peal
    prioriteet
    Takistus> Rannik> Puud

3. märk

  • Kui takistus on võimalikult lähedases positsioonis, võib selle z-positsioon olla kõrgem kui tegelaskuval endal
    Sel juhul katab takistus iseloomu, mis on soovitav

4. GUI

  • Hea graafika peaks sõltuma riistvara asemel illusioonidest ja trikkidest

Kokkuvõte

See artikkel peaks andma meile idee, kuidas käsitleda varade 2,5D-le mängude tegemise ja stseenideks jaotamise probleemi.

Selle sarja 2. osa saate lugeda siit.

Autori kohta: Kamil Ziętek on iOS-i arendaja veebisaidil www.allinmobile.co