Building a Game with the Cocos2d-html5 Library - HTML5 Game Development Insights - page 388

The anchor point is used for both positioning and rotating of an object. The anchor point coordinate is a relative
coordinate. For example, the anchor point in position (0, 0), which is always defined in Cocos2d shorthand as
cc.p(0, 0) , corresponds to the farthest bottom-left part of that object, while cc.p(0.5, 0.5) corresponds to the
center of the object. When setting the position of the object, the object is positioned such that the anchor point will
be at the coordinates specified in the setPosition() call. For example, Figure 24-4 shows the result of a blue circle
sprite positioned with the code shown in Listing 24-1. Similarly, when rotating the object, it is rotated about the
anchor point.
Figure 24-4. Anchor point
Listing 24-1. Sprite has an anchorPoint of cc.p(0, 0) and a Position of cc.p(0,0)
// create sprite
var sprite = cc.Sprite.create ( "bluecircle.png" ) ;
sprite.setAnchorPoint ( cc.p( 0 , 0 ) ) ; // Anchor Point
sprite.setPosition ( cc.p( 0 , 0 ) ) ;
this.addChild ( sprite ) ;
Action
Actions are like orders given to any cc.Node object. These actions usually modify some of the object's attributes, such
as position, rotation, scale, and so forth. If these attributes are modified over a period of time, they are
cc.IntervalAction actions; otherwise, they are cc.InstantAction actions. For example, the cc.MoveBy action
modifies the position property during a certain time period, so it is a subclass of cc.IntervalAction . In another
example, the following code snippet moves a sprite 50 pixels to the right and 10 pixels to the top over a period of 2
seconds:
sprite.runAction(cc.MoveBy.create(2, cc.p(50, 10)));
Animation
In Cocos2d, animations are bound to animated actions. You can use a sequence of images to create an animation.
After the animation is created, you can use the code shown in Listing 24-2 to play the animation on a sprite.