Cocos Creator API

1.1.2

Cocos Creator is a highly customizable game development tool that utilizes the power of cocos2d-x.

Module cc

The main namespace of Cocos2d-JS, all engine core classes, functions, properties and constants are defined in this namespace.

Class

Properties

view View

cc.view is the shared view object.

director Director

Director

winSize Size

cc.winSize is the alias object for the size of the current game window.

game Game

Integer string readOnly

Specify that the input value must be integer in Inspector. Also used to indicates that the elements in array should be type integer.

Float string readOnly

Indicates that the elements in array should be type double.

Boolean string readOnly

Indicates that the elements in array should be type boolean.

String string readOnly

Indicates that the elements in array should be type string.

Methods

_initDebugSetting
(
  • mode
)

Init Debug setting.

name type description
mode DebugMode

error
(
  • obj
  • subst
)

Outputs an error message to the Cocos Creator Console (editor) or Web Console (runtime).

  • In Cocos Creator, error is red.
  • In Chrome, error have a red icon along with red message text.
name type description
obj Any

A JavaScript string containing zero or more substitution strings.

subst Any

JavaScript objects with which to replace substitution strings within msg. This gives you additional control over the format of the output.

warn
(
  • obj
  • subst
)

Outputs a warning message to the Cocos Creator Console (editor) or Web Console (runtime).

  • In Cocos Creator, warning is yellow.
  • In Chrome, warning have a yellow warning icon with the message text.
name type description
obj Any

A JavaScript string containing zero or more substitution strings.

subst Any

JavaScript objects with which to replace substitution strings within msg. This gives you additional control over the format of the output.

log
(
  • obj
  • subst
)

Outputs a message to the Cocos Creator Console (editor) or Web Console (runtime).

name type description
obj Any

A JavaScript string containing zero or more substitution strings.

subst Any

JavaScript objects with which to replace substitution strings within msg. This gives you additional control over the format of the output.

info
(
  • obj
  • subst
)

Outputs an informational message to the Cocos Creator Console (editor) or Web Console (runtime).

  • In Cocos Creator, info is blue.
  • In Firefox and Chrome, a small "i" icon is displayed next to these items in the Web Console's log.
name type description
obj Any

A JavaScript string containing zero or more substitution strings.

subst Any

JavaScript objects with which to replace substitution strings within msg. This gives you additional control over the format of the output.

speed
(
  • action
  • speed
)
Action

Creates the speed action which changes the speed of an action, making it take longer (speed > 1) or less (speed < 1) time.
Useful to simulate 'slow motion' or 'fast forward' effect.

name type description
action ActionInterval
speed Number

returns:

type: Action

examples:

// change the target action speed;
var action = cc.scaleTo(0.2, 1, 0.6);
var newAction = cc.speed(action, 0.5);

follow
(
  • followedNode
  • rect
)
Action | Null

Create a follow action which makes its target follows another node.

name type description
followedNode Node
rect Rect

returns:

type: Action | Null

returns the cc.Follow object on success

examples:

// example
// creates the action with a set boundary
var followAction = cc.follow(targetNode, cc.rect(0, 0, screenWidth * 2 - 100, screenHeight));
node.runAction(followAction);

// creates the action with no boundary set
var followAction = cc.follow(targetNode);
node.runAction(followAction);

cardinalSplineTo
(
  • duration
  • points
  • tension
)
ActionInterval

Creates an action with a Cardinal Spline array of points and tension.

name type description
duration Number
points Array

array of control points

tension Number

returns:

examples:

//create a cc.CardinalSplineTo
var action1 = cc.cardinalSplineTo(3, array, 0);

cardinalSplineBy
(
  • duration
  • points
  • tension
)
ActionInterval

Creates an action with a Cardinal Spline array of points and tension.

name type description
duration Number
points Array
tension Number

returns:

catmullRomTo
(
  • dt
  • points
)
ActionInterval

Creates an action with a Cardinal Spline array of points and tension.

name type description
dt Number
points Array

returns:

examples:

var action1 = cc.catmullRomTo(3, array);

catmullRomBy
(
  • dt
  • points
)
ActionInterval

Creates an action with a Cardinal Spline array of points and tension.

name type description
dt Number
points Array

returns:

examples:

var action1 = cc.catmullRomBy(3, array);

easeIn
(
  • rate
)
Object

Creates the action easing object with the rate parameter.
From slow to fast.

name type description
rate Number

returns:

type: Object

examples:

// example
action.easing(cc.easeIn(3.0));

easeOut
(
  • rate
)
Object

Creates the action easing object with the rate parameter.
From fast to slow.

name type description
rate Number

returns:

type: Object

examples:

// example
action.easing(cc.easeOut(3.0));

easeInOut
(
  • rate
)
Object

Creates the action easing object with the rate parameter.
Slow to fast then to slow.

name type description
rate Number

returns:

type: Object

examples:

//The new usage
action.easing(cc.easeInOut(3.0));

easeExponentialIn ( ) Object

Creates the action easing object with the rate parameter.
Reference easeInExpo:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

examples:

// example
action.easing(cc.easeExponentialIn());

easeExponentialOut ( ) Object

Creates the action easing object.
Reference easeOutExpo:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

examples:

// example
action.easing(cc.easeExponentialOut());

easeExponentialInOut ( ) Object

Creates an EaseExponentialInOut action easing object.
Reference easeInOutExpo:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

examples:

// example
action.easing(cc.easeExponentialInOut());

easeSineIn ( ) Object

Creates an EaseSineIn action.
Reference easeInSine:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

examples:

// example
action.easing(cc.easeSineIn());

easeSineOut ( ) Object

Creates an EaseSineOut action easing object.
Reference easeOutSine:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

examples:

// example
action.easing(cc.easeSineOut());

easeSineInOut ( ) Object

Creates the action easing object.
Reference easeInOutSine:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

examples:

// example
action.easing(cc.easeSineInOut());

easeElasticIn
(
  • period
)
Object

Creates the action easing obejct with the period in radians (default is 0.3).
Reference easeInElastic:
http://www.zhihu.com/question/21981571/answer/19925418

name type description
period Number

returns:

type: Object

examples:

// example
action.easing(cc.easeElasticIn(3.0));

easeElasticOut
(
  • period
)
Object

Creates the action easing object with the period in radians (default is 0.3).
Reference easeOutElastic:
http://www.zhihu.com/question/21981571/answer/19925418

name type description
period Number

returns:

type: Object

examples:

// example
action.easing(cc.easeElasticOut(3.0));

easeElasticInOut
(
  • period
)
Object

Creates the action easing object with the period in radians (default is 0.3).
Reference easeInOutElastic:
http://www.zhihu.com/question/21981571/answer/19925418

name type description
period Number

returns:

type: Object

examples:

// example
action.easing(cc.easeElasticInOut(3.0));

easeBounceIn ( ) Object

Creates the action easing object.
Eased bounce effect at the beginning.

returns:

type: Object

examples:

// example
action.easing(cc.easeBounceIn());

easeBounceOut ( ) Object

Creates the action easing object.
Eased bounce effect at the ending.

returns:

type: Object

examples:

// example
action.easing(cc.easeBounceOut());

easeBounceInOut ( ) Object

Creates the action easing object.
Eased bounce effect at the begining and ending.

returns:

type: Object

examples:

// example
action.easing(cc.easeBounceInOut());

easeBackIn ( ) Object

Creates the action easing object.
In the opposite direction to move slowly, and then accelerated to the right direction.

returns:

type: Object

examples:

// example
action.easing(cc.easeBackIn());

easeBackOut ( ) Object

Creates the action easing object.
Fast moving more than the finish, and then slowly back to the finish.

returns:

type: Object

examples:

// example
action.easing(cc.easeBackOut());

easeBackInOut ( ) Object

Creates the action easing object.
Begining of cc.EaseBackIn. Ending of cc.EaseBackOut.

returns:

type: Object

examples:

// example
action.easing(cc.easeBackInOut());

easeBezierAction
(
  • p0
  • p1
  • p2
  • p3
)
Object

Creates the action easing object.
Into the 4 reference point.
To calculate the motion curve.

name type description
p0 Number

The first bezier parameter

p1 Number

The second bezier parameter

p2 Number

The third bezier parameter

p3 Number

The fourth bezier parameter

returns:

type: Object

examples:

// example
action.easing(cc.easeBezierAction(0.5, 0.5, 1.0, 1.0));

easeQuadraticActionIn ( ) Object

Creates the action easing object.
Reference easeInQuad:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

examples:

//example
action.easing(cc.easeQuadraticActionIn());

easeQuadraticActionOut ( ) Object

Creates the action easing object.
Reference easeOutQuad:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

examples:

//example
action.easing(cc.easeQuadraticActionOut());

easeQuadraticActionInOut ( ) Object

Creates the action easing object.
Reference easeInOutQuad:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

examples:

//example
action.easing(cc.easeQuadraticActionInOut());

easeQuarticActionIn ( ) Object

Creates the action easing object.
Reference easeIntQuart:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

examples:

//example
action.easing(cc.easeQuarticActionIn());

easeQuarticActionOut ( ) Object

Creates the action easing object.
Reference easeOutQuart:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

examples:

//example
action.easing(cc.QuarticActionOut());

easeQuarticActionInOut ( ) Object

Creates the action easing object.
Reference easeInOutQuart:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

easeQuinticActionIn ( ) Object

Creates the action easing object.
Reference easeInQuint:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

examples:

//example
action.easing(cc.easeQuinticActionIn());

easeQuinticActionOut ( ) Object

Creates the action easing object.
Reference easeOutQuint:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

examples:

//example
action.easing(cc.easeQuadraticActionOut());

easeQuinticActionInOut ( ) Object

Creates the action easing object.
Reference easeInOutQuint:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

examples:

//example
action.easing(cc.easeQuinticActionInOut());

easeCircleActionIn ( ) Object

Creates the action easing object.
Reference easeInCirc:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

examples:

//example
action.easing(cc.easeCircleActionIn());

easeCircleActionOut ( ) Object

Creates the action easing object.
Reference easeOutCirc:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

easeCircleActionInOut ( ) Object

Creates the action easing object.
Reference easeInOutCirc:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

examples:

//example
action.easing(cc.easeCircleActionInOut());

easeCubicActionIn ( ) Object

Creates the action easing object.
Reference easeInCubic:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

examples:

//example
action.easing(cc.easeCubicActionIn());

easeCubicActionOut ( ) Object

Creates the action easing object.
Reference easeOutCubic:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

examples:

//example
action.easing(cc.easeCubicActionOut());

easeCubicActionInOut ( ) Object

Creates the action easing object.
Reference easeInOutCubic:
http://www.zhihu.com/question/21981571/answer/19925418

returns:

type: Object

show ( ) ActionInstant

Show the Node.

returns:

examples:

// example
var showAction = cc.show();

hide ( ) ActionInstant

Hide the node.

returns:

examples:

// example
var hideAction = cc.hide();

toggleVisibility ( ) ActionInstant

Toggles the visibility of a node.

returns:

examples:

// example
var toggleVisibilityAction = cc.toggleVisibility();

removeSelf
(
  • isNeedCleanUp
)
ActionInstant

Create a RemoveSelf object with a flag indicate whether the target should be cleaned up while removing.

name type description
isNeedCleanUp Boolean

returns:

examples:

// example
var removeSelfAction = cc.removeSelf();

flipX
(
  • flip
)
ActionInstant

Create a FlipX action to flip or unflip the target.

name type description
flip Boolean

Indicate whether the target should be flipped or not

returns:

examples:

var flipXAction = cc.flipX(true);

flipY
(
  • flip
)
ActionInstant

Create a FlipY action to flip or unflip the target.

name type description
flip Boolean

returns:

examples:

var flipYAction = cc.flipY(true);

place
(
  • pos
  • [y ]
)
ActionInstant

Creates a Place action with a position.

name type description
pos Vec2 | Number
y optional Number

returns:

examples:

// example
var placeAction = cc.place(cc.p(200, 200));
var placeAction = cc.place(200, 200);

callFunc
(
  • selector
  • [selectorTarget ]
  • [data ]
)
ActionInstant

Creates the action with the callback.

name type description
selector function
selectorTarget optional object | Null
data optional | Null

data for function, it accepts all data types.

returns:

examples:

// example
// CallFunc without data
var finish = cc.callFunc(this.removeSprite, this);

// CallFunc with data
var finish = cc.callFunc(this.removeFromParentAndCleanup, this._grossini,  true);

sequence
(
  • tempArray
)
ActionInterval

Helper constructor to create an array of sequenceable actions The created action will run actions sequentially, one after another.

name type description
tempArray Array | FiniteTimeAction

returns:

examples:

// example
// create sequence with actions
var seq = cc.sequence(act1, act2);

// create sequence with array
var seq = cc.sequence(actArray);

repeat
(
  • action
  • times
)
ActionInterval

Creates a Repeat action. Times is an unsigned integer between 1 and pow(2,30)

name type description
action FiniteTimeAction
times Number

returns:

examples:

// example
var rep = cc.repeat(cc.sequence(jump2, jump1), 5);

repeatForever
(
  • action
)
ActionInterval

Create a acton which repeat forever

name type description
action FiniteTimeAction

returns:

examples:

// example
var repeat = cc.repeatForever(cc.rotateBy(1.0, 360));

spawn
(
  • tempArray
)
FiniteTimeAction

Create a spawn action which runs several actions in parallel.

name type description
tempArray Array | FiniteTimeAction

returns:

examples:

// example
var action = cc.spawn(cc.jumpBy(2, cc.p(300, 0), 50, 4), cc.rotateBy(2, 720));
todo:It should be the direct use new

rotateTo
(
  • duration
  • deltaAngleX
  • [deltaAngleY ]
)
ActionInterval

Rotates a Node object to a certain angle by modifying its rotation property.
The direction will be decided by the shortest angle.

name type description
duration Number

duration in seconds

deltaAngleX Number

deltaAngleX in degrees.

deltaAngleY optional Number

deltaAngleY in degrees.

returns:

examples:

// example
var rotateTo = cc.rotateTo(2, 61.0);

rotateBy
(
  • duration
  • deltaAngleX
  • [deltaAngleY ]
)
ActionInterval

Rotates a Node object clockwise a number of degrees by modifying its rotation property. Relative to its properties to modify.

name type description
duration Number

duration in seconds

deltaAngleX Number

deltaAngleX in degrees

deltaAngleY optional Number

deltaAngleY in degrees

returns:

examples:

// example
var actionBy = cc.rotateBy(2, 360);

moveBy
(
  • duration
  • deltaPos
  • deltaY
)
ActionInterval

Moves a Node object x,y pixels by modifying its position property.
x and y are relative to the position of the object.
Several MoveBy actions can be concurrently called, and the resulting
movement will be the sum of individual movements.

name type description
duration Number

duration in seconds

deltaPos Vec2 | Number
deltaY Number

returns:

examples:

// example
var actionTo = cc.moveBy(2, cc.p(windowSize.width - 40, windowSize.height - 40));

moveTo
(
  • duration
  • position
  • y
)
ActionInterval

Moves a Node object to the position x,y. x and y are absolute coordinates by modifying its position property.
Several MoveTo actions can be concurrently called, and the resulting
movement will be the sum of individual movements.

name type description
duration Number

duration in seconds

position Vec2
y Number

returns:

examples:

// example
var actionBy = cc.moveTo(2, cc.p(80, 80));

skewTo
(
  • t
  • sx
  • sy
)
ActionInterval

Create a action which skews a Node object to given angles by modifying its skewX and skewY properties. Changes to the specified value.

name type description
t Number

time in seconds

sx Number
sy Number

returns:

examples:

// example
var actionTo = cc.skewTo(2, 37.2, -37.2);

skewBy
(
  • t
  • sx
  • sy
)
ActionInterval

Skews a Node object by skewX and skewY degrees.
Relative to its property modification.

name type description
t Number

time in seconds

sx Number

sx skew in degrees for X axis

sy Number

sy skew in degrees for Y axis

returns:

examples:

// example
var actionBy = cc.skewBy(2, 0, -90);

jumpBy
(
  • duration
  • position
  • [y ]
  • height
  • jumps
)
ActionInterval

Moves a Node object simulating a parabolic jump movement by modifying it's position property. Relative to its movement.

name type description
duration Number
position Vec2 | Number
y optional Number
height Number
jumps Number

returns:

examples:

// example
var actionBy = cc.jumpBy(2, cc.p(300, 0), 50, 4);
var actionBy = cc.jumpBy(2, 300, 0, 50, 4);

jumpTo
(
  • duration
  • position
  • [y ]
  • height
  • jumps
)
ActionInterval

Moves a Node object to a parabolic position simulating a jump movement by modifying its position property.
Jump to the specified location.

name type description
duration Number
position Vec2 | Number
y optional Number
height Number
jumps Number

returns:

examples:

// example
var actionTo = cc.jumpTo(2, cc.p(300, 300), 50, 4);
var actionTo = cc.jumpTo(2, 300, 300, 50, 4);

bezierBy
(
  • t
  • c
)
ActionInterval

An action that moves the target with a cubic Bezier curve by a certain distance. Relative to its movement.

name type description
t Number

time in seconds

c Array

Array of points

returns:

examples:

// example
var bezier = [cc.p(0, windowSize.height / 2), cc.p(300, -windowSize.height / 2), cc.p(300, 100)];
var bezierForward = cc.bezierBy(3, bezier);

bezierTo
(
  • t
  • c
)
ActionInterval

An action that moves the target with a cubic Bezier curve to a destination point.

name type description
t Number
c Array

array of points

returns:

examples:

// example
var bezier = [cc.p(0, windowSize.height / 2), cc.p(300, -windowSize.height / 2), cc.p(300, 100)];
var bezierTo = cc.bezierTo(2, bezier);

scaleTo
(
  • duration
  • sx
  • [sy ]
)
ActionInterval

Scales a Node object to a zoom factor by modifying it's scale property.

name type description
duration Number
sx Number

scale parameter in X

sy optional Number

scale parameter in Y, if Null equal to sx

returns:

examples:

// example
// It scales to 0.5 in both X and Y.
var actionTo = cc.scaleTo(2, 0.5);

// It scales to 0.5 in x and 2 in Y
var actionTo = cc.scaleTo(2, 0.5, 2);

scaleBy
(
  • duration
  • sx
  • [sy ]
)
ActionInterval

Scales a Node object a zoom factor by modifying it's scale property. Relative to its changes.

name type description
duration Number

duration in seconds

sx Number

sx scale parameter in X

sy optional Number | Null

sy scale parameter in Y, if Null equal to sx

returns:

examples:

// example without sy, it scales by 2 both in X and Y
var actionBy = cc.scaleBy(2, 2);

//example with sy, it scales by 0.25 in X and 4.5 in Y
var actionBy2 = cc.scaleBy(2, 0.25, 4.5);

blink
(
  • duration
  • blinks
)
ActionInterval

Blinks a Node object by modifying it's visible property.

name type description
duration Number

duration in seconds

blinks Number

blinks in times

returns:

examples:

// example
var action = cc.blink(2, 10);

fadeTo
(
  • duration
  • opacity
)
ActionInterval

Fades an object that implements the cc.RGBAProtocol protocol. It modifies the opacity from the current value to a custom one.

name type description
duration Number
opacity Number

0-255, 0 is transparent

returns:

examples:

// example
var action = cc.fadeTo(1.0, 0);

fadeIn
(
  • duration
)
ActionInterval

Fades In an object that implements the cc.RGBAProtocol protocol. It modifies the opacity from 0 to 255.

name type description
duration Number

duration in seconds

returns:

examples:

//example
var action = cc.fadeIn(1.0);

fadeOut
(
  • d
)
ActionInterval

Fades Out an object that implements the cc.RGBAProtocol protocol. It modifies the opacity from 255 to 0.

name type description
d Number

duration in seconds

returns:

examples:

// example
var action = cc.fadeOut(1.0);

tintTo
(
  • duration
  • red
  • green
  • blue
)
ActionInterval

Tints a Node that implements the cc.NodeRGB protocol from current tint to a custom one.

name type description
duration Number
red Number

0-255

green Number

0-255

blue Number

0-255

returns:

examples:

// example
var action = cc.tintTo(2, 255, 0, 255);

tintBy
(
  • duration
  • deltaRed
  • deltaGreen
  • deltaBlue
)
ActionInterval

Tints a Node that implements the cc.NodeRGB protocol from current tint to a custom one. Relative to their own color change.

name type description
duration Number

duration in seconds

deltaRed Number
deltaGreen Number
deltaBlue Number

returns:

examples:

// example
var action = cc.tintBy(2, -127, -255, -127);

delayTime
(
  • d
)
ActionInterval

Delays the action a certain amount of seconds. 延迟指定的时间量。

name type description
d Number

duration in seconds

returns:

examples:

// example
var delay = cc.delayTime(1);

reverseTime
(
  • action
)
ActionInterval

Executes an action in reverse order, from time=duration to time=0.

name type description
action FiniteTimeAction

returns:

examples:

// example
 var reverse = cc.reverseTime(this);

targetedAction
(
  • target
  • action
)
ActionInterval

Create an action with the specified action and forced target.

name type description
target Node
action FiniteTimeAction

returns:

HashElement ( )

Constructor

isChildClassOf
(
  • subclass
  • superclass
)
Boolean

Checks whether subclass is child of superclass or equals to superclass

name type description
subclass Function
superclass Function

returns:

type: Boolean

Class
(
  • [options ]
)
Function

Defines a CCClass using the given specification, please see Class for details.

name type description
options optional Object

returns:

type: Function

the created class

examples:

// define base class
var Node = cc.Class();

// define sub class
var Sprite = cc.Class({
name: 'Sprite',
extends: Node,
ctor: function () {
this.url = "";
this.id = 0;
},

properties {
width: {
default: 128,
type: 'Integer',
tooltip: 'The width of sprite'
},
height: 128,
size: {
get: function () {
return cc.v2(this.width, this.height);
}
}
},

load: function () {
// load this.url
};
});

// instantiate

var obj = new Sprite();
obj.url = 'sprite.png';
obj.load();

// define static member

Sprite.count = 0;
Sprite.getBounds = function (spriteList) {
// ...
};

_isCCClass
(
  • constructor
)
Boolean private

Checks whether the constructor is created by cc.Class

name type description
constructor Function

returns:

type: Boolean

setAccelerometerEnabled
(
  • isEnable
)

whether enable accelerometer event

name type description
isEnable Boolean

setAccelerometerInterval
(
  • interval
)

set accelerometer interval value

name type description
interval Number

isValid
(
  • value
)
Boolean

Checks whether the object is non-nil and not yet destroyed.

name type description
value Any

returns:

type: Boolean

whether is valid

examples:

cc.log(cc.isValid(target));

deserialize
(
  • data