Advertisement
  1. Game Development
  2. Game Mechanics
Gamedevelopment

Як стварыць HUD індыкатар перазарадкi

by
Difficulty:IntermediateLength:LongLanguages:

Belarusian (беларуская мова) translation by Alex Grigorovich (you can also view the original English article)

Індыкатары перазарадкі HUD - гэта візуальныя элементы ў гульні, якія не абавязкова ставяцца да міру гульні, але з'яўляюцца для гульца індыкатарам таго перыяду часу, на працягу якога ён можа ці не можа выканаць тое ці іншае дзеянне.

У ролевых гульнях, шматкарыстальніцкіх анлайн арэнах (такіх як League of Legends або DOTA) або нават у стратэгіях ў рэальным часе гэтыя паказчыкі часта маюць вырашальнае значэнне для гульца.

У гэтым уроку мы разгледзім, як ствараць гэтыя індыкатары перазарадкі, незалежна ад мовы праграмавання або інструмента кадавання, абапіраючыся на псевдокод і руйнуючы выкарыстоўваную механіку. Навучальны дапаможнік не прэтэндуе на тое, каб паказаць лепшы або адзіны спосаб рэалізаваць індыкатары перазарадкі, мы проста аналізуем і адлюстроўвае працоўны, практычны спосаб як гэта зрабіць.

Усе дэманстрацыйныя матэрыялы былі зроблены з дапамогай стабільнай версіяй Construct 2 R168 і могуць быць адкрыты і запушчаны ў бясплатнай версіі. Увесь зыходны код прыкладаў змяшчае каментары. Увесь зыходны код прыкладаў змяшчае каментары.

Давай паглыбімся.

Асновы механікі індыкатара перазарадкі

Індыкатар перазарадкі у аснове ўяўляе сабой візуальную адлюстраванне механізму індыкатара, а механіка індыкатара перазарадкі - у асноўным ўяўляе сабой таймер. Разгледзім дзеянне, якое выконвае персанаж. У той момант, калі дзеянне выконваецца, запускаецца таймер, і пакуль гэты таймер працуе, персанаж не можа выканаць дзеянне зноў. Гэта і ёсць індыкатар перазарадкі.

З праграмнага пункта гледжання, каб прадухіліць дзеянне, выкананае ў перыяд перазарадкі, лагічная пераменная набывае значэнне true, калі дзеянне выконваецца. Пры спробе выканаць сваё дзеянне код правярае, ці сапраўды значэнне лагічнай зменнай ілжыва і не дазваляе выконваць дзеянне. У канцы працы таймера лагічная пераменная вяртаецца да значэння false, дазваляючы выканаць дзеянне зноў.

Разгледзім наступны прыклад у якасці ілюстрацыі гэтага паняцця:

Пасля націску кнопкі Action герой выконвае дзеянне, а кнопка Action адключаная. Падчас перазарадкі праз роўныя прамежкі часу адлюстроўваецца час, што застаўся да час аднаўлення. Па завяршэнні перазарадкі персанаж зноў гатовы выканаць дзеянне, таму кнопка Action зноў актыўная.

Давайце паглядзім на псевдокод:

Функцыя On clicked Button можа быць выканана толькі ў тым выпадку, калі кнопка ўключана, і яе код выконваецца толькі адзін раз пасля націску. Гэта дзеянне карыстальніка запускае таймер, і ўсталёўвае значэнне Cooldown у значэнне true.

Калі кнопка націснутая, пераменная Character.cEndTime будзе пазначаць час заканчэння перыяду аднаўлення; гэта значэнне ўсталёўваецца на аснове значэння ў тэкставым аб'екце txtTimer, побач з кнопкай Action.

Таксама ў гэты момант значэнне cTimer «скідаецца» на 0, так як ён становіцца «новым» таймерам, а для рэжыму Cooldown усталёўваецца значэнне true, каб дазволіць выкананне другой частцы кода. Нарэшце, мы адключаем кнопку. (Мы маглі б проста пакінуць яе актыўнай і дадаць яшчэ адна ўмова да нашай функцыі On clicked Button, правяраючы, ці з'яўляецца значэнне Cooldown false да таго, як працягнуць, але адключэнне кнопкі будзе лепшай зваротнай сувяззю).

Заўвага: У гэтым прыкладзе і псевдокоде няма апрацоўшчыка памылак, каб прадухіліць увод іншых дадзеных, акрамя ліку ў тэкставы аб'ект. Ўвод чаго-небудзь прывядзе да таго, што cEndTime будзе ўстаноўлены ў значэнне 0 - што, будзе пазначаць, адсутнасць перазарадкі наогул.

Радок 10 вышэйпаказанага псевдокода выконваецца кожны цік; яна правярае, праўду Ці значэнне Character.Cooldown і, калі гэта так, дадае значэнне dt да бягучага значэння Character.cTimer.

dt, скарочана ад «delta time», уяўляе сабой сістэмную зменную, якая вяртае час, якое прайшло паміж рэндэрынгу папярэдняга кадра і рэндэрынгу бягучага кадра. Гэта азначае, што, наколькі б магутным ні быў кампутар гульца, і незалежна ад таго, на якой хуткасці працуе гульня, мы можам гарантаваць, што перыяд перазарадкі доўжыцца аднолькавая колькасць часу. (Калі б мы вызначалі перыяд перазарадкі па колькасці цікаў або кадраў, якія скончыліся, даўжыня перыяду ў секундах будзе адрознівацца на розных кампутарах.) Назва зменнай dt ці яе прымяненне могуць адрознівацца ў залежнасці ад вашага рухавічка праграмавання.

Калі перазарадка ўсё яшчэ актыўная, мы правяраем, бягучае значэнне cTimer, больш яно або роўна значэнню cEndTime; калі гэта так, мы дайшлі да канца перыяду аднаўлення. Мы ўсталёўваем зваротную сувязь і значэнне Character.Cooldown роўнае false, каб гэты раздзел кода не выконваўся зноў, пакуль карыстач не націсне кнопку Action. Мы таксама зноў актывуецца кнопку Action.

Калі перазарадка ўсё яшчэ актыўная, мы паказваем зваротную сувязь, якая тлумачыць гэта. Гэты біт зваротнай сувязі на самой справе з'яўляецца нашым індыкатарам перазарадкі у тэкставым варыянце.

Такім чынам, гэта асновы механікі індыкатара перазарадкі, заснаваны на таймер. У пакінутай частцы гэтага артыкула давайце засяродзімся на саміх індыкатарах перазарадкі і паглядзім, як іх рэалізаваць.

Базавы індыкатар перазарадкі

Iндыкатар перазарадкі - гэта проста спрайт, які змяняе памер або ступень бачнасці з цягам часу, у перыяд перазарадкі. Гэта механізм зваротнай сувязі для гульца, каб паведаміць яму, калі ён зможа зноў выканаць дзеянне.

Разгледзім наступны прыклад:

Націсніце кнопку ў любым месцы экрана, каб выканаць дзеянне. Звярніце ўвагу, што зялёная паласа становіцца чырвонай падчас перазарадкі і змяняецца па шырыні ад 0 да яе першапачатковай шырыні. Як і ў асноўным тэкставым прыкладзе, вы можаце ўсталяваць час перазарадкі.

У гэтым прыкладзе індыкатар (пад назвай CooldownBar) уяўляе сабой не што іншае, як каляровы спрайт, расцягнуты да шырыні 100 пікселяў. Калі дзеянне выконваецца, яго шырыня усталёўваецца роўнай 0 пікселям. Затым кожны цік, у якім зменная індыкатара роўная true, шырыня усталёўваецца ў адпаведнасці з бягучым значэннем cTimer.

Давайце паглядзім на псевдокод:

Механізм індыкатара вельмі падобны на той, які апісаны ў папярэднім прыкладзе, таму давайце засяродзімся на самай індыкатары. Аб'ект мае два кадра анімацыі: зялёны квадрат памерам 32x32 пікселяў і чырвоны квадрат памераў 32x32 пікселяў. Ён таксама змяшчае зменную лікавы зменнай MaxWidth, якая ўсталяваная ў значэнне 100 (пікселяў), максімальная шырыня паласы.

Кожны цік, пакуль індыкатар мае значэнне true, значэнне CooldownBar.width усталёўваецца на частку значэння CooldownBar.MaxWidth. Мы вызначаем гэтую частку, падзяліўшы максімальную шырыню паласы на час заканчэння аднаўлення, а затым памножыўшы гэты вынік на бягучы час зменнай cTimer.

У пачатку і ў канцы перыяду перазарадкі мы таксама павінны адпаведным чынам змяніць кадр анімацыі: на чырвоны, калі аднаўляецца перазарадка, а затым вярнуцца да зялёнага пасля завяршэння перазарадкі.

Паляпшэнне дызайну

Мы маглі б пайсці крыху далей у візуальным плане. Вось некалькі думак:

Пачатковая кропка CooldownBar ўстаноўлена ў цэнтры, што дае адчуванне агульнага росту. Калі вы аддаеце перавагу, вы можаце ўсталяваць гэты пункт у левым ці правым краі аб'екта, каб надаць ёй больш «лінейнае» адчуванне.

Гэты прыклад вельмі просты; сама панэль складаецца толькі з двух кадраў рознага колеру, каб узмацніць аспект перазарадкі. Пакуль панэль чырвоная, карыстальнік разумее, што дзеянне не можа быць выканана, так як чырвоны колер звычайна пазначае колер, які выкарыстоўваецца для абазначэння "стоп". Але не забывайце аб гульцах з парушэннем зроку! Не забудзьцеся выкарыстоўваць колеру, якія сапраўды адрозніваюцца адзін ад аднаго, каб нават яны змаглі адрозніць іх адзін ад аднаго або выкарыстоўвайце іншы метад візуальнай зваротнай сувязі, акрамя змены колеру.

Вы таксама можаце дадаць контур ў індыкатар, фіксаваны прастакутнік, які дазволіць карыстачу лепш ацаніць час, што застаўся ў перыядзе перазарадкі.

Вось кароткая ілюстрацыя папярэднiх пунктаў:

Ён па-ранейшаму з'яўляецца асноўным індыкатарам для запаўнення, ёсць яшчэ больш таго, што вы можаце дадаць да візуальным эфектам. Індыкатар можа складацца з анімацыі замест двух каляровых кадраў. Спрайт пад індыкатарам можна аформіць такім чынам, каб яго фон выглядаў празрыстым, ці вы маглі б дадаць яшчэ адзін спрайт над ім, каб атрымаць адчуванне «шкла». Ёсць шмат спосабаў стылізаваць індыкатар, каб ён адпавядаў дызайне вашай гульні.

Аднаўленне навыкаў

У некаторых гульнях у гульца ёсць клавішы навыку. Гэтыя кнопкі не проста адлюстроўваюць час аднаўлення або даступнасць навыку; яны таксама з'яўляюцца інтэрфейсам для карыстальніка для выканання названага навыку (часта ў дадатку да некаторых спалучэнняў клавіш).

Разгледзім прыклад, у якім націск на адну з кнопак кідае адпаведнае зброю, а таксама паказвае пакінуты час для перазарадкі:

Як вы можаце бачыць, кожная кнопка навыку будзе адлюстроўваць «незапоўненыя» чорны індыкатар і таймер падчас перыяду аднаўлення. Чорны індыкатар - гэта ўсяго толькі чорны колер спрайт, змешчаны над кнопкай навыку са ступенню празрыстасці 45%, а таймер - тэкставы аб'ект. Кожны асобнік кнопкі навыку мае свой уласны асобнік аб'ектаў SkillCover і txtSkillTimer.

На гэты раз зменныя Cooldown, sTime і sEndTime прывязаныя да кожнага асобніка SkillButton. Акрамя таго, зыходная кропка для чорнага спрайт SkillCover знаходзіцца каля ніжняга краю.

Разгледзім гэты псевдокод:

Тут мы выбіраем правільны асобнік txtSkillTimer і SkillCover. (Гэта метад Construct 2, мы вызначаем правільныя асобнікі ў адпаведнасці са значэннем навыку, які павінен адпавядаць кадру анімацыі бягучага аб'екта SkillButton, які быў або націскам, альбо выбраны ў рэжыме цыклу For each).

У адрозненне ад папярэдніх індыкатараў перазарадкі, SkillCover пачынаецца са «запоўненай», ахопліваючы ўсю вышыню SkillButton, а потым у час перазарадкі павольна памяншаецца, адкрываючы малюнак кнопкі.

Для гэтага мы задаем SkillCover вышыню, якая адпавядае вышыні SkillButton, і затым кожны кадр адымае (SkillButton.Height / SkillButton.sEndTime) * SkillButton.sTime з яго максімальнай вышыні. Гэта ў прынцыпе, тая ж самая формула, якую мы выкарыстоўвалі раней, каб разлічыць долю часу аднаўлення, якая мінула, але толькі наадварот.

Некаторыя гульні будуць фарматуецца час па-рознаму і дазваляюць гульцу наладзіць выгляд, які ён аддае перавагу. Напрыклад, адна хвіліна і сорак секунд могуць адлюстроўвацца як 1:40 або 100 секунд. Каб прымяніць гэта да сваёй уласнай гульні, запусціце праверку ўмовы If, перш чым адлюстроўваць тэкст txtSkillTimer, каб даведацца, які фармат абраў гулец, і адпаведным чынам адфарматаваць тэкст. Некаторыя гульні або гульцы часам аддаюць перавагу не адлюстроўваць час як тэкст наогул.

Ёсць яшчэ шмат усяго, што вы маглі б зрабіць з дапамогай SkillCover. Вы маглі б пагуляць з празрыстасцю, каб прыцьміць кнопку больш або менш 45%. Паколькі гэта спрайт, які перакрывае іншы малюнак, вы таксама можаце пагуляць з рэжымам змешвання, напрыклад, каб абясколерыць асноўнае малюнак і аднаўлення яго кветак усё больш і больш па меры перазарадкі. Вы нават можаце дадаць эфекты webGL або шэйдары ў адпаведнасці з астатняй часткай вашага інтэрфейсу або дызайну. Што тычыцца індыкатара перазарадкі, гэта залежыць ад вашага ўяўлення і мастацкага стылю.

Вынік

Мы бачылі, што індыкатар перазарадкі ўяўляе сабой візуальную зваротную сувязь з простай механікай, якая прадухіляе выкананне дзеяння на працягу пэўнага часу.

Вы можаце выкарыстоўваць простыя спрайты і змяняць іх шырыню або вышыню з цягам часу, каб паказаць вашаму карыстачу, што час аднаўлення працягваецца. Вы можаце адлюстроўваць пакінуты час у выглядзе звычайнага тэксту, Фарматуем яго альбо ў хвілінах, альбо ў секундах. Вы нават можаце ўжываць любы выгляд анімацыі, рэжым змешвання або Шейдер, які будзе адпавядаць мастацкаму стылю вашай гульні.

Калі вы задумаецеся пра гэта на секунду, вы таксама можаце выкарыстаць гэты метад для кантролю хуткасці стральбы для зброі: да таго часу, пакуль пісталет знаходзіцца на перазарадцы, ён не стрэліць, нават калі кнопка Fire націснутая; у момант завяршэння перазарадкі, можа быць запушчаны іншы снарад. У гэтым выпадку не патрабуецца індыкатар перазарадкі.

Вы можаце загрузіць усе прыклады і адкрыць іх у бясплатнай версіі Construct 2 R168 або больш позняй.

Спадзяюся, вы знайшлі гэтую артыкул цікавай, і я з нецярпеннем чакаю вашых уласных праектаў індыкатараў перазарадкі.

Рэкамендацыі

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.