Hitting a brick wall: assigning object to array only works properly if followed by console.log

[grumpygamer]

Hey fellas,

not sure how to name the topic, but here's the problem I'm having.

Once more it's most probably only my js skills acting up.

 

I am creating a graphics object for some stat bars as follows (all the code is in create):

for (i=0; i<defaultShipDataSheet.length; i++){        if (defaultShipDataSheet[i][1] == true) {            this.shipDataLabels[i]  = game.add.bitmapText(labelX, (labelY + labelYoff*labelCounter), 'snaredrum', defaultShipDataSheet[i][0], labelfontsize);            this.shipDataMaxBars[i] = createBar(200, 0x888888, labelCounter);            this.shipDataMaxBars[i].z = 1;            //barw = actual * 200 / max            propertyName = createPropertyName(defaultShipDataSheet[i][0]);                        actual = shipArray[this.currentship].shipData[propertyName].mod;            max    = this.minMaxValues[propertyName].max;            barw = Math.floor(actual * 200 / max);                        this.shipDataBars[i]    = createBar(barw, 0xffffff, labelCounter);            //console.log(this.shipDataBars[i].width);            // IF I ENABLE THIS CONSOLE STATEMENT EVERYTHING WORKS            this.shipDataMaxBars[i].z = 2;            this.layerData.add(this.shipDataLabels[i]);            this.layerData.add(this.shipDataMaxBars[i]);            this.layerData.add(this.shipDataBars[i]);            labelCounter++;            if (labelCounter == 4) { labelCounter = 0;  labelX = labelX + 240}            if (labelCounter == 6) { labelCounter = 0;  labelX = labelX + 480}        }    }

function createBar(w, col, yoff) {        var statBar = game.add.graphics(labelX, labelY + (yoff * labelYoff + 20));            statBar.beginFill(col);            statBar.drawRect(0, 0, w, 3);            statBar.endFill();        return statBar;    } 

in a nutshell I am creating stat bars for different ships that then tween their value whilst browsing through the ships.

 

When I then update the values on keypress (always in create) the values to tween to are all wrong.

Here's the code I use to update the values on keypress:

function updateShipData() {		var labelCounter = 0;		for (i=0; i<defaultShipDataSheet.length; i++){        	if (defaultShipDataSheet[i][1] == true) {        		label = defaultShipDataSheet[i][0];        		propertyName = createPropertyName(label);        		actual = shipArray[currentship].shipData[propertyName].mod;        		max    = minMaxValues[propertyName].max;        		newWidth = Math.floor(actual * 200 / max);                        //console.log(newWidth);                        //This reports the correct value only if the console.log in the previous code block is enabled otherwise it shows "1"        		game.add.tween(shipDataBars[labelCounter]).to({ width :newWidth }, 500, easingX).start();        	}        	labelCounter++;;        }	}

As you can see that console.log only shows the correct value if the console.log in the previous section is uncommented.

I am hitting a brick wall here and can't really continue unless I understand what's going on.

Help?

[XekeDeath]

Pretty sure you will be running into problems if you start with your rectangle drawn on your graphics objects any wider than 1. I'd recommend this:

function createBar(w, col, yoff) {    var statBar = game.add.graphics(labelX, labelY + (yoff * labelYoff + 20));    statBar.beginFill(col);    statBar.drawRect(0, 0, 1, 3); // Width of 1 here...    statBar.endFill();    statBar.scale.x = w; // Scale up to what you want...    return statBar;} 

I gutted your code because there is a lot in there that is not defined in your snippets, and tested locally...

This is what I ended up with for my quick test (I just dropped it into my current project because it happened to be open...)

XekeGames.MainGame.prototype.create = function(){    this.test();    this.game.input.onDown.add(this.updateShipData, this);};XekeGames.MainGame.prototype.test = function(){    this.shipDataMaxBars = this.createBar(200, 0x888888, 100);    actual = 150;    max    = 200;    var barw = Math.floor(actual * 200 / max);    this.shipDataBar = this.createBar(barw, 0x000000, 1);}XekeGames.MainGame.prototype.createBar = function(w, col, yoff) {    var statBar = this.game.add.graphics(10, 10 + (yoff * 10 + 20));    statBar.beginFill(col);    statBar.drawRect(0, 0, w, 3);    statBar.endFill();    return statBar;} XekeGames.MainGame.prototype.updateShipData = function() {    actual = 75;    max    = 200;     newWidth = Math.floor(actual * 200 / max);     this.game.add.tween(this.shipDataBar).to({ width :newWidth }, 500).start();}

When I triggered the updateShipData function, the rectangle became stupidly wide, as I expected it to...

I then put in your console log command in the create function, and it worked as I think you want it to, the bar shrank to the smaller size...

 

I assume that by outputting the width in the create function you are triggering some behind the scenes PIXI magic to calculate the width based on the graphics contents,

and without that call, it is getting set to 1 somewhere by other PIXI magic...

 

When I made the above adjustment in the first code snippet, it worked as I think you want it to without the console.log command in there...

And in theory, that is all you would need to change to get that to work...

[grumpygamer]

thanks I'll try it.

Honestly I was thinking this post was going to drown because of the complex snippet and the inability for me to recreate the full issue.

Anyhow I'll get back to you as soon as I've tested it!

[drhayes]

Yeah, if Pixi is using Object.defineProperty to define a getter for the width then it might only be calculating it when you print it out.

[grumpygamer]

Yup, works brilliantly.

Thanks, really appreciated!