4.md

Chapter 4: Sprite and Nodes

What are Sprites

A Sprite is a 2D graphic.

Creating Sprites

Creating a Textured Sprite

auto mySprite = cocos2d::Sprite::create("mysprite.png");

Creating an Untextured Sprite

auto mySprite = cocos2d::Sprite::create();

Creating a Sprite From a SpriteFrame

auto frame = cocos2d::SpriteFrame::createWithTexture(texture, rect, offset);
    
auto mysprite = cocos2d::Sprite::createWithSpriteFrame(frame);

Creating a Sprite From SpriteCache

auto mysprite = cocos2d::Sprite::createWithSpriteFrameName("mysprite.png");

Creating a Sprite From a Rect

auto mySprite = cocos2d::Sprite::create("mysprite.png", cocos2d::Rect(0,0,40,40));

Sprite Manipulation

After creating a Sprite, there are a variety of functions that can be applied to it.

Given:

auto mySprite = cocos2d::Sprite::create("mysprite.png");

Resizing

mySprite->setScale(4.0); // increases X and Y size by 4.0 uniformly

mySprite->setScaleX(4.0); // increases just X scale by 4.0

mySprite->setScaleY(4.0); // increases just Y scale by 4.0

Anchor Point and Position

mySprite->setAnchorPoint(0.5, 0.5); // middle

mySprite->setAnchorPoint(0, 0); // bottom left

A few other possible options

mySprite->setSkew(4.0); adjusts the X and Y skew by 4.0 uniformly

mySprite->setSkewX(4.0); adjusts the X skew by 4.0

mySprite->setSkewY(4.0); adjusts the Y skew by 4.0

SpriteSheets

A SpriteSheet a way to combine sprites into a single texture while reducing the overall size compared to loading each Sprite individually.

Load your SpriteSheet into the SpriteFrameCache, probably in AppDelegate:

auto _spritecache = cocos2d::SpriteFrameCache::getInstance();
_spritecache->addSpriteFramesWithFile("sprites.plist");

A few examples of working with a SpriteSheet:

Creating a Sprite from the SpriteFrameCache

auto mySprite = cocos2d::Sprite::createWithSpriteFrameName("mysprite.png");

Creating an Animation from SpriteFrameCache

auto anim1 = cocos2d::Animation::create();
anim1->addSpriteFrameWithFile("enemystand.png");
anim1->addSpriteFrameWithFile("enemymove1.png");
anim1->addSpriteFrameWithFile("enemymove2.png");
anim1->addSpriteFrameWithFile("enemymove3.png");
anim1->addSpriteFrameWithFile("enemymove4.png");
anim1->addSpriteFrameWithFile("enemymove5.png");
anim1->addSpriteFrameWithFile("enemyjump.png");
  
auto animation = cocos2d::Animate::create(anim1);
animation->setDuration(0.2f);
sprite->runAction(cocos2d::RepeatForever::create(animation));

What are Nodes

A Node can be thought of as a root object. It doesn't draw anything, but can be used to add children and apply its properties to the children. It sets up the scene graph. A Node can be sub-classed, have actions applied to it and even be traversed to work with its specific children.

Creating Nodes

A simple Node:

auto myNode = cocos2d::Node::create();

Creating a Node with children:

auto myNode = cocos2d::Node::create();

auto mySprite1 = cocos2d::Sprite::create("mysprite1.png");
myNode->addChild(mySprite1);

auto mySprite2 = cocos2d::Sprite::create("mysprite2.png");
myNode->addChild(mySprite2);