Начало работы с Crafty : Введение

() translation by (you can also view the original English article)

Если Вы когда-либо создавали HTML5 игры, Вы может быть знакомы с некоторыми игровыми движками, Которые могут сделать процесс разработки легче. Все эти игровые движки имеют код, необходимый Вам для обнаружения столкновений, создания различных объектов и добавления звуковых эффектов к игру. В этом руководстве Вы узнаете об игровом движке Crafty. Он легок в использовании и поддерживает все основные браузеры, включая IE9.

Библиотека составляет 127 килобайтов и это не отразится на задержке в загрузке игры. Оно поддерживает независимо перемещаемые карты, поэтому Вы можете с легкостью рисовать игровые объекты на экране. Вы можете создавать настраиваемые события, которые могут быть запущены когда Вы хотите или на какой объект Вы хотите.

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

Начальная настройка

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

1	Crafty.init([Number width, Number height, stage_elem]);

Первые два аргумента определяют ширину и высоту сцены. Третий аргумент используется для конкретизации элемента,который мы собираемся использовать на нашей сцене. Если третий аргумент не будет предоставлен, Crafty будет использовать div с идентификаторомcr-stage как свою сцену. Аналогично, если не выставлены данные по ширине и высоту, Crafty установит ширину и высоту нашей сцене, равную ширине и высоте окна.

На данный момент вы должны иметь следующий код:

<html>
  <head></head>
  <body>
    <div id="crafty-game"></div>
    <script type="text/javascript" src="path/to/crafty.min.js"></script>
    <script>
      Crafty.init(600,400, document.getElementById('crafty-game'));
    </script>
  </body>
</html>

Создание объектов

Объекты - это строительные блоки игры Crafty. Все, от игрока до врагов и препятствий представляется, используя объекты. Вы можете перейти к списку компонентов объекта. Каждый из этих компонентов может добавить дополнительные функциональные возможности нашим объектам путем присвоения свойств и методов этого компонента объекту. Вы также можете привязать другие методы для объекта, чтобы задать различные свойства, как ширина, высота, расположение и цвет. Вот очень простой пример добавления компонентов объекту:

1	Crafty.e('2D, Canvas, Color');

Каждый субъект, который Вы хотите представить пользователю, нуждается в 2D компоненте и отрисованном слое. Уровень отрисовки может быть DOM, Canvas или WebGL. Обратите внимание, что поддержка WEBGL была добавлена в версии 0.7.1. В настоящее время, только компоненты Sprite,Image, SpriteAnimation и Color поддерживают WebGL рендеринг . Текстовые объекты все еще используют DOM и Canvas .

Сейчас Вы можете использовать метод attr() для установки значений определенных показателей, которые включают ширину, высоту и положение объекта. Многие методы в Crafty могут вернуть объект в исходное положение иattr() не является исключением.Это обозначает что Вы сможете связывать методы для установления характеристик Ваших элементов. Вот пример :

1	Crafty.e("2D, Canvas, Color")
2	.attr({x:200, y:100, w:200, h:50})
3	.color("orange");

Это создаст оранжевый прямоугольный объект на сцене.

Перемещение объектов

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

Объект может быть перемещен при помощи клавиш со стрелками или клавишами W,A,S и D.Вы можете уставить число как аргумент в конструкторе Fourway для установки скорости объекта.Давайте взглянем как выглядит код объекта сейчас:

1	Crafty.e("2D, Canvas, Color, Fourway")
2	.attr({x:200, y:100, w:200, h:50})
3	.color("orange")
4	.fourway(300);

Вы можете ограничить движение объекта только в два направления, используя компонент Twoway. Замещение в коде компонента Fourwayна Twoway ограничит движение объекта и он сможет двигаться только в горизонтальном направлении. Вы можете увидеть результат в следующем демо:

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

1	Crafty.e("2D, Canvas, Color, Twoway, Floor")
2	.attr({ x: 200, y: 340, w: 200, h: 50 })
3	.color("orange")
4	.twoway(300);

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

1	Crafty.e("2D, Canvas, Color, Gravity")
2	.attr({ x: 200, y: 50, w: 50, h: 50 })
3	.color("black")
4	.gravity("Floor");

Заключительные мысли

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

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