Wprowadzenie do SpriteKit #2 – budowanie SKScene

20 listopada 2017

SpriteKit

Witaj w kolejnym wpisie z serii “Wprowadzenie do SpriteKit”, w której pokażę Ci jak zacząć przygodę z tworzeniem gier 2D na iOS. W tym odcinku omówię w jaki sposób zbudować swoją pierwszą scenę (SKScene) oraz jak stworzyć pierwszą animację tekstur za pomocą edytora dostępnego w Xcode.

Jeśli nie widziałeś poprzednich wpisów z tej serii, są one dostępne tu:

Gotowy? No to 🚀.

Tworzenie projektu

Na początek proponuję Ci utworzyć nowy projekt gry. Proces ten został przeze mnie dokładnie opisany w poprzedniej części dostępnej tutaj. Jeśli nie wiesz jeszcze jak poprawnie utworzyć projekt, to rzuć okiem na ten wpis.

Anyway 👉 tworzymy nowy projekt, a następnie dodajemy elementy graficzne dla naszej sceny. To będą elementy, które będą tworzyły świat twojej gry, zatem możesz dodać jakieś obiekty, coś co będzie reprezentowało tło itp. Obrazki, jak zawsze, powinny być przygotowane w formacie .PNG bez tła (z kanałem alpha).

Dodajemy elementy naszej sceny do katalogu Assets.xcasset standardowo przez drag & drop, jak do standardowego projektu.

Dodawanie tekstur do SKScene

Kiedy mamy gotowy projekt oraz elementy graficzne, jakich chcemy używać, przechodzimy do pliku ze sceną. Dla mnie domyślne jest to GameScene.sks

SpriteKit - widok projektu

Na początek zmień domyślny widok z Portraint na Landscape. W tym celu zaznacz scenę i przejdź do Attributes inspector’a po prawej stronie. Tam znajdziesz opcję Size którą należy zmienić np. na iPhone 6s Plus, a potem drugi dropdown na Landscape. Teraz będzie nam trochę wygodniej.

Następnie zmieniam Anchor Point na (0,0). Jak pamiętasz z odcinka pierwszego ➡️ punkt (0,0) dla naszej sceny znajduje się w lewym dolnym rogu, nie zaś jak w przypadku zwykłego widoku z UIKit, w górnym.

Kolejny atrybut to Gravity. Tutaj możemy manipulować siłą przyciągania ziemnskiego 🌏. Na dzisiejsze potrzeby zastawiamy sobie standardowo -9.8, ale pamiętaj że możesz to edytować dowolnie w zależności od potrzeb.

Note: W kolejnych częściach tego cyklu, dotyczących mechaniki gry zobaczysz, jak działa grawitacja na obiektach.

Ok, mamy gotowy element sceny, czas zatem na dodanie pierwszych tekstur. Jeśli pamiętasz z pierwszej części serii, elementami interfejsu, które mogę być teskturowane, są tzw. sprite’y. Zatem jeżeli chcemy dodać jakieś tekstury do naszej sceny, robimy to za pomocą elementu Color Sprite.

Dodawanie Sprite do SKScene

Po dodaniu sprite’a, który teraz wygląda jak czerwony kwadrat, możemy przejść do jego edycji. W tym celu znowy przechodzimy do Attributes inspector’a i wprowadzomy małe zmiany. Po pierwsze ➡️ nazwa. Zawsze dodajmy nazwy jednoznacznie identyfikujące dany element, a nazwa ta posłuży później do odnoszenia się do danego elementu w kodzie. Następnie zmieniamy parametr Texture – tym samym z listy wybieramy interesującą nas grafikę.

Wybór tekstury

Jak widzisz, sprite zmienił się w wybrany przez Ciebie obrazek! W ten sposób zbuduj całą scenę, dodając kolejne sprite’y.

Done? Moja scena wygląda na tym etapie tak:

Przykładowo zbudowana scena

Wiem, że chciałbyś już to zobaczyć w symulatorze albo na urządzeniu 💪😁, ale nim to zrobisz, dla lepszego efektu zmień jeszcze jeden parametr. Przejdź w tym celu do ustawień projektu -> Zakładka General -> Sekcja Deployment info. Tutaj znajduje się podsekcja Device Orientation, a ponieważ projektowaliśmy nasz inferfejs w położeniu poziomym, to proponuję zostawić zaznaczoną tylko opcję Landscape Left.

Ustawienie położenia ekranu

Dobra, mamy to! Odpalaj ⌘r 🚀.

Dodawanie animacji tekstur

Podobnie proste jak stworzenie sceny, będzie dodawanie do jej elementów – animacji. Ale po kolei 👇.

Ja w swojej grze chcę animować samochód, żeby przejechał drogą od lewej do pracej. W tym celu wyrzucam obrazek 🚗 poza wyświetlaną część ekranu:

Przeniesienie elementu poza obszar wyświetlania

W sekcji na dole edytora możesz zauważyć Timeline, na którym wyświetlone są wszystkie dodane przez Ciebie tekstury. Do tej lini czasu dodamy teraz animację dla obiektu fiat. W tym celu wyszukuję obiektu Move Action z bocznego panelu na dole po prawej stronie Xcode i przeciągam do lini, w której znajduje się tekstura samochodu:

Dodanie animacji do linii czasu

Kiedy zaznaczę dodaną animację na linii czasu, mogę dowolnie rozszerzać animację w czasie:

Kopiowanie animacji

W attributes inspector zmień teraz parametr Offset X np. na 1000. Jeśli klikniesz teraz napis Animate pod sceną, zobaczysz jak samochód przesuwa się po drodze! Działa to? 🚀

Dodaną animację możemy kopiować i dodawać jako kolejną, możemy zmieniać jej parametry etc.

Note: Zrób ćwiczenie i postaraj się dodać animację, która sprawi że obiekt po opusczeniu ekranu wróci tą samą drogą na prawą stronę.
Dało radę? 👊.

Animację można również zapętlać. W tym celu wybierz przynajmniej dwie dodane animacje, a następnie z menu kontekstowego wybierz opcję Convert to Loop:

Zapętlanie animacji

W oknie edycyjnym pętli możesz teraz dodawać, ile razy pętla ma się wykonać. Zaznaczenie opcji ∞ oznacza oczywiście że pętla będzie się wykonywała w nieskończoność.

Ok! Świetna robota 👉😎👈 Teraz możesz przetestować to w symulatorze lub urządzeniu.

Note: W symulatorze animacje mogę nie wykonywać się płynnie. Nie przejmuj się tym ➡️ SpriteKit posiada akceleracje sprzętową, podczas gdy symulator używa tej opratej o software. Dlatego jeśli chcesz zobaczyć płynną animację, to przetestuj apke na fizycznym urządzeniu.

Podsumowanie

Brawo! Stworzyłeś swoją pierwszą Scene! To już naprawdę coś. W następnej części tej serii zajmiemy się już mechaniką naszej gry i manipulowaniem obiektami w kodzie. W tym celu upewnij się, że masz jakiś fajny pomysł na grę lub wiesz, którą chcesz skopiować 😁. Dobrze, jeśli również przygotujesz sobie parę prostych grafik, których będziesz używał przy tworzeniu swojej gry.

Na dzisiaj wystarczy tej wiedzy, jak zawsze, bardzo dziękuję Ci że jesteś i czytasz! W wolnej chwili podziel się komentarzem pod postem, wspomnij o mnie i blogu na Twitter’ze lub wpadnij na grupę na Facebook’u.

Do następnego!
@jkornat

Wprowadzenie do SpriteKit #2

Komentarze 2 thoughts on “Wprowadzenie do SpriteKit #2

  • Listopad 23, 2017 z 10:55
    Permalink

    Hello ,

    I saw your tweets and thought I will check your website. Have to say it looks very good!
    I’m also interested in this topic and have recently started my journey as young entrepreneur.

    I’m also looking for the ways on how to promote my website. I have tried AdSense and Facebok Ads, however it is getting very expensive. Was thinking about starting using analytics. Do you recommend it?
    Can you recommend something what works best for you?

    Would appreciate, if you can have a quick look at my website and give me an advice what I should change: http://janzac.com/
    (Recently I have added a new page about FutureNet and the way how users can make money on this social networking portal: http://janzac.com/how-to-earn-money-with-futurenet-and-futureadpro/ )

    I wanted to subscribe to your newsletter, but I couldn’t find it. Do you have it?

    Hope to hear from you soon.

    P.S.
    Maybe I will add link to your website on my website and you will add link to my website on your website? It will improve SEO of our websites, right? What do you think?

    Regards
    Jan Zac

    Powtórz
    • Jakub Kornatowski
      Listopad 27, 2017 z 13:44
      Permalink

      Hi Jan,

      Thanks for leaving the comment. I’m not using any special ads tools for my blog, because I’m doing it for fun and this is not a platform for earning money or something :).

      If you want, please contact me on email jkornatowski@qcoder.pl or on any of my social media account and I’ll share my experience and knowledge about my small business.

      I also let my opinion on your site with pleasure :).

      About subscribe – I don’t have any subscription yet. It will be soon and then I also let you know.

      Take care and good luck!

      Powtórz

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *