未加星标

Getting Started With Crafty: Entities

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

In thelast tutorial,you learned about the basics of entities and how they are the building blocks in your game. In this tutorial, you will go beyond the basics and learn about entities in more detail.

Entities and Their Components

Every entity is made up of different components. Each of these components adds its own functionality to the entity. Crafty offers a lot of built-in components, but you can also create your own custom components using Crafty.c() .

You learned about a few basic components like 2D , Canvas , Color , and Fourway in the first tutorial. Let's begin by creating another entity using these components:

var playerBox = Crafty.e("2D, Canvas, Color, Fourway")
.attr({ x: 50, y: 50, w: 50, h: 50 })
.color("black")
.fourway(200);

When you have a lot of entities with different components, it might become necessary to know if a given entity has a specific component attached to it. This can be accomplished by using the .has() method.

Similarly, you can add components to an entity by using .addComponent() . To add multiple components at once, you can pass them as a string with different components separated by commas or pass each component as different argument. Nothing will happen if the entity already has the component that you are trying to add.

playerBox.addComponent("Jumper, Gravity, Collision");
playerBox.addComponent("Jumper", "Gravity" , "Collision"); You can also remove components from an entity using .removeComponent(String Component[, soft]) . This method takes two arguments. The first one is the component that you want to remove, and the second argument determines whether the element should be soft removed or hard removed. Soft removal will only cause .has() to return false when queried for that specific component. A hard removal will remove all the associated properties and methods of that component.

By default, all components are soft removed. You can set the second argument to false to hard remove a component.

Setting Values for Different Attributes

You will probably need to set different values for specific attributes of all the entities in your game. For example, an entity that represents the food of the main player in the game should look different than the entity that represents the player itself. Similarly, a power up is going to look different than food entities. Crafty allows you to set the values of different entities in a game either separately or all at once using .attr() .

The main entity is currently stored in the playerBox variable. So you can set value of different properties directly using the following code:

playerBox.x = 50;
playerBox.y = 50;
playerBox.z = 2;
playerBox.attr({ x:50, y:50, z:2 })

The z property sets the z-index of different entities. An entity with higher z value will be drawn over another one with a lower value. Keep in mind that only integers are allowed as valid z-index values.

Let's create a food entity with smaller size, a different position, and rotation applied to it. The rotation is specified in degrees, and using a negative value rotates the entity in counterclockwise direction.

var foodBox = Crafty.e("2D, Canvas, Color, Food")
.attr({ x: 150, y: 250, w: 10, h: 10 })
.color("red");
foodBox.attr({ z:1, rotation: 45 });

As you can see in the demo below, both the food and main player are easily distinguishable now. If you try to move the main player over the food, you will see that the food is now drawn below the main player because of a lower z-index.

Binding Events to Entities

There are a lot of events that you may need to respond to while developing a game. For example, you will have to bind the player entity to a KeyDown eventif you want it to grow in size when a specific key is pressed. Crafty allows you to bind different entities to specific events using the .bind() method. Here is an example:

playerBox.bind('KeyDown', function(e) {
if (e.key == Crafty.keys.T) {
this.alpha = 0.5;
}
if (e.key == Crafty.keys.O) {
this.alpha = 1;
}
});

In the following demo, try moving the player over the food and then press the 'T' and 'O' keys. Pressing 'T' will set the opacity of the player to 0.5, and pressing 'O' will restore the opacity back to 1.

Now, let's bind a collision event to our player so that it grows in size whenever it hits food. We will have to add a collision component to the player and use the .checkHits() method. This method will perform collision checks against all the entities that have at least one of the components that were specified when .checkHits() was called.

When a collision occurs, a HitOn event will be fired. It will also have some relevant information about the hit event. A HitOff event is also fired once the collision ends.

playerBox.checkHits("Food")
.bind("HitOn", function(hitData) {
this.color("green");
this.w = this.w + 3;
this.h = this.h + 3;
});

The width and height of the player increases each time a hit occurs. We can use this event for a lot of things including changing the position of food or increasing the score in the game. You could also destroy the food entity by using the destroy() method once the hit was detected.

Making a Selection

In the previous section, we had to just change the properties of a single entity. This could be done easily by using the variable assigned to each entity. This is not practical when we are dealing with about 20 different entities.

If you have used jQuery before, you might be familiar with the way it selects elements. For example, you can use $("p") to select all the paragraphs. Similarly, you can select all entities that have the same common component by using Crafty("component") .

Here are a few examples:

// Select all entities that have the Gravity component
Crafty("Gravity");
// Select all entities that have either DOM or Canvas component
Crafty("Gravity, Jumper");
// Select all entities that have both Gravity and Jumper component
Crafty("Gravity Jumper");

Once you have the selection, you can get the number of elements selected using the length property. You can also iterate through each of these entities or bind events to all of them at once. The following code will change all food entities whose x value is greater than 300 to purple.

Crafty("Food").each(function() {
if(this.x > 300) {
this.color("purple");
}
});

Once you have a selection, you can use get() to obtain an array of all entities in the selection. You can also access the entity at a specific index using get(index) .

Final Thoughts

In this tutorial, you learned how to add or remove components from an entity. You also learned how to select entities with a given component or components and manipulate their attributes and properties one by one. All these things will be very useful when we want to manipulate different entities on our screen based on a variety of events.

If you have any questions about the tutorial, let me know in the comments.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: jQuery
分页:12
转载请注明
本文标题:Getting Started With Crafty: Entities
本站链接:http://www.codesec.net/view/534827.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(11)