Lompat ke konten Lompat ke sidebar Lompat ke footer

Tutorial Cara Menciptakan Game 2D Memakai Unity Dan Orthello Framework



Unity ialah sebuah game engine dimana engine ini mempunyai kemampuan untuk menciptakan game-game 3D dengan aneka macam dampak yang memukau, mirip dampak lighting, physics, dsb. Namun tahukah Anda bahwa Unity sanggup pula dipakai untuk menciptakan game 2D? Ya, selain untuk menciptakan game-game 3D ternyata unity juga mempunyai kemampuan untuk menciptakan game 2D. Namun seberapa ampuhkah kemampuan unity untuk menciptakan game 2D? Apakah bisa seampuh engine 2D lain mirip flash, game maker, dsb? Hal ini merupakan pertanyaan yang cukup sulit, alasannya ialah setiap developer tentu mempunyai tools-tools andalan mereka dalam menciptakan produknya. Namun bagi saya langsung sebagai seorang developer yang sering memanfaatkan tools Unity, saya sangat yakin bahwa Unity sama sekali tidak kalah dengan engine-engine 2D lainnya asalkan developer bisa memanfaatkan tools-tools dalam unity secara maksimal. Hal ini dibuktikan dengan munculnya aneka macam game-game 2D yang cukup fenomenal yang dibentuk memakai Unity. Sebut saja Bad piggies, game 2D besutan Rovio yang sangat sangat populer ternyata juga dibentuk memakai Unity.


Selain kemampuannya yang sudah cukup sakti, kemampuan Unity dalam menciptakan game-game 2D juga sangat didukung dengan adanya aneka macam library/framework pemanis yang sangat memudahkan untuk menciptakan game-game 2D. Contoh framework yang sangat populer ialah 2DToolkit dan Orthello. Khusus untuk artikel kali ini saya bermaksud untuk membahas wacana pembuatan animasi simple memakai salah satu framework 2D yaitu Orthello. Kenapa orthello saya pilih alasannya ialah alasan utamanya ialah orthello merupakan framework yang gratis namun mempunyai kemampuan yang tidak kalah dengan framework berbayar lainnya. Adapun alat dan materi yang perlu dipersiapkan untuk mengikuti tutorial ini ialah sbb :

  1. Unity (Yang ini pastinya lah, judulnya aja Simple 2D Sprite di Unity. Anda sanggup mendownload Unity di situs resminya di sini)
  2.  Orthello framework (Anda sanggup mendownload orthello free di situs resminya di sini)
    Texture packer (Tools untuk menciptakan sprite 2D, Anda sanggup mendownloadnya di situs resminya di sini)
  3.  Asset, optional (Ini ialah pola sprite sederhana buatan saya, Anda sanggup mendownloadnya di sini)
Peringatan : 
Sebelum Anda membaca lebih jauh saya menunjukkan alternatif tutorial menciptakan game 2D tanpa memakai orthello framework disini

Nah… Jika semua tools telah siap saatnya kita mulai percobaannya. Langkah pertama sebagai pemanasan ialah siapkan spritenya. Dalam tutorial ini saya mempunyai 4 buah gambar yang akan saya jadikan sebuah sprite dengan 2 animasi, yaitu idle (diam) dan walk_right (berjalan ke kanan).


Langkah selanjutnya kita buat project gres di Unity. Ketik file >> new project >> buat project baru


Dengan Unity masih aktif terbuka selanjutnya buka file orthello dan lakukan double click untuk mengimport orthello ke dalam project


Setelah double click Anda akan diberi konfirmasi komponen apa saja yang akan di import. Centang semua dan klik import


Jika orthello sudah berhasil di import maka akan muncul susunan file-file orthello mirip pada gambar


Sebagai langkah awal masukkan object orthello dalam Orthello >> Object >> OT ke dalam scene dengan melaksanakan drag drop ke window hierarchy


Kemudian lakukan pengaturan resolusi pada Player setting mirip gambar di bawah



Lakukan juga pengaturan resolusi game pada object view dalam Child object OT


Setelah semua pengaturan dilakukan maka pengaturan kamera secara otomatis akan dirubah oleh orthello menjadi tampilan Orthographic yaitu tampilan kamura 2D. Lihat gambar di bawah


Kemudian saya akan menciptakan sebuah object 2D stickman. Buat susunan folder mirip gambar di bawah. Susunan folder ini bukanlah hukum baku, Anda sanggup mengatur susunannya sesuai impian Anda.


Setelah kerangka folder-folder siap saatnya menciptakan sprite, dengan langkah awal menciptakan Texture Atlas. Texture Atlas dibentuk dengan memakai software tersendiri, yaitu Texture Packer. Buka texture packer maka akan muncul tampilan di bawah.


Kemudian klik Use Free (lite) Version untuk masuk ke dalam program. Setelah masik, saatnya menciptakan Texture Atlas gres dengan melaksanakan drag & drop sprite 2D ke dalam Texture Packer pada bab Sprites


Kemudian rubah pengaturan layout mirip pada gambar di bawah. Perhatikan pada bab yang diberi tanda


Setelah layout rubah pengaturan output. Perhatikan pula pada bab yang diberi tanda. Untuk data file masukkan pada [lokasi project]/Assets/User Assets/Stickman/Texture Atlases. Beri nama Stickman.xml. Peringatan : Pada kondisi default Texture packer akan memberi ekstensi .plst pada data file. Namun supaya sanggup di baca unity maka format data harus dirubah dari .plst ke .xml. Lihat gambar di bawah


Setelah semua pengaturan selesai maka berikut ialah preview dari Texture Atlas yang telah kita buat


Setelah semua siap tinggal kita buat Texture Atlas dengan klik Publish


Setelah kita lakukan publish maka jikalau penyimpanan lokasi benar maka data dan texture akan ada dalam folde Texture Atlases di Unity


Secara default semua image yang diimport dalam Unity mempunyai type Texture. Typeini menciptakan gambar lebih ringan untuk di load namun akan terlihat sedikit kabur. Dalam game 2D hampir tidak ada bedanya antara object (yang seharusnya jadi texture) dengan object user Interface GUI. Untuk itu meskipun pada bahwasanya image dipakai sebagai texture, maka akan lebih baik kesudahannya jikalau kita ruba typenya ke GUI. Bentuk GUI akan menciptakan gambar lebih terang dan tidak kabur. Klik image yang di rubah, pada Texture Type pilih GUI.


Selanjutnya untuk menciptakan sebuah animasi langkah pertama ialah menciptakan sebuah object Container. Container sanggup saya ibaratkan sebagai data image apa saja yang akan load di suatu scene. Image ini berupa Texture Atlas dimana di dalamnya terdapat data pada Texture Atlas dan Image itu sendiri. Pada kasus ini kita akan menciptakan container dari Stickman, dengan Texture Atlas yang telah kita buat tadi memakai Texture Packer. Langkah pertama ialah drag drop object Orthello dari Orthello >> Objects >> Sprites >> Sprite Atlas >> SpriteAtlasCocos2SD ke dalam scene atau ke window Hierarchy


Setelah kita drag drop maka secara otomatis akan ada object Container gres dalam child Containers.


Selanjutnya kita lakukan pengaturan, berupa setting nama container dan lakukan drag & drop data dari Texture Atlas ke dalam container.


Ketika data di drag & drop maka seharusnya secara otomatis image dari Texture Atlas akan terinclude dan Orthello akan mengenerate sprite-sprite pada Texture Atlas Anda.


Setelah Container dibentuk maka langkah selanjutnya ialah menciptakan Animasi dari container. Animasi kita buat dengan melaksanakan drag & drop object dari Orthello >> Objects >> Sprites >> Animation ke dalam scene window Hierarchy.


Kemudian beri nama animasi


Buat animasi dengan mengisi frameset sesuai jumlah animasi yang diinginkan. Pada setiap frameset masukkan container yang telah kita buat dengan melaksanakan drag & drop


Kemudian atur nama animasi dan range frame dari animasi tersebut sesuai Texture Atlas yang telah dibentuk sebelumnya


Object container beres, animasi beres, selanjutnya tinggal menciptakan object dari animasi yang telah kita buat. Hal ini hampir sama dengan menciptakan object biasanya. Caranya drag & drop object Animating Sprite dari Orthello >> Objects >> Animating Sprite ke dalam scene.


Beri nama object animasinya dan masukkan animasi yang telah kita buat sebelumnya.


Sekarang untuk ujicoba tinggal play deh project kita, maka seharusnya akan muncul animasi rang bergerak. Selamat, Anda berhasil menciptakan animasi 2D di unity… ^^


Nah… Selanjutnya apakah berhenti hingga disini? Terus gimana kalo setiap kita menekan key tertentu muncul animasi yang berbeda? Ya… Tentu harus memakai script. Ok, kali ini saya akan memberi pola object akan me-load animasi berbeda ketika saya menekan key Panah kanan. Langkah awalnya non-aktifkan dulu auto start animasinya.


Kemudian saya bikin sebuah script StickmanBehaviour, dan jangan lupa untuk menaruh script ini di object Stickman.


Nah isi scriptnya kurang lebih mirip ini

 using UnityEngine; using System.Collections;  public class StickmanBehaviour : MonoBehaviour {     private OTAnimatingSprite otAnimatingSprite;      void Start() {         otAnimatingSprite = this.GetComponent();     }      void Update() {         // Get keyboard input         if (Input.GetKey(KeyCode.RightArrow))             MoveRight();         else             Idle();     }      public void MoveRight() {         otAnimatingSprite.PlayLoop("Walk Right");          //Some script to translate object     }      public void Idle() {         otAnimatingSprite.PlayLoop("Idle");     } }  

Ato jikalau mau screenshotnya silahkan liat gambar di bawah



Ok… Sekarang jadilah animasi Anda. Silahkan tekan panah kanan dan liat apa yang terjadi. Selamat Anda telah mengilkuti tutorial ini dengan baik ^^

Kesimpulan :
Mungkin dari beberapa step yang Anda lakukan terlihat cukup ribet dan sulit, terdapat beberapa tahap hanya untuk menciptakan 1 animasi 2D. Nah, bahwasanya tidak ribet, namun kita harus mengetahui step-stepnya secara urut. Berikut ialah rangkuman step-step yang harus dilakukan
  • Siapkan materi (unity, orthello framework, texture packer)
  • Buat new project unity, atur aneka macam keperluan mirip resolusi dsb, import orthello framework
  • Masukkan object orthello ( OT ) ke dalam scene dan atur resolusi dan pengaturan lain di View
  • Buat Texture Atlas memakai software Texture Packer
  • Buat object Container dan masukkan Texture Atlas yang telah dibentuk pada step sebelumnya. Container  ialah menyerupai mendefinisika Texture Atlas yang akan dipakai di scene supaya sanggup di proses oleh orthello dan dijadikan kumpulan Sprite
  • Buat animation. Animation ialah menyerupai mendefinisikan animasi dari Container yang dibentuk pada step sebelumnya. Misal : Animasi jalan, berasal dari container A, dari frame 1-10
  • Buat object animasi. Ini mirip menciptakan object biasa, tinggal masukkan animasinya
Ok… Mungkin cukup sekian saja artikel dari saya. Mohon maaf jikalau mungkin ada kesalahan, saya ucapkan selamat mencoba dan terus berkarya ^^

Sumber : Blog pribadiAndengine, library imut yang tangguh untuk Android game developer 
Sumber http://duniadigit.blogspot.com/