Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. SpriteKit
Code

Dasar SpriteKit: Nod

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called SpriteKit Basics.
Introducing SpriteKit
SpriteKit Basics: Sprites

Malay (Melayu) translation by Seurion (you can also view the original English article)

SpriteKit adalah enjin permainan 2D Apple-enjin rendering yang dibina di atas OpenGL. Ia telah diperkenalkan dengan IOS 7, dan setiap keluaran berikutnya telah membawa penambahan hebat kepada rangka kerja. Dengan menggunakan sprite bertekstur, enjin fizik terbina dalam, dan kelas SKAction yang sangat kuat, anda boleh dengan cepat membina permainan 2D berfungsi.

SpriteKit mempunyai editor terbina dalam untuk adegan dan zarah, nod kamera sejak pembebasan iOS9, dan sokongan terbina dalam untuk tileset sejak pembebasan iOS 10. Dengan penambahan baru ini, SpriteKit dengan cepat menjadi kuasa untuk mewujudkan permainan 2D.

Untuk mengikuti tutorial ini, hanya muat turun repo GitHub yang disertakan. Ia mempunyai folder bernama ExampleProject Starter. Buka projek dalam folder itu dalam Xcode, dan anda sudah bersedia untuk pergi!

Nod

Nod adalah blok bangunan asas SpriteKit, dan SKNode adalah kelas asas semua nod. Semua aset pada skrin anda akan menjadi SKNode atau subclass daripadanya. SKNodes dengan sendirinya tidak menyediakan sebarang kandungan visual, bagaimanapun. Semua kandungan visual digambar menggunakan salah satu daripada beberapa subclass SKNode yang telah ditetapkan. SKNodes dan subkelasnya berkongsi beberapa sifat yang boleh anda ubah. Antara yang lebih penting adalah seperti berikut.

  • kedudukan (CGPoint): kedudukan nod dalam sistem koordinat induknya
  • xScale (CGFloat): skala lebar nod dengan pengganda
  • yScale (CGFloat): skala ketinggian nod dengan pengganda
  • alpha (CGFloat): ketelusan nod
  • zRotation (CGFloat): putaran Euler tentang paksi z (dalam radian)

Salah satu SKNodes yang paling penting ialah SKScene. Ini adalah nod akar yang mana semua nod lain ditambah. Dengan sendirinya, SKScene tidak menyediakan sebarang elemen visual, tetapi ia memaparkan nod yang ditambahkan kepadanya.

Nod Scene

SKScenes adalah nod akar yang mana semua nod lain ditambah. Adegan ini menghidupkan dan menjadikan kandungan dari nod anaknya. Untuk memaparkan pemandangan, anda menambahnya ke SKView (yang merupakan subclass UIView dan dengan itu mempunyai banyak sifat yang sama seperti UIView).

Dalam projek starter SpriteKit, adegan awal menunjukkan apabila projek itu dimuatkan. Buat masa ini, ini hanya skrin hitam kosong. Ia ditunjukkan apabila GameViewController memanggil presentScene (_ :) pada contoh paparan, lulus di tempat kejadian sebagai parameter:

Jangan bimbang tentang pilihan lain buat masa ini; Saya akan menerangkannya nanti dalam siri ini.

Mewujudkan Adegan

Banyak permainan mempunyai lebih daripada satu skrin atau adegan, jadi kami akan membuat adegan baru dari awal dan kemudian menunjukkannya dari tempat kejadian awal kami.

Pilih Fail> Baru> Fail dari menu Xcode, dan pilih Kelas Sentuhan Koko.

Choose the Cocoa Touch Class template

Pastikan Kelas diset ke NewScene dan Subclass ditetapkan ke SKScene. Tekan Next dan kemudian Buat, pastikan sasaran utama diperiksa. Berikut adalah kod untuk NewScene.swift.

Sekarang kita mempunyai dua adegan dalam projek kami, dan tiada kandungan visual. Mari tambahkan SKLabelNode (seperti semua nod, ini adalah subkelas SKNode). Tujuan tunggal SKLabelNode adalah untuk memaparkan label teks.

Nod Label

Nod label, yang dilaksanakan dalam kelas SKLabelNode, digunakan untuk menunjukkan teks dalam permainan anda. Anda boleh menggunakan fon tersuai jika anda mahu, tetapi untuk tujuan kami, kami hanya berpegang kepada lalai yang memaparkan teks putih dan ditetapkan ke Helvetica Neue Ultra Light, 32 poin.

Tambahkan yang berikut di dalam kaedah didMove (kepada :) dalam GameScene.swift. Kaedah ini dipanggil dengan serta-merta selepas adegan dibentangkan oleh pandangan. Secara amnya, ini adalah tempat anda menubuhkan aset permainan anda dan menambahnya ke tempat kejadian.

Di sini kita buat SKLabelNode menggunakan kemudahan initializer init (text :), yang mengambil parameter sebagai rentetan teks.

Menambah dan Mengalih Keluar Nod

Hanya memulakan nod tidak akan menunjukkannya di tempat kejadian. Untuk mendapatkan nod untuk dipaparkan, anda perlu memanggil kaedah addChild (_ :) pada nod penerima, lulus SKNode yang anda mahu tambah sebagai parameter.

Tambah yang berikut dalam kaedah didMove (kepada :).

Kaedah addChild (_ :) tidak eksklusif untuk SKScenes, tetapi merupakan kaedah SKNode. Ini membolehkan anda membina hierarki kompleks nod-dikenali sebagai "pokok nod". Contohnya, katakan anda mempunyai watak permainan dan anda mahu memindahkan lengan dan kakinya secara berasingan. Anda boleh membuat contoh SKNode dan kemudian menambah setiap bahagian individu sebagai anak SKNode itu (nod yang mengandungi dikenali sebagai nod induk). Ini akan memberi manfaat kepada anda untuk memindahkan watak sebagai unit keseluruhan dengan menggerakkan SKNode ibu bapa, tetapi juga membolehkan anda untuk memindahkan setiap bahagian individu secara individu.

Kaedah lain untuk menambahkan nod adalah kaedah insertChild (_: at :), yang memasukkan kanak-kanak ke dalam kedudukan tertentu dalam senarai anak-anak penerima nod. Apabila anda menambah kanak-kanak ke nod, nod mengekalkan senarai pesanan kanak-kanak yang dirujuk dengan membaca harta kanak-kanak nod. Adalah penting apabila menambah beberapa nod ke nod induk untuk mengambil kira ini, kerana pesanan di mana anda menambah nod memberi kesan kepada beberapa aspek pemprosesan tempat kejadian, termasuk ujian hit dan rendering.

Untuk mengeluarkan nod, anda menggunakan kaedah removeFromParent() pada nod yang anda ingin alih keluar.

Sekarang kita telah membungkus menambah dan mengeluarkan nod, kita boleh memindahkan fokus kami kembali ke projek contoh. Jika anda ingat, kami baru sahaja menambahkan SKLabelNode ke GameScene. Jika anda menguji sekarang, anda akan melihat separuh daripada teks itu ke kiri bawah skrin.

Test showing blank screen with text half off to the bottom left of the screen

Kenapa hanya separuh teks yang menunjukkan, walaupun? Kini akan menjadi masa yang baik untuk bercakap mengenai sistem koordinat dan kedudukan SpriteKit.

Kedudukan dan Koordinat

Secara lalai, sistem koordinat SpriteKit meletakkan (0,0) di sebelah kiri bawah skrin. Juga secara lalai, SpriteKit menempatkan nod sehingga mereka diposisikan pada (0,0). Namun, walaupun ... mengapa kita hanya melihat separuh daripada teks itu? Ini kerana secara lalai label teks berpusat secara mendatar pada asal nod label, iaitu (0,0). Di bawah adalah imej yang menunjukkan bagaimana sistem koordinat simpul berfungsi.

A nodes x and y coordinates

Asal-usul node berada pada (0,0), dan x koordinat positif bergerak ke kanan dan koordinat y positif naik skrin. Ingat bahawa SKScene adalah nod, dan oleh sebab itu asalnya juga (0,0).

Menetapkan Posisi Node

Sekarang kita telah belajar kerja-kerja sistem koordinat SpriteKit dan bagaimana ia menempatkan nod, kita boleh menggerakkan SKLabelNode ke kedudukan yang berbeza supaya kita dapat melihat semua teks. Tambah yang berikut ke kaedah didMove (kepada :) dalam GameScene.swift.

Di sini kami meletakkan label ke pusat tempat kejadian. Harta kedudukan adalah jenis CGPoint, yang mempunyai nilai x dan y yang mewakili satu titik dalam kejadian.

Jika anda menguji sekarang, anda harus melihat label telah diletakkan di tengah-tengah tempat kejadian.

Test with label positioned in centre of screen

Beralih Antara Adegan

Seperti yang kini berdiri, NewScene hanyalah adegan kosong. Mari juga tambahkan label kepadanya, dan kemudian kita boleh belajar bagaimana untuk menukar antara adegan. Berikut adalah cabaran: sebelum anda membacanya, cuba tambahkan label kepada NewScene yang mengatakan, 'Kembali'. Penyelesaian saya adalah di bawah.

Perkara pertama yang perlu kita lakukan ialah menambah kaedah didMove(kepada:). Tambah yang berikut ke NewScene.swift.

Seterusnya, kami perlu menambah label. Tambahkan yang berikut dalam kaedah didMove(kepada:) yang anda tambah di atas.

Ini menambahkan label kepada NewScene dengan teks "Go Back". Seterusnya, kami akan melaksanakan fungsi yang dicadangkan label ini-kami akan bertindak balas terhadap peristiwa sentuhan dengan menukar pemandangan.

Menjawab Sentuh

Hampir semua permainan mudah alih akan berinteraksi dengan menggunakan sentuhan. Dalam langkah ini, anda akan belajar bagaimana untuk bertindak balas terhadap peristiwa sentuhan dalam permainan anda.

Untuk mendaftarkan pengendali acara sentuhan dalam permainan anda, anda mesti melaksanakan sentuhan Began (_: dengan:) pandangan. Tambah yang berikut ke GameScene.swift:

Jika anda ingin mengujinya sekarang, anda akan melihat ANDA TOUCHED dicetak ke konsol apabila anda menyentuh skrin. Bagaimanapun, yang biasanya kita perlukan adalah untuk dapat memberitahu apabila nod tertentu telah disentuh. Untuk melakukan ini, kita memerlukan beberapa cara untuk mencari dan mengenal pasti nod. Kami akan belajar bagaimana untuk mencapai ini, dan kemudian kembali dan selesaikan kaedah touchesBegan (_: dengan :).

Mencari Pokok Node

Untuk dapat mengenal pasti nod, anda menggunakan harta nama nod dan mencari pokok nod untuk nod dengan nama itu. Nama nama nod mengambil rentetan alfanumerik tanpa sebarang tanda baca.

Terdapat beberapa kaedah untuk mencari nod dengan nama namanya. Sekiranya anda sudah mempunyai rujukan kepada nod, anda hanya boleh memeriksa nama namanya secara langsung, iaitu apa yang akan kita lakukan dalam kaedah sentuhBegan (_: dengan :). Walau bagaimanapun, adalah penting untuk mengetahui bagaimana untuk mencari pokok nod untuk nod tertentu dengan nama, atau untuk mencari sekumpulan nod dengan nama yang sama.

Kaedah childNode (denganName:) mencari anak-anak nod untuk nama tertentu yang diluluskan sebagai parameter.

Nombor enumerateChildNodes (denganName: menggunakan :) mencari anak-anak node dan memanggil blok sekali untuk setiap nada yang cocok ia dapati. Anda menggunakan kaedah ini apabila anda ingin mencari semua nod yang berkongsi nama yang sama.

Kaedah subskrip (_ :) mengembalikan pelbagai nod yang sepadan dengan parameter nama.

Anda juga boleh mencari nod menggunakan syntax carian lanjutan yang membolehkan anda mencari seluruh pokok adegan, atau mencari corak dan bukan nama yang tepat, sebagai contoh. Keupayaan pencarian yang canggih ini diluar skop tutorial ini. Walau bagaimanapun, jika anda ingin mengetahui lebih lanjut, anda boleh membaca tentang rujukan dalam pengaturcaraan SKNode.

Sekarang kita tahu bagaimana mencari nod dalam pokok simpul, mari kita memberi label nama kita.

Tambahkan yang berikut dalam kaedah didMove(kepada :) dalam GameScene.swift.

Di sini, kami menetapkan permulaan nama startGameLabel untuk startgame.

Kami juga perlu menetapkan nama label dalam NewScene. Tambah yang berikut dengan kaedah didMove (kepada :) dalam NewScene.swift.

Kami menetapkan nama untuk goback.

Mengesan Node yang Disentuh

Tambahkan yang berikut dalam sentuhanBegan (_: dengan kaedah:) dalam GameScene.swift.

Ciri multiTouchEnabled pandangan pemandangan ditetapkan kepada palsu secara lalai, yang bermaksud pandangan hanya menerima sentuhan pertama urutan multitouch. Dengan harta ini dilumpuhkan, anda boleh mengambil sentuhan dengan menggunakan harta yang dikira pertama dari sentuhan yang ditetapkan, kerana terdapat hanya satu objek dalam set itu.

Kami boleh mendapatkanLokasi lokasi dalam adegan dari harta lokasi sentuhan. Kita kemudian dapat mengetahui nod yang disentuh dengan menggunakan atPoint (_ :) dan lulus diLocation sentuh.

Kami periksa sama ada nama touchedNode bersamaan dengan "startgame", dan jika sudah, kita tahu bahawa pengguna telah menyentuh label tersebut. Kami kemudian membuat contoh NewScene dan menetapkan harta skalemode untuk menjadi sama dengan adegan semasa—ini memastikan adegan bertindak sama di seluruh peranti yang berbeza. Akhir sekali, kami mencipta SKTransition dan memohon kaedah presentasi (_: peralihan :), yang akan membentangkan tempat kejadian bersama-sama dengan peralihan.

Kelas SKTransition mempunyai banyak kaedah kelas yang boleh digunakan untuk memperlihatkan peralihan yang berbeza di antara adegan dan bukan sekadar menunjukkan tempat kejadian. Ini menyediakan sedikit "permata mata" untuk pengguna akhir, dan membuat menunjukkan adegan baru kelihatan kurang mendadak. Untuk melihat semua jenis peralihan yang ada, lihat kelas SKTransition dalam panduan rujukan.

Saya tidak akan melaksanakan kaedah touchesBegan(_:dengan :) di NewScene. Kenapa anda tidak cuba melakukannya sendiri dan mempunyai peralihan label kembali ke GameScene menggunakan jenis peralihan yang berbeza? Kod ini akan menyerupai apa yang kita ada di atas, hanya ingat kita menamakan SKLabelNode "goback".

Kesimpulan

Kami telah mempelajari sedikit tentang node setakat menggunakan pemandangan, dan anda telah melihat cara menggunakan nod label sebagai contoh generik untuk mempelajari beberapa ciri nod. Kami telah mengkaji sistem koordinat mereka, bagaimana untuk mencari mereka dalam pokok nod, bagaimana untuk meletakkan mereka, dan bagaimana untuk bertindak balas terhadap peristiwa sentuhan.

Terdapat beberapa jenis nod lain yang tersedia, dan kami akan melihatnya dalam tutorial seterusnya-bermula dengan SKSpriteNode!

Untuk mengetahui lebih lanjut tentang cara memulakan SpriteKit, anda juga perlu menyemak siaran Davis Allie di sini di Envato Tuts +.

Juga, periksa kursus SpriteKit kami! Ini akan membawa anda melalui semua langkah untuk membina permainan SpriteKit pertama anda untuk iOS, walaupun anda tidak pernah berkod dengan SpriteKit sebelum ini.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.