WADE это сокращение, которое расшифровывается как Web App Development Engine и является очень сильным инструментом для создания web приложений и игр, которые работают на широком спектре устройств, поскольку WADE это чистый HTML5 движок, который не требует никаких расширений для браузера или внешних плагинов.
HTML5 это недавнее обновление HTML стандарта, который всегда использовался для создания web контента. В 5 версии есть много разных элементов, которые делают HTML, вероятно впервые в истории, жизнеспособной платформой для создания сложного интерактивного контента.
Язык программирования, который обычно используется для взаимодействия с HTML5 элементами - это Java Script. Как вы очевидно знаете, это очень мощный динамический язык, который позволяет легко достичь много с очень небольшим печатанием текста.
Сказав это, всё еще очень сложно писать эффективные HTML5 приложения, которые работают везде, вот почему WADE является крайне полезным: он позаботиться обо всех сложных вещах за вас, оставляя вам свободу для фокуса на игре или приложении, которое вы хотите создать.
Важная вещь, на которую стоит обратить внимание, касательно WADE, заключается в том, что он имеет модульную архитектуру: здесь есть базовый модуль, который обрабатывает все базовые операции, такие как управление 2d объектами, передвигая их вокруг, взаимодействуя с ними и давая им некоторое поведение. Более сложные операции требуют больше WADE модулей, или плагинов. Для многих приложений они вам не понадобятся, но это зависит от того, что вы делаете. Может быть полезным включить WADE модули позволив движку управлять объектами с векторной графикой, или изометрическим миром, или физикой например.
Итак давай те же приступим ...
Первая вещь, которая вам нужна это копия главного WADE модуля. Вы можете загрузить её отсюда.
Это просто zip файл, давайте взглянем на то, что там внутри:
- Папка doc. Она содержит справочное руководство со списком функций(на английском). Там описывается, что делают функции, что означают их параметры и т. д.
- wade_xxx.js файл. Это главный WADE модуль, сам по себе.
- style.css файл. Это таблица стилей, которая используется браузерами для определение того, как они должны отображать WADE приложения.
- index.html файл. Это файл который вы откроете в выбранном вами браузере, запустив WADE приложение.
Фактически, это было бы хорошей идеей, запустить приложение прямо сейчас. Распакуйте zip файл в локальную папку, откройте ваш index.html файл в браузере, и посмотрите что случится. Если ваш браузер поддерживает HTML5, вы должны получить пустую страницу.
В зависимости от браузера , который вы используете, вам нужно будет сделать кое-что ещё на этом этапе. Это из-за того, что ваши файлы являются локальными(т. е. они где-то на вашем жестком диске), некоторые браузеры реализуют ограничения для локальных файлов, по причинам безопасности.
- Firefox будет блокировать запуск локальных файлов.
- Internet Explorer может показать окно с сообщением, что он заблокировал некоторую функциональность, и вы должны будете кликнуть на кнопку, которая говорит:
Разрешить заблокированный контент.
Браузер в котором ваше приложение запуститься точно - это Chrome.
- Но для этого Chrome нужен дополнительный аргумент командной строки, чтобы быть в состояние работать с локальными файлами. Создайте ярлык для Chrome и отредактируйте его добавив этот параметр:
--allow-file-access-from-files
<На компьютерах с windows, вы можете сделать это нажав правой кнопкой мыши на ярлык Chrome, и выбрав
Свойства
и затем добавьте
--allow-file-access-from-files
в самом конце поля под названием объект, как показано ниже
>
Это всё немного раздражает, но помните, что это только то, что вы должны сделать, когда ваши файлы являются локальными. Это означает, что вашим пользователям никогда не придется делать ничего подобного, поскольку вероятнее, они получат доступ к вашему приложению через web сервер или через объект оболочку, который не требует настройки.
Также если у вас есть собственный сервер в интернете, вы можете сразу разместить файлы игры там, и тестить её. О том как сделать это совершенно бесплатно я расскажу в другой раз.
Итак едем дальше ....
Теперь создадим новый пустой java script файл (назовем его для примера test.js) и разместим его в той же папке, где и все остальные файлы. Это будет ваш главный файл приложения. На данный момент мы оставим его пустым.
Вместо этого давайте отредактируем index.html файл. Вы можете сделать это с любым текстовым редактором. По сути, и это важно подметить, что java script является языком, который не нуждается в компиляции: его можно интерпретировать так, как он есть, с помощью интернет браузера. Это означает, что вам не нужны любые дополнительный инструменты, чтобы редактировать java script файлы и создать WADE приложение. Технически notepad это всё что вам нужно.
Делать всё с notepad-ом это нормальный вариант, и важное, он является бесплатным. Однако по мере того, как ваш проект растет, вам нужен хороший IDE с продвинутыми функциями, синтаксисом и подсветкой ошибок, и т. д. Если вы хотите бесплатное решение, вы можете взять sublime.
В любом случае, давайте откроем index.html с вашим редактором, и вы заметите, что это маленький HTML файл, с одной закомментированной линией кода:
document.addEventListener('DOMContentLoaded', function()
{
//wade.init('app.js');
});
Вы захотите разкомментировать эту линию кода, и укажите на ваш вновь созданный файл приложения. Итак, код будет выглядеть так:
document.addEventListener('DOMContentLoaded', function()
{
wade.init('test.js');
});
если у вас изначально было всё разкомментировано, тогда единственное что вам нужно сделать, это поменять app.js на имя вашего файла, в нашем случае это test.js.
Этот код инициализирует WADE, говоря ему загрузить главный файл вашего приложения названный test.js. Для того, чтобы test.js был распознан как корректный главный файл приложения, он должен быть правильно написанным java script файлом без ошибок, и он должен определить переменную с именем App, которая является функцией.
Давайте же отредактируем файл test.js, и запишем в него следующий код:
App = function()
{
}
App - это функция, которая представляет наше WADE приложение. Теперь хорошее время для того, чтобы сохранить index.html и test.js и обновить окно браузера с вашим приложением. Если все работает корректно, то вы должны увидеть пустую страницу с отсутствующими сообщениями об ошибке. Но также возможен вариант пустой страницы но с ошибками в java script коде. Об этом можно узнать в консоли браузера. Но это уже другая тема ...
Всё. Ваше приложение готово к запуску, осталось лишь наполнить его нужным кодом. Но об этом пойдет речь уже в других статьях.