SpriteKit Advanced - Kuinka rakentaa 2,5D-peli (osa I)

intro

Tämä artikkeli käsittelee Raft Challengen graafista kehitystä prototyypistä lopputuotteeseen. Se on AIM-edullinen ihmisille, jotka ajattelevat tehdä omia pelejä grafiikan kaltaisilla grafiikoilla, mutta eivät tiedä tarkalleen kuinka aloittaa.

Raft Challengen alku

Raft Challenge syntyi All In Mobilen järjestämän ensimmäisen hackathonin aikana. Ajatuksena oli tehdä peli, jossa pelaaja välttää esteitä. Halusimme pitää asiat mahdollisimman yksinkertaisina.

Viikonlopun jälkeen meillä oli prototyyppi, joka näytti tältä:

Raft Challenge voitti hackathonin. Yhtiö ilmoitti tekevänsä resurssit pelin parantamiseksi.

Tehdään siitä 2,5D!

Projektin alussa Raftilla oli yksinkertaisin grafiikka. Näkymä oli suoraan tasaisella kentällä, värillisillä ympyröillä, jotka osoittivat pelaajan ja viholliset. Se oli kaunis ja yhtä yksinkertainen kuin alla oleva koodi. Sitten graafinen suunnittelija tuli ja sotki kaiken. Hän sanoi: "Tehdään se 2,5D!". Haaste hyväksyttiin ja yllä oleva animaatio oli tuloksena.

Hackathonin jälkeen hän esiintyi jälleen kerran. Tällä kertaa se oli jotain enemmän kuin yksi lause.

Se oli paha hymy ja tämä video:

Perspektiivi selitetty

Ok, lasketaan teko :-). Halusin antaa hänelle tunteen, että hän on vastuussa. Mutta olen täällä pomo! Perspektiivi on helppo toteuttaa koodissa riippumatta siitä, mitä 2D-moottoria käytämme.

Ensinnäkin meidän on määritettävä, mihin haluamme viedä häviämiskohdan. Alla oleva esimerkki näyttää tämän pisteen kankaan keskellä.

Raft Challengella on tämä kohta näytön yläosassa, koska taivas ja kaikki yläpuolella ei ole yhtä tärkeitä kuin joen esteet.

Kuinka itse spritit valmistetaan? Vaikka se voi olla selvää henkilölle, jolla on taiteellinen tausta, se ei välttämättä ole selvää tekniselle henkilölle.

On olemassa kaksi sääntöä:

  • Liikkuvat osat on piirrettävä auttajalinjoja pitkin yllä esitetyllä tavalla
    Kaikki nuo linjat leikkaavat häviämispisteessä

Huomaa: Rannikko-osa ei ole saavuttamassa häviämispistettä. Se pysähtyy jossain keskellä jättäen läpinäkyvän alueen taakse.

  • Tällä graafisen ja kadonneen pisteen välisellä tyhjällä alueella on tärkeä tarkoitus
    Se pitää elementit, jotka ovat kauempana.

Nämä osat valmistetaan soveltamalla kahdesti pienempi asteikko jokaiselle vaiheelle. Tuloksena olevan kuvan tulisi olla saumaton, jos tekstuuri on hyvin tehty.

Kohtauksen kokoaminen

Kun olemme laatineet kaiken omaisuuden, meidän on saatettava ne kaikki näyttämölle.

Katsotaanpa kuinka se näyttää Raft Challengessa.

Alkaen:

  1. Taustakerrokset
    Tausta
    Ruoho
    Sumu pohja
    Aurinko
    Vuoret
    Horizon Line
  • Nämä kerrokset ovat kaikki staattisia, etkä liiku
  • Tausta vaikuttaa sekä taivaalle että vedelle
  • Tausta on tavallinen kaltevuus
    Se on venytetty täyttämään koko laitteen näyttö
    Kuvasuhde jätetään huomioimatta
  • Saatamme yhdistää muita tasoja kuin taustaa suorituskyvyn parantamiseksi, ellemme halua muuttaa joitain ominaisuuksia
  • Voimme liikuttaa aurinkoa pelin aikana
     tai korvata vuoret jollain toisella

2. Perspektiivikerrokset
Puut heijastuksin
rannikko
esteet

  • Yllä olevan kuvan selvyyden vuoksi kerrokset, joissa oli samanlainen sisältö, ryhmitettiin
    Siellä oli:
    2 kerrosta esteitä
    8 kerrosta rannikkoa
    8 kerrosta heijastuneita puita
  • Nämä kerrokset skaalataan kahdella, kun pelaaja liikkuu eteenpäin
  • Näiden kerrosten järjestys riippuu
    etäisyys
    lähemmät ovat päällä
    prioriteetti
    Este> Rannikko> Puut

3. Hahmo

  • Jos este on lähimmässä mahdollisessa asennossa, sen z-sijainti voi olla korkeampi kuin itse hahmo
    Tässä tapauksessa este estää merkin, mikä on toivottavaa

4. GUI

  • Hyvän grafiikan pitäisi riippua illuusioista ja temppuista laitteiston sijasta

Yhteenveto

Tämän artikkelin tulisi antaa meille idea lähestyä ongelmaa, joka liittyy varojen tuottamiseen 2,5D-peliin ja niiden järjestämiseen kohtaukseksi.

Voit lukea tämän sarjan osan 2 täältä.

Tietoja kirjoittajasta: Kamil Ziętek on iOS-kehittäjä osoitteessa www.allinmobile.co