Membuat Game Pesawat dengan Sprite Kit - Ledakan & Awan

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!

Format Seri

Tutorial Airplanes 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.

• Membuat Game Pesawat Terbang dengan Sprite Kit - Penyiapan Proyek
• Membuat Game Pesawat dengan Sprite Kit - Musuh & Emitter
• Membuat Game Pesawat dengan Sprite Kit - Ledakan & Awan

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, kami merekomendasikan mengikuti langkah demi langkah untuk pemahaman lengkap tentang topik yang disajikan. Kode sumber untuk game disediakan secara bertahap dengan setiap posting.

Pratinjau Akhir

Dimana Kita meninggalkan

Selamat datang kembali ke bagian ketiga dari permainan pesawat kami dengan Sprite Kit. Dalam postingan terakhir kami, kami fokus pada penambahan musuh dan emiten ke permainan. Dalam tutorial hari ini, Anda akan memprogram deteksi tabrakan, bekerja dengan atlas tekstur, dan membuat beberapa ledakan untuk menyelesaikan permainan. Mari kita mulai!

1. menambahkan deteksi tumbukan

Uji interseksi sering digunakan dalam lingkungan di mana lebih dari satu objek ada. Di Sprite Kit, Anda akan menggunakan Collisions dan Kontak untuk mendeteksi apakah objek yang diberikan mengenai objek lain.

Dalam game ini, Anda akan menggunakan deteksi tabrakan. Ketika peluru membuat kontak dengan satu musuh, baik peluru dan musuh akan dihapus dari layar.

Untuk melakukan ini, Anda perlu menentukan nilai mask kategori. Harus ada satu kategori untuk setiap objek fisika. Di MyScene.h, tambahkan kode berikut:

1

static const uint8_t bulletCategory = 1;

2

static const uint8_t enemyCategory = 2;

Sekarang, selagi masih dalam MyScene.h, tambahkan SKPhysicsContactDelegate seperti yang kita lakukan sebelumnya dengan UIAccelerometerDelegate.

1

@interface MyScene : SKScene<UIAccelerometerDelegate, SKPhysicsContactDelegate>

2

{

Sebelum Anda dapat menggunakan fisika, Anda perlu untuk memulai pengaturan fisika. Di if (self = [super initWithSize:size]) bersyarat, instantiate gravitasi dengan nilai 0 (yaitu tidak ada gravitasi) dan kemudian delegasi kontak:

1

self.physicsWorld.gravity = CGVectorMake(0, 0);

2

self.physicsWorld.contactDelegate = self;

Dua tubuh yang membutuhkan fisika adalah peluru dan musuh. Mari kita atur beberapa properti untuk masing-masing. Mari tambahkan kode di bawah ini dalam metode -(void)EnemiesAndClouds.

1

enemy.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:enemy.size];

2

enemy.physicsBody.dynamic = YES;

3

enemy.physicsBody.categoryBitMask = enemyCategory;

4

enemy.physicsBody.contactTestBitMask = bulletCategory;

5

enemy.physicsBody.collisionBitMask = 0;

Kode di atas menyatakan bahwa bidang kontak pesawat akan menjadi persegi panjang yang memiliki ukuran sprite musuh. Properti dinamis menunjukkan apakah tubuh fisika digerakkan oleh simulasi fisika. Selanjutnya, categoryBitMask mana Anda mengatur kategori ke objek, dan contactTestBitMask merujuk kepada yang tubuh musuh akan berinteraksi dengan (dalam hal ini dengan peluru).

Sekarang mari kita mendefinisikan fisika untuk objek peluru. Di dalam - (hampa) touchesBegan: (NSSet *) menyentuh dengan event event Event: (UIEvent *)event metode, kode bullet harus dimodifikasi untuk menambahkan:

1

bullet.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:bullet.size];

2

bullet.physicsBody.dynamic = NO;

3

bullet.physicsBody.categoryBitMask = bulletCategory;

4

bullet.physicsBody.contactTestBitMask = enemyCategory;

5

bullet.physicsBody.collisionBitMask = 0;

Sejauh ini, Anda telah menentukan properti untuk tabrakan. Namun, kita harus mendeteksi apakah suatu kontak dibuat.

Anda perlu menggunakan metode didBeginContact untuk mengetahui benda-benda apa memiliki kontak dengan benda-benda lainnya. Jadi, kode berikut menghitung dua badan yang telah menghubungi dan secara bersamaan menghilangkan mereka dari adegan:

1

-(void)didBeginContact:(SKPhysicsContact *)contact{

2

3

    SKPhysicsBody *firstBody;

4

    SKPhysicsBody *secondBody;

5

6

    if (contact.bodyA.categoryBitMask < contact.bodyB.categoryBitMask)

7

    {

8

        firstBody = contact.bodyA;

9

        secondBody = contact.bodyB;

10

    }

11

    else

12

    {

13

        firstBody = contact.bodyB;

14

        secondBody = contact.bodyA;

15

    }

16

17

    if ((firstBody.categoryBitMask & bulletCategory) != 0)

18

    {

19

20

        SKNode *projectile = (contact.bodyA.categoryBitMask & bulletCategory) ? contact.bodyA.node : contact.bodyB.node;

21

        SKNode *enemy = (contact.bodyA.categoryBitMask & bulletCategory) ? contact.bodyB.node : contact.bodyA.node;

22

        [projectile runAction:[SKAction removeFromParent]];

23

        [enemy runAction:[SKAction removeFromParent]];

24

25

    }

26

27

}

Sangat sederhana, bukan? Sekarang, bangun dan jalankan. Jika semuanya berjalan dengan baik, maka musuh dan peluru akan hilang ketika mereka bertabrakan.

2. Menggabungkan Atlas Tekstur

Game kami hampir selesai, tetapi membutuhkan beberapa aksi dan animasi. Dua langkah selanjutnya akan menambah ledakan dan beberapa animasi latar belakang yang terbuat dari awan.

Sejauh ini, kami belum menggunakan Texture Atlas. Sprite Kit termasuk generator atlas tekstur yang memiliki beberapa fitur menarik. Di Xcode 5, Anda dapat membuat atlas tekstur dengan langkah-langkah berikut:

1. Tempatkan semua sprite ke dalam satu folder. Untuk proyek kami, Anda dapat menemukan semua gambar dalam unduhan terlampir di dalam folder 'LEDAKAN'.
2. Ubah ekstensi folder ke * .atlas. Dalam kasus kami, ganti nama EXPLOSION menjadi EXPLOSION.atlas.
3. Seret dan lepas folder ke dalam proyek. Saya menambahkannya ke folder File Pendukung dalam navigator Xcode.
4. Pastikan bahwa Option 'Enable Texture Altas Generation' aktif. Untuk memeriksa ini, masuk ke Pengaturan Build proyek Anda.

Itu dia. Sekali lagi, gambar untuk bagian ini tersedia dalam folder Sumber Daya dari unduhan yang terlampir.

Sekarang, Anda perlu memuat atlas tekstur ke dalam proyek.

Dalam MyScene.h tambahkan:

1

@property NSMutableArray *explosionTextures;

Pada akhir if (self = [super initWithSize: size]) bersyarat, tambahkan potongan kode berikut:

1

//load explosions

2

        SKTextureAtlas *explosionAtlas = [SKTextureAtlas atlasNamed:@"EXPLOSION"];

3

        NSArray *textureNames = [explosionAtlas textureNames];

4

        _explosionTextures = [NSMutableArray new];

5

        for (NSString *name in textureNames) {

6

            SKTexture *texture = [explosionAtlas textureNamed:name];

7

            [_explosionTextures addObject:texture];

8

        }

3. Menambahkan Ledakan

Setelah Anda memiliki ledakan dimuat, langkah lain diperlukan untuk melihat mereka beraksi. Anda sekarang akan menciptakan ledakan yang terjadi ketika sebuah peluru menghantam musuh. Pada akhir dari jika conditional if ((firstBody.categoryBitMask * bulletCategory)! = 0), tambahkan potongan berikut:

1

        //add explosion

2

        SKSpriteNode *explosion = [SKSpriteNode spriteNodeWithTexture:[_explosionTextures objectAtIndex:0]];

3

        explosion.zPosition = 1;

4

        explosion.scale = 0.6;

5

        explosion.position = contact.bodyA.node.position;

6

7

        [self addChild:explosion];

8

9

        SKAction *explosionAction = [SKAction animateWithTextures:_explosionTextures timePerFrame:0.07];

10

        SKAction *remove = [SKAction removeFromParent];

11

        [explosion runAction:[SKAction sequence:@[explosionAction,remove]]];

Bangun dan jalankan proyek untuk menguji animasi tabrakan dan ledakan. Anda harus melihat sesuatu seperti gambar berikut:

4. Menambahkan Awan

Kami hampir menyelesaikan permainan! Ini hanya sentuhan terakhir. Sekarang Anda perlu membuat atlas awan, dan kemudian memuat atlas tekstur ke memori.

Sebelum kami menulis kode untuk langkah ini, pastikan untuk menambahkan ekstensi .aslas ke folder 'Clouds' dalam unduhan yang terlampir dan menyeretnya ke dalam proyek Anda.

Di dalam file MyScene.h tambahkan yang berikut:

1

@property NSMutableArray *cloudsTextures;

Di dalam file MyScene.m, di bawah kode 'load explosions', tambahkan yang berikut:

1

        //load clouds

2

        SKTextureAtlas *cloudsAtlas = [SKTextureAtlas atlasNamed:@"Clouds"];

3

        NSArray *textureNamesClouds = [cloudsAtlas textureNames];

4

        _cloudsTextures = [NSMutableArray new];

5

        for (NSString *name in textureNamesClouds) {

6

            SKTexture *texture = [cloudsAtlas textureNamed:name];

7

            [_cloudsTextures addObject:texture];

8

        }

Langkah terakhir adalah menghasilkan awan secara acak dan menampilkannya di layar dengan beberapa gerakan. Anda perlu menambahkan cuplikan berikut di akhir metode EnemiesAndClouds:

1

 //random Clouds

2

    int randomClouds = [self getRandomNumberBetween:0 to:1];

3

    if(randomClouds == 1){

4

5

        int whichCloud = [self getRandomNumberBetween:0 to:3];

6

        SKSpriteNode *cloud = [SKSpriteNode spriteNodeWithTexture:[_cloudsTextures objectAtIndex:whichCloud]];

7

        int randomYAxix = [self getRandomNumberBetween:0 to:screenRect.size.height];

8

        cloud.position = CGPointMake(screenRect.size.height+cloud.size.height/2, randomYAxix);

9

        cloud.zPosition = 1;

10

        int randomTimeCloud = [self getRandomNumberBetween:9 to:19];

11

12

        SKAction *move =[SKAction moveTo:CGPointMake(0-cloud.size.height, randomYAxix) duration:randomTimeCloud];

13

        SKAction *remove = [SKAction removeFromParent];

14

        [cloud runAction:[SKAction sequence:@[move,remove]]];

15

        [self addChild:cloud];

16

    }

Bangun dan jalankan proyek lagi. Jika semuanya berjalan dengan baik, Anda akan melihat sesuatu seperti gambar berikut:

Kesimpulan

Ini menyimpulkan tutorial ketiga dan terakhir yang menunjukkan cara membuat game pesawat terbang menggunakan kerangka Kit Sprite baru yang tersedia dengan SDK iOS 7. Jika Anda telah mengikuti seri ini dari awal hingga selesai, Anda seharusnya sudah memiliki pengetahuan yang cukup untuk membuat game Sprite Kit sederhana menggunakan mesin permainan baru yang dinamis ini. Jika Anda memiliki pertanyaan atau komentar, silakan tinggalkan di bawah ini!

Ucapan Terima Kasih * Rekomendasi

Kami ingin mengucapkan terima kasih kepada Daniel Ferenčak karena telah menyediakan kami dengan seni permainan yang digunakan untuk memproduksi seri tutorial ini.

Untuk sepenuhnya menghargai seri tutorial, kami menyarankan Anda menguji kode kami 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 perangkat lunak dan Anda akan siap untuk memulai.