Using Cocosstudio resources in Cocos2d-js-frame animation (2)

In this blog, we will briefly describe the following by using an example of a frame animation resource exported from Cocosstudio in Cocos2d-js : How to use the exported Frame animation resource using the Actiontimeline for animation cutting. About frame animation, due to the complexity of the content. We will be divided into two articles to introduce. In the previous article, we have done the preliminary resource preparation and cocoscodeide in the simple processing, this article will mainly introduce the use of resources issues.

I. Use of Cocosstudio resources

Ready for the preparatory work, finally to our play (frameanimationscene.js), below, we will learn how to get the resources exported in Cocosstudio, and so on.

First step: load the JSON resource analysis of the Frameanimationscene interface and get the Frameanimationscene object. Joins the Frameanimationscene object to the layer. The specific code is as follows:

        //加载frameAnimation界面的JSON资源分析，并获取frameAnimationScene对象。        frameAnimationScene = ccs.load(res.frame_animation_json).node;        //将frameAnimationScene对象加入到layer中。        this.addChild(frameAnimationScene);

Step Two: find the appropriate control object from Frameanimationscene, including the button control and the node that the Shark animation node is attached to, similar to the lookup method. The specific code is as follows:

Get the Node object attached by the animation node from Frameanimationscene//The object can implement some movement of the animation node, such as: Moveby,moveto and so on. Sharknode = Frameanimationscene. Getchildbyname("Projectnode_1");Get three button Attackbutton = Ccui. Helper. Seekwidgetbyname(Frameanimationscene,"Attackbutton");Deadattackbutton = Ccui. Helper. Seekwidgetbyname(Frameanimationscene,"Deadattackbutton");Deadbutton = Ccui. Helper. Seekwidgetbyname(Frameanimationscene,"Deadbutton");

The third step: Add Event Listener, similar method, the specific code is as follows:

        //三个Button注册事件处理函数        attackButton.addTouchEventListener(this.buttonTouchEvent);        deadAttackButton.addTouchEventListener(this.buttonTouchEvent);        deadButton =         deadButton.addTouchEventListener(this.buttonTouchEvent);

The Fourth step: the preparation before running the animation, including the acquisition of Actiontimeline objects, and so on, the specific code is as follows:

        //从动画节点中获取ActionTimeLine。        shark = ccs.load(res.shark_json).action;        frameAnimationScene.runAction(shark);

Fifth Step: set the frame event listener. Note that there is a big hole here!

        //设置帧事件监听，每一帧一次监听。        //正常情况下应该使用如下语句:        //shark.setFrameEventCallFunc(this.frameAnimationEvent);        //但是，有Bug！！！不能用。        //换个角度解决问题，每一帧动画都会触发update事件。然后在update中写事件处理内容。        this.scheduleUpdate();

Sixth step: define the specific processing information of the corresponding listener event, the code is as follows:

Update: Pseudo-frame Event listener handler function.

Update function(){        //change the angle to solve the problem and now handle each frame of event here.         //Determine if the animation is playing, and if it is playing, leave all buttons in the "Disabled" state        //To mimic the use of "skill cooling".         if(!shark.isplaying ()) {//If the animation is not playing, it will be disabled for skill activation.             if(!attackbutton.isbright ()) {Attackbutton.setbright (true); Attackbutton.settouchenabled (true); }if(!deadattackbutton.isbright ()) {Deadattackbutton.setbright (true); Deadattackbutton.settouchenabled (true); }if(!deadbutton.isbright ()) {Deadbutton.setbright (true); Deadbutton.settouchenabled (true); }        }    },

PS: If there is no bug, frame event processing should be written here:

    frameAnimationEvent:function(frame){        //正常情况下，应该在这里处理每一帧的事件。        cc.log("Frame Animation Event");    }

The event handling triggered by the button control, in which we will show the relevant methods of frame animation processing commonly used in game design are as follows:

Buttontouchevent: function(sender,type){        event handler for//three buttons        Switch(type) { CaseCcui. Widget.touch_ended:Switch(Sender.getname ()) {//You can set the playback of the animation in two ways.             //recommend the second!!!!              Case "Attackbutton"://The first type                play animation by setting the start frame, ending frame, looping playback, etc.Shark.gotoframeandplay (0, -,false);//Set the button to disabled state.                  Self. Changebuttonbright (); Break; Case "Deadattackbutton"://second type                //Play the animation of the specified name through the player functionShark.play ("Dattack",false); Self. Changebuttonbright (); Break; Case "Deadbutton": Shark.play ("Dead",false); Self. Changebuttonbright ();//When you die, walk a few steps ahead, fall dead, and slide back. Sharknode.runaction (CC. Sequence (CC. Moveby (0.5, CC.P (- -,0)), CC. Moveby (2, CC.P ( -,0)))); Break;default: Break; } Break;default: Break; }    },

The specific code for the Ps:changebuttonbright function:

 Changebuttonbright:function   ()  { //sets the individual buttons to the disabled state. Disables touch response.         attackbutton.setbright (false );        Deadattackbutton.setbright (false );        Deadbutton.setbright (false );        attackbutton.settouchenabled (false );        deadattackbutton.settouchenabled (false );    deadbutton.settouchenabled (false ); },

Code Introduction:

The above code has comments, it should be clear to see. Here's a quick introduction:

1. Overall thinking:
By clicking on the three skill buttons, respectively for common attack, big strokes attack, death. All skills are cooled during the release of each skill, and the next skill is released only after the skill has been released. When the Death skill is released (well, this does not count as a skill.) ), the character will walk a few steps forward, then fall to death, and then slide back (just to let the character keep the original position, so add a slide back action.) ）。

2. Skill Cooling Design:
I think this should be a feature that is often used in game design. First, we call the Changebuttonbright method every time the skill is released, disabling all skill buttons (similar to entering cooling). Because the frame event callback function is shark.setFrameEventCallFunc(this.frameAnimationEvent); not available, we use the Update method, update each frame once, and check to see if it is now releasing the skill and activating the cooldown if it is not released.

The process of cooling and activating the skill can be accomplished through the above procedure, of course, you can further deal with the more details in the Update function processing. The operation and ideas should be similar.

PS: Seemingly Isdone () method can not be used, the official early settlement!!!! Of course, if I use the wrong posture, but also welcome friends pointing twos.

3. Edge Animation Edge Movement:
I think this is the most game design necessary features, you think if your character is running, but in the screen only stay in place, this is how sad things!!!!
This article provides a solution that gets the node to which the animation node is attached, by manipulating the node to enable Edge Movement (Moveby) to play the animation. In this case, we're going to let him walk a few steps forward and then slide back when the characters die.

second, the operation effect

Here, the analysis and use of the Frameanimationscene interface are complete. You can run it a bit. Some of my running effects are as follows:
Big strokes

Death

Iii. Additional Information

In order to facilitate the study, the following provides the tutorial project file Baidu network download Link:

Loginscene.js's complete source code is as follows:

varLoginlayer = cc. Layer.extend ({loginscene:NULL, Loginbutton:NULL, Nametextfield:NULL, Passwordtextfield:NULL, Savecheckbox:NULL, Name:NULL, Password:NULL, Ctor:function () {/////////////////////////// ///        //1. Super init First         This. _super ();/////////////////////////// //        //2. Add a menu item with "X" image, which are clicked to quit the program        //May modify it.        //Load the JSON resource analysis of the login interface and get the Loginscene object. Loginscene = Ccs.load (Res.login_json). node;//Add the Loginscene object to the layer.          This. AddChild (Loginscene);//Get the control from Loginscene and register for the listener event.          This. Dealwidgets ();return true; },//Get the control from Loginscene and register for the listener event. Dealwidgets:function () {//loginbutton ControlsLoginbutton = Ccui.helper.seekWidgetByName (Loginscene,"Login"); Loginbutton.addtoucheventlistener ( This. buttontouchevent);//nametextfield the input box controlNametextfield = Ccui.helper.seekWidgetByName (Loginscene,"Name"); Nametextfield.addccseventlistener ( This. textfieldevent);//passwordtextfield Input BoxPasswordtextfield = Ccui.helper.seekWidgetByName (Loginscene,"Password"); Passwordtextfield.addccseventlistener ( This. textfieldevent);//checkbox ControlsSavecheckbox = Ccui.helper.seekWidgetByName (Loginscene,"Save"); Savecheckbox.addccseventlistener ( This. selectedstateevent); },event handling triggered by the//checkbox controlSelectedstateevent:function (sender, type) {Switch(type) { CaseCcui. CheckBox.EVENT_SELECTED:cc.log ("Event Selected"); Break; CaseCcui. CheckBox.EVENT_UNSELECTED:cc.log ("Event unselected"); Break;default: Break; }    },event handling triggered by the//textfield controlTextfieldevent:function (Sender,type) {//Depending on the type of trigger event, the output of Cc.log () from the console is processed;        Switch(type) { CaseCcui. TextField.EVENT_ATTACH_WITH_IME:cc.log ("TextField Event Attach with Ime"); Break; CaseCcui. TextField.EVENT_DETACH_WITH_IME:cc.log ("TextField Event Detach with Ime"); Break; CaseCcui. TextField.EVENT_INSERT_TEXT:cc.log ("TextField Event Insert Text"); Break; CaseCcui. TextField.EVENT_DELETE_BACKWARD:cc.log ("TextField Event Delete Backward"); Break;default: Break; }    },event handling triggered by the//button controlButtontouchevent:function (Sender,type) {//Depending on the type of trigger event, the output of Cc.log () from the console is processed;        Switch(type) { CaseCcui. Widget.TOUCH_BEGAN:cc.log ("Loginbutton Touch began");//Gets the input of the user in the name and password input boxes. Use the GetString () method to get the content. Cc.log ("Username:"+ nametextfield.getstring ()); Cc.log ("Password:"+ passwordtextfield.getstring ());//Gets whether the user ticked the checkbox, obtained using the isselected () method, and returns a Boolean. Cc.log ("SaveState:"+ savecheckbox.isselected ()); Break; CaseCcui. Widget.TOUCH_MOVED:cc.log ("Loginbutton Touch Moved"); Break; CaseCcui. Widget.TOUCH_ENDED:cc.log ("Loginbutton Touch Ended"); Break; CaseCcui. Widget.TOUCH_CANCELED:cc.log ("Loginbutton Touch Canceled"); Break;default: Break; }    }});varLoginscene = cc. Scene.extend ({onenter:function () { This. _super ();varLayer =NewLoginlayer (); This. AddChild (layer); }});

Using Cocosstudio resources in Cocos2d-js-frame animation (2)