crafty.js의 텍스트 변경

Question

특정 이벤트가 발생했을 때 변경되는 두 가지 변수 (적과 플레이어의 뿔이 있음)가 있습니다. 문제는 텍스트를 변경하는 방법을 모르거나 텍스트를 제거하는 것이므로 표시를 변경할 수 없습니다. 화면의 건강 (현재 저는 이전 건강 상태의 새로운 건강 온상을 놓고 있습니다). 여기에 관련된 구성 요소가 있습니다.

//player character during combat 
//This also controls player input during combat and resolves most of the combat 
//Will display and take inputs for quesions eventually 
Crafty.c('BattlePlayer', { 
init:function() { 
var OpPos = 1; 
var HealthPas = 100 + ',' + 100; 
var FightOver = false; 
//Displays options for the first time with attack selected 
this.requires('Actor, spr_BattlePlayer, SpriteAnimation, Keyboard') 
.bind('KeyDown', function() { if (this.isDown('SPACE')) Crafty.scene('World');}) 
.bind('KeyDown', function() { if (this.isDown('ENTER')) HealthPas = this.BattleSelect(OpPos, HealthPas, FightOver);}) 
.bind('KeyDown', function() { if (this.isDown('S')) if (OpPos < 3){OpPos = OpPos + 1}; this.MenuMove(OpPos); }) 
.bind('KeyDown', function() { if (this.isDown('W')) if (OpPos > 1) {OpPos = OpPos - 1}; this.MenuMove(OpPos); }); 


Crafty.e('2D, DOM, Text') 
.attr({ x: 200, y: 150 }) 
.text(100); 

Crafty.e('2D, DOM, Text') 
.attr({ x: 200, y: 100 }) 
.text(100); 

Crafty.e('AttackSel').at(3,8); 
Crafty.e('DefendUnsel').at(3,13); 
Crafty.e('RunUnsel').at(3,18); 

var MenuPos = 1;  

}, 
//function for displaying what option is currently selected 
MenuMove: function(OpPos) { 
switch (OpPos) 
{ 
case 1: 
//Attack case 
Crafty.e('AttackSel').at(3,8); 
Crafty.e('DefendUnsel').at(3,13); 
Crafty.e('RunUnsel').at(3,18); 
break; 

case 2: 
//Defend case 
Crafty.e('AttackUnsel').at(3,8); 
Crafty.e('DefendSel').at(3,13); 
Crafty.e('RunUnsel').at(3,18); 
break; 

case 3: 
//Run case 
Crafty.e('AttackUnsel').at(3,8); 
Crafty.e('DefendUnsel').at(3,13); 
Crafty.e('RunSel').at(3,18); 
break; 

default: 
//Incorrect input case 
Crafty.e('AttackUnsel').at(3,8); 
Crafty.e('DefendUnsel').at(3,13); 
Crafty.e('RunUnsel').at(3,18); 
} 
}, 

//function for carrying out battle options 
//Within this function Num[0] represents players health and Nums[1] represents the Enemy Health. 
BattleSelect: function(OpPos, HealthPas, FightOver) { 
var Nums = HealthPas.split(','); 
Crafty.e('2D, DOM, Text') 
.attr({ x: 200, y: 150 }) 
.text(Nums[0]); 

switch (OpPos) 
{ 
case 1: 
//Attack case 
if (FightOver == false) 
{ 
Nums[1] = Nums[1] - 20; 
Crafty.e('2D, DOM, Text') 
.attr({ x: 200, y: 100 }) 
.text(Nums[1]); 
Crafty.audio.play('attack'); 
this.EndCheck(Nums[0], Nums[1], FightOver); 
Nums[0] = Nums[0] - 10; 
} 
break; 

case 2: 
//Heal case 
//as this was originaly a string, minus 1 to change it to an integer 
Nums[0] = Nums[0] - 1 + 21; 
this.EndCheck(Nums[0], Nums[1], FightOver); 
break; 

case 3: 
//Run case 
//switch checks what room the player is in the transport them back there 
switch (Location) 
{ 
case 1: 
Crafty.scene('World'); 
break; 

case 2: 
Crafty.scene('HubWorld'); 
break; 

case 3: 
Crafty.scene('Yr10Tp1'); 
break; 

case 3.1: 
Crafty.scene('Yr10Tp1_1'); 
break; 

case 3.11: 
Crafty.scene('Yr10Tp1_1.1'); 
break; 

case 3.12: 
Crafty.scene('Yr10Tp1_1.2'); 
break; 

case 3.2: 
Crafty.scene('Yr10Tp1_2'); 
break; 

case 3.3: 
Crafty.scene('Yr10Tp1_1.3'); 
break; 

case 4: 
Crafty.scene('Yr10Tp2'); 
break; 

case 5: 
Crafty.scene('Yr10Tp3'); 
break; 

case 6: 
Crafty.scene('Yr11Tp1'); 
break; 

case 7: 
Crafty.scene('Yr11Tp2'); 
break; 

case 8: 
Crafty.scene('Yr11Tp3'); 
break; 

default: 
Crafty.scene('World'); 
} 

default: 
this.EndCheck(Nums[0], Nums[1]); 
Nums[0] = Nums[0] - 10; 
} 
HealthPas = Nums[0] + ',' + Nums[1]; 
return HealthPas; 
}, 

//function to check for winning conditions 
EndCheck : function(PlayerHealth, EnemyHealth, FightOver) 
{ 

if (EnemyHealth < 1) 
    { 
    FightOver = true; 
    monsterBeat = true; 
    } 
else if (PlayerHealth < 1) 
    { 
    FightOver = true; 
    } 

if (FightOver == true) 
{ 
Crafty.e('2D, DOM, Text') 
.attr({ x: 500, y: 150 }) 
.text('Victory!'); 
} 
return FightOver; 
}, 
}); 

Answer 1

the documentation for text을 확인하십시오.

텍스트를 직접 설정하려면 엔터티의 text 메서드를 호출하기 만하면됩니다. 따라서 기본 속성이 변경 될 때마다 메서드를 직접 호출하거나 "UpdateHealth"이벤트를 설정하여이 작업을 수행 할 수 있습니다.

Crafty.e('2D, DOM, Text') 
    .attr({ x: 200, y: 150 }) 
    .text(Nums[0]); 
    .bind("UpdatePlayerHealth", function(health){this.text(health)}); 

을 그리고 플레이어가 피해를했다 때 다음,이 같이 보입니다 코드가 이벤트를 트리거 것 :

그래서, 텍스트 구성 요소는 다음과 같을 수

Crafty.trigger("UpdatePlayerHealth", this.health); 

이와 같은 이벤트를 사용하면 텍스트 개체에 대한 참조를 수행 할 필요가 없으며 플레이어의 상태가 변경 될 때 게임의 다른 측면을 수정할 수 있다는 이점이 있습니다. 당신이 원하는 경우

, 당신은 같은 개체를 사용하여 이벤트에 더 많은 정보를 전달할 수 :

Crafty.trigger("UpdatePlayerHealth", {health: this.health, damage: damageValue}); 

(물론 당신은 또한 텍스트 표시에 바인딩 기능을 조정해야 할 것입니다 만, 그저 숫자가 아니라 객체를 전달할 것이기 때문입니다.)