Bagaimana Cara Membuat Game Pong - hyperPong

Catatan: File proyek yang telah selesai untuk tutorial ini dapat ditemukan di akhir artikel ini.

Pengenalan

Dalam tutorial ini, kita akan membuat game mirip Pong dari awal. Kami akan membahas beberapa fitur dan perilaku yang lebih lanjut di hyperPad, jadi tutorial ini mengasumsikan pengetahuan dasar mengenai editor hyperPad. Jika Anda merasa perlu untuk membiasakan diri lebih dahulu dengan cara membuat game dari nol, Anda dapat memeriksa Panduan Lengkap - Membuat Game Platform tutorial terlebih dahulu.

Pong adalah permainan dua pemain yang sederhana yang terdiri dari hanya dua paddle dan satu bola, dan dapat dianggap sebagai versi digital sederhana dari tenis meja. Setiap pemain mengendalikan paddle, keduanya berada di sisi berlawanan dari meja. Paddle hanya bisa bergerak maju dan mundur, memukul bola ke arah pemain lawan. Jika seorang pemain gagal memukul bola, pemain lainnya mendapat satu poin. Pemain pertama yang mencapai 11 poin menang!

Untuk game Pong kita, kita akan menyertakan opsi bermain di mode 1 Pemain (Pemain vs. AI), mode 2 Pemain (Pemain vs. Pemain), atau mode 0 Pemain "Tonton" (AI vs. AI).

Bagian 1: Pengaturan Proyek dan Menu Utama

Mari kita mulai dengan membuat proyek baru.

Buka menu Proyek di hyperPad dan ketuk Proyek Baru. Beri nama proyek Anda dan ketuk Selanjutnya. Orientasi dapat dibiarkan default sebagai mode lanskap. Untuk tutorial ini, Dukungan Perangkat diatur ke iPad 4:3. Di layar berikutnya, pilih "Pandangan Burung" dan biarkan sisanya sebagai default.

Sekarang kita memiliki proyek baru yang siap, mari kita cepat-cepat menyiapkan menu utama sebelum melompat langsung ke dalam permainannya sendiri. Hal pertama yang akan kita lakukan adalah mengganti nama scene kita menjadi "Menu Utama".

Ketik tombol Menu Proyek/Scene dan ketuk tombol gear di samping "Scene 1" kami.

Ketik pilihan Pengaturan dan ganti nama scene kita menjadi "Menu Utama". Ketuk Simpan untuk menyimpan dan menutup jendela pengaturan.

Selanjutnya, untuk tetap tradisional terhadap game retro awal seperti arcade Pong, kita dapat membuat warna latar belakang kita menjadi hitam.

Ketik tombol Pengaturan Scene dan pilih Latar Belakang. Ketuk tombol "Ubah Warna" dan setel menjadi hitam (#000000FF).

Sekarang mari kita tambahkan label judul ke menu utama kita. Ketik tombol Objek Khusus dan pilih Label.

Masukkan nama game Anda ke dalam kolom teks ("hyperPong" dimasukkan untuk tutorial ini), atur ukuran font menjadi sesuatu yang besar tetapi tidak terlalu besar. Untuk judul "hyperPong", 72 poin adalah ukuran yang baik. Ubah warnanya menjadi putih (#FFFFFFFF) dan tempatkan di tengah menu dekat bagian atas.

Sekarang kita memiliki scene menu utama untuk diisi dengan tombol dari semua mode permainan kita. Kita akan membiarkan menu seperti ini untuk saat ini, dan kita akan menyelesaikannya setelah kita memiliki game yang dapat dimainkan.

Bagian 2: Menyiapkan Scene Game dan Paddle

Ketik tombol Menu Proyek dan ketik "Tambahkan Scene". Namai "Game" dan ketuk Buat. Sekarang di scene Game, Anda harus melihat kanvas kosong. Seperti yang kita lakukan dengan scene Menu Utama, silakan ketik tombol Pengaturan Scene lagi dan ubah latar belakang menjadi hitam (#000000FF).

Ayo kita mulai membuat paddle pemain kita. Buat objek kosong dengan pergi ke tombol Objek Khusus dan memilih "Objek Kosong". Ubah warnanya menjadi putih (#FFFFFFFF) dan pastikan penggeser opacity berada di atas.

Ganti nama objek menjadi "Pemain-1" dan atur mode fisiknya menjadi Fisika, dan biarkan Passable diaktifkan.

Alasan mengapa kita akan menjaga Passable tetap aktif adalah agar kita memiliki kontrol lebih besar tentang bagaimana bola akan berinteraksi dengan paddle ketika terkena. Kita ingin dapat mengendalikan kecepatan dan arah bola secara manual.

Di properti objek Player-1, pergi ke tab Transform dan atur skala X menjadi 25% dan pindahkan ke sisi kiri bidang permainan.

Selanjutnya, kita akan menambahkan beberapa kontrol ke paddle kita agar dapat bergerak. Dengan paddle terpilih, pergi ke editor perilakunya dengan kembali ke tab Fisika.

Tempatkan perilaku Joystick Analog, yang ditemukan di bawah bagian Interaksi (jika Anda tidak dapat menemukannya, Anda mungkin perlu mengetuk tab Lanjutan). Ini akan secara otomatis membuat joystick untuk Anda di editor scene.

Tetapi kita tidak ingin hanya mengizinkan paddle bergerak berdasarkan gerakan joystick. Kita juga ingin agar AI dapat melakukan gerakan juga.

Di bawah bagian Kustom, tempatkan sebuah Kotak Kontainer. Ini akan menyimpan arah mana paddle akan bergerak. Dengan cara ini, baik pemain yang mengendalikan joystick maupun AI yang melakukan perhitungan dapat bergerak dengan mengubah satu nilai ini. Nilai defaultnya harus diatur ke 0. Ini juga ide yang baik untuk memberinya nama yang baik sehingga lebih mudah dikerjakan, "Arah Bergerak" terdengar sesuai.

Dengan Kotak Kontainer dipilih, tekan tombol "Ubah Kolom Input" dan tekan Ya. Ini akan membuat perilaku Set Input Field untuk kotak kontainer sehingga kita dapat mengubah nilainya ketika kita membutuhkannya. Hubungkan Set Input Field ke Joystick Analog.

Dengan perilaku Set Input Field dipilih, seret nilai output dari Joystick Analog ke dalam kolom New Value. Pilih properti "y". Sekarang, kotak kontainer Arah Bergerak akan melacak seberapa jauh pemain menggerakkan joystick ke atas atau ke bawah (sumbu y).

Sekarang kita melacak seberapa jauh joystick bergerak ke atas atau ke bawah, kita juga perlu mengatur ulang menjadi nol jika pemain melepaskan joystick. Jika tidak, paddle akan terus bergerak ke arah yang terakhir diingatnya.

Di bawah bagian Interaksi, tambahkan perilaku Stopped Touching, dan ketuk untuk membuka propertinya. Secara default, ini melacak ketika pemain berhenti menyentuh paddle, tetapi kita ingin melacak ketika pemain berhenti menyentuh joystick.

Ketuk properti objek untuk mengubahnya, dan pilih joystick. Anda mungkin perlu memilih lapisan UI Global untuk bisa memilikinya. Ketika sudah terpilih, ketuk tombol periksa. Perilaku ini sekarang harus menunjukkan joystick sebagai objek yang dilacak.

Ketik pada Set Input Field yang kami buat sebelumnya dan duplikat itu. Dengan Set Input Field duplikat, hubungkan ke perilaku Stopped Touching dan atur propertinya New Value menjadi 0.

Sekarang kotak kontainer variabel Arah Bergerak kita akan melacak gerakan naik dan turun dari joystick dan mengatur ulang dirinya ke 0 ketika joystick dilepaskan. Itu memberi kita cara yang luar biasa untuk memberi tahu paddle kita bagaimana bergerak, jadi mari kita lanjutkan dan beri paddle kita beberapa gerakan.

Di bawah bagian Kustom, turunkan sebuah perilaku Timer. Di propertinya, setel intervalnya menjadi 0. Timer ini akan dieksekusi sesering mungkin (sekali per frame), yang memberi kita kesempatan untuk memperbarui gerakan paddle secara sangat sering.

Sebelum mengatur kecepatan paddle, kita ingin memastikan nilai untuk kotak kontainer Arah Bergerak dibatasi dalam rentang yang wajar, hanya jika nilai tersebut terlalu tinggi atau terlalu rendah. Jika tidak, paddle kita bisa bergerak terlalu cepat dalam beberapa kasus.

Di bawah bagian Logika, tempatkan perilaku Minimum dan perilaku Maximum. Hubungkan perilaku Minimum ke timer, dan lemparkan perilaku Maximum ke Minimum. Anda harus memiliki sesuatu yang terlihat seperti ini:

Di propertinya, atur nilai pertama untuk nilai output dari perilaku Arah Bergerak, dan atur nilai kedua menjadi 1.

Perilaku Minimum akan mengeluarkan angka terkecil yang diberikan. Jadi, jika nilai Arah Bergerak lebih besar dari 1, maka itu akan mengeluarkan 1. Jika tidak, ia akan mengeluarkan nilai untuk Arah Bergerak.

Di propertinya perilaku Maximum, atur nilai pertama ke hasil dari Minimum, dan atur nilai kedua menjadi -1.

Perilaku Maximum akan mengeluarkan angka terbesar yang diberikan. Jadi, jika nilai Arah Bergerak lebih rendah dari -1, maka itu akan mengeluarkan -1. Jika tidak, itu akan mengeluarkan nilai dari Minimum (yang merupakan 1 atau Arah Bergerak, mana yang lebih rendah).

Semua ini, maka nilai Maximum yang dihasilkan secara efektif adalah nilai Arah Bergerak yang dibatasi antara -1 dan +1. Ini memberi kita kontrol penuh atas seberapa cepat paddle dapat bergerak!

Rentang antara -1 hingga +1 mudah untuk dikerjakan, tetapi akan terlalu lambat jika kita menggunakannya langsung sebagai kecepatan paddle.

Di bawah bagian Logika lagi, tempatkan perilaku Multiply Values dan hubungkan ke perilaku Maximum. Untuk nilai pertama, atur nilainya menjadi hasil output dari perilaku Maximum. Untuk nilai kedua, kita dapat mengaturnya menjadi nilai "kecepatan maksimum" yang baik.

Saat ini, atur menjadi 20. Jika Anda berpikir kemudi bergerak terlalu lambat atau terlalu cepat, Anda dapat mengatur angka ini menjadi angka yang lebih tinggi atau lebih rendah.

Perilaku Multiple Values sekarang memberi kita rentang kecepatan yang baik untuk dikerjakan, mulai dari serendah -20 hingga setinggi +20.

Saatnya untuk mengatur kecepatan paddle. Di bawah bagian Fisika, tambahkan perilaku Set Velocity dan hubungkan dengan perilaku Multiply Values. Atur field "x" menjadi 0 dan field "y" menjadi hasil dari output Multiply Values.

Cobalah! Ketika Anda memainkan permainan, paddle harus bergerak sebagaimana Anda menggerakkan joystick ke atas dan ke bawah.

Seperti yang mungkin sudah Anda perhatikan selama pengujian Anda, tidak ada yang menghentikan paddle dari keluar dari layar. Di bagian berikutnya, kita akan menambahkan beberapa batasan untuk menjaga semuanya tetap terlihat.

Bagian 3: Batasan Game

Sebelum kita melanjutkan, mari kita gunakan beberapa pandangan jauh ke depan dan mempertimbangkan desain game yang baik. Paddle pemain tidak akan berada di tengah layar, tetapi lebih dekat ke tepi ketika kita merakit game kita. Ini akan menjadi masalah karena kita memiliki elemen UI (misalnya, joystick) yang akan tumpang tindih dengan elemen game kita (misalnya, paddle).

Alih-alih menggunakan seluruh layar sebagai area yang dapat dimainkan, kita harus menurunkan batasnya agar paddle kita tidak masuk ke bawah joystick di mana jari kita berada, di mana kita tidak bisa melihatnya dengan mudah. Dengan begitu kita tidak akan kehilangan jejak paddle kita di dekat bagian bawah area yang dapat dimainkan. Kita juga dapat menggunakan inset ini sebagai batas keras untuk menjaga objek kita agar tidak keluar dari lapangan yang dapat dimainkan.

Ketik tombol Objek Khusus dan buat sebuah Objek Kosong baru. Ketuk objek kosong baru untuk membuka propertinya.

Biarkan mode fisiknya diatur ke Dinding, dan nonaktifkan Passable. Atur warnanya agar kita bisa melihatnya secara visual, warna abu-abu gelap yang opaque (#1F1F1FFF) sangat cocok. Atur gesekan menjadi 0% dan pantulan menjadi 100%.

Sekarang di tab Transformasi dinding, atur skala Y menjadi 200%, dan pindahkan ke bagian atas layar area. Sekarang tarik agar pas dengan lebar penuh area layar. Anda juga dapat menghidupkan mode snap grid untuk membantu Anda menempatkannya dengan akurat.

Sekarang duplikat dinding dan pindahkan salinannya ke bagian bawah.

Duplikat lagi dan atur skala X menjadi 200% saja. Kemudian tarik tinggi untuk menyesuaikan layar dan tempatkan di sisi kiri layar.

Dan sekali lagi, duplikat dinding vertikal dan pindahkan ke sisi kanan layar. Sekarang Anda harus memiliki bidang permainan yang sepenuhnya tertutup:

Ketika Anda memainkan game sekarang, Anda mungkin segera memperhatikan bahwa Anda dapat bergerak melalui dinding seolah-olah dinding tersebut tidak ada. Ini disebabkan oleh dua alasan; kita telah mengatur paddle untuk menjadi "Passable" dan kita memaksa kecepatan paddle setiap frame. Ini tidak masalah, kita hanya perlu menerapkan cara untuk menghentikan paddle dari masuk ke dalam dinding.

Apa yang akan kita lakukan untuk menerapkan perilaku itu adalah memeriksa posisi pemain terhadap posisi dinding. Jika itu benar, maka pindahkan pemain kembali ke area yang dapat dimainkan.

Untuk membuatnya sedikit lebih mudah bagi kita untuk menerapkan itu, ketuk dinding atas dan ubah titik jangkar Y menjadi 0%. Ini akan mengaitkan posisi dinding ke sangat bagian bawah dirinya sendiri. Anda mungkin perlu membuka kunci bidang jangkar dengan mengetuk ikon Kunci.

Begitu juga dengan dinding bawah, ubah titik jangkar Y dinding bawah menjadi 100% kali ini. Ini akan mengaitkan posisi dinding bawah ke bagian paling atas dirinya sendiri.

Sekarang kita siap untuk menerapkan perilaku pemeriksaan batas. Ketuk paddle dan buka editor perilakunya.

Mulailah dengan menempatkan Get Bounding Box dari bagian Logika. Ini harus diatur untuk menggunakan paddle secara default. Perilaku ini akan memberi kita koordinat bawah/kiri dan ukuran paddle.

Selanjutnya, turunkan Add Values di bawah bagian Logika dan hubungkan ke perilaku Get Bounding Box. Di properti Add Values, atur nilai pertama ke hasil Get Bounding Box "y" dan nilai kedua ke hasil "height".

Hasil dari penambahan ini akan menjadi posisi bagian atas paddle kita. Untuk keterbacaan, Anda bisa mengganti nama perilaku ini menjadi sesuatu yang berguna, seperti "Add Values - Paddle Top", sehingga kita bisa jelas melihat apa yang dilakukannya.

Sekarang kita akan memeriksa apakah paddle bergerak masuk ke salah satu dinding atas atau bawah. Di bawah bagian Transform, tempatkan dua Get Position dan hubungkan mereka berfungsi secara paralel di bawah perilaku Add Values.

Atur perilaku Get Position pertama untuk melacak dinding bawah dan atur Get Position kedua untuk melacak dinding atas. Anda juga dapat menamai perilaku ini agar lebih mudah dibaca. Sekarang Anda harus memiliki sesuatu yang terlihat seperti ini:

Untuk setiap perilaku Get Position, tambahkan dan hubungkan perilaku Subtract Values dari bagian Logika.

Di properti untuk perilaku Subtract yang terhubung ke Get Position untuk dinding bawah, atur nilai pertama ke hasil "position_y" Get Position Dinding Bawah. Kemudian atur nilai kedua ke Get Bounding Box "y".

Sekarang untuk propertinya di Subtract Values lainnya yang terhubung ke Get Position untuk dinding atas, atur nilai pertama ke hasil "position_y" Get Position Dinding Atas. Kemudian atur nilai keduanya ke Add Values - Player Top result.

Pemotongan ini akan memberi tahu kita seberapa jauh kita harus "menggulung" paddle kembali untuk menjaga di bidang permainan. Sekarang kita hanya perlu memeriksa apakah kita perlu atau tidak.

Di bawah bagian logika, turunkan dan hubungkan perilaku If untuk kedua cabang perilaku.

Untuk perilaku If yang terhubung ke cabang Dinding Bawah, atur nilai pertama ke hasil dari perilaku Subtract yang terhubung. Atur kondisi untuk > (\