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

Стварэнне ізаметрычных міроў: Кіраўніцтва для распрацоўшчыкаў гульняў

by
Difficulty:IntermediateLength:LongLanguages:

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

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

Карысныя артыкулы

Хочаце знайсці яшчэ больш артыкулаў на тэму стварэння ізаметрычных мiроў? Звярніце ўвагу на наступныя артыкулы, Утварэнне ізаметрычных міроў: Кіраўніцтва для распрацоўшчыкаў гульняў, яе працяг і Кніга Juwal, Асновы распрацоўкі гульняў.


1. Iзаметрычны Свет

Ізаметрычная праекцыя ўяўляе сабой метад, які выкарыстоўваецца для стварэння ілюзіі 3D, або іншымі словамі 2D гульні - якая часам называецца псеўда 3D або 2.5D. Гэтыя малюнкi, (ўзятыя з Diablo 2 і Age of Empires) паказваюць, што я маю на ўвазе:

diablo

Diablo 2
AOE

Age of Empires

Рэалізацыя ізаметрычнай праекцыі можа быць выканана рознымі спосабамі, але для прастаты я засяроджуся на пліткавым падыходзе, які з'яўляецца найбольш эфектыўным і шырока выкарыстоўваным метадам. Я наклаў на кожны скрыншот вышэй сетку, якая паказвае як мясцовасць падзелена на пліткі.


2. Плітачныя Гульні

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

Карысныя артыкулы

Для прыкладу давайце разгледзім стандартнае ўяўленне 2D з двума пліткамi - плітка травы і плітка сцены - як паказана тут:

base 2d tiles

Некалькі прастых плітак

Гэтыя пліткі аднолькавага памеру, квадратнай формы, таму вышыня і шырыня ў плітак аднолькавыя.

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

Тут 0 пазначае пліткі травы і 1 пазначае плітку сцены. Арганізацыя плітак у адпаведнасці з дадзенымі створыць прыкладна такі вынік, падобныя на малюнак унізе:

2d level simple

Просты ўзровень, ва ўяўленні выгляду зверху.

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

2d level complex

Ускладнены ўзровень з нумарамі плітак

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

Выкажам здагадку, што шырыня і вышыня плітак аднолькавыя (гэта дакладна для ўсіх плітак) і адпавядае вырашэнню малюнка пліткі. Такім чынам, шырыня і вышыня пліткі для нашага прыкладу 50px, а а памер усяго ўзроўню 300x300px - гэта значыць, шэсць шэрагаў і шэсць слупкоў па 50x50px для кожнай пліткі.

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


3. Iзаметрычная Праекцыя

Лепшае тэхнічнае тлумачэнне таго, што азначае "ізаметрычная праекцыя", наколькі мне вядома, размешчана ў артыкуле Clint Bellanger:

Мы мяняем кут камеры па дзвюх восях (змяшчаем камеру на 45 градусаў у адзін бок, затым на 30 градусаў уніз). Гэта стварае падобную на алмаз (ромб) сетку, дзе прастора падвоены у шырыню, так як яно выцягнута. Гэты стыль быў папулярны ў RPG і стратэгічных гульнях. Калі мы паглядзім на куб у гэтым прадстаўленні, бачныя тры бакі (верх і дзве асабовыя бакі)..

Хоць гэта гучыць крыху складана, на самай справе рэалізацыя гэтага прадстаўлення вельмі прастая. Тое, што нам трэба зразумець, гэта стаўленне паміж 2D прасторай і ізаметрычныя - гэта значыць, сувязь паміж узроўнем дадзеных і прадстаўленнем; пераўтварэнне ад прамых "декартовых" каардынатаў да ізаметрычных каардынатах.

the_isometric_grid

Декартовых сетка супраць ізаметрычнай.

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

Размяшчэнне ізаметрычных плітак

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

Мы пастараемся стварыць ізаметрычнай праекцыі для дадзеных нашай сцены пашы:

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

Для ізаметрычнай праекцыі код застаецца тым жа самым, але зменіцца функцыя placeTile().

Для ізаметрычнага выгляду неабходна вылічыць адпаведныя каардынаты ўнутры цыклу.
Ўраўненні каб выканаць гэта будуць такімі, дзе isoX і isoY ўяўляюць ізаметрычныя x - і y каардынаты, а cartX і cartY декартовых каардынаты x і y:Гэтыя функцыі паказваюць як вы можаце іх канвертаваць з адной сістэмы ў іншую:

Гэтыя функцыі паказваюць як вы можаце іх канвертаваць з адной сістэмы ў іншую:

Псевдокод для цыклу выглядае наступным чынам:

isolevel screenshot

Нашы сцены пашы ў ізаметрычнай праекцыі.

У якасці прыкладу давайце паглядзім, як звычайная 2D пазіцыя пераўтворыцца ў ізаметрычную:

Аналагічным чынам, указанне [0,0] прывядзе да выніку [0,0] а [10,5] выдасць вынік [5,7,5].

Вышэй паказаны метад дазваляе нам стварыць адпаведнасць паміж 2D узроўнем дадзеных і ізаметрычных каардынатамі. Мы можам знайсці каардынаты плітак з дадзеных декартовых каардынатаў з дапамогай наступнай функцыі:

(Мяркуецца, што шырыня i вышыня пліткi аднолькавыя, як і ў большасці падобных выпадкаў).

Такім чынам з пары каардынатаў экрана (ізаметрычных), мы можам знайсці каардынаты пліткі шляхам выканання каманды:

Кропкай экрана можа быць, напрыклад, становішча кліку мышкай або якая-небудзь іншая пазіцыя.

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

Перасоўванне ў ізаметрычных каардынатах

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

Стварэнне глыбіні

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

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

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

split big tile

Вялікая выява дзеліцца на некалькі фрагментаў стандартнага ізаметрычнага вымярэння

4. Стварэнне Малюнкаў

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

Пры стварэнні ізаметрычнага малюнка, агульныя правілы такія

  • Пачынайце з пустой ізаметрычныя сеткі і прытрымвайцеся дакладнасці ў пікселях.
  • Паспрабуйце падзяліць малюнак на некалькі адзіночных плітак.
  • Пераканайцеся, што кожная плітка вызначана як свабодная для перамяшчэння ці не. Будзе цяжка, калі нам трэба размясціць адзін элемент, які змяшчае як свабодную, так і закрытую для перасоўванняў вобласці.
  • Для большасці плітак трэба будзе стварыць плаўны пераход у адным або некалькіх напрамках.
  • Цені складана рэалізаваць, пакуль мы не прымяняецца шматслаёвы падыход, у якім мы намалюем пласт цені на зямлі і намалюем героя (ці дрэвы, ці іншыя аб'екты) на верхнім пласце.  Калі падыход, які вы выкарыстоўваеце не шматслаёвы, пераканайцеся, што цені падаюць наперад, такім чынам, каб яны не падалі, напрыклад, на героя, калі ён стаіць за дрэвам.
  • У выпадку, калі вам трэба выкарыстоўваць малюнак пліткі больш стандартных памераў, паспрабуйце выкарыстоўваць дазвол, кратнае памеры пліткі.  Лепш ужываць шматузроўневы падыход у такіх выпадках, дзе малюнак можна падзяліць на некалькі частак, у адпаведнасці з яго вышынёй.  Напрыклад, дрэва можа быць падзелена на тры часткі: корань, ствол і лісце. Гэта робіць працэс стварэння глыбіні прасцей, так як мы можам намаляваць часткі на пластах, якія адпавядаюць іх вышыні.

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


5. Ізаметрычныя Персанажы

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

Eight-way navigation directions in top-down and isometric views

8-і іншы спосаб перамяшчэння ў ізаметрычнай праекцыі.

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

spriteSheet

Ізаметрычнай персанаж перамяшчаецца ў розных напрамках.

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

Мы ўсталюем дзве зменныя, dX і dY, у залежнасці ад націснутай кнопкі.  Па змаўчанні гэтыя зменныя будуць роўныя 0 і будуць абноўлены ў адпаведнасці з указаннямі ніжэй, дзе U, D, R і L паказваюць уверх, уніз, направа і налева, адпаведна.  Значэнне 1 пад адпаведным ключом кажа аб націску; 0 азначае, што кнопка ня націснутая.

Цяпер выкарыстоўваючы значэння dX і dY, мы можам абнавіць декартовых каардынаты:

Такім чынам, dX і dY чакаюць змены ў x - і y пазіцыях персанажа, грунтуючыся на націску клавіш.

Мы можам лёгка вылічыць новыя ізаметрычныя каардынаты, як мы ўжо абмяркоўвалі:

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

Выяўленне Узаемадзеянняў

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

У функцыі isWalkable() мы правяраем, ці з'яўляецца значэнне масіва дадзеных па зададзеных каардынатах свабоднай пліткай ці не.  Мы павінны абнавіць кірунак, у якім стаіць персанаж - нават калі ён не рухаецца, як у выпадку яго ўзаемадзеяння з непраходнай пліткай.

Глыбіня для Персанажаў

Разгледзім персанаж і плітку дрэва для ізаметрычнага свету.

Для правільнага разумення глыбіні, мы павінны ведаць, што кожны раз, калі x - і y каардынаты персанажа менш, чым у дрэва, дрэва перакрые персанаж.  Кожны раз, калі x - і y каардынаты персанажа больш, чым дрэва, персанаж перакрые дрэва.

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

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

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


6. Уперад!

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

Націсніце, каб SWF быў у фокусе, а затым выкарыстоўвайце клавішы са стрэлкамі.  Націсніце тут каб атрымаць поўную версію.

Гэта клас можа быць карысным (я напісаў яго на AS3, але вы павінны быць у стане зразумець на любой іншай мове праграмавання):

Калі вы заблыталіся, вось код майго дэма (у выглядзе кода Flash і AS3):

Пункты Судотыкаў

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

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

Выяўленне Узаемадзеянняў

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

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

Хітрасці

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

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

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


Заключэнне

Да цяперашняга часу ў вас павінна быць выдатная аснова для стварэння ўласных ізаметрычных гульняў: вы можаце адлюстроўваць свет і аб'екты ў ім, прадстаўляць дадзеныя ўзроўню ў простых 2D-масівах, ператвараць паміж дэкартавымі і ізаметрычных каардынатамі і разбірацца з такімі паняццямі, як стварэнне глыбіні і анімацыя персанажаў.  Атрымлівайце асалоду ад стварэннем ізаметрычных светаў!

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.