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

Dasar SpriteKit: Nodes

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

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

SpriteKit adalah mesin game 2D milik Apple - sebuah mesin rendering yang dibangun di atas OpenGL. Ini diperkenalkan dengan iOS 7, dan setiap rilis berikutnya telah membawa tambahan besar pada framework ini. Dengan penggunaan textured sprites, mesin fisik built-in, dan SKAction class yang sangat kuat, Anda dapat dengan cepat membangun game 2D fungsional.

SpriteKit memiliki editor built-in untuk scene dan partikel, sebuah node kamera sejak diluncurkannya iOS9, dan dukungan built-in untuk tilesets sejak diluncurkannya iOS 10. Dengan penambahan baru ini, SpriteKit dengan cepat menjadi pembangkit tenaga listrik untuk menciptakan game 2D.

Untuk mengikuti tutorial ini, cukup download repo GitHub yang menyertainya. Ini memiliki folder bernama ExampleProject Starter. Buka proyek di folder itu di Xcode, dan you're ready to go!

Nodes

Node adalah blok bangunan fundamental dari SpriteKit, dan SKNode adalah kelas dasar dari semua node. Semua aset di layar Anda akan menjadi SKNode atau subkelasnya. SKNode sendiri tidak menyediakan konten visual apa pun. Semua konten visual digambar menggunakan salah satu dari sejumlah subclass SKNode yang telah ditentukan. SKNode dan subkelasnya berbagi beberapa properti yang bisa Anda ubah. Beberapa yang lebih penting adalah sebagai berikut.

  • position (CGPoint): posisi node dalam sistem koordinat induknya
  • xScale (CGFloat): tambah lebar node dengan pengganda
  • yScale (CGFloat): tambah tinggi node dengan pengganda
  • alpha (CGFloat): transparansi node
  • zRotation (CGFloat): rotasi Euler tentang sumbu z (dalam radian)

Salah satu SKNode yang paling penting adalah SKScene. Ini adalah simpul akar dimana semua node lainnya ditambahkan. Dengan sendirinya, SKScene tidak menyediakan elemen visual apapun, namun menampilkan node yang ditambahkan padanya.

Scene Nodes

SKScenes adalah akar node dimana semua node lainnya ditambahkan. Scene menghidupkan dan membuat konten dari child nodes. Untuk menampilkan scene, tambahkan ke SKView (yang merupakan subkelas UIView dan karena itu memiliki banyak properti yang sama dengan UIView).

Pada proyek starter SpriteKit, scene awal ditampilkan saat proyek dimuat. Untuk saat ini, ini hanya layar hitam kosong. Hal ini ditunjukkan saat GameViewController memanggil presentScene(_:) pada contoh tampilan, melewati scene sebagai parameter:

Jangan khawatir tentang pilihan lain untuk saat ini; Akan saya jelaskan nanti di seri ini.

Creating a Scene

Banyak permainan memiliki lebih dari satu layar atau scene, jadi kita akan membuat scene baru dari awal dan kemudian menampilkannya dari scene awal kita.

Pilih File> New> File dari menu Xcode, dan pilih Cocoa Touch Class.

Choose the Cocoa Touch Class template

Pastikan Class diatur ke NewScene dan Subclass of diatur ke SKScene. Tekan Next dan kemudian Create, pastikan target utama dicentang. Berikut adalah kode untuk NewScene.swift.

Sekarang kita memiliki dua scene dalam proyek kami, dan tidak ada konten visual. Mari kita tambahkan SKLabelNode (seperti semua node, ini adalah subclass dari SKNode). Satu-satunya tujuan SKLabelNode adalah menampilkan label teks.

Label Nodes

Label node, diimplementasikan di kelas SKLabelNode, digunakan untuk menampilkan teks dalam game Anda. Anda bisa menggunakan font khusus jika Anda mau, tapi untuk tujuan kami, kami hanya akan menempel pada default, yang menampilkan teks putih dan disetel ke Helvetica Neue Ultra Light, 32 titik.

Tambahkan yang berikut di dalam metode didMove(to:) dalam GameScene.swift. Metode ini disebut segera setelah sebuah scene dipresentasikan dengan sebuah view. Umumnya, di sinilah Anda akan menyiapkan aset permainan Anda dan menambahkannya ke tempat kejadian.

Disini kita buat sebuah SKLabelNode dengan menggunakan convenience initializer init(text:), yang mengambil sebagai parameter berupa string teks.

Menambah dan Menghapus Node

Hanya menginisialisasi node tidak akan menunjukkan itu di tempat kejadian. Untuk mendapatkan node untuk ditunjukkan, Anda harus memanggil metode addChild(_:)  pada node penerima, meneruskan SKNode yang ingin Anda tambahkan sebagai parameter.

Tambahkan yang berikut dalam metode didMove(to:).

Metode addChild(_:) tidak eksklusif untuk SKScene, namun merupakan metode SKNode. Hal ini memungkinkan Anda untuk membangun hirarki node yang kompleks - yang dikenal sebagai "node tree". Misalnya, Anda memiliki karakter permainan dan Anda ingin menggerakkan lengan dan kakinya secara terpisah. Anda bisa membuat instance SKNode dan kemudian menambahkan masing-masing bagian sebagai child dari SKNode tersebut (node yang berisi node induknya dikenal sebagai parent). Ini akan memberi Anda keuntungan untuk dapat memindahkan karakter sebagai keseluruhan unit dengan memindahkan induk SKNode, namun juga memungkinkan Anda untuk memindahkan masing-masing bagian secara terpisah.

Metode penting lainnya untuk menambahkan node adalah metode insertChild(_:a:), yang memasukkan child ke posisi tertentu dalam daftar node receiver children. Saat Anda menambahkan child ke sebuah node, node tersebut menyimpan daftar children yang diurutkan yang diacu dengan membaca properti children node. Hal ini penting ketika menambahkan beberapa node ke node induk untuk mempertimbangkan hal ini, karena urutan di mana Anda menambahkan node mempengaruhi beberapa aspek pemrosesan scene, termasuk pengujian dan rendering.

Untuk menghapus sebuah node, Anda memanggil method removeFromParent () pada node yang ingin Anda hapus.

Sekarang setelah kita membahas penambahan dan penghapusan node-node, kita dapat mengalihkan fokus kita kembali ke proyek contoh. Jika Anda ingat, kami baru saja menambahkan sebuah SKLabelNode ke GameScene. Jika Anda menguji sekarang, Anda akan melihat hanya setengah dari teks ke bagian kiri bawah layar.

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

Mengapa hanya setengah teks yang ditampilkan? Sekarang akan menjadi waktu yang tepat untuk membicarakan sistem koordinat dan penentuan SpriteKit.

Posisi dan Koordinat

Secara default, sistem koordinat SpriteKit berada (0,0) di kiri bawah layar. Juga secara default, SpriteKit menempatkan node sehingga berada pada posisi (0,0). Namun, meskipun ... mengapa kita hanya melihat setengah dari teks? Ini karena secara default label teks dipusatkan secara horizontal pada asal label node, yaitu (0,0). Berikut adalah gambar yang menunjukkan bagaimana sistem koordinat node bekerja.

A nodes x and y coordinates

Asal-usul node berada pada (0,0), dan koordinat x positif bergerak ke kanan dan koordinat positif naik ke layar. Ingat bahwa SKScene adalah sebuah node, dan karena itu asalnya juga (0,0).

Menetapkan Posisi Node

Sekarang setelah kita mempelajari sistem koordinat SpriteKit dan bagaimana menempatkan node, kita dapat memindahkan SKLabelNode ke posisi yang berbeda sehingga kita dapat melihat semua teks. Tambahkan yang berikut ke metode didMove(to:) dalam GameScene.swift.

Disini kita memposisikan label ke tengah scene. Properti position adalah tipe CGPoint, yang memiliki nilai x dan y yang mewakili satu titik dalam scene.

Jika Anda tes sekarang, Anda harus melihat label telah diposisikan di tengah scene.

Test with label positioned in centre of screen

Beralih Antara Scene

Seperti saat ini berdiri, NewScene hanya kosong. Mari kita juga menambahkan label untuk itu, dan kemudian kita bisa belajar bagaimana beralih antar scene. Inilah tantangannya: sebelum Anda membacanya di depan, coba tambahkan label NewScene yang berbunyi, "Go Back". Solusi saya ada di bawah.

Hal pertama yang perlu kita lakukan adalah menambahkan metode didMove(to:). Tambahkan yang berikut ke NewScene.swift.

Selanjutnya, kita perlu menambahkan labelnya. Tambahkan yang berikut dalam metode didMove(to:) yang telah Anda tambahkan di atas.

Ini menambahkan label ke NewScene dengan teks "Go Back". Selanjutnya, kami akan menerapkan fungsi yang disarankan label imerespons peristiwa sentuhan mengganti scene.

Menanggapi Sentuhan

Hampir semua game mobile akan berinteraksi dengan menggunakan sentuhan. Pada langkah ini, Anda akan belajar bagaimana merespon peristiwa sentuhan dalam permainan Anda.

Untuk mendaftarkan pengendali event sentuh dalam permainan Anda, Anda harus menerapkan metode touchesBegan(_:with:). Tambahkan yang berikut ke GameScene.swift:

Jika Anda ingin mengujinya sekarang, Anda akan melihat YOU TOUCHED dicetak ke konsol saat Anda menyentuh layar. Yang biasanya kita butuhkan, bagaimanapun, adalah bisa mengetahui kapan node tertentu disentuh. Untuk melakukan ini, kita memerlukan beberapa cara untuk menemukan dan mengidentifikasi node. Kita akan belajar bagaimana mencapainya, dan kemudian kembali dan selesaikan touchesBegan(_:with:) method.

Mencari Pohon Node

Untuk dapat mengidentifikasi sebuah node, Anda menggunakan properti node's name dan mencari pohon node untuk sebuah node dengan nama itu. Properti node's name mengambil string alfanumerik tanpa tanda baca.

Ada beberapa metode untuk mencari node dengan properti name. Jika Anda sudah memiliki referensi ke node, Anda bisa langsung mengecek properti name, yang akan kita lakukan dengan metode touchesBegan(_:with:). Namun, penting untuk mengetahui cara mencari pohon node untuk node tertentu berdasarkan nama, atau untuk mencari sekelompok node dengan nama yang sama.

Metode childNode(withName:) mencari anak-anak dari sebuah node untuk nama tertentu yang dilewatkan sebagai parameter.

Metode enumerateChildNodes(withName:using:) mencari node children dan memanggil blok satu kali untuk setiap node yang cocok yang ditemukannya. Anda menggunakan metode ini bila Anda ingin menemukan semua node yang memiliki nama yang sama.

Metode subscript(_:) mengembalikan sebuah array dari node yang sesuai dengan parameter nama.

Anda juga dapat mencari node menggunakan sintaks pencarian lanjutan yang memungkinkan Anda mencari seluruh pohon scene, atau mencari pola daripada nama yang tepat, misalnya. Kemampuan pencarian lanjutan ini berada di luar cakupan tutorial ini. Namun, jika Anda ingin belajar lebih banyak, Anda dapat membaca tentang referensi pemrograman SKNode.

Sekarang kita tahu cara mencari node di dalam pohon node, mari beri nama label kita.

Tambahkan yang berikut dalam metode didMove(to:) dalam GameScene.swift.

Di sini, kami menetapkan properti nama StartGameLabel menjadi startgame.

Kita juga perlu mengatur nama label di NewScene. Tambahkan yang berikut dengan metode didMove(to:) dalam NewScene.swift.

Kami menetapkan properti name untuk goback.

Mendeteksi Node yang Tersentuh

Tambahkan yang berikut ini dalam method touchesBegan(_:with:) dalam GameScene.swift.

Properti multiTouchEnabled dari scene ditampilkan ke false secara default, yang berarti tampilan hanya menerima sentuhan pertama dari urutan multitouch. Dengan properti ini dinonaktifkan, Anda dapat mengambil kembali sentuhan dengan menggunakan properti first computed dari set touches, karena hanya ada satu objek di lokasi.

Kita bisa mendapatkan touchLocation dalam scene dari properti location dalam sentuhan. Kita kemudian bisa mencari tahu node mana yang tersentuh dengan memanggil atPoint(_:) dan lewat di touchLocation.

Kami memeriksa apakah nama properti touchNode sama dengan "startgame", dan jika memang demikian, kami tahu bahwa pengguna telah menyentuh labelnya. Kami kemudian membuat sebuah instance dari NewScene dan mengatur properti scalemode agar sama dengan scene saat ini - ini memastikan scene tersebut bertindak sama di perangkat yang berbeda. Akhirnya, kita membuat SKTransition dan memanggil metode presentScene(_:transition:), yang akan menampilkan scene bersamaan dengan transisi.

SKTransition class memiliki banyak metode class yang dapat Anda gunakan untuk menunjukkan transisi yang berbeda antara scene dan bukan segera menunjukkan scene. Ini memberikan sedikit "eye candy" untuk end user, dan membuat scene baru tampak kasar. Untuk melihat semua jenis transisi yang tersedia, lihat SKTransition class in the reference guide.

Aku tidak akan menerapkan metode touchesBegan(_:with:) di NewScene. Mengapa Anda tidak mencoba melakukannya sendiri dan membiarkan transisi label kembali ke GameScene menggunakan jenis transisi yang berbeda? Kode akan sangat mirip dengan apa yang kita miliki di atas, hanya ingat kita menamakan SKLabelNode "goback".

Kesimpulan

Kami telah mempelajari sedikit tentang node sejauh ini dengan menggunakanscene , dan Anda telah melihat bagaimana menggunakan label node sebagai contoh umum untuk mempelajari beberapa karakteristik node. Kami telah mempelajari sistem koordinat mereka, bagaimana menemukannya di dalam pohon node, bagaimana memposisikannya, dan bagaimana merespons touch event.

Ada beberapa jenis node lain yang tersedia, dan kita akan melihatnya pada tutorial berikutnya-dimulai dengan SKSpriteNode!

Untuk mempelajari lebih lanjut tentang cara memulai SpriteKit, Anda juga harus memeriksa postingan Davis Allie di Envato Tuts+.

Juga, periksa kursus SpriteKit kami! Ini akan membawa Anda melewati semua langkah membangun game SpriteKit pertama Anda untuk iOS, bahkan jika Anda belum pernah koding dengan SpriteKit sebelumnya.

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.