Advertisement
  1. Code
  2. Corona SDK

Membangun permainan Endless Runner dari awal: menggunakan sprite

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Corona SDK: Build an Endless Runner Game From Scratch.
Build an Endless Runner Game From Scratch: Background Motion
Build an Endless Runner Game From Scratch: Sprite Interaction

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

Selamat datang di bagian ketiga pada endlerss runner permainan! Tutorial ini akan mencakup bagaimana untuk menciptakan sprite melalui sprite sheet dan animasi karakter permainan kami. Sejauh ini dalam permainan kami kita harus memiliki view yang indah dengan tiga lapisan gambar bergulir pada kecepatan yang berbeda, membuat beberapa parrallax keren bergulir-ness! Langkah logis berikutnya kita akan menambahkan hero ke permainan. Kami akan melakukan hal ini dalam dua langkah. Tutorial ini akan mencakup langkah pertama. Tutorial selanjutnya akan menutupi benar-benar menambahkan pahlawan ke dalam permainan kami yang ada dan menambahkan kontrol untuk membuat dia mengikuti kami setiap perintah.


Intro to sprite dan Sprite Sheet

Sekarang, sebelum kita memulai permainan, mari kita bicara dengan cepat tentang sprite, sprite sheet dan animasi secara umum persyaratan. Jika Anda memiliki pengalaman dengan grafis, animasi atau permainan pengembangan, ini mungkin adalah topik yang akrab bagi Anda. Namun, untuk diskusi kita, kita akan berasumsi Anda tidak memiliki pengalaman dengan salah satu topik tersebut. Jadi, mari kita mulai dengan animasi. Animasi dalam permainan dilakukan cara yang sama persis yang telah dilakukan dalam kartun dan film. Berpikir tentang apa yang terjadi ketika Anda pergi ke bioskop dan mereka mulai film. Ketika Anda menonton film Anda tidak benar-benar menonton orang bergerak dan berbicara, tetapi Anda menonton serangkaian gambar berkedip dengan suara sedang dimainkan sepanjang jalan pada saat yang sama, memberikan ilusi bahwa Anda menonton sesuatu yang hidup dan bernapas. Ini adalah hal yang sama yang terjadi dengan permainan kami. Kami menciptakan ilusi "hidup" mengedipkan dengan cepat gambar pada layar. Bila hal ini dilakukan cukup cepat, menjadi animasi yang halus. Jadi, pertanyaannya adalah bagaimana kita mendapatkan ini animasi yang halus ke dalam permainan kami. Jawabannya adalah dengan menggunakan sprite. Corona SDK menyediakan fungsionalitas dari sprite bagi kita, jadi satu-satunya hal yang perlu kita khawatir tentang menciptakan sprite kami dan menetapkan animasi kami kepada mereka. Lihatlah gif animasi di bawah ini:

Corona SDK Figure - Monster Run

Ketika Anda melihat yang animasi, kelihatannya seperti monster kecil berlari dan meronta-ronta lengannya. Apa Anda benar-benar melihat adalah seri gambar, diambil dari sprite sheet tunggal, berkedip berulang-ulang. Catatan bahwa gambar yang terakhir dalam urutan yang tidak termasuk dalam animasi. Ini adalah sprite sheet sederhana, dan itu adalah bagaimana Anda akan menyiapkan gambar untuk permainan Anda juga.

Monster Side Scrolling

Jadi, pertanyaan justru mengapa kita menggunakan sprite sheet telah mungkin muncul dalam pikiran Anda. Jawabannya adalah dua kali lipat dan cukup sederhana: memori dan kesederhanaan. Saya ingin Anda untuk melihat empat gambar yang saya dibuat di bawah ini. Semua sangat sederhana, kotak papan desain (meskipun sprite sangat kecil sehingga mereka tidak muncul untuk menjadi, tapi terbuka mereka dalam program dan memperbesar dan Anda akan melihat papan checker :D), dengan ukuran mulai dari 8 x 8 sepanjang jalan sampai 256 x 256.

Corona SDK Figure - Sprite Example 1
Corona SDK Figure - SpriteExample 2
Corona SDK Figure - Sprite Example 3
Corona SDK Figure - Sprite Example 4

Alasan pertama, memori, akan menjadi sangat jelas jika Anda men-download gambar dan melihat ukuran mereka. Melihat perbedaan ukuran dari akan dari 8 x 8 sepanjang jalan sampai 256 x 256. Jika Anda tidak ingin men-download mereka aku akan luang Anda 30 detik itu untuk diambil.

Mari kita berasumsi bahwa semua gambar kami harus 16 x 16 piksel dalam dimensi (tentu saja hal ini tidak realistis, tetapi contoh kami berlaku untuk lebih besar gambar juga). Gambar 16 x 16 dan mengambil 2,74 KB masing-masing. Mari kita mengatakan bahwa kita memiliki 256 sprite yang membuat karakter kita. Gambar ini mungkin termasuk dia berjalan dalam arah yang berbeda, melompat, menembak senjata, atau melakukan apa pun yang Anda mungkin ingin karakter Anda untuk melakukan. Jika kita menempatkan mereka dalam file PNG 16 x 16 individu (PNG adalah format umum untuk mobile video karena mereka memiliki footprint memori kecil), itu akan mengambil hingga 701.44KB untuk menahan semua gambar. Itu tidak tampak begitu besar karena kebanyakan perangkat memiliki banyak memori, kanan? Ya, tapi ingat kita kemungkinan besar akan memiliki ratusan gambar tersebut dalam permainan kami. Meskipun demikian, 701K gambar kecil pada perangkat mobile terlalu besar. Pada iPhone permainan kecil yang paling mencoba untuk tetap di bawah 20MB karena adalah file terbesar Anda dapat men-download lebih dari 3G. File yang lebih besar harus dilakukan melalui WiFi atau di-download melalui iTunes. Jika Anda berpikir batas 20MB buruk, ini digunakan untuk menjadi 10MB! Sekarang, mari kita lihat mengapa hal ini bermanfaat untuk kelompok sprite ke sprite sheet.

Misalkan Anda menaruh 256-sprite 16 x 16 ke sprite hanya satu lembar. Seberapa besar menurut Anda bahwa file yang akan dihasilkan? Jika Anda men-download file dan memandang ukuran yang Anda tahu bahwa gambar 256 x 256 adalah hanya 3.42 KB! Itulah tabungan 698.02 KB! Tapi bagaimana itu mungkin!?! Jawabannya ada hubungannya dengan bagaimana skala gambar dan yang dikompresi dan banyak hal-hal teknis lain yang kita tidak akan pergi ke itu. Hal yang penting untuk mengambil yang menggandakan gambar dalam ukuran tidak selalu ganda itu dalam memori. Pada kenyataannya, jika Anda melihat ukuran lainnya gambar Anda akan melihat bahwa ukuran gambar dari 16 x 16 untuk 128 x 128 sprite hanya hingga 2.98 KB, dan 256 x 256 hanya bergerak hingga naik 3,43 KB! Aku tahu, itu bagus kan!?!

Alasan kedua kita melakukan ini adalah demi kesederhanaan. Sprite sheet menyediakan cara yang baik untuk mengatur semua gambar kami. Jika Anda belum pernah bermain permainan Atari, SPN, Sega Saturn, SNES, Game Boy, atau cukup banyak apa pun yang 2D, kemudian Anda telah melihat sprite sheet bekerja. Beberapa permainan yang memiliki ribuan dan ribuan sprite di dalamnya. Mengambil permainan seperti Final Fantasy 3 Super Nintendo (yang kita semua tahu adalah benar-benar Final Fantasy 6, kan?). Mereka memiliki puluhan karakter, ratusan musuh, mantra, item, jenis Medan, dan mungkin beberapa lusin hal lain yang aku pergi keluar. Jadi bagaimana Apakah mereka tetap melacak dari semua sprite individu tersebut? Sekali lagi, jawabannya adalah sprite sheet. Membayangkan bahwa alih-alih memiliki puluhan sprite atau sprite sheet untuk setiap karakter, mereka memiliki semua gambar untuk setiap karakter pada 1 sheet. Dengan cara itu mereka selalu tahu persis apa yang harus referensi. Hidup menjadi lebih mudah ketika bekerja pada proyek-proyek besar. Sebagai referensi cepat, gambar google pencarian untuk "Finaly Fantasy 6 Sprite Sheets" dan memeriksa beberapa sprite sheet dari Final Fantasy untuk mendapatkan ide tentang bagaimana mereka digunakan dalam permainan besar.

Proses menciptakan sprite dengan animasi adalah proses yang cukup sederhana. Membuka sebuah file kosong dan namai itu main.lua. Hal pertama yang perlu kita lakukan adalah untuk mengatur handler sprite. Pergi ke depan dan meletakkan kode berikut:

Karena Corona sudah melakukan sebagian besar pekerjaan kami, kami yang tersisa dengan proses yang cukup sederhana. Berikut adalah apa yang perlu Anda ingat. Dari handler sprite kami kami membuat sprite sheet. Dari sprite sheet kami menciptakan 'kumpulan'. Dari set kami, kami membuat animasi dan objek-objek sprite. Untuk metode ini penciptaan sprite sheet untuk bekerja, sprite masing-masing harus sama dimensi. Jadi setiap frame rakasa kecil kami adalah 100 x 100. Dalam contoh ini ada satu lembar panjang sprite. Dalam rangka untuk bekerja yang terbaik dan paling efisien, sprite lembar harus selalu dilakukan di kekuatan 2. 2 x 2, 4 x 4, 16 x 16, 32 x 32, 64 x 64, dll... Tentu saja Anda tidak akan menggunakan apa-apa yang kecil untuk sebagian besar, tapi ini berlaku sepanjang jalan sampai 1024 x 1024. Anda dapat secara teoretis naik bahkan lebih besar dari itu, namun, masing-masing perangkat memiliki tekstur maks ukuran dan jika Anda pergi di atas ukuran tekstur bahwa aplikasi Anda tidak akan dapat memuat sprite sheet. Jadi, sebelum Anda pergi menambahkan sprite sheet yang 4096 x 4096, pastikan untuk melakukan penelitian untuk memastikan bahwa perangkat target Anda bisa mengatasinya! Satu hal yang perlu dicatat adalah bahwa bila Anda memiliki gambar persegi , itu akan membaca mereka dengan cara yang sama Anda akan membaca sebuah buku. Atas ke bawah, kiri ke kanan, seperti:

1 2 3 4

5 6 7 8

9 10 11 12

13 14 15 16

Jadi ketika Anda memberitahu Anda sprite untuk melihat frame 6-12 itu akan tahu secara otomatis ke mana harus pergi.

Tambahkan kode ini untuk proyek Anda di bawah baris yang dibutuhkan:

Sekarang bahwa kita memiliki kami lembar sprite yang diciptakan dan telah membuat sebuah sprite objek dari itu, mari kita menginisialisasi beberapa dasar-dasar yang diperlukan baginya.

Tambahkan sedikit terakhir kode yang Anda masukkan di bawah ini:

Kode akan menempatkan sprite kami di tengah screen. Selanjutnya tambahkan kode ini:

Menjalankan kode ini dan kita harus memiliki monster kecil yang berlari di tempat di tengah layar. Itu benar-benar semua yang ada untuk membuat animasi sprite dari sprite sheet. Kita akan menggunakan mereka sedikit lebih mendalam dalam tutorial berikut. Untuk referensi penuh pada sprite sheet, Anda dapat memeriksa referensi Corona SDK. Ini adalah semua yang kita ulas pada topik untuk saat ini, jadi mudah-mudahan itu sudah cukup untuk Anda mulai! Untuk satu efek akhir sebelum Anda pergi membuat rakasa kami menjalankan seluruh layar, tambahkan kode berikut ke bagian bawah kode Anda:

Hal-hal yang mudah. Strip semua komentar saya membuat dalam kode yang menjelaskan hal-hal dan Anda akan melihat betapa mudah Corona membuatnya mengatur bagus animasi sprite. Jika Anda memiliki dan pertanyaan atau komentar beritahu saya!

Corona SDK - Running Figure
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.