前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CraftyJS 学习一 -- Entity

CraftyJS 学习一 -- Entity

作者头像
tonglei0429
发布2019-07-22 12:23:25
4590
发布2019-07-22 12:23:25
举报

使用 entities

一个实体是你游戏中的一些东西。如果这听起来很模糊,这是因为几乎任何可以实体——玩家,敌人,一弹,高分的计数器,或菜单项。

实体是由组件组成,可以理解为捆绑功能。Crafty 提供了一些内置的组件,你也可以通过Crafty.c()自定义。

创建 entities

创建Entity可通过以下方法 Crafty.e():

代码语言:javascript
复制
var square = Crafty.e("2D, Canvas, Color");

核心成员及方法

Component methods

你可以随时添加或删除其组建,例如上一例中的代码改写成:

代码语言:javascript
复制
var square = Crafty.e("2D, Canvas");
square.addComponent("Color");

当我们希望去掉 square 的颜色时,可采用如下方式

代码语言:javascript
复制
square.removeComponent("Color", false)

removeComponent 方法中的 false 参数,代表我们将完全删除 color 对象的所有关联的属性及方法

通过 Has 方法,可以查看 Entity 是否具有某种组件

代码语言:javascript
复制
if (e.has("Explode"))
    e.explode();

设置属性

要修改一个组件的属性,可以直接赋值,也可以通过 attr 属性

代码语言:javascript
复制
square.x = 5;
square.y = 10;

等效于

代码语言:javascript
复制
square.attr({x:5, y:10})

事件

Crafty 事件分为全局与本地,通过 .bind() 方法实现监听. 为上一步创建的 square 对象绑定事件

代码语言:javascript
复制
// Bind a function to the eventsquare.bind("ChangeColor", function(eventData){        // `this` refers to the entity
        this.color(eventData.color);
    })// Trigger that event directly on the entitysquare.trigger("ChangeColor", {color:"blue"});

在上面的代码中,我们直接触发实体上的效力。你也可以触发一个影响全局,这意味着所有的实体将收到它。事件通常用于组件之间的通信——你可以找到关于组件的文档这样的事件信息。

若要让事件只出发一次,可使用 one() 代替 bind(). 事件解绑使用方法 unbind().

更多关于 events

销毁

destroy() 方法可以销毁Entity对象

选择 entities

每当 Entity 被创建时会自动生成一个id, 获取id可以通过方法 getId()

如果你知道某个 Entity 的ID, 可以这样获取他

代码语言:javascript
复制
var secondEntity = Crafty(2);

Crafty 既是对象又是方法,可以像 Jquery 一样同事选择多个

代码语言:javascript
复制
// Select all entities with the 2D componentsCrafty("2D");// select all entities with both 2D and DOMCrafty("2D DOM");// select entities with either DOM or CanvasCrafty("DOM, Canvas");// Select all entitiesCrafty("*");

一旦你有一个选择,你可以直接调用相关方法:

代码语言:javascript
复制
// Bind a function to *every* entity with the Keyboard componentCrafty("Keyboard").bind("KeyDown", function(){    // Do something on keydown});// Explode all the things!Crafty("*").trigger("Explode");

你可以在每一个实体的上下文中运行一个函数:

代码语言:javascript
复制
// Move every 2D entity 5 pixels to the rightCrafty("2D").each(function() {    this.x += 5;
});

If you need to know how many entities are in the selection, you can check thelength property.

You can use get() to either obtain an array containing every entity in the selection, or the entity at a particular index:

如果你需要知道有多少实体的选择,你可以检查 length 属性。

你可以使用get()要么得到一个数组包含在选择每一个实体,或实体在一个特定的指数:

代码语言:javascript
复制
// Get the first Canvas entityvar first_entity = Crafty("Canvas").get(0);// Get an array of all 2D entitiesvar array_of_entities = Crafty("2D").get();// Convert to an array of ids, rather than entitiesvar array_of_ids = Crafty("2D").toArray();
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 使用 entities
  • 创建 entities
  • 核心成员及方法
    • Component methods
      • 设置属性
        • 事件
          • 销毁
          • 选择 entities
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档