Membuat Storyboard sederhana untuk Corona SDK Bagian 1

Materi :

1. Pengertian Storyboard
2. Membuat  Storyboard
3. Membuat Scene
4. Mengakses Scene
5. Membuat Splash Screen
6. Anatomi Screen

• Apa itu Storyboard?

Pada tutorial kali ini kita akan membahas tentang storyboard. Tentunya Storyboard yang ada pada corona SDK. Jadi apa yang dimaksud dengan storyboard?

Storyboard atau bisa disebut dengan modul / template adalah kerangka yang disusun untuk memenuhi kebutuhan dalam membangun sebuah aplikasi. Seperti kita ketahui hampir semua aplikasi memiliki kemiripan, baik dalam hal scene, transisi, score, animasi dan lain-lain. Nah, dengan adanya modul tersebut kita tidak perlu membuatnya berulang ulang, hanya dengan sekali membuat bisa kita gunakan untuk semua aplikasi kita. Tinggal kita pakai yang kita butuhkan saja. Kurang lebihnya begitu. 

Setelah kita mengetahui apa itu storyboard maka kita akan mempelajari lebih dalam tentang apa itu storyboard dan implementasinya.

Jika kita ingin menambahkan modul untuk projek kita maka kita harus mengenal modul tersebut. Mulai dari apa itu, kriterianya, apa saja didalamnya dan bagaimana cara mengaksesnya. Jika kita sudah tahu tentunya akan sangat membantu pekerjaan kita. Menghemat waktu, pikiran dan biaya. Hehhehee..

• Membuat Modul

Jika projek kita sudah banyak dan tidak butuh waktu panjang modul akan sangat membantu kita. Tinggal bagian mana saja yang akan kita paka. Dengan copy paste-kan modul tadi di project kita paling gak kita udah 30% berjalan.

Kita dapat menemukan storyboard yang lengkap disini, akan tetapi sekarang storyboard sudah tidak lagi dikembangkan dan dijadikan sebagai open source. Mari kita coba buka dan kita buang script yang tidak kita butuhkan. Secara default banyak sekali script yang tidak kita butuhkan. Kita ambil beberapa hal yang sering kita gunakan dalam projek atau juga kita tambahkan sesuai kebutuhan kita.

Yang mungkin penting dan selalu ada adalah storyboard.removeAll () untuk menghapus event sebelumnya.

Langkah – langkahnya adalah :

Buat file baru dengan nama "scene_template.lua" dan copy dan paste kode berikut ke dalamnya untuk membuat template storyboard:

scene_template.lua

--------------------------------------------------------------------------------- -- SCENE NAME -- Scene notes go here --------------------------------------------------------------------------------- local storyboard = require( "storyboard" ) local scene = storyboard.newScene() -- Clear previous scene storyboard.removeAll() -- local forward references should go here -- --------------------------------------------------------------------------------- -- BEGINNING OF YOUR IMPLEMENTATION --------------------------------------------------------------------------------- -- Called when the scene's view does not exist: function scene:createScene( event )  local group = self.view end -- Called BEFORE scene has moved onscreen: function scene:willEnterScene( event )  local group = self.view end -- Called immediately after scene has moved onscreen: function scene:enterScene( event )  local group = self.view end -- Called when scene is about to move offscreen: function scene:exitScene( event )  local group = self.view end -- Called AFTER scene has finished moving offscreen: function scene:didExitScene( event )  local group = self.view end -- Called prior to the removal of scene's "view" (display view) function scene:destroyScene( event )  local group = self.view end -- Called if/when overlay scene is displayed via storyboard.showOverlay() function scene:overlayBegan( event )  local group = self.view  local overlay_name = event.sceneName  -- name of the overlay scene end -- Called if/when overlay scene is hidden/removed via storyboard.hideOverlay() function scene:overlayEnded( event )  local group = self.view  local overlay_name = event.sceneName  -- name of the overlay scene end --------------------------------------------------------------------------------- -- END OF YOUR IMPLEMENTATION --------------------------------------------------------------------------------- -- "createScene" event is dispatched if scene's view does not exist scene:addEventListener( "createScene", scene ) -- "willEnterScene" event is dispatched before scene transition begins scene:addEventListener( "willEnterScene", scene ) -- "enterScene" event is dispatched whenever scene transition has finished scene:addEventListener( "enterScene", scene ) -- "exitScene" event is dispatched before next scene's transition begins scene:addEventListener( "exitScene", scene ) -- "didExitScene" event is dispatched after scene has finished transitioning out scene:addEventListener( "didExitScene", scene ) -- "destroyScene" event is dispatched before view is unloaded, which can be -- automatically unloaded in low memory situations, or explicitly via a call to -- storyboard.purgeScene() or storyboard.removeScene(). scene:addEventListener( "destroyScene", scene ) -- "overlayBegan" event is dispatched when an overlay scene is shown scene:addEventListener( "overlayBegan", scene ) -- "overlayEnded" event is dispatched when an overlay scene is hidden/removed scene:addEventListener( "overlayEnded", scene ) --------------------------------------------------------------------------------- return scene

• Membuat Scenes

Sebagai latihan, kita coba membuat skenario permainan umum yang sederhana. Kita asumsikan bahwa skenarionya adalah sebagai berikut:

• Splash Screen
• Menu screen
• Gameplay screen
• Score screen

Nah itu cukup mudah bukan, kita dapat membuatnya dari scene_template.lua yang sudah kita buat tadi. Caranya copy-kan menjadi empat lalu kita ubah namanya seperti berikut:

scene_splash.lua, scene_menu.lua, scene_game.lua, scene_score.lua

Mari kita cermati pada setiap file yang kita buat tadi:

• Splash screen kita digunakan untuk menampilkan judul game, logo, dll. Ini mencakup tombol "mulai" saja secara minimallis atau juga bias mencakup yang lain seperti "help" dan "highscore".
• Menu screen dimana kita dapat memilih level, memilih karakter ataupun tipe game dll.
• Gameplay screen di mana permainan akan dimainkan. Pengguna akan menghabiskan sebagian besar waktu mereka di gameplay ini.
• Score screen di mana kita akan menampilkan hasil pertandingan, menyimpan highscores, coba lagi, berhenti, dll.

• Mengakses Kunci

Storyboard disini adalah modul dari Corona, kita membutuhkan suatu cara untuk menginisialisasi modul tersebut. File yang pertama kali dijalankan adalah file main.lua, tanpa diragukan lagi. Seperti method main dalam bahasa java.

Dengan begitu, main.lua adalah yang pertama kali gunakan. Untuk itu kita buat file main.lua baru dan masukkan code berikut ini:

-- main.lua local storyboard = require( "storyboard" ) storyboard.gotoScene( "scene_splash" )

Dengan beberapa baris kode diatas berarti kita sudah mengaktifkan Storyboard dan dalam perjalanan menuju splash screen (scene_splash.lua) melalui method Storyboard storyboard.gotoScene (). Pada titik ini Storyboard memiliki kontrol terhadap splash screen dan kontrol dapat diaktifkan dengan method gotoScene ().

Mari kita hirarki:

Semuanya berawal dari main.lua. Sangat sederhana bukan? Tetapi jika kita jalankan dengan corona simulator hanya menampilkan layar hitam saja. Eror kah? Tentu tidak, karena kita belum memberikan apa apa dilayar. Lihat corona simulator output..

Yang selanjutnya adalah splash screen, so sekarang kita fokuskan ke splash screen.

• Membuat Splash Screen

Buka scene_splash.lua yang kita buat sebelumnya dengan editor kesukaan notepad++, sublime maupun yang lainya. Method berikut adalah yang sering kita gunakan:

scene : createScene ( )

scene : EnterScene ( )

scene : exitScene ( )

scene : destroyScene ( )

createScene () adalah method di mana kita menciptakan tampilan game kita.

EnterScene () adalah method di mana kita ingin mengatur item yang lebih programatik seperti timer, audio, dan inisialisasi fungsi lainya.

exitScene () dipanggil saat kita akan meninggalkan scene satu menuju scene lainya, tetapi masih memiliki unsur-unsur visual pada layar. Dan kita gunakan juga untuk menghapus eventListener, menghentikan, timer, transisi, dll

destroyScene () dipanggil setelah exitScene () method, dan di mana setiap item visual yang ditambahkan ke tampilan layar akan dihapus. Jika kita menambahkan elemen visual ke layar, tidak perlu khawatir tentang menghapus mereka, secara otomatis akan di eksekusi oleh fungsi destroyScene ().

Yang perlu kita khawatirkan adalah timer, atau transisi yang aktif pada salah satu objek yang ada pada latar belakang.

• Anatomi Screen

Sebelum kita melangkah lebih jauh, kita bahas secara singkat tentang anatomi screen. Screen sebenarnya terdiri dari dua bagian.

Yang pertama adalah "view": Apa yang terlihat di layar.

Kedua adalah "memori", yang tidak terlihat dilayar atau berjalan di latar belakang. Bagian ini dimuat ketika kita menggunakan storyboard.gotoScene (). Sedangkan "view" yang dibuat oleh kita ketika menambahkan objek untuk tampilan di layar.

Sebelumnya, ketika kita menciptakan modul storyboard, kita menambahkan baris tambahan kode untuk template: storyboard.removeAll (). Alasan ini adalah karena Storyboard default, akan menyimpan "cache" dalam setiap event yang telah dimuat. Kedua "memori" dan tampilan objek bertahan di latar belakang kecuali kita secara khusus memberitahu mereka untuk melakukan sebaliknya.

Storyboard dapat menimbulkan banyak masalah bagi newbie,tapi dengan menambahkan storyboard.removeAll (), semua event sebelumnya akan dihapus. Mulai dari cache, objek display dan lainya. Dan akan mengembalikanya secara default sebelum ada event-event masukan.

Method storyboard.removeAll () akan membantu kita membuat layar dan belakang layar bersih atau default dari event. Selesai… 

Tutorial ini terdiri dari 3 bagian, so jangan lupa buat mengikuti tutorial yang lainya.