1.Система Entity компонентов.

Системы Entity компонента очень просты для понимания и в игровой индустрии, это так же имеет смысл. Прежде всего, каждый объект в игре entity; чист и прост. Как только вы хотите, чтобы эти лица (entities) что-то сделали, то нам нужны компонентов.Компоненты лишь объекты, которые содержат свойства и методы, и после прилажения к лицам, расширять функциональность этих лиц. Обратите внимание на то, что многие компоненты могут быть применены ко многим лицам (а многие к более многим).

Вот пример создания entity(лица) игрока:

var player = Crafty.e();

Теперь у нас есть объект для игрока. Он не делает ничего, но он существует. Теперь мы должны решить, что субъект должен сделать и то, что могут ли быть добавлены компоненты, которые позволят нам сделать это. Прежде всего, эти лица должны быть сделаны на сцене. И мы хотим что бы reasons для браузера был DOM.
Все компоненты, необходимые для этого помечаются типом '2 D', который дает сущность х, у (ширину и высоту, свойства и различные методы). Другой компонент называется "DOM", которsq будет автоматически рисовать себя на сцене, как div.

Чтобы добавить эти компоненты, просто используйте метод addComponent (расширенный Crafty core):

player.addComponent("2D, DOM");

Единственная проблема заключается в том, что в игрок не похож на что-нибудь(не имеет спрайта). Одним из основных компонентов мы можем воспользоваться, называется он "color", которым будет заполнен короб(примитив) лица (entity) в заданый цвет. Допустим что мы хотим, чтобы игрок являлся красной рамкой, для этого запищем такой тег: player.addComponent("color").color("red");. В поледний пункт мы добавили необходимый нам цвет и называется это конструктор(constructor), основной метод которого является важным для инициализации компонента лица с некоторыми данными (в этом случае это цвет который мы хотим использовать).

Одна из проблем, у нас в том, что размеры игрока равны (0). Для того чтобы он стал видимым он должен иметь некоторые размеры, которыми являются свойства унаследованные от компонентов '2 D '. Чтобы изменить свойства можно воспользоваться методом Attr ().

player.attr({x: 5, y: 5, w: 50, h: 100});

Как только этот метод был выполнен, игрок теперь должен быть виден как красный прямоугольник на экране, 5 пикселей от верхнего левого угла сцены, 50 пикселей в ширину и 100 пикселей в высоту.

2: Повторно используемые компоненты и расширения.

Компоненты имеют решающее значение для предоставления вашего лица(entities) функциональности и мощности.Красота компонентов в Crafty является их многократное использование не только в ваших играх, но любой другой игре Лукавая следовательно разработчикам рекомендуется отдать должное сообществу путем представления компонентов, которые были очень полезны.

В Crafty, компонентами могут быть этикетки значение добавления компонента без всякого определениябудут просто назвать это и сделать его доступным через Crafty селекторы(crafty selectors), даже без функциональности(functionality). Примером этого является при использование гравитации компонента, конструктор принимает компонент для которого он ищет столкновения. Этот компонент не должен существовать, не привязываясь к лицу(entity).

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

Crafty.c("explosive", {

});

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

Нам нужен код для вызова, компонент которого добавляется в (entity), чтобы сделать это мы добавили метод под названием «init».

Crafty.c("explosive", {
init: function() {
if(!this.has("collision")) this.addComponent("collision");
this.collision("player", function(obj) {
//урон игроку.
});
}
});

Функция инициализации будет проверятьимеют ли столкновения добавленные компоненты, если их не будет, то она добавить его. Затем она вызывает метод унаследованный от столкновения компонента. Функция будет работать всякий раз, когда происходит столкновение между текущим лицом(entity) и тем, который мы определим в первом аргументе. Нам нужен explosive столкновения с игроком которому, как мы считаем будет компонент или лейбл под названием "Player".

Crafty.c("explosive", {
init: function() {
if(!this.has("collision")) this.addComponent("collision");
this.collision("player", function(obj) {
if(obj.has("health")) {
obj.hurt(4);
}
this.destroy();
});
}
});

При обнаружении конфликта, объект с которыми он сталкивается будет передан в качестве аргумента. Проверяем имеют ли здоровье добавленные компоненты. Если это так, нужно отнять немного здоровья (единиц урона, я произвольно выбрал 4).

Метод расширения пространства имен - Crafty.extend (). Просто передайте это к объекту со свойствами и методами или даже большим объектам которые вы хотели бы видеть внутри Crafty namespace.

Crafty.extend({
version: "0.1"
});

Crafty.version; //равно '0.1'