Създаването на базирани на браузър игри в Unity WebGL може да бъде доста възнаграждаващо - има много уебсайтове за портали за игри, които ще разделят приходите от реклами с вас или ще купуват вашите игри направо от вас. Ако сте талантлив, можете лесно да печелите няколко хиляди долара на месец в дял от приходи от реклами. Единството с WebGL е един от най-добрите инструменти за това, а с приставките WebVR можете също така да предоставите на своите игри VR поддръжка доста лесно.
Така че, ако се чудите как да създавате Unity WebGL игри, прочетете!
Изисквания
- Единство
- Познания за HTML5 / JavaScript
- (По избор) Добър текстов редактор като NotePad ++
За начало изтеглете и инсталирайте Unity и се уверете, че сте инсталирали компонента за поддръжка на WebGL.
Когато Unity стартира за първи път, отделете минута, за да свикнете с потребителския интерфейс и менютата, особено с Йерархия панел - той съдържа всички текущи елементи на сцената. По същество това е основният изглед на каквото и да работите, било то ниво на игра или главно меню.
Вие също имате Игра (за тестване на играта в редактора), а вдясно е Инспектор панел. Тук могат да се редактират елементи, например светлини, актьори и т.н.
Ако щракнете върху Насочена светлина бутон в менюто Йерархия, той ще ви даде куп информация за тази конкретна светлина и ще можете да активирате / деактивирате сенките от нея.
И накрая, имате Проект прозорец в долната част, който просто поддържа раздел на файловете, използвани за създаване на вашия проект.
След като се запознаете за малко с потребителския интерфейс, продължете и запазете текущата сцена. Отидете на Файл> Запазване на сцена и ще се отвори диалогов прозорец за папка „Активи“. Стандартната практика е да поддържате нещата организирани в подпапки при разработване на игри, така че създайте подпапка с име „ Сцени ” и запазете сцената в него.
Сега ще създадем нещо наистина просто - игра от типа „платформинг“, където нашият герой просто скача около платформите. Падането означава смърт. Ще правим това в 3D / изглед от първо лице, така че даден герой наистина не моделира - всъщност просто ще използваме прост обект „сфера“ за нашия герой, защото е най-простият за създаване.
Така че в Йерархия панел, щракнете върху „Създаване“ и редактирайте следните свойства:
- Позиция {X: 0, Y: 2.5, Z: 0}
- Мащаб {X: 0,3, Y: 0,3, Z: 0,3}
Ако натиснете „ Възпроизвеждане ”, Той трябва да показва обикновена сфера в изгледа на камерата. Сега искаме да добавим гравитация и физика на скока към нашия „характер“.
Така че в Инспектор панел, добавете компонент към сферата и изберете Твърдо тяло - също, не искаме сферата да завъртане , така че отидете на Контейни> изберете всички оси в Завъртане ■ площ.
Сега трябва да създадем някаква платформа, така че нашият герой да не пада безкрайно през играта. Така че добавете куб и задайте Скала Y стойност към 0,1 - сега, ако отново „пуснете“ сцената, нашият герой трябва да „падне“ върху куба.
Сега ще добавим малко физика, така че нашият герой да „отскача“ малко, когато удари платформата на куба. Трябва да създадем нов физически материал и да го приложим към сферата, за да направим нашия характер да има подскачащи свойства.
Създайте нова подпапка в Активи директория и го наречете нещо като „Материали“ и след това създайте нов материал по физика. Наречете го „Bouncy_blob“ или както искате.
Сега в Инспекция панел, добавете следните стойности към подскачащия материал:
- Динамично триене: 10
- Статична фантастика: 10
- Бодрост: 1
- Фрикционен комбайн: Максимум
- Отскачащ комбинат: Максимум
Ние също трябва да добавим физически материал към платформата под нашата сфера - това ще бъде така, че нашата сфера ще отскача с нарастваща височина при всяко отскачане. Така че създайте друг материал и го наречете нещо като „Platform_bouncing“ и му дайте стойностите на:
- Динамично триене: 0.9
- Статична фантастика: 0.9
- Бодрост: 1
- Фрикционен комбайн: Среден
- Bounce Combine: Умножете
Сега, когато натиснете бутона „Пусни“, ще забележите, че нашият герой отскача по-високо при всяко отскачане.
За да добавите малко цвят / текстура към платформата, създайте нов материал и кликнете върху раздела “Albedo”, след което му придайте цвят. Можете да плъзнете и пуснете този материал върху платформата и той ще промени цвета си.
За перспектива от първо лице просто трябва да плъзнете и пуснете камерата в Йерархия панел върху нашата сфера - това ще накара камерата да следи характера ни по всяко време. Тази предпоставка остава същата за всякакъв вид Unity игра от първо лице - но ако създавате мултиплейър FPS игра като Лидерска стачка , Тя става малко по-напреднала, тъй като ще имате няколко камери, настроени на модел.
Във всеки случай трябва да редактирате камерата така:
- Позиция {X: 0, Y: 1, Z: 0}
- Завъртане {X: 90, Y: 0, Z: 0}
- Мащаб {X: 2,5, Y: 2,5, Z: 2,5}
- Ясни флагове: Плътен цвят
- Фон: # 000
- Зрително поле: 80.3
Сега, за да ни даде усещане за „перспектива“ за височината на скачане, ще добавим прожектор. Така че променете стойностите на прожекторите, за да:
- Завъртане {X: 90, Y: 0, Z: 0}
Сега искаме да програмираме контролите на играта, така че да можем да използваме нашата мишка, за да контролираме движението на героя. Имаме нужда от скрипт за това.
В Проекти панел, добавете нова папка и я наречете „Скриптове“. Сега добавете JavaScript към Камера и го наречете „InputController“, а също го добавете към папката „Скриптове“, която току-що създадохте. Сега, когато щракнете двукратно върху скрипта, можете да редактирате неговите свойства.
Когато отворите скрипта в редактора на скриптове по подразбиране на Unity, той трябва да изглежда така:
Затова искаме променливата „GameObject“ да се позовава на нашия герой - за това можете просто да се върнете към изгледа на камерата Unity и да плъзнете / пуснете нашата сфера върху полето за въвеждане.
Сега искаме да възложим половината на ширината и височината на екрана до функцията Старт. Така че редактирайте скрипта, за да изглежда така:
Така че сега просто се нуждаем от стойностите на мишката (за всяко преместване от плейъра). За да постигнем това, ще трябва да се обърнем към функцията Update. Така че променете скрипта под променливата Update:
За да обясним малко, променливите X и Z са за оста на контролера - искаме те да манипулират позицията на нашия герой, когато изпращаме вход към контролера в играта. Трябва да се позовем на променливата Input.mousePosition, която ни дава 2D вектор. Този 2D вектор трябва да бъде добавен към нашето проследяване на координацията, така че ще извикаме функция setHeroPosition със стойностите като аргументи.
Така че създайте нов скрипт, наречете го HeroController и го прикрепете към нашата сфера / характер. Редактирайте скрипта, за да изглежда така:
Сега, когато натиснете бутона „Пусни“, трябва да можете да навигирате в героя около платформата с помощта на мишката и дори да паднете от платформата! Нашата крайна цел е да създадем платформерска игра, подобна на Кратък живот , Така че ще разгледаме тази игра малко повече в следващото ръководство.
Това завършва самите основи на създаването на много прост геймплей в Unity - в следващата част на това ръководство ще разгледаме как да добавим още пейзажи към нивото, да добавим меню на играта и да експортираме всичко на уебсайт с помощта на WebGL , за игра в браузър.
Създаване на процедурни платформи
Така че в част първа от този урок ние направихме основна платформа, на която вашият герой може да отскача ( и падат до гибелта си) - но за истински платформинг трябва да добавим допълнителни платформи. Но не искаме да добавяме милион платформи - искаме Unity автоматично създайте платформи, докато нашият герой отскача.
За целта ни е необходим шаблон на платформа - иначе известен като „сглобяем“. Prefab е съкращение от сглобяеми, и това просто означава „предварително направено“ - обикновено копие на игрален обект, което можете да използвате отново и отново. Всъщност сглобките могат да съдържат йерархии на игралните обекти, което означава, че можете да „сглобите“ цяла сцена от игрови обекти.
Така че това, което трябва да направите, е да създадете нова папка с име на име Сглобяеми елементи , след това плъзнете и пуснете нашата платформа от Йерархия панел в тази нова папка. Сглобяемите елементи ще бъдат разпознаваеми в панела Йерархия по синия цвят.
Сега, за да инструктираме Unity да създава процедурни платформи, трябва да създадем скрипт, наречен GameManager, и да го прикачим към камерата. Скриптовете на GameManager основно съдържат важни инструкции на двигателя да се предава към геймплея - в този случай той ще генерира платформи, докато нашите герои скачат.
Причината да го прикрепим към камерата е, че камерата никога не се унищожава и тя остава постоянна - така скриптът никога не се унищожава и остава постоянен, като е прикрепен към нея.
Ето какво трябва да се включи в скрипта:
За да обясним малко този код, е необходимо да създадем препратка както към панела на панела, така и към сферата (нашия символ), така че трябва да ги плъзнете и пуснете в специфичните им слотове във вашия редактор.
Този код също съдържа три частни променливи - редовете, които започват с частна вар. Те ще създадат екземпляр (препратка) към панела на сглобяемите елементи по следните начини:
- Частна граница на var: float поставя ограничение на оста y, така че когато нашият герой скочи по-висок след тази граница, ще бъде създаден нов панел.
- Частна ротация на вар: Quaternion; просто добавя необходимото завъртане, за да създадем екземпляри на нашите сглобяеми елементи - обаче, ние добавяме въртене = Quaternion.identify; защото това инструктира двигателя да не върти игралния обект. Обектът (нашите панелни панели) буквално ще бъде „перфектно подравнен“ със света.
- Крайната частна променлива lastPlatformPosition ще запомни и запази позицията на последната платформа като 3D вектор (основно платформите няма да изчезнат зад вас, така че можете да се върнете назад през света на играта, ако искате).
В този следващ бит скрипт ще добавим проверка за всеки кадър независимо дали нашата сфера (характер) е над границата (която генерира нови платформи) - ако нашият характер е над границата, ние ще вдигнете граничната граница за да създадете нов панел / платформа, по-висока от предишната.
Следващата ни стъпка е добавяне на код, който определя следващата позиция на панела:
Използваме направи докато цикъл в този код, за да се гарантира, че стойностите на вектора X и Z (позицията му в света на играта) не са идентични с предишните платформи - така че нашите процедурно генерирани платформи винаги ще се увеличават по височина.
Разбира се, не искаме тези стойности да бъдат строго поставени - малко произволност е нещо добро, иначе просто правим перфектно стълбище. Така че ние използваме Случайно, Обхват функция, между стойности -1 и 2, за извикване на произволни стойности за X и Z. Можете да играете малко с тези числа, ако искате да се заблудите.
Създаване на меню за игри
Досега създадохме „игра“, където можете да скачате с нарастваща височина и да премествате мишката, за да контролирате посоката. Проблемът е, че ако паднете от платформата, просто ще паднете безкрайно - трябва да впишем меню „смърт“ / игра, за да започнем отначало.
Така че по същество ще напишем скрипт, който проверява дали нашата сфера (характер) попада по-долу първата платформа на играта . Ако е така, скриптът ще зареди нова сцена.
Първата ни стъпка ще бъде да проверим дали сферата е паднала под определен праг. Влезте в GameManager скрипт, който направихме по-рано и разгледаме ако изявление на актуализация функция.
Ще използваме иначе ако тук, за да проверите дали позицията на нашата сфера е под -2,0 единици от Y-позицията - ако е, нашата частна функция играта приключи ще ... добре, тази част от сценария е обяснителна.
Последният бит скрипт е функцията, която се използва за обработка на състояние „игра над“ и зареждане на менюто ни за игри.
Това се присъединява към Unity’s Приложение клас - можем да се обадим на LoadLevel функция, за да изведете нова сцена, която в този случай е просто нашето меню за игри - не забравяйте, че основно всичко в Unity е „нива“. Основните менюта (Старт на играта - Опции - Кредити и т.н.) са основно нива / сцени с битове текст, който може да се кликне. Някак като зареждащите екрани на Skyrim, а? Те са просто 3D модели в празно световно пространство с лента за зареждане.
Във всеки случай трябва да създадем сцена Файл> Нова сцена и му дайте името Меню докато го запазвате. След това ще добавим и двете сцени към процеса на изграждане. Това става чрез Файл> Настройки за изграждане .
Нашата сцена от менюто все още трябва да е отворена, така че просто щракнете върху бутона „Добавяне на текуща“ и добавете сцената към вашата Настройки за изграждане - направи това отново със сцената на ниво.
Когато умрем в играта, създаденият от нас скрипт трябва да ни преведе от нивото на играта към сцената от менюто.
Добавете бутон „Старт“ за играчите
Сега сме в състояние да играем играта в тестов режим, но към момента играчите нямат начин да започнат играта, ако трябва да качим тази игра някъде. Затова трябва да създадем меню за игра, което има бутон за стартиране на играта.
Така че превключете към сцената от менюто на играта и добавете този бит към камерата ( в панела Инспектор, запомнете от пт. 1 от този урок?).
- Ясни флагове: Плътен цвят
- Фон: # 000
- Ширина: 200
- Височина: 60
Това ще ни даде солиден черен фон за менюто ни за игри - това се прави през RGB стойности , не шестнадесетичен - така че синьото би било 001, зеленото е 010, червеното е 100 и т.н. Бих могъл да ви обясня това, но всичко, което трябва да направите, е „RGB picker“ на Google, ако искате определен цвят.
Продължавайки, трябва да добавим нашия бутон, за да започнем играта. Това става чрез Потребителски елементи - по принцип можем да добавяме елементи на потребителския интерфейс по същия начин, както добавяме 3D елементи, чрез Йерархия панел. Така че продължете и създайте a Бутон за потребителски интерфейс и ще видите някои нови елементи в Йерархия панел:
- EventSystem
- Платно
- Бутон
- Текст
За да разбиете това - платно е нашият контейнер за всички елементи на потребителския интерфейс и можем да го направим отзивчив ( под отзивчив имам предвид „мащабиране до размер на екрана“, а не отзивчив, тъй като ще отговори на въпроси, които задавате. Това е най-добре да се остави на AI скриптове). Във всеки случай ще променим позицията на бутона на това:
- Преобразуване на корекция {Позиция X: 0, Позиция Y: 0, Позиция Z: 0}
- Трансформация на правоъгълник {Ширина: 200, Височина: 60}
За да направите това малко по-елегантно, можете да премахнете „изходното изображение“ на бутона и да зададете цвят за него. И за да промените текста на бутона, просто редактирайте Текст елемент на нещо като „START GAME“ и му дайте размер на шрифта около 16.
За да направите бутона кликване , ще добавим функция към UIController скрипта в Бутон елемент. Просто добавете този бит код по-долу:
Приложете тази функция към бутоните Инспектор настройки и в Бутон (сценарий) настройки на компоненти, ние просто ще добавим функция, която се изпълнява, когато играчът щракне върху бутона ни Старт. Така че просто добавете функция към При щракване () събитие и плъзнете / пуснете бутона Старт на играта в полето за въвеждане. Накрая изберете новосъздадената функция от скрипта UIController ( UIController.StartGame)
Можем да приложим тази функция в бутоните Инспектор настройки. В настройките на компонента Button (Script) можем да изпълним функция, когато играч щракне върху нея. За това добавяме нова функция към събитието On Click (), като щракнем върху + икона. Сега можем да плъзгаме и пускаме самия бутон върху полето за въвеждане. След това избираме функцията, която току-що написахме, от скрипта UIController (UIController.StartGame).
Как да експортирам / публикувам като браузърна игра WebGL
Отворете настройките за компилация и изберете WebGL като вашата целева платформа. Сега щракнете върху Превключваща платформа и накрая щракнете върху Изграждане бутон и дайте на играта си заглавие. След като се изгради, той ще бъде експортиран / записан като .HTML файл, който може да бъде отворен / разгледан във всеки браузър с активиран WebGL. Въпреки че ако искате публикува има два метода за постигане на това:
- Качете играта си на някакъв файлов хост (Dropbox, Google Drive и т.н.), след което споделете връзката. Това е полезно за малки демонстрации искате да покажете на приятели или потенциални клиенти ( уебсайтове за портали за игри, които или ще купят играта ви, или ще създадат приходи от споделяне на реклами с вас).
- Качете играта си на FTP сървър, който притежавате, и я вградете в