Cara Membuat Permainan Pong - hyperPong

Nota: Fail projek yang lengkap untuk tutorial ini boleh didapati di akhir artikel ini.

Pengenalan

Dalam tutorial ini, kita akan mencipta permainan yang mirip dengan Pong dari awal. Kita akan membincangkan beberapa ciri dan tingkah laku yang lebih maju dalam hyperPad, jadi tutorial ini menganggap anda mempunyai pengetahuan asas dengan editor hyperPad. Jika anda rasa anda perlu membiasakan diri lebih banyak dengan membuat permainan dari awal, anda boleh menyemak Panduan Lengkap - Membuat Permainan Platform dahulu.

Pong adalah permainan dua pemain yang sederhana yang terdiri daripada hanya dua paddle dan satu bola, dan boleh dianggap sebagai versi digital yang sederhana dari tenis meja. Setiap pemain mengawal satu paddle, keduanya berada di sisi yang berlawanan dari meja. Paddle hanya boleh bergerak ke depan dan ke belakang, menghentam bola ke arah pemain lawan. Jika pemain tidak dapat menyentuh bola, pemain yang lain mendapat satu mata. Pemain pertama yang mencapai 11 mata menang!

Untuk permainan Pong kita, kita akan menyertakan pilihan bermain dalam mod 1 Pemain (Pemain vs. AI), mod 2 Pemain (Pemain vs. Pemain), atau mod 0 Pemain "Tonton" (AI vs. AI).

Bahagian 1: Persediaan Projek dan Menu Utama

Mari kita mulakan dengan mencipta projek baru.

Buka menu Projek dalam hyperPad dan ketik Projek Baru. Berikan nama kepada projek anda dan ketik Seterusnya. Orientasi boleh ditinggalkan sebagai mod lanskap. Untuk tutorial ini, Sokongan Peranti diset kepada iPad 4:3. Pada skrin seterusnya, pilih "Pandangan Burung" dan biarkan yang lain sebagai lalai.

Sekarang kita mempunyai projek baru yang sedia untuk digunakan, mari kita cepat-cepat menyusun menu utama sebelum melompat terus ke permainan itu sendiri. Perkara pertama yang akan kita lakukan adalah menamakan semula adegan kita kepada "Menu Utama".

Ketik butang Menu Projek/Adegan dan ketik butang gear di sebelah "Adegan 1" kita.

Ketik pilihan Tetapan dan namakan semula adegan kita kepada "Menu Utama". Ketik Simpan untuk menyimpan dan menutup tetingkap tetapan.

Seterusnya, untuk tetap tradisional dengan permainan retro awal seperti arcade Pong, kita boleh menjadikan warna latar belakang kita hitam.

Ketik butang Tetapan Adegan dan pilih Latar Belakang. Ketik butang "Ubah Warna" dan set kepad hitam (#000000FF).

Sekarang, mari kita tambah label tajuk ke menu utama kita. Ketik butang Objek Khas dan pilih Label.

Masukkan nama permainan anda dalam medan teks ("hyperPong" telah dimasukkan untuk tutorial ini), set saiz font kepada sesuatu yang besar tetapi tidak terlalu besar. Untuk tajuk "hyperPong", 72 mata adalah saiz yang baik. Ubah warna ke putih (#FFFFFFFF) dan letakkan di tengah menu hampir di bahagian atas.

Sekarang kita mempunyai adegan menu utama untuk dipenuhi dengan butang semua mod permainan kita. Kita akan membiarkan menu itu seperti sedia ada untuk sekarang, dan kita akan menyelesaikannya selepas kita mempunyai permainan yang boleh dimainkan.

Bahagian 2: Menyediakan Adegan Permainan dan Paddle

Ketik butang Menu Projek dan ketik "Tambah Adegan". Namakan ia "Permainan" dan ketik Cipta. Sekarang dalam adegan Permainan, anda seharusnya melihat kanvas kosong. Seperti yang kita lakukan dengan adegan Menu Utama, teruskan dan ketik butang Tetapan Adegan lagi dan ubah latar belakang kepada hitam (#000000FF).

Marilah kita bekerja untuk mencipta paddle pemain kita. Buat objek kosong dengan pergi ke butang Objek Khas dan memilih "Objek Kosong". Ubah warnanya kepada putih (#FFFFFFFF) dan pastikan penggelinciran opasiti diaktifkan sepenuhnya.

Namakan semula objek itu kepada "Pemain-1" dan set mod fiziknya kepada Fizik, dan biarkan Passable diaktifkan.

Alasan mengapa kita akan menyimpan Passable diaktifkan adalah supaya kita mempunyai kawalan yang lebih besar tentang bagaimana bola akan berinteraksi dengan paddle apabila ia menghantarnya. Kita ingin dapat mengawal kelajuan dan arah bola secara manual.

Dalam sifat objek Pemain-1, pergi ke tab Transformasi dan set skala X kepada 25% dan pindahkannya ke kiri medan permainan.

Seterusnya, kita akan menambah beberapa kawalan kepada paddle kita supaya ia boleh bergerak. Dengan paddle yang dipilih, pergi ke pengedit tingkah lakunya dengan kembali ke tab Fizik.

Letakkan tingkah laku Joystick Analog, yang terdapat di bawah bahagian Interaksi (jika anda tidak dapat menemukannya, mungkin anda perlu mengetuk tab Lanjutan). Ini secara automatik akan mencipta joystick untuk anda dalam editor adegan.

Tetapi kita tidak mahu hanya membenarkan paddle bergerak melalui pergerakan joystick. Kita juga mahu AI boleh melakukan pergerakan juga.

Di bawah bahagian Kustom, letakkan sebuah Kotak Kontainer. Ini akan menyimpan arah manakah yang akan bergerak paddle. Dengan itu, sama ada pemain yang mengawal joystick atau AI yang melakukan pengiraan, mereka boleh bergerak dengan mengubah satu nilai ini. Nilai lalai seharusnya diatur kepada 0. Juga, adalah ide yang baik untuk memberikannya nama yang baik supaya mudah untuk digunakan, "Arah Gerakan" nampaknya sesuai.

Dengan Kotak Kontainer yang dipilih, tekan butang "Ubah Medan Input" dan ketik Ya. Ini akan mencipta tingkah laku Set Medan Input untuk kotak kontainer supaya kita boleh mengubah nilainya bila perlu. Sambungkan Set Medan Input kepada Joystick Analog.

Dengan tingkah laku Set Medan Input yang dipilih, seret nilai output dari Joystick Analog ke dalam medan Nilai Baru. Pilih harta "y". Sekarang, kotak kontainer Arah Gerakan akan memantau sejauh mana pemain menggerakkan joystick ke atas atau ke bawah (paksi y).

Sekarang kita memantau sejauh mana pergerakan joystick ke atas atau ke bawah, kita juga perlu meresetnya kepada sifar jika pemain melepaskan joystick. Jika tidak, paddle akan terus bergerak ke arah yang terakhir diingatnya.

Di bawah bahagian Interaksi, tambahkan tingkah laku Sentuh Berhenti dan ketik untuk membuka sifatnya. Secara lalai, ia memantau apabila pemain berhenti menyentuh paddle, tetapi kita mahu memantau apabila pemain berhenti menyentuh joystick.

Ketik harta objek untuk menukarnya, dan pilih joystick. Anda mungkin perlu memilih lapisan UI Global untuk memilihnya. Apabila ia dipilih, ketik butang semak. Tingkah laku seharusnya kini menunjukkan joystick sebagai objek yang dipantau.

Ketik pada Set Medan Input yang kita buat lebih awal dan gandakannya. Dengan Set Medan Input yang berganda ini, sambungkan ke tingkah laku Sentuh Berhenti dan set harta Nilai Baru kepada 0.

Kini pembolehubah kotak kontainer Arah Gerakan kita akan memantau pergerakan ke atas dan ke bawah joystick dan meresetkan dirinya kepada 0 apabila joystick dilepaskan. Itu memberikan kita cara yang sangat baik untuk memberitahu paddle kita bagaimana untuk bergerak, jadi mari kita teruskan dan memberikan paddle kita sedikit gerakan.

Di bawah bahagian Kustom, letakkan tingkah laku Pemasa. Dalam sifatnya, tetapkan selang kepada 0. Pemasa ini akan dilaksanakan secepat mungkin (sekali setiap bingkai), yang memberi kita peluang untuk mengemas kini pergerakan paddle dengan sangat kerap.

Sebelum menetapkan kelajuan paddle, kita ingin memastikan nilai untuk kotak kontainer Arah Gerakan dibatasi dalam julat yang munasabah, sekiranya ia pergi terlalu tinggi atau terlalu rendah. Jika tidak, paddle kita akan bergerak terlalu cepat dalam beberapa kes.

Di bawah bahagian Logik, letakkan tingkah laku Minimum dan maksimum. Sambungkan tingkah laku Minimum kepada pemasa, dan tingkah laku maksimum kepada Minimum. Anda seharusnya mempunyai sesuatu yang kelihatan seperti ini:

Dalam sifat tingkah laku Minimum, set nilai pertama kepada nilai output tingkah laku Arah Gerakan, dan set nilai kedua kepada 1.

Tingkah laku Minimum akan output nombor terkecil yang ia terima. Jadi, jika nilai Arah Gerakan lebih besar dari 1, ia akan output 1. Jika tidak, ia hanya akan output nilai untuk Arah Gerakan.

Dalam sifat tingkah laku maksimum, set nilai pertama kepada hasil dari Minimum, dan set nilai kedua kepada -1.

Tingkah laku maksimum akan output nombor terbesar yang diberikan. Jadi, jika nilai Arah Gerakan lebih rendah dari -1, ia akan output -1. Jika tidak, ia akan output nilai Minimum (yang mana lebih rendah: 1 atau Arah Gerakan).

Semua ini bermakna, bahawa nilai hasil dari Maksimum adalah secara efektif nilai Arah Gerakan dibatasi antara -1 dan +1. Ini memberikan kita kawalan penuh terhadap seberapa cepat paddle boleh bergerak!

Julat dari -1 hingga +1 mudah untuk digunakan, tetapi akan terlalu perlahan jika kita terus menggunakannya sebagai kelajuan paddle.

Di bawah bahagian Logik sekali lagi, letakkan tingkah laku Kalikan Nilai dan sambungkan kepada tingkah laku Maksimum. Untuk nilai pertama, set kepada output hasil dari tingkah laku Maksimum. Untuk nilai kedua, kita boleh menetapkannya kepada nilai "kelajuan maks" yang baik.

Untuk sekarang, tetapkan kepada 20. Jika anda berfikir kemudian bahawa paddle bergerak terlalu perlahan atau terlalu cepat, anda boleh hanya menetapkan nombor ini kepada nilai yang lebih tinggi atau lebih rendah.

Tingkah laku Kalikan Nilai kini memberikan kita julat kelajuan yang baik untuk bekerja, dari serendah -20 hingga setinggi +20.

Sekarang adalah masa yang baik untuk menetapkan kelajuan paddle. Di bawah bahagian Fizik, tambahkan tingkah laku Tetapkan Kelajuan dan sambungkan ke tingkah laku Kalikan Nilai. Set medan "x" kepada 0 dan medan "y" kepada hasil output dari tingkah laku Kalikan Nilai.

Jom cubanya! Apabila anda bermain permainan, paddle harus bergerak semasa anda menggerakkan joystick ke atas dan ke bawah.

Seperti yang mungkin anda perhatikan semasa ujian anda, tiada apa yang menghalang paddle dari meninggalkan skrin. Dalam bahagian seterusnya, kita akan menambah beberapa sempadan untuk memastikan semuanya dalam pandangan.

Bahagian 3: Sempadan Permainan

Sebelum kita meneruskan, mari kita gunakan sedikit pandangan dan pertimbangkan reka bentuk permainan yang baik. Paddle pemain tidak akan berada di tengah skrin, tetapi lebih dekat ke tepi semasa kita menyusun permainan kita. Ini akan menjadi isu kerana kita mempunyai elemen UI (iaitu joystick) yang akan bertindih dengan elemen permainan kita (iaitu paddle).

Daripada menggunakan keseluruhan skrin sebagai kawasan bermain, kita harus menyematkan sempadan supaya paddle kita tidak pergi di bawah joystick di mana jari kita berada, di mana kita tidak dapat melihatnya dengan mudah. Dengan cara ini kita tidak akan kehilangan jejak paddle kita berhampiran bahagian bawah kawasan permainan. Kita juga boleh menggunakan inset ini sebagai sempadan tegar untuk memastikan objek kita tidak meninggalkan bidang permainan yang boleh dimainkan.

Ketik butang Objek Khas dan buat Objek Kosong baru. Ketik objek kosong baru untuk membuka sifatnya.

Jaga mod fiziknya diset kepada Dinding, dan matikan Passable. Set warnanya supaya kami dapat melihatnya secara visual, kelabu gelap legap (#1F1F1FFF) sesuai dengan baik. Set geseran kepada 0% dan pantulan kepada 100%.

Sekarang dalam tab Transformasi dinding, set skala Y kepada 200%, dan pindahkan ke bahagian atas kawasan skrin. Sekarang, regangkan sehingga ia memenuhi lebar penuh kawasan skrin. Anda juga boleh menghidupkan mod snap grid untuk membantu anda meletakkannya dengan tepat.

Sekarang gandakan dinding dan pindahkan salinan ke bahagian bawah.

Gandakan sekali lagi dan set skala X kepada 200% pula. Kemudian regangkan ketinggian untuk memenuhi skrin dan letakkan di sebelah kiri skrin.

Dan sekali lagi, gandakan dinding menegak dan pindahkan ia ke sebelah kanan skrin. Anda sepatutnya kini mempunyai kawasan permainan yang sepenuhnya ditutup:

Apabila anda bermain permainan sekarang, anda mungkin segera perhatikan bahawa anda boleh bergerak melalui dinding seolah-olah mereka tidak ada. Ini disebabkan oleh dua sebab; kami telah menetapkan paddle supaya menjadi "Passable" dan kami menghendaki kelajuan paddle setiap bingkai. Ini baiklah, kita hanya perlu melaksanakan cara untuk menghalang paddle daripada bergerak ke dalam dinding.

Apa yang akan kita lakukan untuk melaksanakan tingkah laku itu adalah memeriksa kedudukan pemain berbanding kedudukan dinding. Jika itu benar, maka gerakkan pemain kembali ke dalam kawasan yang boleh dimainkan.

Untuk memudahkan kita melaksanakan itu, ketik dinding atas dan ubah titik jangkar Y ke 0%. Ini akan mengikat kedudukan dinding ke bahagian paling bawah dirinya. Anda mungkin perlu membuka kunci bidang jangkar dengan mengetuk ikon Kunci.

Begitu juga dengan dinding bawah, ubah titik jangkar Y dinding bawah kepada 100% kali ini. Ini akan mengikat kedudukan dinding bawah ke bahagian paling atas dirinya.

Sekarang kita bersedia untuk melaksanakan tingkah laku pemeriksaan batas kita. Ketik pada paddle dan buka pengedit tingkah lakunya.

Mulakan dengan meletakkan tingkah laku Dapatkan Kotak Penghadatan dari bahagian Logik. Ia seharusnya diset untuk menggunakan paddle secara lalai. Tingkah laku ini akan memberikan kita koordinat bawah/kiri dan saiz paddle.

Seterusnya, turun dan letakkan dua tingkah laku Dapatkan Kedudukan dari bahagian Transformasi dan sambungkan ke tingkah laku Dapatkan Kotak Penghadatan dalam selari.

Set tingkah laku Dapatkan Kedudukan pertama untuk mengesan dinding bawah dan set yang kedua untuk mengesan dinding atas. Anda juga boleh menamakan semula tingkah laku ini untuk kebolehbacaan. Anda seharusnya sekarang mempunyai sesuatu yang serupa dengan ini:

Untuk setiap tingkah laku Dapatkan Kedudukan, turunkan dan sambungkan satu tingkah laku Kurangkan Nilai dari bahagian Logik.

Dalam sifat untuk Kurangkan Nilai yang disambungkan ke Dapatkan Kedudukan untuk dinding bawah, set nilai pertama kepada hasil "position_y" dari Dapatkan Kedudukan Dinding Bawah. Kemudian set nilai kedua kepada Dapatkan Kotak Penghadatan "y".

Sekarang untuk sifat dalam Kurangkan Nilai lain yang disambungkan ke Dapatkan Kedudukan untuk dinding atas, set nilai pertama kepada hasil Dapatkan Kedudukan Dinding Atas "position_y". Kemudian set nilai kedua kepada hasil Tambah Nilai - Paddle Atas.

Tingkah laku tolak ini akan memberitahu kita sejauh mana kita perlu "tolak" paddle kembali untuk mengekalkannya dalam bidang bermain. Sekarang kita hanya perlu memeriksa sama ada kita perlu atau tidak.

Di bawah bahagian logik, letakkan dan sambungkan tingkah laku Jika untuk kedua-dua cabang tingkah laku.

Untuk tingkah laku Jika yang disambungkan kepada cabang Dinding Bawah, tetapkan nilai pertama kepada hasil dari tingkah laku Kurangkan Nilai yang disambungkan. Tetapkan syarat kepada > ("Lebih Besar Daripada") dan nilai kedua kepada 0.

Untuk tingkah laku Jika yang disambungkan kepada cabang Dinding Atas, tetapkan nilai pertama kepada hasil dari tingkah laku Kurangkan Nilai yang disambungkan. Tetapkan syarat kepada < ("Lebih Kecil Daripada") dan nilai kedua kepada 0.

Kedua-dua kenyataan Jika ini akan terus melaksanakan jika paddle melebihi setiap dinding masing-masing.

Jika paddle melebihi dinding, kita mahu secara paksa menghentikan paddle daripada bergerak lebih jauh dengan menyetel kelajuan paddle kepada 0, dan kemudian push ke dalam bidang permainan.

Di bawah bahagian Fizik, letakkan dan sambungkan satu tingkah laku Tetapkan Kelajuan untuk setiap cabang. Pada kedua-duanya, set nilai Kelajuan X/Y mereka kepada 0.

Sekarang kita boleh push paddle kembali ke dalam permainan. Di bawah bahagian Transformasi, letakkan dan sambungkan satu tingkah laku Gerakkan Dengan untuk setiap cabang.

Dalam setiap tingkah laku Gerakkan Dengan, biarkan nilai Gerakkan Dengan X pada 0 dan set nilai Gerakkan Dengan Y kepada hasil dari Kurangkan Nilai dalam cabang masing-masing. Kemudian set masa durasi kepada 0 saat (segera).

Seluruh seksyen ini, apabila dilaksanakan, kini akan memeriksa sama ada paddle berada di dalam dinding, sejauh mana ia berada di dalam dinding, dan push keluar jika perlu. Sekarang kita hanya perlu melaksanakan rantaian tingkah laku ini apabila paddle bergerak.

Untuk kesederhanaan, di bahagian paling atas rantaian tingkah laku ini, tambahkan satu Rantaian Tingkah Laku dari bahagian Kustom dan sambungkan di atas Dapatkan Kotak Penghadatan. Anda boleh menamakan ia kepada sesuatu yang berguna, seperti "Periksa Had".

Nota: Tingkah Laku "Rantaian Tingkah Laku" tidak melakukan apa-apa sendiri, dan hanya digunakan di sini untuk menandakan "titik permulaan" untuk memeriksa sama ada paddle di luar had.

Seterusnya, di bawah bahagian Kustom letakkan satu tingkah laku Laksanakan Tingkah Laku. Dalam sifatnya, ketik pada medan "Pilih Tingkah Laku" dan pilih tingkah laku "Periksa Had" yang baru kita buat. Sekarang, gerakkan tingkah laku Laksanakan Tingkah Laku di bawah di mana kita asalnya menetapkan kelajuan paddle untuk pergerakan paddle. Sambungkan tingkah laku Laksanakan Tingkah Laku kepada tingkah laku Tetapkan Kelajuan dari rantaian pergerakan asal paddle.

Kini, setiap kali paddle mengemas kini kelajuan pergerakannya, tingkah laku Laksanakan Tingkah Laku akan "melompat" melaksanakan ke rantai tingkah laku Periksa Had yang baru kita buat, di mana ia akan menyemak jika paddle telah bergerak keluar dari had!

Uji ia dan lihat ia beraksi!

Satu perkara terakhir yang perlu dilakukan kini sebelum meneruskan, mari kita gerakkan paddle ke sebelah kiri medan.

Sekarang kita mempunyai sedikit ruang, mari kita bina bola!

Bahagian 4: Membuat Bola

Kembali ke editor adegan, buat objek kosong. Set mod fiziknya kepada Fizik dan matikan passable, supaya bola boleh bergerak dan bertembung secara fizikal dengan dinding sempadan. Set geseran kepada 0% dan pantulan kepada 100%. Set warnanya kepada putih (#FFFFFFFF). Untuk kesederhanaan, anda juga boleh menamakan objek ini kepada "Bola".

Dalam tab transformasi, set skala kepada X=25% dan Y=25%, dan kedudukan kepada X=50% dan Y=50%.

Seterusnya, buka pengedit tingkah laku untuk bola dan kita akan memberikannya sedikit pergerakan. Di bawah bahagian Kustom, turunkan tingkah laku Tunggu dan setkan kepada 3 saat.

Kemudian, letakkan tingkah laku Nombor Rawak dari bahagian Logik dan sambung ke tingkah laku Tunggu. Untuk nilai pertama masukkan -1.0 dan untuk nilai kedua masukkan 1.0. Pastikan untuk memasukkan ".0", supaya ia akan secara rawak memilih nombor antara -1.0 dan 1.0 termasuk tempat perpuluhan, jika tidak ia hanya akan memilih integer padu. Ini akan berfungsi sebagai