В последней серии Crafty вы узнали о различных способах перемещения элементов с помощью клавиатуры. В то время как клавиатура может помочь вам создавать различные игры, в некоторых ситуациях вам нужно управлять различными событиями мыши, чтобы сделать игру более приятной. Например, рассмотрим игру, в которой воздушные шары появляются в случайных местах на экране. Если пользователю нужно нажать на шарики, чтобы набрать очки, вам обязательно понадобится компонент « Мышь» .
Аналогично, компонент « Keyboard не будет полезен при разработке игр для мобильных устройств. В этом случае вам придется полагаться на компонент Touch для создания своих игр. В этом руководстве вы узнаете о компонентах Mouse и Touch в Crafty.
Компонент мыши
Компонент Mouse используется для добавления основных событий мыши к объектам. Вот список всех событий, включенных в этот компонент:
- MouseOver : это событие вызывается, когда мышь входит в сущность.
- MouseOut : это событие вызывается, когда мышь покидает объект.
- MouseDown : это событие вызывается при нажатии кнопки мыши на объекте.
- MouseUp : это событие вызывается, когда кнопка мыши отпускается внутри объекта.
- Щелчок : это событие вызывается при нажатии кнопки мыши внутри объекта.
- DoubleClick : это событие срабатывает, если дважды щелкнуть кнопку мыши на объекте.
- MouseMove : это событие вызывается, когда мышь движется внутри объекта.
Имейте в виду, что события мыши будут запускаться на объекте, только если вы добавили к ним компонент Mouse . Вот некоторый код, который связывает событие MouseMove с полем в демке ниже:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
var Box = Crafty.e(«2D, Canvas, Color, Mouse»)
.attr({
x: 200,
y: 100,
w: 200,
h: 200
})
.color(«black»)
.origin(«center»)
.bind(‘MouseMove’, function() {
this.rotation += 1;
});
|
После привязки блока к событию MouseMove каждое движение мыши над блоком будет поворачивать его на 1 градус. Метод .origin() был использован для установки точки вращения нашего бокса в центр. Он также может принимать другие значения, такие как "top left" , "bottom right" и т. Д.
Попробуйте переместить курсор внутрь и из поля в демоверсии. Удерживание кнопки мыши внутри поля вызовет событие MouseDown и изменит цвет окна на красный.
Объект MouseEvent также передается в качестве параметра в функцию обратного вызова всех этих событий мыши. Он содержит все данные, связанные с этим конкретным событием мыши.
Вы также можете проверить, какая кнопка мыши была нажата пользователем, используя свойство mouseButton . Например, щелчок левой кнопкой мыши может быть обнаружен с помощью Crafty.mouseButtons.LEFT . Точно так же щелчок средней кнопки можно обнаружить с помощью Crafty.mouseButtons.MIDDLE .
Компонент MouseDrag
Компонент MouseDrag предоставляет объекту различные события перетаскивания мышью. Однако добавление этих событий не будет иметь большого смысла, если саму сущность нельзя будет перетаскивать. Вы можете добавить способности перетаскивания к объекту с помощью компонента Draggable . Этот компонент прослушивает события от компонента MouseDrag и соответственно перемещает данную сущность. Компонент MouseDrag автоматически добавляется к любому объекту с компонентом Draggable .
Компонент Draggable имеет три метода: .enableDrag() , .disableDrag() и .dragDirection() . Первые два метода включают и отключают перетаскивание объекта соответственно. Третий метод используется для установки направления перетаскивания.
По умолчанию объект будет двигаться в любом направлении, в котором движется курсор. Однако вы можете ограничить движение объекта в вертикальном направлении, используя this.dragDirection({x:0, y:1}) . Точно так же вы можете заставить объект двигаться только в горизонтальном направлении, используя this.dragDirection({x:1, y:0}) .
Вы также можете указать направление непосредственно в градусах. Например, чтобы переместить элемент на 45 градусов, вы можете просто использовать this.dragDirection(45) вместо this.dragDirection({x:1, y:1}) .
Помимо перетаскивания элементов вокруг, также необходимо знать, когда перетаскивание началось и остановилось. Это может быть достигнуто с помощью StartDrag и StopDrag . Существует также событие Dragging которое запускается во время перетаскивания объекта.
Вот код для перетаскивания красной рамки в демо ниже:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
var hBox = Crafty.e(«2D, Canvas, Color, Draggable»)
.attr({
x: 50,
y: 50,
w: 50,
h: 50
})
.color(«red»)
.dragDirection(0)
.bind(‘Dragging’, function(evt) {
this.color(«black»);
})
.bind(‘StopDrag’, function(evt) {
this.color(«red»);
});
|
После установки ширины, высоты и положения ящика я использовал .dragDirection(0) чтобы ограничить движение нашего ящика в горизонтальном направлении. Я также использовал метод .bind() чтобы связать сущность с методом StopDrag и StopDrag .
Изменение цвета на черный дает пользователю указание на то, что объект в данный момент перетаскивается. Вы также можете использовать событие StartDrag вместо Dragging потому что цвет объекта нужно изменить только один раз. Событие Dragging более уместно, когда необходимо постоянно изменять или отслеживать свойство перетаскиваемого объекта. Например, вы можете использовать следующий код, чтобы отключить перетаскивание на поле, когда оно достигнет нужного места.
|
1
2
3
4
5
6
|
hBox.bind(‘Dragging’, function(evt) {
this.color(«black»);
if(this.x > 300) {
this.disableDrag();
}
});
|
Сенсорный компонент
Если вам нужен доступ к событиям касания для объекта, вы можете использовать компонент Touch . Этот компонент дает вам доступ к четырем различным событиям:
- TouchStart : это событие вызывается при касании объекта.
- TouchMove : это событие вызывается, когда палец перемещается по объекту.
- TouchCancel : это событие срабатывает, когда что-то нарушает событие касания.
- TouchEnd : это событие вызывается, когда палец поднимается над объектом или покидает его.
Первые три события имеют доступ к объекту TouchEvent , который содержит всю информацию о касании.
В некоторых играх или проектах может потребоваться обнаружение нескольких касаний. Это может быть достигнуто путем включения мультитач с помощью Crafty.multitouch(true) . Передача этого метода true или false включает и выключает мультитач.
Перед использованием компонента Touch в ваших проектах вы должны знать, что в настоящее время он несовместим с компонентом Draggable .
Вывод
После завершения этого урока вы сможете правильно обрабатывать различные события мыши или легко создавать игры на основе перетаскивания. Имейте в виду, что в этом руководстве я использовал Crafty версии 0.7.1, и демонстрационные версии могут не работать с другими версиями библиотеки.
В следующем уроке вы узнаете, как использовать спрайт-листы для анимации различных игровых персонажей в Crafty.