Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Game Mechanics
Gamedevelopment

Bagaimana Kod Bar HUD Cooldown

by
Difficulty:IntermediateLength:LongLanguages:

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

HUD cooldown bars adalah elemen visual dalam permainan yang tidak harus termasuk dalam dunia game, namun merupakan indikasi bagi pemain suatu periode waktu dimana dia dapat atau tidak dapat melakukan suatu tindakan.

Dalam game role-playing, arena pertarungan online multiplayer (seperti Liga Legends atau DOTA), atau bahkan game strategi real-time, indikator ini sering kali penting bagi pemain.

Dalam tutorial ini, kita akan melihat bagaimana menerapkan bar cooldown tersebut, apa pun bahasa atau alat pengkodean Anda, bergantung pada kode semu dan memecah mekanika yang digunakan. Tutorial tidak mengklaim untuk menunjukkan yang terbaik atau satu-satunya cara untuk menerapkan bar cooldown, namun cukup menganalisis dan menampilkan cara kerja yang praktis dan praktis untuk melakukannya.

Semua demo dibuat dengan versi stabil 2 R168, dan boleh dibuka dan dilaksanakan dalam versi percuma. Semua kod sumber contoh'dikomentari.

Ayo selami.

Mekanisme Dasar Pendinginan

Bar cooldown sebagian besar merupakan umpan balik visual untuk mekanik pendinginan itu sendiri, dan mekanik pendinginan pada dasarnya adalah timer. Pertimbangkan tindakan yang dilakukan oleh watak. Saat tindakan dilakukan, pemasa bermula, dan ketika pemasa ini dikira, karakter tidak dapat melakukan tindakan lagi. Itulah cooldown.

Dari perspektif kod, untuk mencegah tindakan yang dilakukan semasa tempoh cooldown, pembolehubah Boolean ditetapkan kepada benar apabila tindakan itu dilakukan. Apabila cuba melakukan tindakan anda, kod tersebut memeriksa bahawa nilai pembolehubah Boolean palsu, dan tidak membenarkan tindakan dilakukan sebaliknya. Pada penghujung pemasa, pembolehubah Boolean ditetapkan semula kepada palsu, membenarkan tindakan itu dilakukan semula.

Pertimbangkan contoh berikut sebagai ilustrasi konsep ini:

Sebaik sahaja anda mengklik butang Tindakan, watak melakukan tindakan, dan butang Tindakan dinyahdayakan. Semasa penyejukan, pada selang masa yang tetap, masa yang tinggal dalam cooldown dipaparkan. Pada akhir cooldown, watak itu bersedia untuk melaksanakan tindakan itu sekali lagi, jadi butang Tindakan diaktifkan semula.

Mari kita lihat kod pseudo:

Fungsi Butang yang diklik hanya boleh dilaksanakan jika butang didayakan, dan kodanya hanya dilaksanakan sekali selepas klik. Itulah tindakan pengguna yang memulakan pemasa dan menetapkan Cooldown menjadi benar.

Apabila butang diklik, pembolehubah Character.cEndTime adalah masa apabila tempoh cooldown akan selesai; nilai ini ditetapkan berdasarkan nilai dalam objek teks txtTimer, dilihat di sebelah butang Tindakan.

Juga pada ketika ini, nilai cTimer adalah ''set semula'' kepada 0 kerana ia adalah pemasa ''baru'', dan Cooldown ditetapkan kepada benar untuk membenarkan bahagian kedua kod untuk menendang. Akhir sekali, kami melumpuhkan butang. (Kami hanya boleh membiarkannya dibolehkan dan menambah syarat lain kepada kami. Pada butang Butang yang diklik memeriksa sama ada nilai Cooldown palsu sebelum meneruskan, tetapi mematikan butang merasakan maklum balas yang lebih baik.)

Nota: Dalam contoh, dan kod pseudo ini, tidak ada kesilapan menangkap untuk menghalang anda daripada memasukkan sesuatu selain nombor dalam objek teks itu. Memasuki apa-apa lagi akan menetapkan cEndTime secara berkesan menjadi 0, jadi pada dasarnya, tiada kerendahan sama sekali.

Baris 10 kod pseudo di atas dilaksanakan setiap tick; ia memeriksa sama ada nilai Character.Cooldown adalah benar dan, jika ya, tambahkan nilai dt ke nilai semasa Character.cTimer.

dt, pendek untuk 'masa delta'', adalah pembolehubah sistem yang mengembalikan masa yang telah berlalu di antara rendering bingkai sebelumnya dan rendering bingkai semasa. Ini bererti bahawa, bagaimanapun komputer berkuasa, dan apa saja permainan yang dijalankan, kami dapat memastikan bahawa tempoh cooldown berlangsung dalam jumlah masa yang sama. (Jika kita menentukan tempoh cooldown dari segi beberapa kutu atau bingkai yang berlalu, panjang tempoh dalam beberapa saat akan berubah pada mesin yang berbeza.) Nama pemboleh ubah dt ini atau penggunaannya mungkin berbeza mengikut enjin pengekodan anda.

Sekiranya cooldown masih aktif, kami periksa sama ada nilai semasa cTimer lebih besar daripada atau sama dengan cEndTime; jika ya, kita mesti mencapai hujung tempoh cooldown. 3. Mengalihkan jubin pada Y Axis Kami juga mengaktifkan semula butang Tindakan.

Sekiranya cooldown masih aktif, kami memaparkan maklum balas menerangkan ini. Semakin sedikit maklum balas ini sebenarnya adalah ''cooldown bar'' untuk contoh berasaskan teks ini

Jadi itu mekanik asas cooldown berdasarkan pemasa asas. Untuk seluruh artikel ini, mari fokus pada bar cooldown itu sendiri, dan lihat bagaimana untuk melaksanakannya.

Bar Cooldown Asas

Bar sejuk adalah benar-benar hanya satu sprite yang mengubah saiz atau keterlihatan dari semasa ke semasa, semasa tempoh cooldown. Ini adalah mekanik umpan balik bagi pemain untuk memberitahu dia apabila dia akan dapat melakukan tindakan itu lagi.

Pertimbangkan contoh berikut:

Klik di mana sahaja di skrin untuk melakukan tindakan. Perhatikan bahawa bar hijau berubah merah semasa cooldown, dan tumbuh dari lebar 0 kembali ke lebar asalnya. Seperti dalam contoh teks asas, anda boleh menetapkan tempoh penyejukan.

Dalam contoh ini, bar (dinamakan CooldownBar) tidak lebih dari satu sprite berwarna yang diregangkan hingga lebar 100 piksel. Apabila tindakan itu dilakukan, lebarnya ditetapkan kepada 0 piksel. Kemudian, setiap tandakan yang pembolehubah Cooldown adalah benar, lebar ditetapkan berdasarkan nilai semasa cTimer.

Mari kita lihat kod pseudo:

Mekanis cooldown itu sendiri hampir sama dengan yang diterangkan dalam contoh terdahulu, jadi mari fokuskan pada CooldownBar itu sendiri. Objek mempunyai dua bingkai animasi: hijau 32x32px persegi dan merah 32x32px persegi. Ia juga mempunyai pemboleh ubah contoh nombor MaxWidth yang ditetapkan kepada 100 (piksel), lebar maksimum sebenar bar.

Setiap kutipan, jika Cooldown benar, CooldownBar.width ditetapkan kepada pecahan CooldownBar.MaxWidth. Kami menentukan pecahan ini dengan membahagikan lebar maksimum bar dengan masa berakhirnya cooldown, dan kemudian mengalikan hasil ini dengan masa cTimer semasa.

Pada permulaan dan akhir tempoh cooldown, kami juga pastikan untuk menukar bingkai animasi dengan sewajarnya: merah, apabila kesejukan dimulakan, dan kemudian kembali ke hijau apabila penyejukan selesai.

Memperbaiki Reka Bentuk

Kita boleh pergi sedikit lagi ke atas aspek visual. Berikut adalah beberapa pemikiran:

Titik asal CooldownBar ditetapkan di pusatnya, yang memberikannya perasaan pertumbuhan keseluruhan. Jika anda lebih suka, anda boleh menetapkan titik asal ini di sebelah kiri atau tepi kanan objek, untuk memberikan perasaan yang lebih "linear'.

Contoh ini sangat asas; bar itu sendiri hanya terdiri daripada dua bingkai warna yang berbeza untuk menguatkan aspek cooldown. Selagi bar berwarna merah, pengguna memahami tindakan itu tidak dapat dilakukan, kerana warna merah pada umumnya berwarna yang bermaksud ''berhenti''. Tetapi jangan lupa pemain buta warna anda! Pastikan menggunakan warna yang sangat berbeza supaya mereka dapat memberitahu perbezaannya, atau menggunakan kaedah maklum balas visual lain selain perubahan warna.

Anda juga boleh menambah garis besar kepada bar, segiempat tetap tetap yang membolehkan pengguna untuk menganggarkan masa yang lebih lama dalam tempoh cooldown.

Berikut adalah ilustrasi ringkas mengenai perkara sebelumnya:

Ia masih merupakan bar pengisian yang sangat asas, dan terdapat lebih banyak lagi yang dapat anda tambahkan kepada visual. Bar boleh terdiri daripada animasi dan bukan hanya dua bingkai berwarna. Sprit di bawah bar boleh diaplikasikan sedemikian rupa sehingga latar belakangnya kelihatan telus, atau anda juga boleh menambah satu lagi sprite untuk memberikan kesan ''kaca''. Terdapat banyak cara untuk menonjolkan bar cooldown agar sesuai dengan reka bentuk permainan anda yang terbaik.

Butang Kemahiran Cooldown

Dalam sesetengah permainan, pemain mempunyai butang kemahiran yang terdapat pada mereka. Butang ini tidak hanya memaparkan cooldown atau ketersediaan kemahiran; mereka juga merupakan antara muka bagi pengguna untuk melaksanakan kemahiran yang ditunjukkan (selalunya sebagai tambahan kepada beberapa pintasan papan kekunci).

Pertimbangkan contoh ini, di mana mengklik pada salah satu butang akan membuang senjata yang sesuai dan juga memaparkan keran tersendiri:

Seperti yang anda dapat lihat, setiap butang kemahiran akan memaparkan bar hitam 'unfold' dan pemasa semasa tempoh cooldownnya. Bar hitam hanya berwarna hitam yang diletakkan di atas butang kemahiran dengan kelegapan sebanyak 45%, dan pemasa adalah objek teks. Setiap contoh butang kemahiran mempunyai contoh SkillCover dan txtSkillTimer ini sendiri.

Kali ini, pembolehubah Cooldown, sTime dan sEndTime ''dilampirkan'' untuk setiap contoh SkillButton. Juga, titik asal untuk sprite Black SkillCover berada di tepi bawahnya.

Pertimbangkan kod pseudo ini:

Di sini, kami memilih contoh yang betul txtSkillTimer dan SkillCover. (Ini adalah teknik Construct 2; kita menentukan keadaan yang betul mengikut nilai Kemahiran, yang sepadan dengan bingkai animasi SkillButton semasa yang sama ada diklik atau dipilih di dalam Setiap gelung.)

Tidak seperti bar cooldown sebelumnya, SkillCover bermula 'penuh', meliputi ketinggian keseluruhan SkillButton, dan kemudian, semasa cooldown, perlahan-lahan menurun, mendedahkan imej butang itu.

Untuk melakukan ini, kami memberikan SkillCover ketinggian yang sesuai dengan SkillButton untuk bermula, dan kemudian, setiap frame, tolak (SkillButton.Height / SkillButton.sEndTime) * SkillButton.sTime dari ketinggian penuh ini. Ia pada dasarnya adalah formula yang sama yang kita gunakan sebelum ini untuk mengira pecahan tempoh cooldown yang telah berlalu, tetapi sebaliknya.

Sesetengah permainan akan memformatkan masa yang berbeza dan membenarkan pemain untuk mengkonfigurasi paparan yang dia suka. Sebagai contoh, satu minit dan empat puluh saat boleh dipaparkan sebagai 1:40 atau sebagai 100an. Untuk menggunakannya dalam permainan anda sendiri, jalankan Jika cek, sebelum memaparkan teks txtSkillTimer, untuk melihat format format pemain yang dipilih, dan formatkan teks dengan sewajarnya. Sesetengah permainan atau pemain lebih memilih untuk tidak memaparkan masa sebagai teks sama sekali.

Lebih banyak lagi yang boleh anda lakukan dengan SkillCover. Anda boleh bermain dengan kelegapannya untuk mengaburkan butang lebih atau kurang daripada 45%. Memandangkan ia adalah satu sprite yang merangkumi imej yang lain, anda juga boleh bermain dengan mod campurannya-contohnya, untuk menilai imej yang mendasari dan sebenarnya mendedahkan warna-warna yang lebih dan lebih lagi sebagai cooldown pass. Anda juga boleh mempertimbangkan untuk menambah kesan webGL atau shader kepadanya untuk memenuhi seluruh UI atau reka bentuk anda. Bagi bar cooldown, terpulang kepada imaginasi dan arah artistik anda.

Kesimpulan

Kami telah melihat bahawa bar cooldown adalah maklum balas visual untuk mekanik mudah yang menghalang tindakan daripada dilakukan untuk masa yang tertentu.

Anda boleh menggunakan sprite mudah dan meregangkan lebar atau ketinggian mereka dari masa ke masa untuk memberi isyarat kepada pengguna anda bahawa cooldown sedang berlaku. Anda boleh memaparkan masa baki dalam teks biasa, memformatkannya sama ada dalam beberapa minit atau dalam saat. Anda juga boleh menggunakan apa-apa jenis animasi, mod gabungan atau kesan shader yang sesuai dengan arah artistik permainan anda.

Sekiranya anda berfikir sejenak, anda juga boleh menggunakan kaedah ini untuk mengawal kadar kebakaran untuk senjata: selagi pistol berada di cooldown, ia tidak akan menembak peluru lain, walaupun kunci Kebakaran turun; pada masa ini cooldown selesai, peluru lain mungkin dipecat. Tiada bar cooldown diperlukan dalam kes ini.

Anda boleh memuat turun semua contoh dan membukanya dalam Membina 2 edisi percuma R168 atau lebih baru.

Saya harap anda dapati artikel ini menarik, dan saya tidak sabar-sabar untuk melihat reka bentuk bar cooldown anda sendiri.

Rujukan

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.