Passing a hex number that includes letters from an array of hex numbers to .setTint() not working properly

user_19108978 0
Viewed 60

I have a following array of hex numbers, that are different characters in the game.

gameState.charactersArray = [0xff5c33, 0x324563, 0x000000, 0xffffff, 0x003300];

And if I try to access a number that includes letters, so indeces 0 and 3, then the character simply isn't displayed (btw, I'm not getting any errors logged to the console). The hex numbers from that array composed only by numbers, so indeces 1, 2 and 4 work fine.

Also, if in the line:

gameState.character.setTint(gameState.charactersArray[gameState.characterIndex]);

I put any of the hex numbers with letters, for example 0xff5c33 instead of gameState.charactersArray[gameState.characterIndex] then it works fine too.

I just want to be able to set the character's color based on user's choice. Also gameState.characterIndex works fine, no issues there.

phaser-framework hex arrays javascript
1 Answers

Since hex numbers are numbers and both are treated the same (in javascript), it should not matter, if you use the hex literal or the decimal form. So the problem is probably somewhere else, maybe the gameState.characterIndex is not correct, or the tint is added serveral times?

But if you want to be on the save side, you could use the phaser Color object, with this you can convert into string, numbers, or access the single components.

Here a demo, illustrating the previous mentioned points:
(if you use the color object, I would use it at the initialisation of the array, like let colors = [Phaser.Display.Color.ValueToColor(0xff5c33),..] or so.

document.body.style = 'margin:0;';

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    backgroundColor: 0xcdcdcd,
    scene: {
        preload,
        create
    },
    banner: false
}; 

function preload(){
    this.load.image('img', 'http://labs.phaser.io/assets/sprites/copy-that-floppy.png');
}

function create () {
   
   let colors = [0xff5c33, 0x324563, 0x000000, 0xffffff, 0x003300];
   
   for(let idx = 0; idx < colors.length; idx++){
       let currentColor = colors[idx];
       let colorObj = Phaser.Display.Color.ValueToColor(currentColor); 
       let colorString = Phaser.Display.Color.RGBToString(colorObj.r, colorObj.g, colorObj.b);
       
       let img = this.add.image(10 + (idx * 90), 10 , 'img').setScale(.5).setOrigin(0);
       let text = this.add.text(10 + (idx * 90), 90, `${currentColor}\n${colorString}`, {color: colorString});
       img.setTint(currentColor);
   }
}

new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

Update (from the comments):
the array values for index 0 and 3 must have been overwriten somewhere.

user_16792860
Related