RSS

Pembuatan game 2D dengan Unity part 2 – Main Menu

23 Feb

Ada request buat lanjut, jadi dilanjut dah😀

Pada part ini kita akan membuat main menu, sebelum itu kita harus membuat project baru dulu.

Jadi silahkan buat new project, kemudian pada pilihan package, biarkan kosong dulu, dan kemudian kita create

Kemudian kita akan membuat game object baru dengan cara (Game Object à Create Empty). Game object kosong ini nanti akan kita gunakan sebagai komponen yang akan ditampilkan menjadi game kita dengan bantuan script.

Ya, kita tidak akan menggunakan editor 3D karena game yang akan kita buat akan menjadi game yang benar-benar 2D, termasuk backgroundnya. Mungkin nanti akan dibahas juga bagaimana membuat main menu dengan background 3D.

Setelah kita memiliki Game object, kita akan membuat juga sebuah script, dimana script ini akan berguna sebagai pengatur game kita, apa yang ditampilkan, serta apa yang akan dilakukan ketika pemain berinteraksi dengan game kita. Untuk membuatya (Project à Create à Javascript). Kemudian rename file javascript tersebut menjadi MainMenu (Klik di file yang ingin di rename à F2)

Setelah itu kita perlu untuk memasukkan resources yang akan digunakan dalam main menu kita, yang terdiri dari:

  • Background
  • Judul Game

Sebagai contoh, berikut adalah gambar yang penulis gunakan untuk background:

[gambar peta disini]

Dan untuk gambar judul:

[gambar judul disini]

Silahkan disimpan ke komputer anda. Langkah selanjutnya adalah untuk meng-import resources tersebut ke dalam unity, dengan cara (Klik kanan di project à Import new asset) kemudian import dua gambar di atas:

Buatlah sebuah folder baru, dengan cara (Project à Create à Folder) dan kemudian rename menjadi resources. Setelah itu drag kedua gambar yang sudah diimport tadi ke dalam folder tersebut, sehingga tampilan akhir resources kita akan menjadi:

Langkah selanjutnya adalah untuk mengedit Script main Menu di atas

Silahkan copy paste kode di bawah:

var controlTexture:Texture2D;

var lvlwidth = 1024;

var lvlheight = 768;

function OnGUI() {

        var startX = Screen.width / 2 – lvlwidth / 2;

        var startY = Screen.height / 2 – lvlheight / 2;

        GUI.DrawTexture(Rect(Screen.width / 2 – lvlwidth / 2, Screen.height / 2 – lvlheight / 2,lvlwidth, lvlheight), Resources.Load(“background_level1”));

        startY += 150;

        GUI.DrawTexture(Rect(Screen.width/2 – controlTexture.width/2,startY, controlTexture.width, controlTexture.height), controlTexture);


        if(GUI.Button(Rect(Screen.width/2 – 125, startY + controlTexture.height + 30, 250, 50), “Play Game”)){


        }

        if(GUI.Button(Rect(Screen.width/2 – 125,startY + controlTexture.height + 100,250, 50), “High Score”)){


        }

        if(GUI.Button(Rect(Screen.width/2 – 125,startY + controlTexture.height + 170,250, 50), “About”)){


        }

        if(GUI.Button(Rect(Screen.width/2 – 125,startY + controlTexture.height + 240,250, 50), “Exit”)){

            Application.Quit();

        }

}

Sekarang kita akan membahas satu persatu.

Baris di bawah:

var controlTexture:Texture2D;

var lvlwidth = 1024;

var lvlheight = 768;

Merupakan deklarasi dari sebuah texture, atau gambar dari judul yang akan kita tampilkan.

Sedangkan lvlwidth dan height merupakan panjang dan lebar dari game kita nantinya.

function OnGUI() {                

Method OnGUI ini adalah method yang akan dipanggil setiap kali grafik di update +- tiap 20 ms, sehingga di dalamnya kita akan menaruh tampilan dari aplikasi kita.

    var startX = Screen.width / 2 – lvlwidth / 2;

        var startY = Screen.height / 2 – lvlheight / 2;

        GUI.DrawTexture(Rect(Screen.width / 2 – lvlwidth / 2, Screen.height / 2 – lvlheight / 2,lvlwidth, lvlheight), Resources.Load(“background_level1”));

        startY += 150;

        GUI.DrawTexture(Rect(Screen.width/2 – controlTexture.width/2,startY, controlTexture.width, controlTexture.height), controlTexture);

GUI.DrawTexture akan menggambar sebuah elemen GUI di layar, dalam kasus ini kita menggambar elemen Rect dengan lebar layar/2 – lebar game/2 sehingga aplikasi kita terdapat di tengah layar.

Resources.Load(“background_level1”) akan meload resources yang kita miliki, atau kita bisa juga menggunakan texture2D yang sudah dideklarasikan di atas (controlTexture) dengan keunggulan kita dapat dengan mudah mengetahui lebar, panjang maupun property lainnya dari resources yang telah dideklarasikan sebelumnya.

if(GUI.Button(Rect(Screen.width/2 – 125, startY + controlTexture.height + 30, 250, 50), “Play Game”)){


}

if(GUI.Button(Rect(Screen.width/2 – 125,startY + controlTexture.height + 100,250, 50), “High Score”)){


}

if(GUI.Button(Rect(Screen.width/2 – 125,startY + controlTexture.height + 170,250, 50), “About”)){

}

if(GUI.Button(Rect(Screen.width/2 – 125,startY + controlTexture.height + 240,250, 50), “Exit”)){

    Application.Quit();

}

Untuk membuat button, sekaligus untuk menangani saat button tersebut di tekan. Untuk play game, highscore, about, akan diupdate di post selanjutnya.

Untuk keluar kita akan memanggil: Application.Quit() untuk menutup game kita.

Kalau sudah, langkah selanjutnya adalah “menempelkan” script ini ke game object yang kosong, dan juga menentukan controlTexture yang dideklarasikan. Untuk menempelkan script ini ke game, cukup drag and drop script ini dari project, ke game object kita di Hirearchy hingga bewarna biru.

Setelah itu, silahkan klik di GameObject, dan edit controlTexture di jendela inspector menjadi gambar judul yang sudah dimasukkan tadi

Silahkan coba jalankan game anda J

Lanjut ntar ya.. mau nguli dulu

 
3 Comments

Posted by on February 23, 2012 in Uncategorized

 

3 responses to “Pembuatan game 2D dengan Unity part 2 – Main Menu

  1. falihakz

    December 17, 2012 at 9:45 am

    tutorial yang sangat bagus sekali🙂 (y)

    saya juga niat bikin tutorial tapi ilmunya masih ecek-ecek gara-gara jarang senam..

     
  2. Andhie Bebex Ijo

    May 24, 2013 at 6:24 pm

    kuk gak keluar control texture ya??
    mohon bantuannya!!

     
  3. N5778

    September 24, 2013 at 2:50 pm

    koq gak kluar control texture nya gan???

    plisssss help mee

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: