Файл: Беляев С А - Разработка игр на языке JavaScript - 2016.pdf

Базовые элементы языка

21

В данной строке сохраняются характеристики холста,

такие как параметры координатной сетки (размеры, по
ложение, масштаб), цвета (заливки, линии), тип линии
и т. п. Если обратиться к документации данного метода,
то там приведен следующий список сохраняемой информа
ции: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap,
lineJoin, miterLimit, shadowOffsetX, shadowOffsetY,
shadowBlur, shadowColor, globalCompositeOperation, font,
textAlign, textBaseline. Данная информация сохраняется
до вызова функции restore. Возможен последовательный
повторный вызов функции save, при этом принцип сохра
нения и восстановления идентичен работе стека: «первый
вошел, последний вышел».

Следующие несколько строк вносят изменения в си

стему координат холста.
ctx.translate(40, -10);

Выполняется перемещение в системе координат на за

данные (x, y).
ctx.rotate(30 * Math.PI / 180);

Выполняется поворот системы координат на заданный

угол (в радианах).

ctx.scale(0.3, 0.3);

Выполняется масштабирование системы координат по

каждой координате.

ctx.drawImage(image, 0, 0);

Отображение рисунка в измененной системе координат.

ctx.restore();

Восстановление характеристик холста.
После восстановления характеристик холста выпол

няется повторное отображение рисунка с другими изме
нениями системы координат. Важно обратить внимание,
что во втором случае изменена последовательность преоб
разований холста: смещение в системе координат и пово
рот. Данный случай приведен для того, чтобы обратить
внимание на особенность: изменения системы координат

22

Глава 1

влияют друг на друга. Соответственно, если в первом при
мере поменять местами, например смещение в системе
координат и поворот, то на холсте получится другой ре
зультат (рис. 1.7).

ВОПРОСЫ ДЛЯ САМОПРОВЕРКИ

1. Какие теги HTML вам известны?
2. Какие элементы HTML5 приведены в данной главе?
3. Как создать холст в HTML?
4. Как из JavaScript обратиться к холсту и изменить его размеры?
5. Как отобразить кривую (прямоугольник) на холсте?
6. Как вывести на холст изображение из файла?
7. Какая встроенная функция JavaScript создает интервал запус

ка, необходимый для анимации?

8. Для чего необходимы методы save и restore контекста холста?

УПРАЖНЕНИЯ

1. Нарисуйте на холсте дом с треугольной крышей,

окном и дверью, раскрасьте его разными цветами.

2. Отобразите рисунок на холсте в трех вариантах: мас

штаб 1:1, уменьшенный в 2 раза, увеличенный в 2 раза.

3. Доработайте анимацию из параграфа 1.5, чтобы ри

сунок двигался не только слева направо, затем исчезал и
снова двигался слева направо, но и выполнял последова
тельные бесконечные движения: слева направо, затем
справа налево, затем снова слева направо и т. д.

Рис. 1.7

Трансформация изображения

Г Л А В А   2

ОТОБРАЖЕНИЕ КАРТЫ ИГРЫ

Карта отображает 2D игровое поле, в котором развора

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

2.1.

СОХРАНЕНИЕ КАРТЫ В ФОРМАТЕ JSON

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

создавать карты независимо от программного кода, мож
но воспользоваться редактором карт Tiled [7], который
позволяет сохранять результаты своей работы в формате
JSON (JavaScript Object Notation). Внешний вид редакто
ра карт приведен на рисунке 2.1.

Редактор Tiled в качестве источника информации ис

пользует рисунки, которые разбиваются на прямоуголь
ники заданного размера, так называемые «Наборы тай
лов» (блоков). Именно из этих наборов блоков формиру
ется карта. Карта может состоять из нескольких слоев.
В рамках данного учебного пособия будет описана работа
с картой, сохраненной в формате JSON и содержащей один
слой для блоков и один слой для объектов. Рассмотренные
подходы масштабируются на произвольное количество
слоев.

24

Глава 2

Рассмотрим, в каком формате сохраняются карты на

примере tilemap.json, приведенной на рисунке 2.1 (мно
готочием заменены фрагменты JSON). Объект построен по
всем правилам описания объектов в JavaScript. Формати
рование JSON возможно с использованием [8].

{"height": 15,

"layers": [ { "data": [13, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, …, 3],

"height": 15,

"name": "my_tiles",

"opacity": 1,

"type": "tilelayer",

"visible": true,

"width": 30,

"x": 0,

"y": 0

},

Рис. 2.1

Внешний вид редактора карт Tiled

Отображение карты игры

25

{"height": 15,

"name": "my_objects",

"objects": [

{ "gid": 14,

"height": 0,

"name": "star1",

"properties": {},

"type": "Bonus",

"visible": true,

"width": 0,

"x": 328,

"y": 590

}, …

{ "gid": 25,

"height": 0,

"name": "enemy1",

"properties":{},

"type": "Tank",

"visible": true,

"width": 0,

"x": 698,

"y": 502

}, …

{ "gid": 21,

"height": 0,

"name": "player",

"properties": {},

"type": "Player",

"visible": true,

"width": 0,

"x": 78,

"y": 130

}],

"opacity": 1,

"type": "objectgroup",

"visible": true,

"width": 30,

"x": 0,

"y": 0

}],