Претворите Фласх игре у ХТМЛ5

Претворите Фласх игре у ХТМЛ5

Адобе полако напушта Фласх у корист ХТМЛ5 и ЈаваСцрипт-а; његов званични крај живота је заказан за 2020. годину. И ту ће вам овај чланак добро доћи.

Савети описани у наставку имају за циљ да помогну програмерима игара ХТМЛ5 да избегну уобичајене грешке при конвертовању Фласх игара у ЈаваСцрипт, као и да целокупни процес развоја иде што глатко. Све што вам треба је основно знање ЈаваСцрипт, ВебГЛ и оквира Пхасер.



механичке оловке вс цртање дрвених оловака

Промена дизајна игре са СВФ-а на ЈаваСцрипт може дати бољи резултат корисничко искуство , што му заузврат даје модеран изглед. Али како то учинити? Да ли вам је потребан наменски ЈаваСцрипт претварач игара да бисте се решили ове застареле технологије? Па, претварање Фласх-а у ХТМЛ5 може бити колач - ево шта о томе може рећи искусни програмер ЈаваСцрипт игара.



01. Побољшајте доживљај игре ХТМЛ5

Претварање игре у другу платформу је изврсна прилика да је побољшате, решите проблеме и повећате публику. Испод је неколико ствари које се лако могу урадити и које вреди размислити:

  • Подршка мобилних уређаја
    Конверзија са Фласх-а на ЈаваСцрипт омогућава досезање шире публике - корисници мобилних уређаја подршку за додирне екране обично треба да примене у игру. Срећом, и Андроид и иОС уређаји сада подржавају ВебГЛ, тако да се рендеровање од 30 или 60 ФПС обично може лако постићи. У многим случајевима 60 фпс у секунди неће узроковати проблеме, који ће се временом побољшавати, јер мобилни уређаји постају све ефикаснији.
  • Побољшање перформанси
    Што се тиче поређења АцтионСцрипт-а и ЈаваСцрипт-а, овај други је бржи. Осим тога, претварање игре је добар повод за поновни преглед алгоритама који се користе у коду игре. Са развојем ЈаваСцрипт игре можете их оптимизовати или потпуно уклонити некоришћени код који су оставили оригинални програмери.
  • Исправљање грешака и побољшање играња
    Имати нове програмере који истражују изворни код игре може помоћи у отклањању познатих грешака или откривању нових и врло ретких. То би играње игре учинило мање иритантним за играче, што би их навело да проводе више времена на вашој веб локацији и подстакло их да испробају ваше друге игре.
  • Додавање веб аналитике
    Поред праћења промета, веб аналитика се такође може користити за прикупљање знања о томе како се играчи понашају у игри и где заглаве током играња.
  • Додавање локализације
    Ово би повећало публику и важно је за децу из других земаља која играју вашу игру. Или ваша игра можда није на енглеском и желите да подржите тај језик?

02. Оствари 60 ФПС

Што се тиче развоја ЈаваСцрипт игара, можда ће бити примамљиво искористити ХТМЛ и ЦСС за дугмад, виџете и друге ГУИ елементе у игри. Наш савет је да овде будете опрезни. Противинтуитивно је, али заправо коришћење ДОМ елемената мање је ефикасно у сложеним играма, а ово добија на значају на мобилним уређајима. Ако желите да постигнете константних 60 ФПС на свим платформама, можда ће бити потребно давање оставке на ХТМЛ и ЦСС.



Неинтерактивни ГУИ елементи, као што су траке здравља, муниција или бројачи резултата, могу се лако применити у Пхасер-у коришћењем уобичајених слика (класа „Пхасер.Имаге“), користећи својство „.цроп“ за обрезивање и „Пхасер“. Текст 'класа за једноставне текстуалне налепнице.

Интерактивни елементи као што су дугмад и поља за потврду могу се имплементирати помоћу уграђене класе „Пхасер.Буттон“. Други, сложенији елементи могу се састојати од различитих једноставних типова, попут група, слика, дугмади и текстуалних налепница.

03. Учитавање прилагођених фонтова

Ако желите да прикажете текст помоћу прилагођеног векторског фонта (нпр. ТТФ или ОТФ), онда морате да будете сигурни да је претраживач фонт већ учитао пре приказивања било ког текста. Пхасер в2.6 не нуди решење за ову сврху, али може се користити друга библиотека - Учитавач веб фонтова .



Под претпоставком да имате датотеку фонта и да на своју страницу укључите програм за учитавање веб фонтова, у наставку је приказан једноставан пример како учитати фонт. Направите једноставну ЦСС датотеку коју ће учитати Веб Фонт Лоадер (не морате је укључити у свој ХТМЛ):

@font-face { // This name you will use in JS font-family: 'Gunplay'; // URL to the font file, can be relative or absolute src: url('../fonts/gunplay.ttf') format('truetype'); font-weight: 400; }

Сада дефинишите глобалну променљиву која се зове ВебФонтЦонфиг. Обично је довољно нешто овако једноставно:

var WebFontConfig = { 'classes': false, 'timeout': 0, 'active': function() { // The font has successfully loaded... }, 'custom': { 'families': ['Gunplay'], // URL to the previously mentioned CSS 'urls': ['styles/fonts.css'] } };

Не заборавите да свој код ставите у 'активни' повратни позив приказан горе. И то је то!

04. Сачувај игру

Сада смо у средњој тачки наше конверзије Фласх у ЈаваСцрипт - време је да се побринемо за схадере. Да бисте упорно чували локалне податке у АцтионСцрипт-у, користили бисте класу 'СхаредОбјецт'. У ЈаваСцрипт-у је једноставна замена лоцалСтораге АПИ , који омогућава чување низова за касније преузимање, преживјело поновно учитавање странице.

Чување података је врло једноставно:

var progress = 15; localStorage.setItem('myGame.progress', progress);

Имајте на уму да ће се у горњем примеру променљива „прогресс“, која представља број, претворити у низ.

Учитавање је такође једноставно, али имајте на уму да ће преузете вредности бити низови или нуле ако не постоје.

var progress = parseInt(localStorage.getItem('myGame.progress')) || 0;

Овде осигуравамо да је повратна вредност број. Ако не постоји, тада ће променљивој 'прогресс' бити додељено 0.

Такође можете да сачувате и преузмете сложеније структуре, на пример, ЈСОН:

var stats = {'goals': 13, 'wins': 7, 'losses': 3, 'draws': 1 }; localStorage.setItem('myGame.stats', JSON.stringify(stats)); … var stats = JSON.parse(localStorage.getItem('myGame.stats')) || {};

Постоје случајеви када објект 'лоцалСтораге' неће бити доступан. На пример, када користите протокол филе: // или када се страница учита у приватном прозору. Изјаву „три анд цатцх“ можете користити да бисте осигурали да ће код и даље радити и да користи подразумеване вредности, што је приказано у примеру испод:

try { var progress = localStorage.getItem('myGame.progress'); } catch (exception) { // localStorage not available, use default values }

Треба запамтити да се сачувани подаци чувају по домену, а не по УРЛ-у. Дакле, ако постоји ризик да се многе игре хостују на једном домену, онда је боље користити префикс (простор имена) приликом спремања. У примеру изнад, „моја игра“. је префикс и обично га желите заменити називом игре.

Ако је ваша игра уграђена у ифраме, тада лоцалСтораге неће постојати на иОС-у. У овом случају, уместо тога, требали бисте да сачувате податке у надређеном ифраме-у.

05. Подразумевани сенчник фрагмената

Претворите Фласх игре у ХТМЛ5: Прилагођени подразумевани схадер

Прилагођени подразумевани схадер може се користити да замени метод тонирања у Пхасер-у и ПикиЈС-у. Резервоари бљесну бијело при удару

Када Пхасер и ПикиЈС прикажу ваше спритеове, они користе једноставан унутрашњи сенчник фрагмената. Нема много карактеристика јер је прилагођен брзини. Међутим, тај сенчник можете заменити за своје потребе. На пример, можете га искористити да бисте прегледали прекорачење или подржали више функција за приказивање. Испод је пример како испоручити свој подразумевани схадер фрагмената Пхасер в2.

function preload() { this.load.shader('filename.frag', 'shaders/filename.frag'); } function create() { var renderer = this.renderer; var batch = renderer.spriteBatch; batch.defaultShader = new PIXI.AbstractFilter(this.cache.getShader('filename.frag')); batch.setContext(renderer.gl); }

06. Промените метод нијансирања

Прилагођени подразумевани схадер може се користити за замену подразумеваних метода тонирања у Пхасер-у и ПикиЈС-у. Тонирање у Пхасер-у и ПикиЈС делује множењем текстурних пиксела за задату боју. Множење увек потамни боје, што очигледно није проблем; једноставно се разликује од Фласх нијансирања. За једну од наших игара морали смо да применимо нијансирање слично Фласх-у и одлучили смо да се може користити прилагођени подразумевани схадер. Испод је пример таквог сенчења фрагмената:

// Specific tint variant, similar to the Flash tinting that adds // to the color and does not multiply. A negative of a color // must be supplied for this shader to work properly, i.e. set // sprite.tint to 0 to turn whole sprite to white. precision lowp float; varying vec2 vTextureCoord; varying vec4 vColor; uniform sampler2D uSampler; void main(void) { vec4 f = texture2D(uSampler, vTextureCoord); float a = clamp(vColor.a, 0.00001, 1.0); gl_FragColor.rgb = f.rgb * vColor.a + clamp(1.0 - vColor.rgb/a, 0.0, 1.0) * vColor.a * f.a; gl_FragColor.a = f.a * vColor.a; }

Овај схадер осветљава пикселе додавањем основне боје у нијансу. Да би ово функционисало, морате да доставите негативе у боји коју желите. Због тога, да бисте добили бело, потребно је да подесите:

sprite.tint = 0x000000; // This colors the sprite to white Sprite.tint = 0x00ffff; // This gives red

07. Прегледајте прекорачење

Конвертујте Фласх игре у ХТМЛ5: Овердрав схадер

Слика на левој страни приказује како играч види игру, док она на десној страни приказује ефекат примене сенке за превлачење на исту сцену

Замена подразумеваног сенкера такође може да се искористи за помоћ у отклањању грешака. У наставку смо објаснили како се прекорачење може открити помоћу таквог сенчника.

Превлачење се дешава када се многи или сви пиксели на екрану прикажу више пута. На пример, многи објекти заузимају исто место и приказују се један преко другог. Колико пиксела ГПУ може да генерише у секунди описује се као стопа пуњења. Савремени десктоп графички процесори имају прекомерну брзину пуњења за уобичајене 2Д сврхе, али мобилни су много спорији.

Постоји једноставна метода којом се може сазнати колико пута се сваки пиксел на екрану напише заменом подразумеваног глобалног сенке фрагмената у ПикиЈС и Пхасер овом:

void main(void) { gl_FragColor.rgb += 1.0 / 7.0; }

Овај схадер осветљава пикселе који се обрађују. Број 7.0 означава колико је записа потребно да би пиксели постали бели; можете подесити овај број по свом укусу. Другим речима, светлији пиксели на екрану написани су неколико пута, а бели пиксели најмање седам пута.

Овај схадер такође помаже да се пронађу и „невидљиви“ објекти који се из неког разлога и даље генеришу, и спритеови који имају прекомерно провидне површине око којих треба да се скину (ГПУ и даље треба да обрађује прозирне пикселе у вашим текстурама).

08. Зашто су вам мотори из физике пријатељи

Конвертујте Фласх игре у ХТМЛ5: отклањање грешака из физике Пхасер-а

Леви део слике је сцена из игре, док десна страна приказује исту сцену са прекривачем за отклањање грешака Пхасер Пхисицс приказаним на врху

Физички мотор је посреднички софтвер који је одговоран за симулацију физичких тела (обично круте динамике тела) и њихових судара. Физички мотори симулирају 2Д или 3Д просторе, али не обоје. Типичан физички мотор пружа:

  • Кретање предмета подешавањем брзина, убрзања, зглобова и мотора;
  • Откривање судара између различитих типова облика;
  • Израчунавање реакција на судар, тј. Како два објекта треба да реагују приликом судара.

Постоји додатак Пхасер који добро ради у ту сврху. Бок2Д се такође користи у Унити гаме енгине и ГамеМакер Студио 2.

Иако ће физички мотор убрзати ваш развој, постоји цена коју ћете морати да платите: смањене перформансе током рада. Откривање судара и израчунавање одговора је задатак који захтева ЦПУ. Можда ћете бити ограничени на неколико десетина динамичних објеката у сцени на мобилним телефонима или се суочити са смањеним перформансама, као и смањеном брзином кадра дубоко испод 60 фпс.

09. Извоз звукова

Ако имате звучне ефекте Фласх игре у .фла датотеци, њихов извоз из ГУИ-а није могућ (барем не у Адобе Анимате ЦЦ 2017) због недостатка опција менија које служе у ту сврху. Али постоји још једно решење - посвећена скрипта која управо то чини:

function normalizeFilename(name) { // Converts a camelCase name to snake_case name return name.replace(/([A-Z])/g, '_').replace(/^_/, '').toLowerCase(); } function displayPath(path) ', ':'); fl.outputPanel.clear(); if (fl.getDocumentDOM().library.getSelectedItems().length > 0) // Get only selected items var library = fl.getDocumentDOM().library.getSelectedItems(); else // Get all items var library = fl.getDocumentDOM().library.items; // Ask user for the export destination directory var root = fl.browseForFolderURL('Select a folder.'); var errors = 0; for (var i = 0; i < library.length; i++) { var item = library[i]; if (item.itemType !== 'sound') continue; var path = root + '/'; if (item.originalCompressionType === 'RAW') path += normalizeFilename(item.name.split('.')[0]) + '.wav'; else path += normalizeFilename(item.name); var success = item.exportToFile(path); if (!success) errors += 1; fl.trace(displayPath(path) + ': ' + (success ? 'OK' : 'Error')); } fl.trace(errors + ' error(s)');

Како се користи скрипта за извоз звучних датотека:

  1. Сачувајте горњи код као .јсфл датотеку на рачунару.
  2. Отворите .фла датотеку помоћу програма Адобе Анимате.
  3. У горњем менију одаберите Цоммандс> Рун Цомманд и одаберите скрипту у дијалогу који се отвори.
  4. Сада се појављује друга датотека дијалога за одабир директорија одредишта извоза.

Готово је! Сада бисте требали да имате ВАВ датотеке у наведеном директоријуму. Преостало је да их претворите у, на пример, МП3, ОГГ или ААЦ.

10. Како се користе МП3 датотеке

Вратио се стари добри МП3 формат, јер је неким патентима истекао рок трајања, а сада сваки прегледач може декодирати и репродуковати МП3 датотеке. Ово мало олакшава развој, јер коначно нема потребе за припремом два одвојена аудио формата. Раније су вам биле потребне, на пример, датотеке ОГГ и ААЦ, док ће сада МП3 бити довољан.

мацбоок про харддсхелл кућиште 15 инча

Без обзира на то, о МП3-у морате имати на уму две важне ствари:

  • МП3 треба декодирати након учитавања, што може потрајати, посебно на мобилним уређајима. Ако видите паузу након што се сва ваша имовина учита, то вероватно значи да се МП3 датотеке декодирају
  • Без проблема репродуковање петљастих МП3 датотека је мало проблематично. Решење је коришћење мп3лооп-а, прочитајте више у овом чланку објавио Цомпу Пхасе.

Овај чланак је првобитно објављен у броју 277 креативног часописа за веб дизајн Веб Десигнер. Купите издање 277 овде или претплатите се на Веб Десигнер овде .

Повезани чланци: