Memulai dengan kesatuan - menyelesaikan permainan kami dengan Menu

() translation by (you can also view the original English article)

Ada beberapa metode yang digunakan untuk menghasilkan menu dalam kesatuan, utama dua sedang dibangun di sistem GUI dan menggunakan GameObjects dengan Colliders yang menanggapi interaksi dengan mouse. Kesatuan 's GUI sistem dapat sulit untuk bekerja dengan sehingga kita akan menggunakan pendekatan GameObject yang saya pikir juga sedikit lebih menyenangkan bagi apa yang kita coba untuk mencapai di sini.

Hasil akhir Tinjauan

Langkah 1: Menentukan resolusi permainan Anda

Sebelum merancang menu Anda selalu harus menentukan apa resolusi Anda akan melayani untuk.

Buka pengaturan pemutar melalui menu teratas, mengedit > Seting Proyek > pemain dan masukkan Anda layar lebar dan tinggi nilai default Inspektur. Aku memilih untuk meninggalkan saya sebagai default 600x450px seperti yang ditunjukkan di bawah ini.

Anda perlu untuk menyesuaikan ukuran tampilan permainan dari default "Aspek gratis" untuk "Web (600 x 450)", lain Anda dapat posisi Anda item menu dari layar.

Langkah 2: Memilih latar belakang Menu

Seperti yang Anda akan melihat dalam pratinjau, adegan menu kami akan memiliki lingkungan kita permainan di latar belakang sehingga bila Anda mengklik bermain Anda memasukkan mulus ke dalam permainan.

Untuk melakukan ini Anda perlu untuk posisi player Anda di suatu tempat dalam adegan dimana Anda latar belakang dan bulat Y rotasi nilai. Ini adalah sehingga lebih mudah untuk mengingat dan untuk mereplikasi kemudian, sehingga transisi mulus dari menu ke dalam permainan.

Sekarang mari kita dengan penciptaan adegan menu!

Langkah 3: Membuat adegan Menu

Pastikan adegan Anda disimpan dan disebut "permainan" - Anda akan melihat mengapa kemudian.

Pilih adegan permainan jarak proyek dan duplikat ini menggunakan Ctrl Command + D, kemudian mengubah copy ke "menu" dan klik dua kali untuk membukanya.

Catatan: Anda dapat mengkonfirmasi adegan yang terbuka dengan memeriksa bagian atas layar, itu harus mengatakan sesuatu seperti "kesatuan - menu.unity - ProjectName - Web pemain / berdiri sendiri". Anda tidak ingin mulai menghapus bagian-bagian yang sengaja dari adegan permainan Anda!

Sekarang pilih dan menghapus GUI dan PickupSpawnPoints GameObjects dari hirarki. Memperluas "Player" dan tarik "Kamera utama" sehingga hal ini tidak lagi anak pemain, kemudian menghapus pemain.

Selanjutnya, pilih Medan dan menghapus komponen Collider Medan dengan mengklik kanan dan memilih menghapus komponen.

Akhirnya, pilih "Main kamera" dan menghapus komponen MouseLook dengan mengklik kanan dan memilih menghapus komponen.

Jika Anda menjalankan permainan sekarang tidak ada yang harus terjadi dan Anda tidak akan mampu bergerak sama sekali. Jika Anda dapat memindahkan atau memutar kemudian mengulang langkah di atas.

Langkah 4: Menyesuaikan pengaturan membangun

Saat ini ketika Anda membangun atau bermain game tingkat hanya disertakan dalam membangun itu adegan "permainan". Ini berarti bahwa adegan menu akan pernah muncul. Sehingga kita dapat menguji menu kami, kami akan menyesuaikan pengaturan membangun sekarang.

Dari atas menu pilih File > membangun pengaturan dan menyeret adegan menu dari pandangan proyek Anda ke dalam daftar "Adegan dalam membangun" membangun pengaturan seperti yang ditunjukkan di bawah ini

(Pastikan Anda mengatur ulang adegan untuk menempatkan "menu.unity" di bagian atas, sehingga adegan yang penuh pertama ketika permainan ini dimainkan.)

Sempurna!

Langkah 5: Menambahkan tombol Play

Kita akan menggunakan teks 3D untuk menu kami, jadi pergi ke depan dan membuat GameObject teks 3D melalui menu paling atas: GameObject > membuat lain > teks 3D, mengubah "PlayBT". Set rotasi Y teks PlayBT untuk mencocokkan Y rotasi nilai kamera utama Anda sehingga menghadap langsung di itu dan karena itu mudah dibaca.

Dengan PlayBT yang dipilih, mengubah properti teks teks Mesh dari Hello World "Play", mengurangi ukuran karakter untuk 0.1 dan meningkatkan ukuran Font hingga 160 untuk membuat teks crisper.

Catatan: Jika Anda ingin menggunakan font selain dari bentuk standar, baik pilih font sebelum membuat 3D teks atau drag Font ke 3DText TextMesh's Font properti dan kemudian tarik font "Font materi" ke daftar Mesh Renderers bahan, Timpa yang ada Bahan font. Cukup merepotkan aku tahu!

Akhirnya, tambahkan kotak Collider melalui menu paling atas: komponen > fisika > Collider kotak. Mengubah ukuran Collider kotak untuk menyesuaikan teks jika itu tidak sesuai dengan baik.

Pada titik ini dalam tutorial Anda benar-benar perlu memiliki adegan dan permainan pemandangan terbuka pada waktu yang sama karena Anda sekarang akan bergerak PlayBT dalam tampilan adegan sehingga itu berpusat dalam tampilan permainan seperti yang ditunjukkan di bawah ini. Saya sarankan pertama posisi horizontal menggunakan top-down view dan kemudian kembali ke menggunakan tampilan perspektif untuk posisi vertikal menggunakan pegangan sumbu.

Jadi itulah kami bermain tombol siap sampai. Sekarang mari kita membuatnya bermain!

Langkah 6: Mouse penangan Script

Membuat script JavaScript baru dalam folder script, mengubah nama "MenuMouseHandler" dan menambahkannya sebagai komponen PlayBT GameObject dengan baik menyeret langsung ke PlayBT atau dengan memilih PlayBT dan menyeret script ke Inspektur itu.

Ganti kode standar dengan berikut:


/**
  Mouse Down Event Handler
*/
function OnMouseDown()
{
	// if we clicked the play button
	if (this.name == "PlayBT")
	{
		// load the game
		Application.LoadLevel("game");
	}
}

Kami menggunakan fungsi MonoBehaviour OnMouseDown(...), dipanggil setiap kali BoxCollider yang diklik oleh mouse. Kami memeriksa apakah tombol diklik disebut "PlayBT", dan jika begitu kita gunakan Application.LoadLevel(...) untuk memuat adegan "permainan".

Cukup berbicara - pergi menjalankannya dan menonton permainan Anda datang untuk hidup ketika Anda mengklik bermain!

Catatan: Jika Anda mengklik bermain dan menemukan diri Anda dengan membangun pengaturan kesalahan, jangan khawatir; Anda hanya perlu memeriksa pengaturan membangun Anda - kembali langkah 4.

Langkah 7: Berakhir permainan

Sehingga menu untuk memulai permainan besar tapi permainan secara teknis tidak pernah berakhir sejak ketika timer habis tidak terjadi... mari kita memperbaiki itu sekarang.

Buka skrip CountdownTimer dan di bagian bawah fungsi Tick() menambahkan baris berikut:

1
2	Application.LoadLevel("menu");

Sekarang kembali menjalankan permainan Anda dan Kapan timer berjalan keluar Anda akan dibawa kembali ke menu! Mudah Peasy!

Sana kami pergi - menu dasar ditambahkan ke permainan kami. Sekarang mari kita membuatnya sedikit lebih user friendly dengan bantuan layar untuk menjelaskan cara bermain.

Langkah 8: Menambahkan tombol bantuan

Tombol bantuan identik dengan PlayBT di hampir setiap jalan, jadi pergi ke depan dan duplikat PlayBT, rename menjadi HelpBT dan posisi itu di bawah tombol Play. Menyesuaikan properti teks untuk mengatakan "Membantu" daripada "Bermain" dan mungkin membuat ukuran Font yang sedikit lebih kecil seperti yang ditunjukkan di bawah ini - saya menggunakan 100.

Sekarang buka MenuMouseHandler script dan tambahkan berikut jika lain blok untuk Anda jika ada pernyataan.


// if we clicked the help button
else if (this.name == "HelpBT")
{
    // rotate the camera to view the help &quot;page&quot;
    
}

Jika Anda memeriksa tinjauan Anda akan melihat bahwa ketika Anda klik Help kamera berputar di sekitar untuk menampilkan help menu. Jadi, bagaimana kita melakukannya?

Langkah 9: Allah menyelamatkan iTween

Rotasi kamera kami semua bisa dilakukan bagus dan bersih dalam satu baris, berkat iTween. Tanpa iTween hidup tidak akan hampir sebagai menyenangkan. Sebagai nama mungkin memberikan adalah sebuah mesin tweening, yang dibangun untuk kesatuan. Hal ini juga gratis.

Pergi ke depan dan membuka iTween dalam kesatuan aset toko, kemudian klik Download impor dan impor semua ke proyek Anda. Setelah itu diimpor Anda perlu untuk memindahkan iTween/Plugins direktori ke akar folder aset Anda.

Anda sudah sekarang siap untuk tween hidup Anda pergi!

Langkah 10: Memutar kamera

Ambil sepotong kertas dan pena (atau buka dokumen kosong) dan membuat catatan dari kamera utama Anda Y rotasi nilai, seperti berputar-putar di bawah ini.

Dalam tampilan adegan memutar kamera di sekitar di arah mana arah yang Anda suka di sekitar sumbu Y sehingga teks bermain dan membantu keluar dari pandangan dan sehingga Anda punya latar belakang yang layak untuk halaman bantuan Anda. Anda dapat melihat saya di bawah ini: saya diputar dari-152 ke -8.

Kembali ke skrip MenuMouseHandler dan tambahkan baris berikut dalam yang lain jika pernyataan:

1
2	iTween.RotateTo(Camera.main.gameObject, Vector3(0, -8, 0), 1.0);

Kami menggunakan Camera.main untuk mengambil kamera utama (didefinisikan oleh tag "MainCamera") dari adegan dan menggunakan iTween.RotateTo(...) untuk memutar kamera untuk sudut tertentu - dalam kasus saya -8.

(Anda perlu untuk mengganti -8 dalam baris di atas dengan rotasi kamera Anda saat ini.)

Sekarang kembali ke adegan dan kembali kamera Anda ke rotasinya asli yang Anda menuliskan di awal bagian ini, sehingga menghadapi PlayBT. Menjalankan permainan Anda, klik bantuan dan kamera harus berputar di sekitar. Woo!

Catatan: Jika Anda mendapatkan error tentang iTween tidak ada maka Anda belum diimpor benar - kembali langkah 9.

Sekarang mari kita membangun laman bantuan kami.

Langkah 11: Membangun halaman bantuan

Memutar kamera Anda kembali ke Y rotasi dari halaman bantuan Anda - dalam kasus saya -8.

Sekarang kita akan menambahkan sedikit penjelasan teks serta beberapa teks yang lain untuk menjelaskan pickup berbeda dan nilai mereka. Akhirnya, kami akan menambahkan tombol Back untuk kembali ke menu utama. Anda dapat mengatur halaman Anda dalam cara apa pun yang Anda inginkan sehingga merasa bebas untuk mendapatkan kreatif. Di sini kita pergi...

Duplikat HelpBT, mengubah HelpHeader, mengatur rotasinya bahwa kamera Anda, nilai jangkar pusat perubahan ke"atas" dan mengurangi ukuran Font - saya menggunakan 60.

Selanjutnya, copy dan paste di bawah paragraf menjadi properti teks:

"Mengumpulkan batu sebanyak yang Anda bisa dalam batas waktu.
Hati-hati meskipun, mereka berubah dari waktu ke waktu!

Catatan: It's worth dicatat bahwa Anda tidak mengetik multiline teks ke properti teks; Anda harus mengetik di program lain dan lalu copy dan paste karena menekan masuk kembali menetapkan bidang.

Akhirnya menghapus kotak Collider dan MenuMouseHandler komponen dalam Inspektur karena teks ini tidak perlu dapat diklik. Mudah-mudahan Anda berakhir dengan sesuatu seperti ini:

Sekarang drag cetakan pickup ke TKP dan posisi itu pada layar. Aku meletakkan tanganku seperti ditunjukkan di bawah.

Selanjutnya, duplikat HelpHeader, rename menjadi HelpPowerups, mengubah jangkar "kiri" dan copy dan paste di bawah paragraf menjadi bidang teks.

"Green: + 2 poin

Pink: +/-Acak poin

Biru: meningkatkan kecepatan acak "

Reposisi sehingga Anda memiliki sesuatu seperti di bawah ini.

Semua yang tersisa sekarang adalah untuk menambahkan tombol Back untuk kembali ke menu utama.

Langkah 12: Bantuan halaman kembali tombol

Duplikat HelpBT, mengubah BackBT, mengubah teks untuk "Kembali", mengatur rotasinya bahwa kamera Anda dan gunakan tampilan adegan untuk reposisi jarak permainan. Aku meletakkan saya di sudut bawah seperti ditunjukkan di sini:

Sekarang kita hanya perlu untuk memperbarui kami MenuMouseHandler script untuk menangani klik mouse dari BackBT juga. Tambahkan berikut jika lain blok untuk bagian bawah OnMouseDown() Jika pernyataan:


	// if we clicked the Back button
	else if (this.name == "BackBT")
	{
		// rotate the camera to view the menu "page"
		iTween.RotateTo(Camera.main.gameObject, Vector3(0, -152, 0), 1.0);
	}

Ini hampir identik dengan pernyataan iTween sebelumnya, satu-satunya perbedaan menjadi sudut kamera diputar ke --152 dalam kasus saya. Anda perlu mengubah nomor ini asli Y rotasi kamera Anda adalah (yang Anda menulis, ingat?)

Sekarang semua yang perlu Anda lakukan itu mengatur kamera Anda kembali ke rotasinya asli - nilai Anda hanya ditambahkan ke pernyataan iTween - jadi bahwa itu adalah menghadapi menu utama lagi.

Menjalankan permainan dan kamera Anda harus berputar putaran untuk mengungkapkan halaman bantuan dan berputar kembali putaran ke menu utama. Selamat, Anda sudah selesai!

Kesimpulan

Saya harap Anda telah menikmati ini memulai dengan kesatuan sesi!

Dalam bagian ini kita telah membahas menggunakan GameObjects sebagai item menu dan Perpustakaan sangat kuat tweening iTween.

Jika Anda ingin tantangan tambahan, coba gunakan iTween untuk mengubah warna teks pada Gunaka mouse di atas dan kemudian kembali lagi pada MouseExit. (Anda akan menemukan daftar Mouse penangan pada Halaman ini.)

Atau menambahkan iTween CameraFade dan kemudian memudar keluar ketika timer berjalan keluar, maka beban kemudian menu - daripada tiba-tiba berakhir permainan. Anda bisa maka penundaan panggilan untuk Application.LoadLevel(...) menggunakan menghasilkan WaitForSeconds(...).

Biarkan aku tahu bagaimana Anda mendapatkan pada di komentar!