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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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