Closure compiler number getting undefined in advanced optimization

Question

I have the following line of code

frame = self.spriteData['backgroundps.png'];
self.bgBoard  = new gg.casino.game.sprite(self.spriteSheet, frame, 0, 0, frame.w, frame.h);
console.log(frame);
console.log(self.bgBoard.x + ' ' + self.bgBoard.y + ' ' + self.bgBoard.w + ' ' + self.bgBoard.h);

and gg.casino.game.sprite is defined as

gg.casino.game.sprite = function(sheet, frame, x, y, twidth, theight) {
    this.sheetRef                               =   sheet;
    this.frame                                  =   frame;
    this.x                                      =   x;  
    this.y                                      =   y;  
    this.w                                      =   twidth;
    this.h                                      =   theight;
    console.log(this.x + ' ' + this.y + ' ' + this.w + ' ' + this.h);
}

when compiling with simpleoptimization, everything works well and I get the following log:

0 0 800 480
(frame object)
0 0 800 480

but when I compile with advanced optimization, log shows

0 0 undefined undefined 
(frame object) - with correct values
0 0 undefined undefined

what could have gone wrong with this code?

EDIT:

added a log after frame = self.spriteData['backgroundps.png'];

console.log('ps ' + frame.w + '   ' + frame.h);

and it prints w and h as undefined !!!!!!

ps undefined undefined

where as console.log(frame) in next line prints the object with correct values

Edit 2:

more on self.spriteData: I have a json file exported from texturepacker. It has an array of objects where each object is represented as

{
"filename": "backgroundps.png",
"frame": {"x":105,"y":304,"w":800,"h":480},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":800,"h":480},
"sourceSize": {"w":800,"h":480}
}

I loop through that json array and assign the values to self.spriteData as follows:

    var respData                            =   xhr.getResponseJson();
    self.spriteData                         =   {};
    for(var i = 0, len = respData.frames.length; i < len; i++) {
        self.spriteData[respData.frames[i].filename] = respData.frames[i].frame;
    }

so frame will having the following structure, which gets printed on console:

Object
  h: 480
  w: 800
  x: 105
  y: 304

so in advanced compilation, there is no problem if I print the frame as console.log(frame). But when I try accessing its members console.log(frame.h) it prints as undefined. Just tried adding @expose comment to var frame = {};, hoping it wont get renamed, but didnt help.

Edit: changed frame assignment as frame.x = self.spriteData['backgroundps.png'].x; frame.y = self.spriteData['backgroundps.png'].y; frame.w = self.spriteData['backgroundps.png'].w; frame.h = self.spriteData['backgroundps.png'].h;

and declared frame.w and frame.h with comment `@type {number} (didnt do for x and y as the were working fine already).

Now console.log(frame) shows

Object
  a: undefined
  b: undefined
  x: 105
  y: 304

but why?

EDIT (Solved) :D :-) I explicitly declared frame's members as

/**
 * @type {number}
 * @expose
 */
frame.w                                     =   0;

/**
 * @type {number}
 * @expose
 */
frame.h                                     =   0;

/**
 * @type {number}
 * @expose
 */
frame.x                                     =   0;

/**
 * @type {number}
 * @expose
 */
frame.y                                     =   0;

and now it works :-)

thanks to Kayhr, Ross and Chad for you help. but now I wonder whose answer should I mark the right one?

It's hard to tell exactly since you didn't post the complete code. Make sure to run the compiler with warning level VERBOSE as that will help point you to the problem. I can tell you right now that your sprite function needs an `/** @constructor */` annotation. — Chad Killingsworth, Jul 06 '12 at 11:39
VERBOSE starts throwing errors for `console.log`.. have to define them as `externs` it seems.. ll do shortly. thx for the tip :-) — saiy2k, Jul 07 '12 at 07:53
and I had `@constructor` and many other comments in my code, just removed those to post here — saiy2k, Jul 07 '12 at 08:17

score 1 · Accepted Answer · answered Jul 06 '12 at 11:55

What is the definition of self.spriteData['backgroundps.png']?

I would be willing to bet that the 'w' and 'h' keys of self.spriteData['backgroundps.png'] are defined with strings. If so, things will usually break when you access such properties with dot-syntax, because the compiler will leave strings untouched but optimize the names of properties written in dot-syntax.

For example:

  foo['bar'] => a['bar']
  foo.bar    => a.b

...where a and b are hypothetical compiler output tokens.

See: https://developers.google.com/closure/compiler/docs/api-tutorial3#propnames

score 1 · Answer 2 · answered Jul 06 '12 at 12:06

Can't reproduce it. I have faked the missing code with simple objects to get your code running. The output is the same, doesn't matter if I use SIMPLE or ADVANCED optimization. I guess your problem is in the code which you did not mention here (Maybe in the definition of this spriteData stuff). Please give us a complete example and the exact compiler options you used.

Here is the code I'm compiling, maybe you can see a crucial difference to your REAL code:

// Faked code (The stuff you didn't include in the question):

var gg, self;
gg = {};
gg.casino = {};
gg.casino.game = {};
self = { spriteData: { 'backgroundps.png': { w: 800, h: 480 } } };

// Your code (unchanged):

gg.casino.game.sprite = function(sheet, frame, x, y, twidth, theight) {
    this.sheetRef                               =   sheet;
    this.frame                                  =   frame;
    this.x                                      =   x;  
    this.y                                      =   y;  
    this.w                                      =   twidth;
    this.h                                      =   theight;
    console.log(this.x + ' ' + this.y + ' ' + this.w + ' ' + this.h);
}

frame = self.spriteData['backgroundps.png'];
self.bgBoard  = new gg.casino.game.sprite(self.spriteSheet, frame, 0, 0,  frame.w, frame.h);
console.log(frame);
console.log(self.bgBoard.x + ' ' + self.bgBoard.y + ' ' + self.bgBoard.w +  ' ' + self.bgBoard.h);

Closure compiler number getting undefined in advanced optimization

2 Answers2