01219245/cocos2d-js/Actions - ประวัติรุ่นแก้ไข

Jittat: /* Spritesheets */

2016-03-01T01:47:49Z

Spritesheets

Jittat: /* Sound effects */

2015-02-18T04:44:23Z

Sound effects

Jittat: /* Sound effects */

2015-02-18T04:44:07Z

Sound effects

Jittat: /* Spritesheets */

2015-02-18T04:34:40Z

Spritesheets

Jittat: /* Moving after the game starts */

2015-02-18T04:32:51Z

Moving after the game starts

Jittat: /* Flapping dot: animations and combining actions */

2015-02-18T04:31:54Z

Flapping dot: animations and combining actions

Jittat: /* Flapping dot: animations and combining actions */

2015-02-18T04:23:23Z

Flapping dot: animations and combining actions

Jittat: /* Falling dot */

2015-02-18T04:21:20Z

Falling dot

Jittat: หน้าที่ถูกสร้างด้วย ': This is part of 01219245. In this short tutorial, we shall not create a new game, but we will learn a few useful techniques for ...'

2015-02-18T04:16:23Z

หน้าที่ถูกสร้างด้วย ': This is part of 01219245. In this short tutorial, we shall not create a new game, but we will learn a few useful techniques for ...'

หน้าใหม่

: This is part of [[01219245]].

In this short tutorial, we shall not create a new game, but we will learn a few useful techniques for making our game more engaging.

== Actions ==
Using a combination of states and <tt>update</tt> method is very useful when we want to (micro) manage our objects. However, sometimes, we just want to tell object to do something like jumping or falling and do not want to keep track of these action.

For example, when our flappy dot dies, we want it to fall down to the ground. If we use states, we might want to add code to move the sprite downwards slighly in <tt>update</tt> method and to keep track that the dot reaches the ground. It will be easier if you can just tell the dot to fall down, and then stop worrying about it as the object shall move accordingly by itself (or by some magics). In Cocos2d-html5, there is a mechanism for performing that kind of work, called '''actions''' (See [http://www.cocos2d-x.org/reference/html5-js/V2.2.2/index.html reference here], type action in to the search box). (Read an overview for C++ version in Cocos2d-x [http://www.cocos2d-x.org/wiki/Actions here].)

We shall learn how to use actions by examples.

=== Falling dot ===
We shall let the player falls. In this case, we use <tt>cc.MoveTo</tt> ([http://www.cocos2d-x.org/reference/html5-js/V2.2.2/symbols/cc.MoveTo.html ref]) action to tell the object to move to a specific location. After we create the action, we can tell the object to perform an action simply by calling method <tt>runAction</tt>.

Add method <tt>fall</tt> to class <tt>Player</tt>:

<syntaxhighlight lang="javascript">
fall: function() {
var pos = this.getPosition();
var fallAction = cc.MoveTo.create( 0.5, new cc.Point( pos.x, 0 ) );
this.runAction( fallAction );
}
</syntaxhighlight>

This action tell the <tt>Player</tt> to move to the ground (where y co-ordinate = 0) in 0.5 seconds. You can call this method <tt>fall</tt> at an appropriate location in <tt>GameLayer</tt> (e.g., after the <tt>Player</tt> hits the pillars).

{{gitcomment|Commit your change.}}

=== Flapping dot: animations and combining actions ===
We shall make the dot animate. The associated action is <tt>cc.Animate</tt> ([http://www.cocos2d-x.org/reference/html5-js/V2.2.2/symbols/cc.Animate.html ref]), which an be created with <tt>cc.Animation</tt> ([http://www.cocos2d-x.org/reference/html5-js/V2.2.2/symbols/cc.Animation.html ref]). (Note the action is <tt>cc.Animate</tt>, the animation data is created in <tt>cc.Animation</tt> object.)

Create another 40x40 image for the player animation. Save it as <tt>images/dot2.png</tt>. The image below shows example images for <tt>dot.png</tt> and the new <tt>dot2.png</tt>.

[[Image:Dot-anim.png]]

To make an animation we shall repeatedly shows the first image and switch to the second image. To do so we create an <tt>cc.Animation</tt> and add these two images with appropriate time between the animation frame. The code is shown below. You can add this code to method <tt>Player.ctor</tt>.

<syntaxhighlight lang="javascript">
var animation = new cc.Animation.create();
animation.addSpriteFrameWithFile( 'images/dot.png' );
animation.addSpriteFrameWithFile( 'images/dot2.png' );
animation.setDelayPerUnit( 0.2 );
var movingAction = cc.Animate.create( animation );
this.runAction( movingAction );
</syntaxhighlight>

Try to run the game. The player will move once.

To make the player moves many times, we can call method <tt>setLoops</tt> in the <tt>cc.Animation</tt> object. However, if we want the player to move forever, we can create a special action.

Cocos2d-html5 provides a set of actions that combines other actions. These are, for example, <tt>[http://www.cocos2d-x.org/reference/html5-js/V2.2.2/symbols/cc.Sequence.html cc.Sequence]</tt>, <tt>[http://www.cocos2d-x.org/reference/html5-js/V2.2.2/symbols/cc.Repeat.html cc.Repeat]</tt>, and <tt>[http://www.cocos2d-x.org/reference/html5-js/V2.2.2/symbols/cc.RepeatForever.html cc.RepeatForever]</tt>. In this case, we will use <tt>cc.RepeatForever</tt>.

To create an action for our animation that runs forever, we use the previous <cc>cc.Animate</tt> action to create <tt>cc.RepeatForever</tt> action like this:

var movingAction = cc.RepeatForever.create( cc.Animate.create( animation ) );

Try and see our player moves.

=== Moving after the game starts ===
Our player starts moving before we even start the game. This might not be good. Let's make it start and stop at appropriate times.

Let's start by cleaning our code a bit. The code for creating an animate action in the constructor is long and is not in the same abstraction level as the other code; let's extract it and create a new method:

<syntaxhighlight lang="javascript">
createAnimationAction: function() {
var animation = new cc.Animation.create();
animation.addSpriteFrameWithFile( 'images/dot.png' );
animation.addSpriteFrameWithFile( 'images/dot2.png' );
console.log( animation.getDelayPerUnit() );
animation.setDelayPerUnit( 0.2 );
return cc.RepeatForever.create( cc.Animate.create( animation ) );
}
</syntaxhighlight>

We want to start and stop the animation, so let's save the action as the player's property. Put this <tt>Player.ctor</tt> in <tt>Player.ctor</tt> (replace the part where we create movingAction with a method call):

<syntaxhighlight lang="javascript">
this.movingAction = this.createAnimationAction();
</syntaxhighlight>

We also remove the call the <tt>this.runAction</tt>.

We will start the animation when the player starts, so let's add this to <tt>Player.start</tt> method:

<syntaxhighlight lang="javascript">
this.runAction( this.movingAction );
</syntaxhighlight>

Also, we will stop when the player stops. We can add this line to <tt>Player.stop</tt> method:

<syntaxhighlight lang="javascript">
this.stopAction( this.movingAction );
</syntaxhighlight>

{{gitcomment|Try to see if the animation works. Don't forget to commit your change.}}

== Spritesheets ==

It is hard to maintain a lot of files in the resource. A typical approach for animation sprite frames is to pack them into a single image file. We will learn how to do this in this section. We will do that using <tt>cc.SpriteFrame</tt> and <tt>cc.SpriteFrameCache</tt>.

Various tutorials:
* [http://www.cocos2d-x.org/docs/tutorial/parkour-game-with-javascript/chapter5/en Let the Player Run Animations]
* [http://www.gamefromscratch.com/post/2012/08/14/Cocos2D-HTML-Tutorial-6-Spritesheets.aspx Tutorial on Spritesheets]

=== Two concepts: <tt>Sprite</tt> and <tt>SpriteFrame</tt> ===
There are two related concepts (two classes) that we have to understand, or at least be able to distinguish them: '''<tt>Sprite</tt>''' and '''<tt>SpriteFrame</tt>''' ([http://www.cocos2d-x.org/reference/html5-js/V2.2.2/symbols/cc.SpriteFrame.html ref]).

The objects that Cocos2d-html5 draws on the screen must be <tt>cc.Node</tt> objects. Class <tt>cc.Sprite</tt> inherits from <tt>cc.Node</tt> so that its objects can be drawn on the screen. A <tt>cc.Sprite</tt> can be moved, scaled, rotated and transformed. What is actually drawn on the screen, in case of a <tt>cc.Sprite</tt>, is a <tt>cc.SpriteFrame</tt>. A <tt>cc.SpriteFrame</tt> is a rectangular section of an image (called texture). (Note that it can also be the whole image.)

Let's review what we have done previously.

When we create a <tt>cc.Sprite</tt> from an image file, we call:

this.initWithFile("images/ship.png");

This will implicitely create a <tt>cc.SpriteFrame</tt> for ''this'' sprite.

When we create an <tt>cc.Animation</tt>, recall that we add a <tt>cc.SpriteFrame</tt> with statements like:

animation.addSpriteFrameWithFile( 'images/dot.png' );

We then apply this animation (which contains many <tt>cc.SpriteFrame</tt>'s) to animate a single <tt>cc.Sprite</tt>.

In summary, the object that is shown, moved, and transformed on the screen is a <tt>cc.Sprite</tt>; it is the object of the game that we manage. The images shown for that object are <tt>cc.SpriteFrame</tt>'s.

=== <tt>SpriteFrame</tt> and <tt>SpriteFrameCache</tt> ===

We can create a <tt>cc.SpriteFrame</tt> from an image file. We can also create it from a rectangular section of that image. However, if we will use this <tt>cc.SpriteFrame</tt> for many times, we can make it more efficient by caching it in the <tt>cc.SpriteFrameCache</tt> ([http://www.cocos2d-x.org/reference/html5-js/V2.2.2/symbols/cc.SpriteFrameCache.html ref]).

The game contains only one <tt>cc.SpriteFrameCache</tt> object (i.e., it is a ''singleton''). To access it we call

cc.SpriteFrameCache.getInstance()

We can add a <tt>cc.SpriteFrame</tt> object with a specific name using method <tt>addSpriteFrame</tt> ([http://www.cocos2d-x.org/reference/html5-js/V2.2.2/symbols/cc.SpriteFrameCache.html#addSpriteFrame ref]) and retrieve it back with method <tt>getSpriteFrame</tt>. An example code is shown below.

<syntaxhighlight lang="javascript">
// save a SpriteFrame to the cache.
var spriteFrameCache = cc.SpriteFrameCache.getInstance();
var shipFrame = cc.SpriteFrame.create( 'images/ship.png', cc.rect( 0, 0, 100, 100 ) );
spriteFrameCache.addSpriteFrame( shipFrame, 'ship_frame1.png' );

// ...

// get the SpriteFrame
var frame = cc.SpriteFrameCache.getInstance().getSpriteFrame( 'ship_frame1.png' );
</syntaxhighlight>

Since we can specify a rectangular section of an image to create a <tt>cc.SpriteFrame</tt>. We can pack a lot of images for many sprite frames into a ''single'' image file and load all these frames into the sprite frame cache in a single call. To be able to do that, we must be able to specify all the information of all sprite frames in the image file. Cocos2d-html5 uses '''plist''' file to keep the frame information.

=== Creating a plist file ===

We shall learn to pack all sprite images and create a plist file. To see an example of an image, go to [https://github.com/cocos2d/cocos2d-js-tests/blob/master/games/MoonWarriors/res/textureTransparentPack.png textureTransparentPack.png] from MoonWarriors, and to see an example of a plist file, take a look at [https://github.com/cocos2d/cocos2d-js-tests/blob/master/games/MoonWarriors/res/textureTransparentPack.plist textureTransparentPack.plist].

There are many software that you can use to pack the sprite images. [http://www.codeandweb.com/texturepacker TexturePacker] is one that you can try. See its [http://www.cocos2d-x.org/docs/tutorial/parkour-game-with-javascript/chapter5/en tutorial here], and [http://www.gamefromscratch.com/post/2012/05/07/PlayStation-Studio-SDK-Tutorial-Working-with-sprite-sheets.aspx here] (for the later links, don't forget to set Data Format to Cocos2D).

There are other software that you can use, e.g., XXX. In this tutorial, we will use an open-source [http://darkfunction.com/editor/ darkFunction editor]. But the overall idea should be the same.

=== Loading sprite frames ===
Here are the steps to load the sprite frames:

* Add plist file and the image file to the preload resource list. It will be good if you name both files with the same name.
* Call method <tt>addSpriteFrames</tt>, e.g.:

cc.SpriteFrameCache.getInstance().addSpriteFrames( 'res/yourtexturefile.plist' );

* If your plist file and the image file have different names, you should also specify the image file name, e.g.,

cc.SpriteFrameCache.getInstance().addSpriteFrames( 'res/yourtexturefile.plist', 'res/images/yourtexture.png' );

* You can then get all the <tt>SpriteFrame</tt>'s in that plist/png files, by referring to their names with these methods:
** <tt>getSpriteFrame</tt> from <tt>cc.SpriteFrameCache</tt> ([http://www.cocos2d-x.org/reference/html5-js/V2.2.2/symbols/cc.SpriteFrameCache.html#getSpriteFrame ref]) to get the SpriteFrame.
** <tt>cc.Sprite.createWithSpriteFrameName</tt> ([http://www.cocos2d-x.org/reference/html5-js/V2.2.2/symbols/cc.Sprite.html#.createWithSpriteFrameName ref]) to create a sprite and initialize it to the specified sprite frame.

=== Bonus: AnimationCache ===

== Sound effects ==
Follow these steps:

* Create the media files. You can use .wav, .mp3, or .ogg files. Put the files in a separate directory, e.g., <tt>effects</tt>.
* Add the effect files to <tt>resource.js</tt> preload the resource. E.g., (don't forget the commas)

//effect
{src: 'effects/fall.mp3' }

* Get the <tt>AudioEngine</tt> and call it. You can call <tt>playEffect</tt> ([http://www.cocos2d-x.org/reference/html5-js/V2.2.2/symbols/cc.SimpleAudioEngine.html#playEffect ref])

cc.AudioEngine.getInstance().playEffect( 'effects/fall.mp3' );

cr call <tt>playMusic</tt> ([http://www.cocos2d-x.org/reference/html5-js/V2.2.2/symbols/cc.SimpleAudioEngine.html#playMusic ref]):

cc.AudioEngine.getInstance().playMusic( 'someofyourmusicfile' );

You can even loop the effects or musics by setting loop parameter to <tt>true</tt>; e.g.,

cc.AudioEngine.getInstance().playMusic( 'someofyourmusicfile', true );

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 01:47, 1 มีนาคม 2559
แถว 104:		แถว 104:

	== Spritesheets ==		== Spritesheets ==
		+
		+	'''UPDATED:''' See the [http://cocos2d-x.org/documentation/programmers-guide/3/index.html#creating-a-sprite-from-a-sprite-sheet official documentation] on spritesheets [http://cocos2d-x.org/documentation/programmers-guide/3/index.html#creating-a-sprite-from-a-sprite-sheet here].
		+
		+	There are many free on-line tools that help you create spritesheets. E.g.,
		+
		+	* [http://www.piskelapp.com/ Piskel]
		+	* [https://draeton.github.io/stitches/ Stitches]
		+	* [http://www.leshylabs.com/apps/sstool/ Leshy]

	<pre>		<pre>

@@ แถว 213: / แถว 213: @@
      pillar_bottom_png: 'res/images/pillar-bottom.png',
-     effects_fall: 'res/effects/fall.mp3',
+     effects_fall: 'res/effects/fall.mp3'
 };
 </syntaxhighlight>
@@ แถว 219: / แถว 219: @@
 * Get the <tt>audioEngine</tt> and call it.  You can call <tt>playEffect</tt> ([http://www.cocos2d-x.org/reference/html5-js/V3.2/symbols/cc.audioEngine.html#playEffect ref])
-  cc.audioEngine.playEffect( 'effects/fall.mp3' );
+  cc.audioEngine.playEffect( 'res/effects/fall.mp3' );
 cr call <tt>playMusic</tt> ([http://www.cocos2d-x.org/reference/html5-js/V3.2/symbols/cc.audioEngine.html#playMusic ref]):

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 04:34, 18 กุมภาพันธ์ 2558
แถว 104:		แถว 104:

	== Spritesheets ==		== Spritesheets ==
		+
		+	<pre>
		+
		+
		+
		+
		+
		+	THIS PART HAS NOT BE TESTED ON THE NEW VERSION OF THE FRAMEWORK...
		+
		+
		+
		+
		+
		+
		+
		+
		+
		+	</pre>

	It is hard to maintain a lot of files in the resource. A typical approach for animation sprite frames is to pack them into a single image file. We will learn how to do this in this section. We will do that using <tt>cc.SpriteFrame</tt> and <tt>cc.SpriteFrameCache</tt>.		It is hard to maintain a lot of files in the resource. A typical approach for animation sprite frames is to pack them into a single image file. We will learn how to do this in this section. We will do that using <tt>cc.SpriteFrame</tt> and <tt>cc.SpriteFrameCache</tt>.

@@ แถว 206: / แถว 206: @@
 * Add the effect files to <tt>resource.js</tt> preload the resource.  E.g., (don't forget the commas)
-     //effect
+{{synfile|resource.js}}
-     {src: 'effects/fall.mp3' }
+<syntaxhighlight lang="javascript">
-* Get the <tt>AudioEngine</tt> and call it.  You can call <tt>playEffect</tt> ([http://www.cocos2d-x.org/reference/html5-js/V2.2.2/symbols/cc.SimpleAudioEngine.html#playEffect ref])
+    effects_fall: 'res/effects/fall.mp3',
-  cc.AudioEngine.getInstance().playEffect( 'effects/fall.mp3' );
+* Get the <tt>audioEngine</tt> and call it.  You can call <tt>playEffect</tt> ([http://www.cocos2d-x.org/reference/html5-js/V3.2/symbols/cc.audioEngine.html#playEffect ref])
-cr call <tt>playMusic</tt> ([http://www.cocos2d-x.org/reference/html5-js/V2.2.2/symbols/cc.SimpleAudioEngine.html#playMusic ref]):
+ cc.audioEngine.playEffect( 'effects/fall.mp3' );
- cc.AudioEngine.getInstance().playMusic( 'someofyourmusicfile' );
+cr call <tt>playMusic</tt> ([http://www.cocos2d-x.org/reference/html5-js/V3.2/symbols/cc.audioEngine.html#playMusic ref]):
 You can even loop the effects or musics by setting loop parameter to <tt>true</tt>; e.g.,
-  cc.AudioEngine.getInstance().playMusic( 'someofyourmusicfile', true );
+  cc.audioEngine.playMusic( 'someofyourmusicfile', true );

@@ แถว 66: / แถว 66: @@
 Let's start by cleaning our code a bit.  The code for creating an animate action in the constructor is long and is not in the same abstraction level as the other code; let's extract it and create a new method:
 <syntaxhighlight lang="javascript">
      createAnimationAction: function() {
 	var animation = new cc.Animation.create();
-	animation.addSpriteFrameWithFile( 'images/dot.png' );
+	animation.addSpriteFrameWithFile( 'res/images/dot.png' );
-	animation.addSpriteFrameWithFile( 'images/dot2.png' );
+	animation.addSpriteFrameWithFile( 'res/images/dot2.png' );
 	console.log( animation.getDelayPerUnit() );
 	animation.setDelayPerUnit( 0.2 );
@@ แถว 79: / แถว 80: @@
 We want to start and stop the animation, so let's save the action as the player's property.  Put this <tt>Player.ctor</tt> in <tt>Player.ctor</tt> (replace the part where we create movingAction with a method call):
 <syntaxhighlight lang="javascript">
          this.movingAction = this.createAnimationAction();
@@ แถว 87: / แถว 89: @@
 We will start the animation when the player starts, so let's add this to <tt>Player.start</tt> method:
 <syntaxhighlight lang="javascript">
          this.runAction( this.movingAction );
@@ แถว 93: / แถว 96: @@
 Also, we will stop when the player stops.  We can add this line to <tt>Player.stop</tt> method:
 <syntaxhighlight lang="javascript">
          this.stopAction( this.movingAction );

@@ แถว 29: / แถว 29: @@
 === Flapping dot: animations and combining actions ===
-We shall make the dot animate.  The associated action is <tt>cc.Animate</tt> ([http://www.cocos2d-x.org/reference/html5-js/V2.2.2/symbols/cc.Animate.html ref]), which an be created with <tt>cc.Animation</tt> ([http://www.cocos2d-x.org/reference/html5-js/V2.2.2/symbols/cc.Animation.html ref]).  (Note the action is <tt>cc.Animate</tt>, the animation data is created in <tt>cc.Animation</tt> object.)
+We shall make the dot animate.  The associated action is <tt>cc.Animate</tt> ([http://www.cocos2d-x.org/reference/html5-js/V3.2/symbols/cc.Animate.html ref]), which an be created with <tt>cc.Animation</tt> ([http://www.cocos2d-x.org/reference/html5-js/V3.2/symbols/cc.Animation.html ref]).  (Note the action is <tt>cc.Animate</tt>, the animation data is created in <tt>cc.Animation</tt> object.)
 Create another 40x40 image for the player animation. Save it as <tt>images/dot2.png</tt>.  The image below shows example images for <tt>dot.png</tt> and the new <tt>dot2.png</tt>.
@@ แถว 37: / แถว 37: @@
 To make an animation we shall repeatedly shows the first image and switch to the second image.  To do so we create an <tt>cc.Animation</tt> and add these two images with appropriate time between the animation frame.  The code is shown below.  You can add this code to method <tt>Player.ctor</tt>.
 <syntaxhighlight lang="javascript">
 	var animation = new cc.Animation.create();

@@ แถว 11: / แถว 11: @@
 === Falling dot ===
-We shall let the player falls.  In this case, we use <tt>cc.MoveTo</tt> ([http://www.cocos2d-x.org/reference/html5-js/V2.2.2/symbols/cc.MoveTo.html ref]) action to tell the object to move to a specific location.  After we create the action, we can tell the object to perform an action simply by calling method <tt>runAction</tt>.
+We shall let the player falls.  In this case, we use <tt>cc.MoveTo</tt> ([http://www.cocos2d-x.org/reference/html5-js/V3.2/symbols/cc.MoveTo.html ref]) action to tell the object to move to a specific location.  After we create the action, we can tell the object to perform an action simply by calling method <tt>runAction</tt>.
 Add method <tt>fall</tt> to class <tt>Player</tt>:
 <syntaxhighlight lang="javascript">
      fall: function() {