[Widgets] Image

Adding An Image

Drag a Image from the Widgets section onto the middle canvas.

Selecting The Image

You can select the Image if it isn't already selected from the Animation Editor at the bottom. The Image doesn't appear in the resources as it's part of the Scene or other object that you are using.

Changing The Image

You can change Image in the Properties section. Setting the images can be done by double clicking on the Image Resource or dragging an image from the Resources section.

Accessing The Image In Code

Image's can be accessed via their Name or Tag which can be set in the Properties section.

To access the Image from a scene for example, in code it is simple. You either access it as a Node or cast it to a Image allowing you to use Image methods along with Node methods.

Node *rootNode = CSLoader::createNode( "Filepath to .csb file" );
this->addChild( rootNode );

// image accessed as a node using it's name
Node *image = rootNode->getChildByName( "Name set in Cocos Studio" );

// image cast to a image using it's name
cocos2d::ui::ImageView *image = ( cocos2d::ui::ImageView * )rootNode->getChildByName( "Name set in Cocos Studio" );

// image accessed as a node using it's tag
Node *image = rootNode->getChildByTag( 5 );

// image cast to a image using it's tag
cocos2d::ui::ImageView *image = ( cocos2d::ui::ImageView * )rootNode->getChildByTag( 5 );

var rootNode = ccs.load( "Filepath to .json file" );
this.addChild( rootNode.node );

// get the image by name
var image = rootNode.node.getChildByName( "Name set in Cocos Studio" );

// get the image by tag
var image = rootNode.node.getChildByTag( 5 );

Note: Cocos2d-JS doesn't require casting to use Image methods.