Jump to content

Texts rendering over each other


Zeephaser
 Share

Recommended Posts

 

the texts created in the ridFactory()  and  valInput() functions   don't update but is rendered on top of the previous ones, I don't know what's wrong. Please help 

 

create:function(){
this.input=this.game.add.inputField(10,200,{
    font: '18px Arial',
    fill: '#212121',
    fontWeight: 'bold',
    width: 150,
    padding: 8,
    borderWidth: 1,
    borderColor: '#000',
    borderRadius: 6,
    cursorColor: 'red'
    
    
});
//parse and add json file to cache    
this.riddles=this.game.cache.getJSON("riddles");

//assign array in json files to rArray
this.rArray=this.riddles.rArr;
    
this.game.stage.backgroundColor="#ff3399";
//create riddles here
this.ridFactory();
    
this.valButton=this.game.add.button(this.game.world.width*0.5,this.game.world.height*0.5,'button',this.validateInput,this);
this.valButton.anchor.setTo(0.5);    
//this.cursors=this.game.input.keyboard.createCursorKeys();
},

update:function(){
   
},

ridFactory:function(){
//var for holding current riddle
this.currRid=Phaser.ArrayUtils.removeRandomItem(this.rArray);

this.style={font:"40px Arial",fill:"#fff",align:"center"};
this.ridText=this.game.add.text(0,0,this.currRid.riddle,this.style);

 
    },
    
validateInput:function(){
    var gameMessage="";
    if(this.input.value==''){
      this.gameMessage = this.game.add.text(0,400,"input text",this.style);  
    }
    else{
    if(this.input.value!==this.currRid.answer){
       this.gameMessage = this.game.add.text(this.game.world.width*0,this.game.world.height*0.75,"you are wrong",this.style);
        this.ridFactory();
    }
    else{
       this.gameMessage = this.game.add.text(this.game.world.width*0,this.game.world.height*0.75,"you are correct",this.style);
    }    
        this.ridFactory();
        }
}    
    
    
};

game.state.add("main",mainState);
game.state.start("main");

 

Edited by Zeephaser
put code before description of the problem
Link to comment
Share on other sites

This is because you are creating new texts every time...

They are not replacing the old ones, they are brand new objects, added to the stage on top of the old objects...

You want to use this.game.add.text once, save the reference, then set the text value each time you want it to change...

create:function()
{
    // Your code
    this.gameMessage = this.game.add.text(this.game.world.width*0,this.game.world.height*0.75,"input text",this.style);
}
validateInput:function()
{
    if(this.input.value=='')
    {
        this.gameMessage.text = "input text";
    }
    else
    {
        if (this.input.value !== this.currRid.answer)
        {
            this.gameMessage.text = "you are wrong";
            this.ridFactory();
        }
        else
        {
            this.gameMessage.text = "you are correct";
        }
        this.ridFactory();
    }
}
	

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...