Crafty.js 中的自定义组件

Question

我是 Crafty.js 的新手。我目前正在使用此框架工作制作 2D Top Down RPG。我正在尝试创建一个自定义组件，它将包含该单位的信息，例如生命值、法力值、名称等。我的组件代码如下：

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" 出现在控制台日志中并且每帧都在执行。我只是不明白为什么 "this" 被识别为未定义。有人可以帮我解决这个问题吗？

Answer 1

这是因为您正试图对 unitinfo() 的结果调用绑定，但该方法并未 return 实体。

这是 javascript 的一个基本方面，但在 Crafty 中实现自定义组件时绝对是个难题。来自 docs

Keep in mind that the method chaining technique (calling e.place().color()) is only possible because we explicitly return this from our custom method. Forgetting to do so can be a common source of errors, so keep that in mind if you get a hard-to-pin-down "method undefined" message.

即当你定义一个方法时，你必须显式 return this 才能以这种方式使用它。

Crafty.js 中的自定义组件

Custom Components in Crafty.js

craftyjs