Bagaimana Membuat Kode HUD Cooldown Bar

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

HUD cooldown bar merupakan elemen visual dalam permainan yang tidak selalu dimiliki oleh dunia game, tetapi menjadi indikasi periode waktu yang dapat atau tidak dapat dilakukan oleh pemain.

Dalam aturan game, arena pertempuran multiplayer secara online (seperti League of Legends atau DOTA), atau bahkan game real-time strategy, indikator ini penting untuk pemain.

Dalam tutorial ini, kita akan melihat bagaimana menerapkan cooldown bar, apapun bahasa coding Anda atau alat yang menguntungkan dengan pseudo-code dan mematahkan mesin yang digunakan. Tutorial ini tidak diklaim menjadi satu-satunya cara dalam menerapkan cooldown bar, tetapi hanya menganalisa dan menampilkan kerja serta cara praktis untuk melakukannya.

Semua demo dibuat dengan Construct 2 R168 stable version, dan dapat dibuka dan dilaksanakan dalam versi gratis nya. Semua the examples' source code dapat dikomen.

Mari kita pelajari.

Dasar Mekanik Cooldown

Sebuah cooldown bar sebagian besar merupakan hasil visual dari mekanik cooldown itu sendiri, dan mekanik cooldown pada dasarnya adalah alat pengukur waktu (timer). Mempertimbangkan tindakan yang menjadikan karakter. Saat tindakan dilakukan, timer akan memulai hitungan, dan saat timer ini menghitung mundur, karakter tidak dapat melakukan aksi lagi. Itulah yang dimaksud cooldown.

Dari perspektif kode, untuk mencegah aksi yang dilakukan selama periode cooldown, variabel Boolean diatur true (benar) ketika aksi dilakukan. Ketika mencoba untuk melakukan tindakan aksi, kode memeriksa nilai variabel Boolean adalah false, dan tidak memungkinkan aksi akan dilakukan dalam keadaan lain. Pada akhir timer, variabel Boolean diatur kembali ke false, yang memungkinkan aksi yang dapat dilakukan lagi.

Perhatikan contoh berikut sebagai ilustrasi dari konsep ini:

Setelah Anda mengklik tombol Action, karakter melakukan aksi, dan tombol Action dinonaktifkan. Selama cooldown, sisa waktu cooldown ditampilkan secara berkala. Pada akhir cooldown, karakter siap untuk melakukan aksi lagi, sehingga tombol Action diaktifkan kembali.

Mari kita lihat pseudo-code:

//An object Character has a boolean variable "Cooldown", a numeric variable "cTimer" and another numeric variable "cEndTime"

On clicked Button
    txtHistory.text = txtHistory.text & newline & "The character performs an action"
    Character.cTimer = 0
    Character.cEndTime = txtTimer.text //The text object "Cooldown duration"
    Character.Cooldown = True
    Button.Enabled = False
    
If Character.Cooldown = True
    Character.cTimer = Character.cTimer + dt
    If Character.cTimer >= Character.cEndTime
        txtHistory.text = txtHistory.text & newline & "The character is ready to perform an action"
        Character.cTimer = -1
        Character.Cooldown = False
        Button.Enabled = True
    Else & Every 0.5 seconds
        txtHistory.text = txtHistory.text & newline & "The action is on cooldown. " & Character.cEndTime - Character.cTimer & " seconds of cooldown remaining."

    

Tombol Fungsi On clicked, hanya dapat dijalankan jika tombol diaktifkan, dan kode hanya dieksekusi sekali setelah klik. Itu adalah aksi pengguna yang dimulai pada timer dan menegatur Cooldown menjadi true.

Ketika tombol nyala, variabel Character.cEndTime adalah waktu ketika periode cooldown akan selesai; nilai ini diatur berdasarkan nilai dalam objek teks txtTimer, terlihat di sebelah tombol Action.

Pada saat yang sama, nilai cTimer dilakukan pengaturan ulang dengan "reset" dan mengisikan 0 karena merupakan penghitungan waktu "baru", dan Cooldown diatur ke true untuk memungkinkan bagian kedua dari kode dimulai. Setelah selesai dinonaktifkan tombolnya. (Kami hanya bisa mengaktifkan dan menambahkan kondisi lain Pada fungsi Tombol on clicked memeriksa apakah nilai Cooldown adalah false sebelum melanjutkannya, tapi menonaktifkan tombol merupakan tindakan yang lebih baik)

Catatan: Dalam contoh ini, pseudo-code, tidak ada kesalahan yang menarik untuk mencegah Anda memasukkan sesuatu selain nomor dalam objek teks. Memasukan hal lain secara efektif akan mengatur cEndTime menjadi 0, sehingga pada dasarnya, tidak ada cooldown sama sekali.

Baris 10 di atas pseudo-kode dijalankan setiap tick; itu memeriksa apakah nilai Character.Cooldown adalah true dan, jika demikian, menambah nilai dt dengan nilai saat ini dari Character.cTimer.

dt, singkatan dari " delta waktu ", yang meruupakan variabel sistem yang mengembalikan waktu yang telah berlalu antara render frame sebelumnya dan render frame yang sedang berjalan. Ini berarti bahwa, komputer pemain yang kuat, dan apapun framerate permainan yang berjalan, kita dapat memastikan bahwa periode cooldown berlangsung dengan jumlah waktu yang sama. (Jika kita mendefinisikan periode cooldown dalam jumlah crntang atau frame yang berlalu, panjang periode dalam hitungan detik akan bervariasi pada mesin yang berbeda.) Nama variabel dt atau penggunaannya mungkin berbeda sesuai dengan mesin coding Anda.

Jika cooldown masih aktif, yang harus kita lakukan adalah mengecek apakan nilai cTimer saat ini lebih besar atau sama dengan cEndTimer; jika demikian, kita seharusnya telah mencapai akhir dari periode cooldown. Kami menampilkan sedikit tindakan, dan mengatur Character.Cooldown ke false sehingga kode tidak akan berjalan lagi sampai pengguna mengklik tombol Action. Kami juga mengaktifkan kembali tombol Action.

Jika cooldown masih aktif, sebagai gantinya kami menampilkan tindakan penjelasan. Ini sedikit spesifik pada tindakan kami sebenarnya misalnya berbasis teks ini "cooldown bar".

Jadi dasar mekanik cooldown berdasarkan timer dasar. Untuk sisa artikel ini, mari kita fokus pada cooldown bars itu sendiri, dan melihat bagaimana cara menerapkannya.

Dasar Cooldown Bar

Cooldown bar benar-benar hanya sprite yang berubah ukuran atau visibilitas dari waktu ke waktu, selama periode cooldown. Ini adalah feedback mekanik bagi pemain untuk membiarkan dia tahu kapan dia mampu melakukan aksi lagi.

Perhatikan contoh berikut:

Klik di mana saja pada layar untuk melakukan tindakan. Perhatikan bar hijau akan menyala merah selama cooldown, dan berubah dari lebar 0 kembali ke lebar aslinya. Seperti pada contoh tekstual dasar, Anda dapat mengatur durasi cooldown.

Dalam contoh ini, bar (bernama Cooldown Bar) adalah tidak lebih dari sebuah sprite berwarna yang membentang dengan lebar 100 piksel. Ketika tindakan dilakukan, lebarnya diatur ke 0 piksel. Kemudian, variabel Cooldown dicentang true, lebar diatur berdasarkan nilai saat ini dari cTimer.

Mari kita lihat pseudo-code:

//Using the same "Character" object as in the basic example, this time the object is visible on screen

On any mouse click & Character.Cooldown = False
    Character.cTimer = 0
    Character.cEndTime = txtEndTimer.text
    Character.Cooldown = True
    CooldownBar.Width = 0
    CooldownBar.AnimationFrame = 1
    
If Character.Cooldown = True
    Character.cTimer = Character.cTimer + dt
    CooldownBar.Width = (CooldownBar.MaxWidth / Character.cEndTime) * Character.cTimer
    
    If Character.cTimer >= Character.cEndTime
        Character.cTimer = -1
        Character.Cooldown = False
        CooldownBar.Width = CooldownBar.MaxWidth
        CooldownBar.AnimationFrame = 0

The cooldown mekanik itu sendiri mirip dengan yang telah dijelaskan dalam contoh sebelumnya, jadi mari kita fokus pada CooldownBar itu sendiri. Objek memiliki dua frame animasi: a 32x32px persegi hijau dan 32x32px persegi merah. Ini juga memiliki MaxWidth, contoh variabel numerik diatur 100 (piksel), lebar maksimum aktual dari bar.

Masing-masing centang, jika Cooldown adalah true, CooldownBar.width diatur untuk sebagian kecil menjadi fraksi CooldownBar.MaxWidth. Kita menentukan fraksi ini dengan membagi lebar maksimum bar dengan waktu berakhir cooldown, dan kemudian mengalikan hasil ini dengan cTimersaat ini.

Pada awal dan akhir periode cooldown, pastikan juga untuk mengubah frame animasi yang sesuai: merah, saat cooldown dimulai, dan kembali ke hijau saat cooldown berjalan.

Meningkatkan Desain

Kita dapat mempelajari lebih jauh pada aspek visual. Berikut beberapa hal yang dapat dipelajari:

Titik asal CooldownBar diatur di tengah, yang memberikan rasa pertumbuhan secara keseluruhan. Jika Anda suka, Anda bisa mengatur titik asal ini di kiri atau tepi kanan objek, untuk memberikan perasaan lebih "linear".

Contoh ini sangat dasar; bar itu sendiri terdiri dari dua frame warna yang berbeda untuk memperkuat aspek cooldown. Selama bar berwarna merah, pengguna memahami bahwa tidak dapat melakukan tindakan, seperti warna merah umumnya pada umumnya yang menandakan "stop". Tapi jangan lupa pada pemain buta warna! Pastikan menggunakan warna yang benar-benar berbeda sehingga mereka bisa membedakan, atau menggunakan metode lain pada hasil visual selain perubahan warna.

Anda juga bisa menambahkan garis ke bar, persegi panjang yang akan memungkinkan pengguna untuk lebih dapat memperkirakan waktu yang tersisa pada periode cooldown.

Berikut adalah ilustrasi cepat dari poin sebelumnya:

Hal ini masih merupakan pengisian ulang bar yang sangat dasar, dan Anda bahkan bisa menambah secara visual. Bar bisa terdiri dari animasi bukan hanya dua frame berwarna. Sprite bawah bar dapat berupalatar belakang yang transparan, atau Anda bisa menambahkan sprite lain di atasnya untuk memberikan kesan "kaca". Ada banyak cara untuk menyesuaikan dgn mode bar cooldown yang sesuai dengan desain terbaik Anda.

Keterampilan Tombol Cooldown

Dalam beberapa permainan, pemain memiliki ketrampilan tombol sesuai yang mereka miliki. Tombol-tombol ini tidak hanya menampilkan cooldown atau keterampilan yang ada; mereka juga menghubungkan antar pengguna untuk menunjukkan keterampilannya (sering ditambah beberapa keyboard shortcuts).

Pertimbangkan contoh ini, di mana dengan mengklik salah satu tombol akan melemparkan senjata yang tepat dan juga menampilkan cooldown tersisa :

Seperti yang Anda lihat, setiap tombol keterampilan akan menampilkan "unfilling" bar hitam dan timer selama periode cooldown nya. Bar hitam adalah sprite berwarna hitam yang ditempatkan di atas tombol keterampilan dengan opacity 45%, dan timer berupa objek teks. Setiap contoh tombol ketrampilan memiliki instansi sendiri dari objek SkillCover dan txtSkillTimer.

Kali ini, variabel Cooldown, sTime dan sEndTime "melekat" untuk setiap contoh SkillButton. Titik asal untuk sprite hitam SkillCover adalah di tepi bawah nya.

Pertimbangkan pseudo-code ini:

//Object "SkillButton" with variables "Cooldown" (boolean), "sTime" (numeric), "sEndTime" (numeric), and a specific animation frame to know which instance is being clicked/selected.
//Object "SkillCover" with a variable "Skill" set accordingly to the animation frame of the SkillButton they are related to.
//Object "txtSkillTimer" with a variable "Skill" for the same purpose as above.

On SkillButton clicked & SkillButton.Cooldown = False
    SkillButton.sTime = 0
    SkillButton.Cooldown = True
    Create Proj & ProjImage objects
    ProjImage.AnimationFrame = SkillButton.AnimationFrame //To either throw a dagger or a ninja star
    
    txtSkillTimer.Skill = SkillButton.AnimationFrame
    &
    SkillCover.Skill = SkillButton.AnimationFrame
        Set txtSkillTimer's position to the bottom of SkillButton
        Set SkillCover's position to the bottom of SkillButton
        Set txtSkillTimer in Front of SkillButton
        Set SkillCover behind txtSkillTimer //Still in front of SkillButton
        txtSkillTimer.Visible = True
        SkillCover.Visible = True
        SkillCover.Height = SkillButton.Height

For each SkillButton & SkillButton.Cooldown = True
    SkillButton.sTime = SkillButton.sTime + dt
    
    txtSkillTimer.Skill = SkillButton.AnimationFrame
    &
    SkillCover.Skill = SkillButton.AnimationFrame
        txtSkillTimer.text = SkillButton.sEndTime - SkillButton.sTime
        SkillCover.height = SkillButton.Height - ((SkillButton.Height / SkillButton.sEndTime) * SkillButton.sTime)
    
        If SkillButton.sTime >= SkillButton.sEndTime
            SkillButton.sTime = -1
            SkillButton.Cooldown = False
                    
            txtSkillTimer.Skill = SkillButton.AnimationFrame
            &
            SkillCover.Skill = SkillButton.AnimationFrame
                txtSkillTimer.Visible = False
                SkillCover.Visible = False

        

Di sini, kita pilih contoh txtSkillTimer dan SkillCover. (Ini adalah Construct 2 technique, kita menentukan contoh yang benar sesuai dengan nilai Skill, yang harus sesuai dengan frame animasi dari SkillButton yang diklik atau dipilih Untuk setiap loop.)

Tidak seperti cooldown bar kami sebelumnya, SkillCover dimulai dengan "full", meliputi seluruh ketinggian SkillButton, dan kemudian, selama cooldown, perlahan-lahan menurun, mengungkapkan kesan dari tombol.

Untuk melakukan hal ini, kami memberikan SkillCover dengan ketinggian yang cocok dengan SkillButton untuk dimulai, dan kemudian, setiap frame dikurangi (SkillButton.Height / SkillButton.sEndTime) * SkillButton.sTime dari ketinggian full. Rumus tersebut merupakan rumus yang sama dengan yang kita digunakan sebelum menghitung fraksi periode cooldown yang tadi, tetapi dibalik.

Beberapa game akan memiliki format waktu yang berbeda dan memungkinkan pemain untuk mengkonfigurasi tampilan yang lebih dia suka. Misalnya, satu menit empat puluh detik dapat ditampilkan seperti 1:40 atau sebagai 100s. Untuk menerapkan ini dalam permainan Anda lakukan , jalankan sebuah If check, sebelum menampilkan teks txtSkillTimer, untuk melihat format apa yang telah dipilih pemain. Beberapa game atau pemain bahkan memilih untuk tidak menampilkan waktu sama sekali.

Ada lagi yang dapat Anda lakukan dengan SkillCover. Anda bisa bermain dengan opacity untuk menyamarkan tombol lebih atau kurang dari 45%. Karena itu merupakan sprite yang mencakup gambar lain, Anda juga bisa bermain dengan blend mode—-misalnya, untuk desaturate gambar yang mendasarinya dan menyatakan warna yang lebih sebagai cooldown. Anda bahkan dapat mempertimbangkan menambahkan WebGL atau shader efek agar sesuai dengan UI atau desain yang kamu inginkan. Adapun cooldown bar, terserah imajinasi dan arah artistik Anda.

Kesimpulan

Kita telah melihat bahwa cooldown bar adalah hasil visual dari mekanik sederhana yang mencegah tindakan yang dapat dilakukan untuk jumlah waktu tertentu.

Anda dapat menggunakan sprite sederhana dan meregangkan lebar atau tinggi dari waktu ke waktu selama cooldown berjalan. Anda dapat menampilkan waktu yang tersisa dalam teks biasa, format itu baik dalam menit atau detik. Anda bahkan dapat menerapkan segala jenis animasi, mode campuran atau efek shader yang sesuai arahan artistik dari permainan Anda.

Jika Anda berpikir tentang hal itu, yang kedua Anda juga dapat menggunakan metode ini untuk mengontrol laju api untuk senjata, selama pistol ada pada cooldown, ini tidak akan menembak proyektil lain, jika kunci Api turun; pada saat cooldown selesai, proyektil lain mungkin akan tertembak. Tidak ada cooldown bar diperlukan dalam hal ini.

Anda dapat men-download semua contoh dan membukanya di Construct 2 free edition R168 atau versi sebelumnya.

Saya harap Anda tertarik dengan artikel ini, dan saya berharap untuk melihat desain Anda sendiri pada cooldown bar Anda.

Referensi

Pertempuran Backgrounds dari Battle Backgrounds from Trent Gamblin - http://opengameart.org/content/12-battle-backgrounds-240x110
Character sprites by Antifareas - http://opengameart.org/content/antifareas-rpg-sprite-set-1-enlarged-w-transparent-background-fixed
Pixel Art Icons for RPGs from 7SoulDesign - http://7soul1.deviantart.com/art/420-Pixel-Art-Icons-for-RPG-129892453
Health or mana UI bars by Mumu - http://opengameart.org/content/health-or-mana-ui-bars
Enemy Health bars by Paul Wortmann - http://opengameart.org/content/enemy-health-bars
[LPC]LifeBars! by Nushio - http://opengameart.org/content/lpc-lifebars