Алексей Михайлович Бахирев - Сюрреализм на JavaScript

создавать
подобие 3D игр в браузере.
Напомню, что дело было в 1999 году, и самым передовым на
тот момент считался Internet Explorer 6. Как же им это удавалось?
10

Рис. 2. Цветом выделены составные элементы интерфейса игры.

В то время не было ни CSS-трансформаций, ни элемента canvas.
Для имитации вращения использовался набор картинок, четыре из
которых были закрашены по диагонали. Растяжением и сжатием
этих картинок можно имитировать наклон линии горизонта на
разный угол и создавать эффект свободного вращения.
11

Архитектура игровых движков

История

JS Racing

Рис. 3. Скриншоты
игры JS Racing.

В игре вы управляете машиной и должны обогнать соперника.
Соревнование проходит на различных уровнях. Особенностью игры
была имитация 3D-движения по дороге.

Рис. 5. Скриншот панели разработчика Internet Explorer
при запущенной игре JS Racing.
Вы можете видеть свойства элементов,
которые постоянно меняются.

DiabloX
Рис. 4. Цветом выделены составные элементы
интерфейса игры.

Для создания данного эффекта дорога сделана из набора
картинок, которые растянуты по длине. Чем ближе картинка —
тем больше она растянута, и наоборот — дальние картинки сжаты
по длине. Эти картинки также постепенно смещаются влево или
вправо, имитируя поворот дороги. То же самое касается и всех
дополнительных объектов, начиная от соседних машин и заканчивая
придорожными деревьями. Чем дальше объект, тем больше он сжат
в размерах, чем ближе — тем больше растянут.
12

Рис. 6. Скриншоты игры DiabloX.

В игре вы управляете космическим кораблем и должны
уничтожать другие корабли. Особенностью игры является
относительно большой мир (на самом деле очень маленький)
13

Архитектура игровых движков
и возможность свободно в нем перемещаться (на самом деле это
довольно маленькая прямоугольная платформа).
Эффект перемещения по уровню создавался за счет того, что
множество картинок меняло свое положение за счет абсолютного
позиционирования.
Из этих примеров видно, что для создания элементарной
анимации нам достаточно иметь возможность позиционировать
и накладывать друг на друга картинки, а также сжимать
и растягивать их. Довольно маленьких набор свойств, с точки
зрения поддержки браузера, но довольно большие возможности,
с точки зрения архитектуры.
Тем не менее, большинство разработчиков в то время ушло
в разработку на Flash´е, который предоставлял гораздо более
широкие возможности с точки зрения графики. Обратный же отток
произошел в момент популяризации бренда HTML5 и появления
тега canvas. С одной стороны, к этому моменту уже появилось
достаточно качественной литературы, чтобы значительно
повысить уровень среднестатистического разработчика.
С другой — canvas предоставлял широкие возможности для
портирования игр с других языков, т. к. его API аналогично
«нормальным» языкам программирования. Разработчик теперь
может не только не владеть «магией» работы с DOM, но и быть
достаточно «модным», т. к. использует последние, самые «модные
технологии».

Архитектура

Архитектура
Если вы хотите узнать больше об архитектуре игр, вам следует
обратиться к списку литературы в конце. В этой главе лишь вкратце
будут представлены основные звенья архитектуры сложных
игр. Кроме того, тут совсем не рассматриваются простые игры,
в которых все решается набором из десятка функций.

Рис. 7. Основные элементы ядра игрового движка:
сцена, объекты, камера, дисплей, контроллер.

Минимальным набором для создания игры являются следующие
модули:
—— Сцена. Объект сцены — это то самое место, где будут обитать
объекты и происходить различные действия. Сцена — это мир
вокруг нас. С ней тесно взаимодействует физический движок,
который следит за объектами и обсчитывает их столкновения
друг с другом.
—— Фабрика объектов. Её задача — создавать множество объектов,
с набором стандартных свойств, для того, чтобы их можно было
поместить на сцену. Сюда входят механизмы, отвечающие как
14

15

Архитектура игровых движков
за создание персонажей, так и за объекты уровня: бочки, стены,
предметы окружения.
—— Камера и дисплей. Задача камеры — находить объекты, которые
необходимо отрисовать. Задача дисплея — отрисовывать то,
что видит камера. Иногда эти два объекта комбинируют в один,
иногда — нет. Если у вас это два --">