В субботу у меня ближе к полуночи появилось свободное время и жгучее желание сделать игрушку под браузер, забавы ради и увеличения опыта для. С жанром определился довольно быстро: т.к. на MMORPG в этот раз у меня точно не хватило бы времени, я решил делать просто мясорубку. Минут 20 ушло на написание базового кода для управления игроком и его противниками. И тут встал вопрос — 2D или 3D (вернее так: Canvas/SVG или все же полноценный WebGL)?

Учитывая, что я сейчас участвую в разработке проекта, где WebGL является базовой технологией для 3D режима, выбор я сделал осознанно. Уже примерно полгода я работаю с замечательной библиотекой Three.js и в этот раз она снова стала моим лучшим помощником.

В следующий час была создана и настроена сцена, добавлена болванка игрока в виде пары примитивов и создана первая версия противников.

Теперь немного подробностей.
Для управления камерой я сделал ограниченный режим вращения по вертикали и горизонтали, что, на мой взгляд, достаточно удобно для управления мышкой. Пушка, которая по сути олицетворяет главного героя, закреплена в центре координат и вращается вслед за камерой, соответственно – она всегда имеет тот же угол, что и камера.
Противники появляются в определенном диапазоне пространства, заданном углами отклонения от центра и расстоянием до него.

Данный вариант расположения позволил достаточно просто реализовать движение противников на нашу пушку, т.к. зная угол отклонения противника мы просто постепенно перемещаем его в центр координат, уменьшая дистанцию между ним и пушкой.

Собственно, в качестве результата в ночь на воскресенье я имел следующую картинку:

Воскресенье я провел в приятных семейных хлопотах, а в понедельник посвятил себя работе над основным проектом. И вот наступил вторник. По дороге в офис я успел переключиться на “игрушку” и продумал дальнейший план реализации.

Первым делом, после того как я вошел в офис, я попросил нашего моделлера сделать мне для антуража модель сухого дерева, а сам подобрал на просторах сети модельку пушки. Модель противника я взял из примеров к библиотеке Three.js.
Народ в офисе периодически подходил посмотреть чем я занят. Все мило улыбались и ждали ссылку.

Буквально за несколько минут было придумано название (его смысл раскроется попозже), а затем я попросил нарисовать заставку, кнопки, иконки фрагов и здоровья, это с удовольствием сделал наш дизайнер.

Потом я подумал, что на дворе зима и без снега будет неуютно. Сказано – сделано, за 10 минут был прикручен снег на основе системы частиц.

Source: habrahabr.ru