How to get the size of a sprite?

cocos2d-x JavaScript
#1

I’m trying to get the width and height of a Sprite:

var SpriteTest = cc.Layer.extend (
{
    init:function()
    {
        var testSprite = cc.Sprite.create("./test.png");
        var layer1 = cc.LayerColor.create(
            new cc.Color4B(100, 100, 100, 255), 600, 600);
        layer1.setPosition(new cc.Point(0.0, 0.0));
        layer1.addChild(testSprite);

        testSprite.setPosition(new cc.Point(300, 300));
        this.addChild(layer1);

        console.log(testSprite.getBoundingBox().getWidth()); // Returns 0
        console.log(testSprite.getBoundingBox().getX());     // Returns 300, OK
        console.log(testSprite.getContentSize().width);      // Returns 0
    }

});

I’ve searched about this, but the only examples I’ve found uses the ‘getContentSizeInPixels()’ which seems deprecated. I’m using version 2.1.1.
Can someone help me?
#2

testSprite.getBoundingBox().size.height

&

testSprite.getBoundingBox().size.width

#3

I’ve tried that too, but the result is always zero for ‘testSprite’. Using the same code for ‘layer1’ gives me the right size for the LayerColor (600).
Both cc.LayerColor and cc.Sprite extends cc.Node, right? Am I missing something?

#4

Are you sure your sprite is loading?

I use spritesheets now in days, so I’m not sure about loading directly from disk. That path seems odd though.

Wouldn’t it:

var testSprite = cc.Sprite.create(“…/test.png”);

If test.png is up a directory in the tree,

Or:

var testSprite = cc.Sprite.create(“test.png”);

If it’s in the same directory?

#5

My sprite is loading correctly , I can change the position, rotation, scale, etc. Everything I’ve tested works fine, except for reading the size properties.

#6

try getContentSize()

#7

I have the same problem some days ago,

the correct syntax is

var sprite = cc.Sprite("res/monster.png");
var heightImage = sprite.getContentSize().height;

But is important to know that cocos2d-html5 load files async, you need to load your images in the resources.js file

var s_monster = "res/monster.png";
var g_ressources = [
    {type:"image", src:s_monster}
]

If you don’t load your images in resources file, you can’t get the correct size of your images because the app will try to get the image that is not loaded

#8

Thank you Fabio Cunha! Using the ‘resources.js’ file to load the images solved my problem.
This is kind of a beginners trap, I was following the tutorials on Wiki and adapting the code. Things like ‘shareLoader()’ and ‘setIsRelativeAnchorPoint(true)’ were easy to figure out, but the ‘resources.js’ is never mentioned. I know the template project have this already set up, but the Wiki page should be updated with these basic instructions.

#9

sprite->boundingBox().size.width;

#10

Note that the values need to be scaled to get the true width/height in pixels.

#11

I encountered this problem too.
if the image have not been preloaded (by added to resource.js), the sprite content size is zero and the texture of sprite is null during initialization, download start asynchronously.

The conclusion is: if your sprite initialization depend on the size of the image, you must preload the image.

#12

Yes, agree: if your sprite initialization depend on the size of the image, you must preload the image.

#13

Hi Dingping: Thanks for pointing that out. It works now.

Dingping Lv wrote:

Yes, agree: if your sprite initialization depend on the size of the image, you must preload the image.