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

iOS 8: Apa yang Baru di SpriteKit, Bagian 1

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called iOS 8: What's New in SpriteKit.
iOS 8: What's New in SpriteKit, Part 2

Indonesian (Bahasa Indonesia) translation by Dean Ramadhan (you can also view the original English article)


Tutorial ini memberikan gambaran tentang fitur-fitur baru dari kerangka kerja SpriteKit yang diperkenalkan di iOS 8. Fitur-fitur baru dirancang untuk membuatnya lebih mudah untuk mendukung efek permainan tingkat lanjut dan termasuk dukungan untuk shaders fragmen OpenGL ES kustom, pencahayaan, bayangan, lanjutan baru Efek dan animasi fisika, dan integrasi dengan SceneKit. Dalam tutorial ini, Anda akan belajar cara mengimplementasikan fitur-fitur baru ini.

Sebelum memulai tutorial, saya ingin mengucapkan terima kasih kepada Mélodie Deschans (Wicked Cat) karena memberi kami game art yang digunakan dalam seri ini.

Prasyarat

Tutorial ini mengasumsikan bahwa Anda terbiasa dengan SpriteKit dan Objective-C. Untuk berinteraksi dengan shader dan editor scene tanpa jeda masukan, saya sarankan Anda mengunduh dan menginstal Xcode 6.1 atau yang lebih baru. Unduh proyek Xcode dari GitHub, jika Anda ingin mengikuti.

Format Seri

Seri ini dibagi menjadi dua tutorial dan mencakup fitur baru paling penting dari kerangka kerja SpriteKit. Pada bagian pertama, kita melihat shader, pencahayaan, dan bayangan. Pada bagian kedua, saya akan berbicara tentang integrasi fisika dan SceneKit.

Sementara setiap bagian dari seri ini berdiri sendiri, saya sarankan mengikuti langkah demi langkah untuk memahami dengan baik fitur-fitur baru dari kerangka kerja SpriteKit. Setelah membaca kedua bagian, Anda dapat membuat game yang sederhana dan lebih canggih menggunakan fitur baru dari kerangka SpriteKit.

1. Pendahuluan

SpriteKit menyediakan rendering pipeline yang dapat digunakan untuk menganimasikan sprite. Rendering pipeline berisi loop rendering yang bergantian antara menentukan konten dan rendering frame. Pengembang menentukan konten setiap frame dan bagaimana perubahannya. SpriteKit menggunakan GPU perangkat untuk membuat setiap frame secara efisien.

Kerangka kerja SpriteKit tersedia di iOS dan OS X, dan mendukung berbagai jenis konten, termasuk sprite, teks, bentuk, dan video.

Fitur SpriteKit baru yang diperkenalkan di iOS 8 adalah:

  • Shader: Shader menyesuaikan cara gambar-gambar digambar ke layar. Mereka berguna untuk menambah atau memodifikasi efek. Shader didasarkan pada shader fragmen OpenGL ES. Setiap efek diterapkan pada basis per-pixel. Anda menggunakan bahasa pemrograman mirip C untuk memprogram shader dan dapat digunakan untuk iOS dan OS X. Shader dapat diterapkan ke scene atau ke kelas yang didukung, SKSpriteNode, SKShapeNode, SKEmitterNode, SKEffectNode, dan SKScene.
  • Lighting & Shadows: Lighting digunakan untuk menerangi sceme atau sprite. Setiap lampu mendukung warna, bayangan, dan konfigurasi jatuh. Anda dapat memiliki hingga delapan lampu berbeda per sprite.
  • Physics: Physics digunakan untuk menambahkan realisme ke dalam game. SpriteKit memperkenalkan empat tipe baru properti fisik, fisika per-piksel, constraint, kinematika terbalik, dan bidang fisika. Properti per-pixel memberikan representasi akurat dari interaksi suatu objek. Berkat berbagai constraint yang telah ditentukan, kode boilerplate dapat dihapus dalam pembaruan scene. Kinematika terbalik digunakan untuk mewakili sambungan menggunakan sprite (titik jangkar, hubungan orangtua-anak, rotasi maksimum dan minimum, dan lain-lain). Terakhir, Anda dapat membuat bidang physics untuk mensimulasikan gaya gravitasi, gaya tarik, dan gaya elektromagnetik. Fitur-fitur physics baru ini membuat simulasi yang kompleks jauh lebih mudah diimplementasikan.
  • Integrasi SceneKit: Melalui SceneKit, Anda dapat memasukkan konten 3D dalam aplikasi SpriteKit dan mengendalikannya seperti instance SKNode biasa. Ini membuat konten 3D langsung di dalam rendering pipeline SpriteKit. Anda dapat mengimpor file .dae atau .abc yang ada ke SKScene.

2. Tinjauan Proyek

Saya telah membuat proyek Xcode untuk memulai. Ini memungkinkan kita untuk segera mulai menggunakan fitur SpriteKit yang baru. Namun, ada beberapa hal yang harus diperhatikan.

  • Proyek ini menggunakan Objective-C, hanya menargetkan perangkat iPhone yang menjalankan iOS 8.1. Namun, Anda dapat mengubah perangkat target jika mau.
  • Di bawah Resources > Editor, Anda akan menemukan tiga file adegan SpriteKit (.sks). Dalam seri ini, Anda akan menambahkan file scene SpriteKit keempat. Setiap file scene bertanggung jawab untuk bagian tutorial tertentu.
  • Shader dapat diinisialisasi dengan satu dari dua cara. Yang pertama menggunakan metode tradisional sedangkan yang kedua menggunakan metode scene  SpriteKit baru. Tujuannya adalah agar Anda mempelajari perbedaannya dan, dalam proyek masa depan, pilihlah yang sesuai dengan kebutuhan Anda.
  • Jika Anda inisialisasi objek SKScene menggunakan file scene  SpriteKit, Anda akan selalu menggunakan metode unarchiveFromFile :. Namun, Anda wajib menambahkan untuk setiap file scene SpriteKit kelas SKScene yang sesuai.
  • Jika Anda membuat instance objek SKScene tanpa menggunakan file scene SpriteKit, Anda harus menggunakan metode initWithSize: seperti yang Anda lakukan di versi iOS sebelumnya.
  • Kelas-kelas GameViewController dan GameScene berisi metode bernama unarchiveFromFile:. Metode ini mengubah objek grafis yang didefinisikan dalam adegan SpriteKit dan mengubahnya menjadi objek SKScene. Metode ini menggunakan kata kunci instancetype, karena mengembalikan instance kelas yang dipanggilnya, dalam hal ini kelas SKScene.

Unduh proyek dan luangkan waktu untuk menelusuri folder, kelas, dan sumber dayanya. Bangun dan jalankan proyek di perangkat fisik atau di Simulator iOS. Jika aplikasi berjalan tanpa masalah, sekarang saatnya untuk mulai menjelajahi fitur iOS 8 SpriteKit yang baru.

3. Shader

Langkah 1: Buat scene SpriteKit

Dalam proyek Xcode, tambahkan file SpriteKit Scene baru. Pilih File > New > File ... dan, dari bagian Resource, pilih SpriteKit Scene. Beri nama ShaderSceneEditor dan klik Create. Antarmuka abu-abu akan muncul.

Langkah 2: Konfigurasi SpriteKit Scene

Di Inspector SKNode di sebelah kanan, Anda akan melihat dua properti, Size dan Gravity. Atur properti Size dengan mempertimbangkan resolusi layar perangkat Anda dan atur Gravity ke 0,0.

SKNode Inspector

Anda akan melihat bahwa ukuran persegi panjang kuning berubah untuk mencerminkan perubahan yang telah Anda buat. Kotak kuning adalah antarmuka perangkat virtual Anda. Ini menunjukkan kepada Anda bagaimana objek ditampilkan pada perangkat Anda.

Langkah 3: Tambahkan Sprite Warna

Di dalam Object Library di sebelah kanan, pilih Color Sprite dan seret ke persegi panjang kuning.

Object Library

Pilih color sprite dan buka SKNode Inspector di sebelah kanan untuk melihat propertinya.

SKNode Inspector of color sprite

Anda dapat berinteraksi dengan objek secara real time. Setiap perubahan yang Anda buat ditampilkan di editor. Anda dapat bermain dengan PositionSizeColor, dan Scale, tetapi yang Anda inginkan adalah opsi Custom Shader. Namun, Anda akan melihat bahwa belum ada shader yang tersedia.

Langkah 4: Menambahkan Shader Kustom: Metode 1

Tambahkan file sumber kosong baru (File > New > File ...), pilih Other > Empty dari bagian iOS, dan beri nama Shader01.fsh. Tambahkan kode berikut ke file yang baru saja Anda buat.

Blok kode di atas menghasilkan perpaduan warna dengan mempertimbangkan pusat lingkaran dan ujungnya. Apple menunjukkan shader ini dalam sesi SpriteKit mereka selama WWDC 2014.

Kembali ke editor, pilih objek color sprite, dan di Custom Shader pilih shader yang baru saja Anda buat. Anda sekarang harus melihat shader beraksi.

Custom Shader

Langkah 5: Umpan Balik Real Time

Pemrograman shader menggunakan Xcode dan SpriteKit mudah, karena Anda menerima umpan balik real time. Buka Assistant Editor dan konfigurasikan untuk menampilkan scene SpriteKit serta shader yang baru saja Anda buat.

Mari kita lihat bagaimana ini bekerja. Memperkenalkan kesalahan runtime di shader, misalnya, dengan mengubah nama variabel dan menyimpan perubahan untuk melihat hasilnya.

Real-time feedback

Seperti yang Anda lihat, Xcode menyediakan cara cepat dan mudah untuk mengingatkan pengembang tentang kemungkinan kesalahan shader. Keuntungannya adalah Anda tidak perlu membangun atau menggunakan aplikasi ke perangkat Anda atau iOS Simulator untuk melihat apakah semuanya berjalan dengan baik.

Sekarang saatnya untuk menambahkan shader lain dan memprogramnya secara manual.

Langkah 6: Menambahkan Shader Kustom: Metode 2

Pada langkah ini, Anda akan belajar cara:

  • memanggil shader secara manual
  • menetapkan shader ke objek SpriteKit
  • membuat dan mengirim properti untuk shader

Pada langkah ini, Anda akan menambahkan SKSpriteNode khusus di posisi ketukan pengguna dan kemudian Anda akan menggunakan shader untuk mengubah warna tekstur SKSpriteNode.

Langkah pertama adalah menambahkan shader lain. Beri nama shader shader02.fsh baru dan tambahkan blok kode berikut ke file shader:

Buka file implementasi kelas ShaderScene. Langkah pertama adalah mendeteksi apakah pengguna telah mengetuk layar dan menemukan lokasi ketukan. Untuk itu, kita perlu mengimplementasikan metode touchesBegan:withEvent. Di dalam metode ini, tambahkan instance SKSpriteNode di lokasi ketukan. Anda dapat menggunakan sprite apa pun yang Anda suka. Saya telah menggunakan Spaceship.png, yang sudah termasuk dalam proyek.

Kami kemudian membuat objek SKShader dan menginisialisasi dengan menggunakan file shader02.fsh:

Anda mungkin telah memperhatikan bahwa file sumber shader merujuk objek myTexture. Ini bukan properti shader yang telah ditentukan, tetapi referensi yang harus dilewati aplikasi Anda ke shader. snippet kode berikut menggambarkan cara melakukan ini.

Kami kemudian menambahkan shader ke objek SKSpriteNode.

Inilah yang metode touchesBegan:withEvent: akan terlihat seperti:

Bangun dan jalankan proyek Anda. Ketuk tombol Shaders (initWithSize) dan ketuk layar. Setiap kali Anda mengetuk layar, sprite pesawat ruang angkasa ditambahkan dengan tekstur yang dimodifikasi.

Example of shaders using the initWithSize button

Menggunakan opsi ini, Anda melihat bahwa shader pertama tidak disajikan di layar. Ini terjadi karena shader itu dibuat dan dikonfigurasikan di dalam editor SpriteKit Scene. Untuk melihatnya, Anda perlu menginisialisasi kelas ShaderScene menggunakan metode unarchiveFromFile:.

Di GameScene.m, Anda akan melihat bagian yang mendeteksi dan mem-parsing ketukan pengguna dalam sentuhan. touchesBegan:withEvent:. Dalam klausa if kedua, kita menginisialisasi instance ShaderScene seperti yang ditunjukkan di bawah ini.

Bangun dan jalankan proyek Anda lagi, ketuk tombol Shaders (initWithCoder), dan ketuk layar. Kedua shader sekarang aktif dalam satu scene SpriteKit.

Example of shaders using initWithCoder button

4. Pencahayaan dan Bayangan

Pencahayaan dan bayangan adalah dua properti yang bermain bersama. Tujuan dari bagian ini adalah untuk menambahkan beberapa titik cahaya dan sprite, dan bermain dengan propertinya.

Langkah 1: Menambahkan cahaya

Buka LightingSceneEditor.sks dan telusuri objek di dalam Media Library di sebelah kanan. Di Media Library, Anda dapat melihat sumber daya yang termasuk dalam proyek.

Pilih dan seret background.jpg ke kotak kuning. Jika Anda belum mengubah resolusi adegan default, gambar harus pas di dalam persegi panjang.

Ketika Anda memilih sprite, Anda akan melihat bahwa ia memiliki beberapa properti seperti PositionSizeZ PositionLighting MaskShadow Casting MaskPhysics Definition, dan banyak lainnya.

SKSpriteNode Properties

Silakan bebas bermain dengan properti ini. Namun, untuk saat ini, Anda harus membiarkan properti pada pengaturan defaultnya. Seret objek Light dari Object Library di sebelah kanan ke sprite latar belakang. Posisi cahaya tidak penting, tetapi properti cahaya lainnya penting.

Anda dapat mengonfigurasi ColorShadow, dan warna Ambient untuk mengonfigurasi cahaya dan bayangan. Z position adalah ketinggian simpul relatif terhadap simpul induknya. atur ke 1. Lighting Mask mendefinisikan kategori mana dari cahaya ini. Saat sebuah scene dirender, properti kategoriBitMask cahaya dibandingkan dengan pencahayaan setiap node SpriteBitMask, shadowCastBitMask, dan properti shadowedBitMask. Jika nilainya cocok, sprite itu berinteraksi dengan cahaya. Ini memungkinkan Anda untuk menentukan dan menggunakan beberapa lampu yang berinteraksi dengan satu atau lebih objek.

Anda mungkin telah memperhatikan bahwa latar belakang tidak berubah setelah menambahkan cahaya. Itu terjadi karena lighting mask cahaya dan latar belakang berbeda. Anda perlu mengatur lighting mask latar belakang ke cahaya, yaitu 1 pada contoh kita.

Perbarui latar belakang di Inspector SKNode dan tekan enter. Efek dari perubahan ini adalah langsung. Cahaya sekarang menerangi latar belakang berdasarkan posisinya. Anda dapat memodifikasi posisi cahaya untuk melihat interaksi antara latar belakang dan titik cahaya secara real time.

Untuk meningkatkan realisme latar belakang atau menekankan salah satu fitur-fiturnya, mainkan dengan properti Smoothness and Contrast. Mainkan dengan nilai-nilai untuk melihat perubahan secara real time.

Langkah 2: Mengisi Scene

Sekarang saatnya untuk menambahkan beberapa objek yang berinteraksi dengan titik cahaya. Di Media Library, temukan sprite croquette-o.png dan croquette-x.png dan tambahkan ke scene.

Setiap sprite harus dikonfigurasi secara individual. Pilih setiap sprite dan atur Lighting MaskShadow Cast Mask, dan Z position ke 1. lighting mask memastikan bahwa sprite dipengaruhi oleh simpul cahaya sementara shadow cast mask menciptakan bayangan waktu nyata berdasarkan posisi simpul cahaya. Terakhir, atur Body Type (Physics Definition ke None. Lakukan ini untuk kedua sprite.

Physics Definition

Anda harus memperhatikan bahwa, bahkan setelah mengatur properti pencahayaan dan bayangan, Anda tidak dapat melihat interaksi antara cahaya dan node. Untuk itu, Anda perlu membangun dan menjalankan proyek pada perangkat fisik atau di Simulator.

Lighting result

Langkah 3: Pencahayaan Manual

Anda sudah tahu cara menambahkan lampu menggunakan scene editor. Mari kita lihat cara menambahkan cahaya tanpa menggunakan scene editor.

Buka LightingScene.m dan di dalam metode didMoveToView: kita membuat objek SKSpriteNode dan objek SKLightNode.

Untuk objek SKSpriteNode, kami menggunakan sprite Wicked-Cat.png. Posisi node tidak begitu penting, tetapi nilai-nilai zPosition, shadowCastBitMask, dan lightingBitMask yang penting. Karena SpriteKit mem-parsing data secara berurutan, Anda perlu mengatur zPosition node menjadi 1 agar sprite ini terlihat, di atas sprite latar belakang. Kami mengatur shadowCastBitMask dan lightingBitMask ke 1.

Sejauh ini bagaimana metode didMoveToView: terlihat seperti apa :

Selanjutnya, mari kita tambahkan objek SKLightNode. Anda harus memberi perhatian khusus pada properti categoryBitMask. Jika Anda mengaturnya ke 1, lampu ini akan berinteraksi dengan setiap sprite. Beri nama light dan atur zPosisi ke 1.

Snippet lengkap untuk SKLightNode akan terlihat seperti ini:

Langkah 4: Ubah Lokasi Cahaya

Pada titik ini Anda memiliki cahaya kedua. Tapi mari kita tambahkan beberapa interaksi pengguna. Untuk itu Anda harus menambahkan metode touchesMoved:withEvent dan mengubah posisi cahaya, dengan mempertimbangkan lokasi ketuk.

Akhirnya, bangun dan jalankan aplikasi Anda. Ketuk tombol Lighting dan Anda akan melihat sesuatu yang mirip dengan tangkapan layar di bawah ini:

Complete lighting example

Kesimpulan

Ini menyimpulkan tutorial pertama dalam seri dua bagian kami tentang fitur kerangka kerja SpriteKit baru yang diperkenalkan di iOS 8. Di bagian ini, Anda belajar membuat shader kustom dan efek pencahayaan menggunakan editor SpriteKit Scene dan melalui kode. Jika Anda memiliki pertanyaan atau komentar, seperti biasa, jangan ragu untuk memberikan komentar.

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.