If you don’t know what is anchor system in cocos2d, pleas reference this wiki. Then let’s talk about the anchor system in Flax.

When our artist created this animation.

Do you see the cross under the soldier’s head? This cross is the anchor in Flash. On default condition, Flax will convert this position to the anchor point in Cocos2d-js. That means when we place the soldier on the stage of cocos2d, and set the position to (0,0), we will see only half  head of the soldier. But we want the anchor point move to the RED point which makes the soldier’s stand point  is its position. Of course we can move the soldier frame by frame, but if there is many frames or many layers, it’s a heavy physical work. So we need to edit anchor point in Flax.

How?

1. Create an empty MovieClip in Flash(no need linkage class) , name it as “anchor” for example , you can also place some graphic in it to make it visible, it up to you, because the anchor will not be visible after exported!

2. Drag “anchor” from the library to the soldier MovieClip, move it to the RED position, and name the “anchor” instance to “anchor__main”.

3. After exported, the anchor of the soldier will be changed to the RED point in cocos2d-js.

There  is another kind of anchor in Flax we can edit. The soldier will launch bullet from its gun on 8 directions.

See the GREEN point in these two pictures, it’s the position from which the bullet will launch. Maybe we can set the position manually in game, but with Flax you can edit that.

How?

1. On every key frame, you drag the “anchor” from the library into the soldier, place it on the GREEN position and named it to “anchor__gun”

2. Export the swf

3. Write the code

var soldier = lg.assetsManager.createDisplay(“soldier.json”, “soldier”);

this.addChild(soldier);

soldier.gotoAndPlay(“90”);

var bullet = lg.assetsManager.createDisplay(“soldier.json”, “bullet”);

this.addChild(bullet);

//you can bind the anchor manually

var anchor = soldier.getAnchor(“gun”);//for example: anchor = {x:100, y: 120, zIndex: 10, rotation: 90};

bullet.zIndex = anchor.zIndex;

bullet.setPosition(anchor.x, anchor.y);

bullet.setRotation(anchor.rotation);

//or you can bind the anchor automatically

//first param is the anchor name defined in Flash

//second param is the sprite you want to bind

//third param = true means every frame the bullet will be set position, zIndex and rotation automatically

soldier.bindAnchor(“gun”, bullet, false);

Conclusion: If you want to change the base anchor of some animation, then named the anchor to “anchor__main”, and place it to the position you want!

If you want to fetch some special positions, then named the anchor to “anchor__xxxx”, “xxxx” will be accessible by the getAnchor function, you can create many of it if you want!