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

Bangun Game Pesawat Terbang dengan Sprite Kit - Penyiapan Proyek

Difficulty:BeginnerLength:MediumLanguages:

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

Tutorial ini akan mengajari Anda cara menggunakan kerangka Kit Sprite untuk membuat game Pesawat terbang sederhana. Sepanjang jalan, Anda akan mempelajari semua konsep inti Sprite Kit: animasi, emitor, deteksi tabrakan, dan banyak lagi!


Seri Format

Tutorial Pesawat terbang akan dibagi menjadi tiga bagian agar benar-benar mencakup setiap bagian. Setelah membaca tiga bagian tutorial, para pembaca akan dapat membuat game 2D yang menarik menggunakan kerangka Kit Sprite baru yang disediakan dengan iOS 7.

Setiap bagian akan menghasilkan hasil yang praktis, dan jumlah semua bagian akan menghasilkan pertandingan terakhir. Sementara masing-masing bagian dari seri dapat dibaca secara terpisah, kita merekomendasikan mengikuti langkah demi langkah untuk pemahaman lengkap tentang topik yang disajikan. Kode sumber untuk game disediakan secara bertahap dengan setiap posting.


Pratinjau Akhir

Figure 1 Final Result

Ilustrasi Hasil Akhir - Kit Sprite.

Ucapan Terima Kasih & Rekomendasi

Sebelum memulai tutorial, kita ingin berterima kasih kepada Daniel Ferenčak karena telah menyediakan kita dengan seni permainan yang digunakan untuk memproduksi seri tutorial ini.

Untuk sepenuhnya menghargai seri tutorial, kita menyarankan Anda menguji kode dengan menerapkannya ke perangkat nyata yang menjalankan iOS 7. Anda akan memerlukan Xcode 5 dan iOS 7 SDK terbaru. Jika Anda belum memiliki alat ini, Anda dapat mengunduhnya dari Pusat Pengembang Apple. Setelah diunduh, instal software dan Anda akan siap untuk memulai.


1. Proyek Setup

Hadirin sekalian, mulai mesin Anda dan luncurkan Xcode 5!

Setelah Xcode terbuka, buka Menu File > New > Project dan Anda akan melihat sesuatu seperti gambar berikut:

Figure 2 Choosing Sprite Kit Game template

Ilustrasi pemilih template (Xcode).

Seperti yang Anda tebak, Anda harus memilih template "Sprite Kit Game" (dari daftar lateral iOS). Template ini menciptakan apa yang Anda butuhkan untuk memulai proyek, dan pada saat yang sama menyertakan pustaka yang dibutuhkan untuk menjalankan mesin Kit Sprite. Berikan nama apa pun yang Anda inginkan, tetapi pastikan untuk memilih "iPad" sebagai perangkat yang ditargetkan.

Proyek ini dibuat dengan 3 kelas (AppDelegate, ViewController, dan MyScene). Hari ini, Anda akan bekerja dengan MyScene.

Jika Anda Build and Run proyek, Anda akan melihat "Halo, Dunia!" antarmuka. Setiap kali Anda mengklik layar, sebuah Spaceship baru disajikan dengan properti rotasi:

Figure 3 Hello World

Ilustrasi Hello World - Kit Sprite.

Semua objek visual diberikan oleh kelas SKView. Satu SKView diperlukan untuk menyajikan Adegan masa depan juga. Template Sprite Kit apakah ini berfungsi untuk Anda. Lihatlah file ViewController.m, dan perhatikan bagaimana metode viewDidLoad mengkonfigurasi tampilan dan memanggil adegan default.


2. Membuat Papan Game

Pada langkah ini, kita akan menginisialisasi board game. Papan permainan meliputi background, pesawat terbang, animasi baling-baling, dan satu bayangan pesawat terbang.

Sebelum Anda menambahkan sprite, Anda perlu karya seni untuk digunakan oleh sprite itu. Anda harus menempatkan sprite ini ke folder File Pendukung proyek Anda.

Semua sumber daya yang digunakan dalam tutorial ini dirancang untuk resolusi iPad asli. Unduh lampiran posting ini untuk mengaksesnya.

Setelah Anda mengunduh sumber daya untuk posting ini, Anda akan menemukan 7 gambar. Salin mereka ke folder File Pendukung proyek Anda dan pastikan bahwa opsi "Salin item ke folder grup tujuan (jika diperlukan)" dicentang.

Sekarang setelah Anda memiliki gambar Anda, Anda dapat menempatkannya di layar. Sprite Kit mirip dengan Cocos2D karena ia juga menggunakan orientasi koordinat yang dimulai dari sudut kiri bawah layar (0,0), dan nilai x dan y meningkat ketika Anda bergerak ke atas dan ke kanan. Game ini akan dikonfigurasi untuk berjalan dalam orientasi potret, jadi kita tidak akan fokus pada orientasi lanskap saat ini. Konfigurasikan pengaturan ini sekarang dengan masuk ke panel Pengaturan untuk proyek Anda, pilih tab "Umum", dan hapus centang semua opsi di bawah "Info Penerapan" kecuali "Potret."

Sekarang, Anda akan ingin menempatkan pesawat mendekati bagian bawah dan di tengah sumbu x.

Di MyScene.h, tambahkan kode berikut:

Ini hanya menyatakan variabel yang akan kita gunakan dalam implementasi.

Dalam file MyScene.m, Anda dapat menghapus semua yang ada di dalam if (self = [super initWithSize:size]) bersyarat serta segala sesuatu di dalam metode - (void) touchBegan: (NSSet *)touches withEvent: (UIEvent *). Ini akan menghapus kode boiler yang disertakan dengan proyek.

Pembuatan sprite dapat dicapai menggunakan potongan kode berikut:

Sekarang Anda dapat membangun dan menjalankan aplikasi. Background dan pesawat Anda akan tampak baik-baik saja, mirip dengan gambar berikutnya. Kode yang diberikan dimulai dengan inisialisasi nilai layar untuk melakukan beberapa perhitungan di kelas ini (Anda akan menggunakan beberapa kali). Mirip dengan Cocos2D, Sprite Kit hadir dengan properti seperti skala, zPosisi, dan posisi, yang semuanya sangat berguna. Akhirnya, untuk menambahkan objek ke Scene, kita hanya perlu menggunakan metode addChild. Blok kode ketiga akan menambahkan background ke tengah layar.

Figure 4 Initial Sprites

Ilustrasi Background dan Pesawat - Sprite Kit.

3. Menambahkan Animasi Pesawat

Jika Anda melihat sumber daya, Anda melihat dua baling-baling (yaitu kiri dan kanan), dan satu bayangan pesawat.
Penempatan bayangan pesawat seharusnya mudah bagi Anda saat ini. Untuk mencapai animasi terbaik, harus mulai 15 poin ke kanan (sumbu x) dan 15 poin di bawah (sumbu y) dari pesawat.

Sekarang, kita lanjutkan dan tambahkan kode untuk membuat bayangan:

Di MyScene.h, tambahkan yang berikut:

Dan di Scene.m, tambahkan yang berikut ini segera setelah [self addChild:_plane];:

Itu mudah, kan? Kita hanya menambahkan sprite bayangan ke adegan dan memposisikannya relatif terhadap pesawat.

Sekarang, mari kita lanjutkan ke animasi baling-baling. Untuk membuat animasi, kita memiliki dua sprite (PLANE PROPELLER 1 dan PLANE PROPELLER 2). SKAction akan memungkinkan Anda membuat animasi yang berbeda dan melakukan beberapa jenis tindakan dengan mereka. Dalam tutorial ini, Anda perlu mengubah hanya dua gambar. Untuk membuat ini terjadi, Anda akan membutuhkan dua metode: animateWithTextures: timePerFrame dan repeatActionForever. Seperti yang Anda lihat, nama metode sudah jelas. Metode pertama akan menerima tekstur (PLANE PROPELLER 1 dan 2) dan mengubah tekstur selama waktu yang ditentukan (timePerFrame). Metode kedua akan mengulangi tindakan ini selamanya.

Untuk mencapainya, mulailah dengan menambahkan yang berikut ini ke file header Anda:

Dan kembali dalam file implementasi:

Bangun dan jalankan kode Anda. Sekarang adalah saat yang tepat untuk berinvestasi beberapa menit dalam eksplorasi kode untuk mempelajari struktur dasar proyek. Hanya melihat-lihat dan membiasakan diri dengan organisasi dasar.

Sayangnya, saat ini pesawat masih statis. Untuk membuat gerakan, Anda akan menggunakan data akselerometer internal dan pesawat akan bereaksi terhadap gerakan fisik iPad. Perhatikan bahwa kita tidak akan secara mendalam menjelaskan cara kerja akselerometer karena tutorial ini tidak difokuskan pada topik itu. Namun, jika Anda ingin mempelajari lebih lanjut tentang akselerometer khusus Anda dapat berkonsultasi dengan dokumentasi resmi Apple.

Di MyScene.h Anda perlu melakukan beberapa perubahan. Anda perlu menambahkan UIAcelerometerDelegate, dua variabel ganda untuk kedua nilai sumbu (misalnya Akses dan AccelY), dan satu properti untuk mengelola CoreMotion.

File MyScene.h terakhir Anda harus menyerupai cuplikan berikut:

Jadi, untuk mendapatkan data akselerometer Anda perlu menambahkan beberapa kode ke bagian akhir metode -(id)initWithSize: (CGSize) metode ukuran. Sementara masih dalam if (self = [super initWithSize:size]) bersyarat, tambahkan kode berikut di mana Anda tinggalkan sebelumnya:

Sekarang tambahkan metode berikut ke file implementasi:

Sekarang Anda memiliki nilai akselerometer iPad yang akan digunakan untuk langkah selanjutnya dengan memindahkan pesawat!


4. Memindahkan Pesawat

Dengan nilai set akselerometer, Anda harus benar-benar menerapkannya untuk menggerakkan pesawat. Sprite Kit menggunakan metode -(void)update:(NSTimeInterval)currentTime untuk memperbarui semuanya di gim Anda. Jadi, untuk memindahkan pesawat Anda hanya perlu memperbarui posisi semua sprite (pesawat terbang, bayangan, dan baling-baling). Ganti atau tambahkan metode pembaruan dengan kode berikut:

Dua hal utama terjadi dalam metode pembaruan: Anda memperbarui posisi dan menukar sprite yang ditampilkan.

Jika iPad belok ke kiri, sprite pesawat akan diubah untuk "PLANE 8 L.png". Alternatif lain, jika iPad berputar ke kanan, sprite pesawat akan berubah untuk "PLANE 8 R.png".

Akhirnya, lanjutkan dan uji kode gerakan. Anda harus melihat sesuatu yang mirip dengan gambar berikutnya:

Figure 5 Moving Airplane

Ilustrasi Pesawat Bergerak - Kit Sprite.

Kesimpulan

Itulah akhir dari tutorial pertama! Pada titik ini, Anda harus memahami cara melakukan tugas-tugas berikut:

  • Mulai proyek Kit Sprite
  • Tambahkan sprite ke Scene
  • Menerapkan animasi sederhana
  • Terima data akselerometer
  • Perbarui data permainan dan objek

Jika salah satu di atas masih "fuzzy", lihat lagi kode yang dibuat di atas. Nantikan terus angsuran berikutnya dalam seri ini di mana kita akan terus membangun game pesawat!

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.