Different Sprite Types

We have made a few sprites by now and we know how to make them fast by packing images into a Sprite Sheet, but there is another factor to consider. The sprite type!

Sprite Types

According to Cocos2d-x documents, there are four different type of sprites:

1. QUAD
2. POLYGON
3. SLICE9
4. QUAD_BATCHNODE

Everything we did so far was of type QUAD which is the default type. It is basically just a rectangle, made of two triangles. I am interested to see how the POLYGON type can improve speed when the sprite shapes are not exactly rectangular.

The reason that POLYGON sprites might be faster than QUADs is that even though they might have multiple triangles, they draw less pixels on the screen. Drawing pixels is more expensive than calculating triangles in a GPU they say!

QUAD_BATCHNODE is deprecated and I am not interested in SLICE9 type either. So, I will leave that to you to have a look at, if you really have to!

For this particular test, I have 3 images that were exported as PNG8 from photoshop and I will pack into two sprite sheets, once with QUAD settings and once with POLYGON settings in TexturePacker and run the same code to see which has a better performance.

The 3 images are intentionally in a way that they have a lot of empty space.

Texture Packer settings are as shown here:

As you can see below, the first one is quad and the second one is polygon that has more vertices.

Download TexturePacker Projects

QUAD Sprite

Quad Sprites are the normal rectangular sprites that are created by default when we create a sprite. Lets see how they perform in a large numbers and then we compare them to the Polygon Sprites to get a better idea of the speed gain.

After adding the resource files to the project, the init() method is as below:

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Scene::init() )
    {
        return false;
    }
    
    auto visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();
    
    auto spriteCache = SpriteFrameCache::getInstance();
    spriteCache->addSpriteFramesWithFile("sprites_quad.plist");
        
    for (int i = 0; i < 10000; i++)
    {
        auto sprite1 = Sprite::createWithSpriteFrameName("PolySprite1.png");
        sprite1->setPosition(origin.x + visibleSize.width / 2, origin.y + visibleSize.height / 2 - 100);
        this->addChild(sprite1);
        
        auto sprite2 = Sprite::createWithSpriteFrameName("PolySprite2.png");
        sprite2->setPosition(origin.x + visibleSize.width / 2, origin.y + visibleSize.height / 2 - 100);
        this->addChild(sprite2);
        
        auto sprite3 = Sprite::createWithSpriteFrameName("PolySprite3.png");
        sprite3->setPosition(origin.x + visibleSize.width / 2, origin.y + visibleSize.height / 2 - 100);
        this->addChild(sprite3);
    }

    return true;
}

After compile and run, 30000 of these sprites are drawn on the screen and we get the maximum frame rate of 32.

POLYGON Sprite

The Polygon Sprites are supposed to be more efficient, so lets repeat the project that we did for the Quad Sprites and see.

The only difference in the project is that we add the polygon sprite sheet instead of the quad and change 1 line of code from the previous code to load that sprite sheet.

spriteCache->addSpriteFramesWithFile("sprites_poly.plist");

The rest are the same as before.

After compile and run, 30000 of these sprites are drawn on the screen and the maximum frame rate is….  24! Surprise!

Turns out, in my tests, the Polygon sprites are slower than the Quad sprites! Not sure how or why but that is my conclusion! So, I will stick to the original traditional Quad sprites and will not worry about anything.

At least now we know…

If you are reading this and you get a different results than mine or find a better way to use the Polygon sprites, please let me know in the comments.

Download Source