Question

我是Crafty.js的新手。我目前正在使用这个框架工作的2D Top Down RPG。我正在尝试创建一个自定义组件，其中包含Unit的信息，如Health，Mana，Name等。我的组件代码如下：

Crafty.c("UnitInfo", {

    init: function() {

        this.bind("EnterFrame", function(){

            console.log("Custom Component Test: " + this.message);

        });

    },

    unitinfo: function(message) {

        this.message = message;

    }

});

然后我将这个组件添加到一个单位，在我的情况下，一个敌人实体：

enemy1 = Crafty.e('Enemy, 2D, Canvas, Color, enemy_default, SpriteAnimation, Solid, Collision, UnitInfo')
         .attr({x: (screenWidth/2) + 150, y: (screenHeight/2) + 150, w: spriteBaseW, h: spriteBaseH, curHealth: 100 })
         .checkHits("Skill")
         .unitinfo("Random Msg")
         .bind("HitOn", function() {

            var rndDmg = 0;

            if(currentSkill==1) rndDmg = skillDamage.skill1;
            else if(currentSkill==2) rndDmg = skillDamage.skill2;
            else if(currentSkill==3) rndDmg = skillDamage.skill3;
            else if(currentSkill==4) rndDmg = skillDamage.skill4;

            rndDmg = randomRange(rndDmg-9,rndDmg);
            this.curHealth -= rndDmg;

            Crafty.e("2D, DOM, Text, Tween")
            .attr({x: this.x, y: this.y})
            .textColor("white")
            .text(rndDmg)
            .textFont({size: "20px"})
            .tween({y: this.y-30, alpha: 0.0}, 2000)
            .bind("TweenEnd", function(){
                this.destroy();
            });

            if(this.curHealth<=0) {

                //this.destroy();
                //console.log("An Enemy was killed!!!!");

            }else{

                console.log("Enemy HP: " + this.curHealth + ", Damage Taken: " + rndDmg);
            }

         })
         .bind("EnterFrame", function() {

            enemyAI(this);

         });

当我执行代码时，它显示了这个错误：

console error

我相信unitinfo（）正常工作，因为“Random Msg”出现在控制台日志中，并且每帧都在执行。我只是不明白为什么“这个”被认为是未定义的。有人可以帮我吗？

Answer 1

这是因为您试图对unitinfo()的结果调用bind，但是该方法不会返回实体。

这是javascript的基本方面，但是在Crafty中实现自定义组件时绝对是陷阱。从docs

请记住，方法链接技术（调用e.place().color()）是唯一可行的，因为我们从自定义方法中显式返回了此方法。忘记这样做可能是常见的错误来源，因此，如果收到难以确定的“方法未定义”消息，请记住这一点。

即定义方法时，必须显式返回this才能以这种方式使用它。

Crafty.js中的自定义组件

1 个答案: