index.html


<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>小桑博客</title>
  <meta name="author" content="alfred sang">

  
  <meta name="description" content="rootviewcontroller 上增加了一个tableviewcontroller，tablecell里有一个view，view里又有一个button view大于2层就很难受了，delegate传来传去的。 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
view1 &hellip;">
  

  <!-- http://t.co/dKP3o1e -->
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  
  <link rel="canonical" href="http://shiren1118.github.com/">
  <link href="/favicon.png" rel="icon">
  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
  <script src="/javascripts/modernizr-2.0.js"></script>
  <script src="/javascripts/ender.js"></script>
  <script src="/javascripts/octopress.js" type="text/javascript"></script>
  <link href="/atom.xml" rel="alternate" title="小桑博客" type="application/atom+xml">
  <!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">

  
</head>

<body   >
  <header role="banner"><hgroup>
  <h1><a href="/">小桑博客</a></h1>
  
    <h2>如果渡不过这不可渡的海，将成为这海中捞不起的沙</h2>
  
</hgroup>

</header>
  <nav role="navigation"><ul class="subscription" data-subscription="rss">
  <li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
  
</ul>
  
<form action="http://google.com/search" method="get">
  <fieldset role="search">
    <input type="hidden" name="q" value="site:shiren1118.github.com" />
    <input class="search" type="text" name="q" results="0" placeholder="Search"/>
  </fieldset>
</form>
  
<ul class="main-navigation">
  <li><a href="/">博客</a></li>
  <li><a href="/blog/archives">归档</a></li>
  <li><a href="/about">About</a></li>
</ul>

</nav>
  <div id="main">
    <div id="content">
      <div class="blog-index">
  
  
    <article>
      
  <header>
    
      <h1 class="entry-title"><a href="/blog/2013/03/18/about-delegete/">About Delegete</a></h1>
    
    
      <p class="meta">
        

<time datetime="2013-03-18T00:29:00+08:00" pubdate data-updated="true">Mar 18<span>th</span>, 2013</time>
        
      </p>
    
  </header>


  <div class="entry-content"><p>rootviewcontroller 上增加了一个tableviewcontroller，tablecell里有一个view，view里又有一个button</p>

<p>view大于2层就很难受了，delegate传来传去的。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>view1:
</span><span class='line'>  button - click
</span><span class='line'>      -(void)click_event_callback;
</span><span class='line'>  
</span><span class='line'>tableviewcontroller
</span><span class='line'>  view1.delegate = self;
</span><span class='line'>  
</span><span class='line'>  -(void)click_event_callback;
</span><span class='line'>  
</span><span class='line'>  
</span><span class='line'>rootviewcontroller
</span><span class='line'>  tableviewcontroller *tbvc.delegate = self;
</span><span class='line'>  
</span><span class='line'>  -(void)click_event_callback;
</span><span class='line'>  </span></code></pre></td></tr></table></div></figure>


<p>这样做的原因是点击button的时候，需要在rootviewcontroller.navagationcontroller中push一个viewcontroller，而tableviewcontroller是没有navagationcontroller的。</p>

<p>我们通常设置delegate</p>

<pre><code>@property(nonatomic,assign,readwrite) id&lt;*Protocol&gt; _delegate;
</code></pre>

<p>用assign是防止产生交替dealloc死锁内存问题。</p>
</div>
  
  
    </article>
  
  
    <article>
      
  <header>
    
      <h1 class="entry-title"><a href="/blog/2013/03/04/transitions/">[Cocos2d-x wiki翻译]Transitions</a></h1>
    
    
      <p class="meta">
        

<time datetime="2013-03-04T16:58:00+08:00" pubdate data-updated="true">Mar 4<span>th</span>, 2013</time>
        
      </p>
    
  </header>


  <div class="entry-content"><h2>转场动画 (Transitions)</h2>

<h3>介绍</h3>

<div style='display:none;'>
One of the cool features that Cocos2d-x has to offer is the power of transitions within two different scene. Transitions are effects such as: wipe, fade, zoom, and split. You can use transitions to switch between Cocos2d-x Scene objects. Sceneclass is derived from CocosNode and it is similar to Layer. You can add other CocosNode, such as Layer(s) and Sprite(s) into a Scene.
</div>


<p>Cocos2d-x提供的最爽的一个特性是在2个不同场景间转场的能力.转场的效果有：wipe, fade, zoom, 和 split. 你可以使用转场动画在Cocos2d-x场景对象中切换.Sceneclass继承自CocosNode,它和Layer非常相似.你可以增加其他CocosNode,如 Layer(s) 和 Sprite(s) 放到场景中.</p>

<div style='display:none;'>
Technically, a transition scene is an scene that performs a transition effect before setting control to the new scene.
</div>


<p>技巧上说,转场的场景是一个在设置控制到新的场景前执行转场效果的场景.</p>

<h3>创建转场动画</h3>

<div style='display:none;'>
Time is the number of seconds for the transition. To apply transition to scenes, the syntax is as follows:
</div>


<p>Time 是转场的秒数.为了把转场动画应用到场景中，语法如下:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>CCDirector::sharedDirector()-&gt;replaceScene(CCTransitionFade::create(0.5,newScene));</span></code></pre></td></tr></table></div></figure>


<div style='display:none;'>
Some transitions has custom parameter(s); for example, FadeTransition has the fade color as extra parameter.
static CCTransitionFade* create(float duration,CCScene* scene, const ccColor3B& color);
To enable a transition, it is not much more difficult. Here we have an small example:
</div>


<p>一些转场可以有自定义参数;例如,FadeTransition有fade color作为额外参数.</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>static CCTransitionFade* create(float duration,CCScene* scene, const ccColor3B& color);</span></code></pre></td></tr></table></div></figure>


<p>运行转场动画其实一点不难，这儿有一个小例子:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>CCScene *s = SecondPage::scene();
</span><span class='line'>
</span><span class='line'>CCDirector::sharedDirector()-&gt;setDepthTest(true);
</span><span class='line'>
</span><span class='line'>CCTransitionScene *transition = CCTransitionPageTurn::create(3.0f, s, false);</span></code></pre></td></tr></table></div></figure>


<div style='display:none;'>
If you run this you will have a “page turn” effect. This is, like turning the page on a paper made book.
</div>


<p>如果运行这段代码，你会看到翻页效果.看起来就像是一页一页翻书。</p>

<p><img src="http://www.cocos2d-x.org/attachments/download/1623" alt="" /></p>

<h3>更多转场动画</h3>

<div style='display:none;'>
There are many more transition types, you can see the full list in the class reference, in the official Cocos2D-X documentation.
</div>


<p>想知道更多转场动画类型，你可以在官方Cocos2D-X文档的相关类中参考完整列表。</p>

<div style='display:none;'>
Last updated by Zhe Wang at Updated about 1 month ago.
</div>


<h3>Comment</h3>
</div>
  
  
    </article>
  
  
    <article>
      
  <header>
    
      <h1 class="entry-title"><a href="/blog/2013/03/04/particles/">[Cocos2d-x wiki翻译]Particles</a></h1>
    
    
      <p class="meta">
        

<time datetime="2013-03-04T16:58:00+08:00" pubdate data-updated="true">Mar 4<span>th</span>, 2013</time>
        
      </p>
    
  </header>


  <div class="entry-content"><h1>粒子(Particles)</h1>

<h2>简介</h2>

<div style='display:none;'>
The term particle system refers to a computer graphics technique that uses a large number of very small sprites or other graphic objects to simulate certain kinds of &#8220;fuzzy&#8221; phenomena, which are otherwise very hard to reproduce with conventional rendering techniques - usually highly chaotic systems, natural phenomena, and/or processes caused by chemical reactions.
</div>


<p>术语粒子系统关系到计算机图形学技术，使用大量非常小的sprite或其他图像对象来模拟特定种类的&#8221;模糊&#8221;现象,通过常规的渲染技术是很难制造的——一般来说有混乱系统、自然现象、或者活学反应引起的过程。</p>

<p><img src="http://www.cocos2d-x.org/attachments/download/1631" alt="" /></p>

<h2>Point vs Quad</h2>

<div style='display:none;'>
In early versions of Cocos2d-x, there were two types of particle system in cocos2d-x: Quad and Point particle system:
</div>


<p>在Cocos2d-x早期版本中,Cocos2d-x里粒子系统有两种类型:Quad 和 Point粒子系统:</p>

<ul>
<li>CCParticleSystemQuad</li>
<li>CCParticleSystemPoint</li>
</ul>


<div style='display:none;'>
The CCParticleSystemQuad has these additional features that CCParticleSystemPoint doesn&#8217;t support:
</div>


<p>CCParticleSystemQuad有很多特性是CCParticleSystemPoint不支持的:</p>

<div style='display:none;'>
- Spinning particles: particles can rotate around its axis. CCParticleSystemPoint ignores this property.
- Particles can have any size. In CCParticleSystemPoint if the size is bigger than 64, it will be treated as 64.
- The whole system can be scaled using the scale property.
</div>


<ul>
<li>Spinning particles:粒子可以绕自身的轴旋转。CCParticleSystemPoint忽略了该属性。</li>
<li>粒子可以为任意大小。在CCParticleSystemPoint中，如果大小大于64时，就视为64。</li>
<li>通过scale属性可以缩放整个系统。</li>
</ul>


<div style='display:none;'>
Because of CCParticleSystemPoint does not support CCParticleBatchNode. As the result, CCParticleSystemPoint has been removed from cocos2d-x particle system.
</div>


<p>由于CCParticleSystemPoint不支持CCParticleBatchNode.所以,CCParticleSystemPoint已经从cocos2d-x粒子系统里移除了.</p>

<h2>CCParticleBatchNode</h2>

<div style='display:none;'>
A CCParticleBatchNode can reference one and only one texture (one image file, one texture atlas). Only the CCParticleSystems that are contained in that texture can be added to the CCSpriteBatchNode. All CCParticleSystems added to a CCSpriteBatchNode are drawn in one OpenGL ES draw call. If the CCParticleSystems are not added to a CCParticleBatchNode then an OpenGL ES draw call will be needed for each one, which is less efficient.
</div>


<p>CCParticleBatchNode可以引用且只可以引用1个texture(一个图片文件，一个texture图集).只有CCParticleSystem可以增加到CCSpriteBatchNode中.
所有增加到CCSpriteBatchNode中的CCParticleSystem是在OpenGL ES调用绘图函数时绘制的.
如果CCParticleSystem没有增加到CCParticleBatchNode中，OpenGL ES会调用每个粒子系统的绘图函数，这样做是低效的.</p>

<h3>创建Quad粒子系统</h3>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>CCParticleSystemQuad* m_emitter = newCCParticleSystemQuad();
</span><span class='line'>m_emitter = CCParticleFire::create();</span></code></pre></td></tr></table></div></figure>


<h2>重力和半径模式</h2>

<h3>重力模式 Gravity Mode</h3>

<div style='display:none;'>
Gravity Mode lets particles fly toward or away from a center point. Its strength is that it allows very dynamic, organic effects. You can set gravity mode with this line:
</div>


<p>重力模式让粒子围绕一个中心点移近或移远.它的优点是非常动态，有组织有规则的效果.你可以通过下面这行代码设置重力模式:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>// Gravity Mode
</span><span class='line'>this-&gt;m_nEmitterMode = kCCParticleModeGravity;
</span><span class='line'>
</span><span class='line'>// Gravity Mode: gravity
</span><span class='line'>this-&gt;modeA.gravity = ccp(0,-90);</span></code></pre></td></tr></table></div></figure>


<div style='display:none;'>
These properties are only valid in Gravity Mode:
</div>


<p><strong>下面这些属性只在重力模式下支持:</strong></p>

<div style='display:none;'>
- gravity (a CGPoint). The gravity of the particle system
- speed (a float). The speed at which the particles are emitted
- speedVar (a float). The speed variance.
- tangencialAccel (a float). The tangential acceleration of the particles.
- tangencialAccelVar (a float). The tangential acceleration variance.
- radialAccel (a float). The radial acceleration of the particles.
- radialAccelVar (a float). The radial acceleration variance.
</div>


<ul>
<li>重力（CGPoint）。粒子系统的重力。</li>
<li>速度（float）。粒子发射时的速度。</li>
<li>速度变量speedVar(float)。速度的变异数。</li>
<li>tangencialAccel(float)。粒子的正切加速度。</li>
<li>tangencialAccelVar(float)。粒子正切加速度的差异数。</li>
<li>radialAccel(float)。粒子的径向加速度。</li>
<li>radialAccelVar(float)。粒子径向加速度的差异数。</li>
</ul>


<h3>半径模式 Radius Mode</h3>

<div style='display:none;'>
Radius Mode causes particles to rotate in a circle. It also allows you to create spiral effects with particles either rushing inward or orating outward. You set radius mode with this line:
</div>


<p>半径模式会使粒子以圆圈方式旋转.它也可以创造螺旋效果让粒子急速前进或后退.你可以通过下面这行代码设置半径模式:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>// Radius Mode
</span><span class='line'>this-&gt;m_nEmitterMode = kCCParticleModeRadius;
</span><span class='line'>
</span><span class='line'>// Radius Mode: startRadius
</span><span class='line'>this-&gt;modeB.startRadius = 0;
</span><span class='line'>this-&gt;modeB.startRadiusVar = 0;//ccp(0,0);</span></code></pre></td></tr></table></div></figure>


<div style='display:none;'>
These properties are only valid in Radius Mode:
</div>


<p><strong>下面这些属性只在半径模式下支持:</strong></p>

<div style='display:none;'>
- startRadius (a float). The starting radius of the particles
- startRadiusVar (a float). The starting radius variance
- endRadius (a float). The ending radius of the particles.
- endRadiusVar (a float). The ending radius variance
- rotatePerSecond (a float). Number of degress to rotate a particle around the source pos per second.
- rotatePerSecondVar (a float). Number of degrees variance.
</div>


<ul>
<li>startRadius(float)。粒子开始时的半径。</li>
<li>startRadiusVar(float)。粒子开始时的半径变异数。</li>
<li>endRadius(float)。粒子结束时的半径。</li>
<li>endRadiusVar(float)。结束时粒子的半径变异数。</li>
<li>rotatePerSecond(float)。粒子围绕原点每秒旋转的度数。</li>
<li>rotatePerSecondVar(float)。度数的变异数。</li>
</ul>


<h2>各模式下的通用属性</h2>

<h3>粒子通用属性：</h3>

<div style='display:none;'>
- startSize: Start size of the particles in pixels
- startSizeVar
- endSize: Use kCCParticleStartSizeEqualToEndSize if you want that the start size == end size.
- endSizeVar
- startColor (a ccColor4F)
- startColorVar (a ccColor4F)
- endColor (a ccColor4F)
- endColorVar (a ccColor4F)
- startSpin. Only used in CCParticleSystemQuad
- startSpinVar. Only used in CCParticleSystemQuad
- endSpin. Only used in CCParticleSystemQuad
- endSpinVar. Only used in CCParticleSystemQuad
- life: time to live of the particles in seconds
- lifeVar:
- angle: (a float). Starting degrees of the particle
- angleVar
- positon: (a CGPoint)
- posVar
- centerOfGravity (a CGPoint)
</div>


<ul>
<li>startSize: 开始时粒子的像素大小</li>
<li>startSizeVar</li>
<li>endSize: 如果你愿意的话使用kCCParticleStartSizeEqualToEndSize，这样开始大小 == 结束大小</li>
<li>endSizeVar</li>
<li>startColor开始颜色 (ccColor4F)</li>
<li>startColorVar (ccColor4F)</li>
<li>endColor结束颜色 (ccColor4F)</li>
<li>startSpin开始的旋转角度。只用于CCParticleSystemQuad</li>
<li>startSpinVar.只用于CCParticleSystemQuad</li>
<li>endSpin结束时的旋转角度。只用于CCParticleSystemQuad</li>
<li>endSpinVar。只用于CCParticleSystemQuad</li>
<li>life：粒子存活的时间，单位秒</li>
<li>lifeVar：</li>
<li>angle：(float)。粒子发射时的角度</li>
<li>angleVar</li>
<li>positon：(CGPoint)</li>
<li>posVar</li>
<li>centerOfGravity(CGPoint)重力中心点</li>
</ul>


<h3>粒子系统通用属性：</h3>

<div style='display:none;'>
- emissionRate (a float). How many particle are emitted per second
- duration (a float). How many seconds does the particle system (different than the life property) lives. Use kCCParticleDurationInfinity for infity.
- blendFunc (a ccBlendFunc). The OpenGL blending function used for the system
- positionType (a tCCPositionType). Use kCCPositionTypeFree (default one) for moving particles freely. Or use kCCPositionTypeGrouped to move them in a group.
- texture (a CCTexture2D). The texture used for the particles
</div>


<ul>
<li>emissionRate (float)。每秒发射多少粒子。</li>
<li>duration (float)。粒子系统可以存活多少秒（与life属性不同）。使用kCCParticleDurationInfinity为无限时间。</li>
<li>blendFunc (ccBlendFunc)。系统中使用的OpenGL混合方法。</li>
<li>positionType (CCPositionType)。粒子自由移动使用kCCPositionTypeFree（默认）。或者使用kCCPositionTypeGrouped，使粒子在集合中移动。</li>
<li>texture纹理(CCTexture2D)。粒子使用的纹理。</li>
</ul>


<h2>示例</h2>

<div style='display:none;'>
cocos2d-x comes with some predefined particles that can be customized in runtime. List of predefined particles:
</div>


<p>cocos2d-x里内置的预制粒子是可以在运行时自定义的.内置粒子列表:</p>

<ul>
<li>CCParticleFire: Point particle system. 使用重力模式.</li>
<li>CCParticleFireworks: Point particle system. 使用重力模式.</li>
<li>CCParticleSun: Point particle system. 使用重力模式.</li>
<li>CCParticleGalaxy: Point particle system. 使用重力模式.</li>
<li>CCParticleFlower: Point particle system. 使用重力模式.</li>
<li>CCParticleMeteor: Point particle system. 使用重力模式.</li>
<li>CCParticleSpiral: Point particle system. 使用重力模式.</li>
<li>CCParticleExplosion: Point particle system. 使用重力模式.</li>
<li>CCParticleSmoke: Point particle system. 使用重力模式.</li>
<li>CCParticleSnow: Point particle system. 使用重力模式.</li>
<li>CCParticleRain: Point particle system. 使用重力模式.</li>
</ul>


<h2>参考</h2>

<p><a href="http://en.wikipedia.org/wiki/Particles">粒子</a>
<a href="http://www.cocos2d-iphone.org/wiki/doku.php/prog_guide:particles">cocos2d中的粒子系统</a></p>
</div>
  
  
    </article>
  
  
    <article>
      
  <header>
    
      <h1 class="entry-title"><a href="/blog/2013/03/04/effects/">[Cocos2d-x wiki翻译]Effects</a></h1>
    
    
      <p class="meta">
        

<time datetime="2013-03-04T16:58:00+08:00" pubdate data-updated="true">Mar 4<span>th</span>, 2013</time>
        
      </p>
    
  </header>


  <div class="entry-content"><h1>Effects</h1>

<h2>介绍</h2>

<div style='display:none;'>
Effects are a special kind of action. Instead of modifying normal properties like opacity, position, rotation, or scale, they modify a new kind of property: the grid property.
</div>


<p>Effect是特殊类型的动作.与修改常规的属性如透明度、位置、旋转或缩放等不同,它们修改的是一种新类型的属性:grid属性.</p>

<div style='display:none;'>
A grid property is like a matrix, it is a network of lines that cross each other to form a series of squares or rectangles.
</div>


<p>grid属性像是一个矩阵,是由相互交叉形成一系列正方形和矩形的线组成的网络。</p>

<div style='display:none;'>
These special actions render any CocosNode object (Layer, Scene, Sprite, etc.) into the grid, and you can transform the grid by moving its vertices.
</div>


<p>这些特殊的动作可以渲染任一CocosNode对象 (Layer, Scene, Sprite, 等.)到grid中，你可以通过顶点来变换grid.</p>

<div style='display:none;'>
There are 2 kind of grids: tiled grids and non-tiled grids. The difference is that the tiled grid is composed of individual tiles while the non-tiled grid is composed of vertices.
</div>


<p>一共有2类grid: 瓦片grid(tiled grids)和非瓦片grid(non-tiled grids).它们的区别在于瓦片grid是由独立的瓦片(tile)组成，而非瓦片grid由顶点组成。</p>

<p><img src="http://www.cocos2d-x.org/attachments/1575/tiled_and_nontiled_grid.png" alt="" /></p>

<div style='display:none;'>
The following is an example of Ripple3D action, who uses a Grid3D (non-tiled) grid:
</div>


<p></p>

<p>下面是Ripple3D动作例子，它使用的是 Grid3D (非瓦片的) grid:
<img src="http://www.cocos2d-x.org/attachments/1576/effect_ripple3d.png" alt="" />
<img src="http://www.cocos2d-x.org/attachments/1577/effect_ripple3d_grid.png" alt="" /></p>

<div style='display:none;'>
and the following is an example of FadeOutTR action, who uses a TiledGrid3D (tiled) grid:
</div>


<p></p>

<p>接下来是FadeOutTR动作例子，它用的是TiledGrid3D (瓦片) grid:</p>

<p><img src="http://www.cocos2d-x.org/attachments/1578/effect_fadeouttiles.png" alt="" />
<img src="http://www.cocos2d-x.org/attachments/1579/effect_fadeouttiles_grid.png" alt="" /></p>

<h2>用法</h2>

<div style='display:none;'>
Like any other action, it is executed by the runAction. eg:
</div>


<p>和其他动作一样,是通过runAction执行的.例如:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>// Create an sprite
</span><span class='line'>CCSprite* grossini = CCSprite::create("grossini.png");
</span><span class='line'>grossini-&gt;runAction(CCLiquid::create(4, 20, ccg(10,10), 5));</span></code></pre></td></tr></table></div></figure>


<div style='display:none;'>
Liquid, like any other grid action, receives the grid parameter. You can adjust the quality of the effect by increasing the size of the grid. But it also implies less FPS.
The Effects are IntervalAction actions so you can treat them like any other action. eg:
</div>


<p>和其他grid动作一样，Liquid会接收一个grid参数.你可以通过增加grid的大小来调整effect(效果)的品质.但是它也意味着有很少的FPS.  <br/>
Effect是IntervalAction动作（延时动作）,所以你可以用像其他动作的处理方式一样来处理它们.例如:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>// create a Lens3D action
</span><span class='line'>CCActionInterval* lens = CCLens3D::create(ccp(240,160),240,ccg(15,10),8);
</span><span class='line'>
</span><span class='line'>// create a Waved3D action
</span><span class='line'>CCActionInterval* waves = CCWaves3D::create(18,80,ccg(15,10),10);
</span><span class='line'>
</span><span class='line'>// create a sequence an repeat it forever
</span><span class='line'>grossini-&gt;runAction(CCRepeatForever::create((CCSequence*)CCSequence::create(waves, lens, NULL ) ) );</span></code></pre></td></tr></table></div></figure>


<div style='display:none;'>
The following is the list of the available Grid3D (non-tiled) actions in v2.1.0:
</div>


<p>下面是v2.1.0版本中Grid3D(non-tiled) actions的可用列表:</p>

<table>
<thead>
<tr>
<th>Shaky3D</th>
<th>Waves3D</th>
<th>FlipX3D</th>
<th>FlipY3D</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="http://www.cocos2d-x.org/attachments/1580/IMG_0001.PNG" alt="" /></td>
<td><img src="http://www.cocos2d-x.org/attachments/1581/IMG_0002.PNG" alt="" /></td>
<td><img src="http://www.cocos2d-x.org/attachments/1582/IMG_0003.PNG" alt="" /></td>
<td><img src="http://www.cocos2d-x.org/attachments/1583/IMG_0004.PNG" alt="" /></td>
</tr>
</tbody>
</table>


<table>
<thead>
<tr>
<th>Lens3D</th>
<th>Liquid</th>
<th>Waves</th>
<th>Twirl  </th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="http://www.cocos2d-x.org/attachments/1584/IMG_0005.PNG" alt="" /></td>
<td><img src="http://www.cocos2d-x.org/attachments/1585/IMG_0007.PNG" alt="" /></td>
<td><img src="http://www.cocos2d-x.org/attachments/1586/IMG_0008.PNG" alt="" /></td>
<td><img src="http://www.cocos2d-x.org/attachments/1587/IMG_0011.PNG" alt="" /></td>
</tr>
</tbody>
</table>


<table>
<thead>
<tr>
<th>Ripple3D</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="http://www.cocos2d-x.org/attachments/1588/IMG_0002_2.PNG" alt="" />|</td>
</tr>
</tbody>
</table>


<div style='display:none;'>
The following is the list of the available TiledGrid3D (tiled) actions
</div>


<p>下面是TiledGrid3D(tiled) 动作可用的列表:</p>

<table>
<thead>
<tr>
<th>ShakyTiles3D</th>
<th>ShatteredTiles3D</th>
<th>ShuffleTiles</th>
<th>FadeOutTRTiles </th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="http://www.cocos2d-x.org/attachments/1593/IMG_0012.PNG" alt="" /></td>
<td><img src="http://www.cocos2d-x.org/attachments/1594/IMG_0013.PNG" alt="" /></td>
<td><img src="http://www.cocos2d-x.org/attachments/1595/IMG_0014.PNG" alt="" /></td>
<td><img src="http://www.cocos2d-x.org/attachments/1596/IMG_0015.PNG" alt="" /></td>
</tr>
</tbody>
</table>


<table>
<thead>
<tr>
<th>FadeOutBLTiles</th>
<th>FadeOutUpTiles</th>
<th>FadeOutDownTiles</th>
<th>TurnOffTiles  </th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="http://www.cocos2d-x.org/attachments/1597/IMG_0016.PNG" alt="" /></td>
<td><img src="http://www.cocos2d-x.org/attachments/1598/IMG_0017.PNG" alt="" /></td>
<td><img src="http://www.cocos2d-x.org/attachments/1599/IMG_0019.PNG" alt="" /></td>
<td><img src="http://www.cocos2d-x.org/attachments/1600/IMG_0020.PNG" alt="" /></td>
</tr>
</tbody>
</table>


<table>
<thead>
<tr>
<th>WavesTiles3D</th>
<th>JumpTiles3D</th>
<th>SplitRows</th>
<th>SplitCols  </th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="http://www.cocos2d-x.org/attachments/1601/IMG_0021.PNG" alt="" /></td>
<td><img src="http://www.cocos2d-x.org/attachments/1602/IMG_0022.PNG" alt="" /></td>
<td><img src="http://www.cocos2d-x.org/attachments/1603/IMG_0023.PNG" alt="" /></td>
<td><img src="http://www.cocos2d-x.org/attachments/1604/IMG_0024.PNG" alt="" /></td>
</tr>
</tbody>
</table>


<h2>参考</h2>

<p>cocos2d-iphone <a href="http://www.cocos2d-iphone.org/archives/40">cocos2d’s effects简介</a></p>
</div>
  
  
    </article>
  
  
    <article>
      
  <header>
    
      <h1 class="entry-title"><a href="/blog/2013/03/04/skeletal-animation/">[Cocos2d-x Wiki翻译]骨骼动画</a></h1>
    
    
      <p class="meta">
        

<time datetime="2013-03-04T16:57:00+08:00" pubdate data-updated="true">Mar 4<span>th</span>, 2013</time>
        
      </p>
    
  </header>


  <div class="entry-content"><!-- Skeletal animation -->


<h2>骨骼动画 vs. 精灵表</h2>

<!-- ## Skeletal animation vs. Sprite sheets -->


<div style='display:none;'>
You can creat animations using &#8220;sprite sheets&#8221; which is quick and easy. Until you realize your game needs lots of animations and the memory consumption goes way up, together with the time required to load all the data. Also, to limit the size, you need to limit yourself to a low FPS for the animation, which also means the animation doesn’t look as smooth as you’d like. This is where skeletal animation comes in.
</div>


<p>创建动画又快又简单的方法是使用“精灵表”.当你意识到游戏需要大量动画,内存消耗会涨上来,而且需要耗时去加载所有数据.此外,限于大小,你需要为了动画限制自己使用低FPS,这意味着动画不是你想要的那么平滑.这就是骨骼动画的由来.</p>

<!-- ## Introducing Skeletal Animation -->


<h2>骨骼动画简述</h2>

<div style='display:none;'>
Skeletal animation is a technique in cocos2d-x animation in which a character is represented in two parts: a surface representation used to draw the character (called skin or mesh) and a hierarchical set of interconnected bones (called the skeleton or rig) used to animate (pose and keyframe) the mesh.
</div>


<p>骨骼动画是cocos2d-x动画在人物渲染方面的技术,分二个部分:用于绘制人物的外观呈现（被称为蒙皮或者mesh）和用于mesh进行动画(造型和关键帧) 的一组分层的相互连接的骨骼.</p>

<p><img src="http://www.cocos2d-x.org/attachments/1606/Skeletal-Animation.jpg" alt="" /></p>

<div style='display:none;'>
Cocos2d-x provides a way to have 2d skeletal animations in your applications. The process of skeletal animation may be a bit complicated to setup, but using them afterwards is easy, and there are some tools to simplify the process.
</div>


<p>在你的应用中,Cocos2d-x提供了拥有2d骨骼动画的方式.构建骨骼动画过程开始可能有点复杂,但随后用起来却非常简单,而且有一些工具可以简化此过程.</p>

<div style='display:none;'>
When using skeletal animation, the animation is composed of several bones which are connected to one another. Affecting a bone also affects all of its children. By composing different transformations on each bone, you obtain different poses for the skeleton.
</div>


<p>当使用骨骼动画时，动画由一些相互连接的骨骼组成。影响一个骨骼将会影响其所有的子对象。通过每根骨头上不同的变换组合，你会得到骨骼的各种造型。</p>

<div style='display:none;'>
Now, if you define keyframes with certain transformations for a point in time for each of the bones in the skeleton, you can interpolate between the keyframes to obtain a smooth transition and thus animate the skeleton.
</div>


<p>现在，如果你定义了关键帧，即某个时间点骨骼中每根骨头特定的变换，你就能在关键帧之间插入平滑的过渡，从而使骨骼运动。</p>

<div style='display:none;'>
In the attached code, I used a class named Transformation, which contains data about 2D transformations, like translation, rotation and scale. Then, a Keyframe is defined by a frame number and one such Transformation. A collection of Keyframes defines a KeyframeAnimation. Finally, a SkeletonAnimation is a collection of KeyframeAnimations, one for each bone in the skeleton.
</div>


<p>在附加的代码中，我使用一个名叫Transformation的类，它含有2D变换的数据，如translation（平移）、rotation（旋转）和scale（缩放）。通过帧的编号和一个Transformation能定义一个关键帧。关键帧的集合定义了一个KeyFrameAnimation.最后，骨骼动画就是一个KeyFrameAnimation的集合，每个KeyFrameAnimation应用于骨骼中的每根骨头。</p>

<div style='display:none;'>
Separately, you use a Skeleton, which keeps a list of Joints that define the hierarchy of bones in the skeleton. Different from &#8220;sprite sheets&#8221;,each bone is then assigned a certain texture, like the ones below:
</div>


<p>另外，你使用骨骼，它保存了关节列表，关节定义了骨骼中骨头的层级。不同于“精灵表”，每根骨头指定了特定的texture，如下所示：</p>

<p><img src="http://www.cocos2d-x.org/attachments/1607/animated-grossini.png" alt="" /></p>

<!-- ## Tool for skeleton animation -->


<h2>骨骼动画工具</h2>

<div style='display:none;'>
So far as we know, [CocosBuilder](http://cocosbuilder.com/) is a great, free (MIT license) tool for creating skeleton animations.
CocosBuilder is built for Cocos2d’s Javascript bindings, which means that your code, animations, and interfaces will run unmodified in Cocos2d-x.
A tutorial for cocos2d-iphone can be found at the [Zynga Engineering blog](http://code.zynga.com/2012/10/creating-a-game-with-cocosbuilder/)
</div>


<p>据我们所知，在创建骨骼动画方面<a href="http://cocosbuilder.com/">CocosBuilder</a>是一个不错的、免费（MIT协议）的工具。 <br/>
CocosBuilder为Cocos2d的Javascript绑定而创建的。这意味着你的代码、动画和接口会无修改地在Cocos2d-x中运行。  <br/>
cocos2d-iphone的教程可以在<a href="http://code.zynga.com/2012/10/creating-a-game-with-cocosbuilder/">Zynga Engineering blog</a>找到。</p>

<!-- ## Working with cocosbuilder Animations -->


<h2>与cocosbuilder动画协作</h2>

<div style='display:none;'>
You can use CocosBuilder for creating character animations, animating complete scenes or just about any animation you can imagine. The animation editor has full support for multiple resolutions, easing between keyframes, boned animations and multiple timelines to name a few of the features.


h3.The Basics

In the bottom of the main window you can find the timeline. You use the timeline to create your animations.
</div>


<p>你可以使用CocosBuilder创建人物动画，全场景动画或者你所想的任何动画。该动画编辑器已完全支持多分辨率、关键帧间的缓冲动画、骨骼动画和多时间轴等特性。</p>

<h3>基础</h3>

<p>在主窗口的下部，你可以找到时间轴。你可以使用时间轴来创建你的动画。
<img src="http://www.cocos2d-x.org/attachments/1610/timeline.png" alt="" /></p>

<div style='display:none;'>
By default your ccb-file has a single timeline that is 10 seconds long. CocosBuilder edits animations at a frame rate of 30 frames per second, but when you play back the animation in your app it will use whatever you have set cocos2d to use (the default in cocos2d is 60 fps). The current time is displayed in the top right corner, and has the format minute:second:frame. The blue vertical line also shows the current time. Click the time display to change the duration of the current timeline.
</div>


<p>默认情况下你的ccb-file只有一条时长10秒的时间轴。CocosBuilder编辑动画的帧率是每秒30帧，但是当你在应用程序中回放动画时，会使用你给cocos2d设置的帧率（cocos2d中默认是60fps）。当前时间会在右上角显示，格式是分：秒：帧。蓝色垂直线也显示了当前时间。单击显示时间以更改当前时间线的时间间隔。</p>

<!-- ### Adding Keyframes -->


<h3>增加 Keyframes</h3>

<div style='display:none;'>
Animations in CocosBuilder are keyframe based. You can add keyframes to different properties of a node and CocosBuilder will automatically interpolate between the keyframes, optionally with different types of easing.

To add a keyframe, first expand the view of the node by clicking the triangle to the right of the name of the node. This will reveal all the animatable properties of the node. What can be animated varies slightly depending on what type of node you have selected. Once the properties are visible you can click the property in the timeline with the option key held down. This will create a new keyframe at the time of the click. Alternatively, you can create a new keyframe at the time of the time marker by selecting a node then choosing Insert Keyframe in the Animation menu.

Keyframes are automatically added at the current time if you transform a node in the canvas area, given that the transformed property already has one or more keyframes in the timeline.
</div>


<p>CocosBuilder中的动画是基于关键帧的。你可以添加关键帧以设置node的不同属性并且CocosBuilder会自动在关键帧间插入不同类型的可选（ease）缓冲动作。</p>

<p>为了添加关键帧，首先通过点击node名字右边的三角形展开node的视图。上面会展现该node所有可动画的属性。基于你选择的node类型，可以动画的属性会稍微有点不一样。凡是可见的属性，你可以在时间轴中按住option键并点击该属性。在点击的那个时间点就会创建新的关键帧。或者，你可以通过选择一个node再在Animation菜单中选Insert Keyframe从而在时间标志器的那个时间点生成一个新的关键帧。</p>

<p>如果你在画布区域变换一个node,并且该node所变换的属性在时间轴上已经有一个或多个关键帧，那么CocosBuilder会自动在当前时间点添加关键帧。</p>

<!-- ### Editing Keyframes -->


<h3>编辑 Keyframes</h3>

<div style='display:none;'>
You edit a specific keyframe of a node by moving the time marker to the time of the keyframe and selecting the node. You can focus on a keyframe by double clicking it (which will select the node and move the time marker).
</div>


<p>移动时间标志器至特定关键帧的时间点并选择该node，编辑该关键帧。你可以通过双击关键帧聚焦于该帧（聚焦即选择该node并移动时间标志器）。</p>

<div style='display:none;'>
You can select keyframes and move them together by dragging a selection box around them. You can also copy and paste keyframes between nodes. Make sure you only have one selected node when pasting the keyframes. The keyframes will be pasted starting at the time of the time marker.
</div>


<p>你可以选择关键帧并通过拖拉它们周围的选择框来移动它们。你也可以在node间复制、黏贴关键帧。当黏贴关键帧时，确保你只选择了一个node。关键帧会黏贴在时间标志线标志的时间。</p>

<div style='display:none;'>
If you have selected a set of keyframes it is possible to reverse the order of them by selecting Reverse Selected Keyframes in the Animation menu. Use the Stretch Selected Keyframes… option to speed up or slow down an animation by a scaling factor.
</div>


<p>如果你已经选择了一系列关键帧，可以通过选择Animation菜单中的Reverse Selected Keyframes来反向关键帧的次序。使用Stretch Selected Keyframes选项可以通过一个缩放因子来加速或者减速动画。</p>

<!-- ### Importing a Sequence of Images -->


<h3>导入多张连续图片</h3>

<div style='display:none;'> 
If you have an animation created by sprite frames it can be tedious to move each individual frame to the timeline. CocosBuilder simplifies this process by automatically importing a sequence of images. Select the frames that you want to import in the left hand project view, then select a CCSprite in the timeline. Now choose Create Frames from Selected Resources in the Animation menu. The frames will automatically be created at the start of the marker. If you need to slow down the animation, select the newly created keyframes and use the Stretch Selected Keyframes… command.
</div>


<p>如果你通过sprite frame帧组创建动画，需要冗长的时间来将每个独立的帧移至时间轴上。CocosBuilder通过自动导入图像序列简化了这一过程。选择你想要导入到左边项目视图的帧，然后选择时间轴上的一个CCSprite。现在选择Animation菜单中的Create Frames from Selected Resources.这些帧会在时间标志线开始的地方添加。如果你需要放慢动画，选择新创建的关键帧组，并使用Stretch Selected Keyframes&#8230;命令。</p>

<!-- ### Applying Easing -->


<h3>应用渐变</h3>

<div style='display:none;'> 
CocosBuilder offers a carefully selected subset of the easings provided by cocos2d. To apply an easing right click between two keyframes and select the type of easing that you want to apply.
</div>


<p>CocosBuilder提供了cocos2d给予的一些精心挑选的缓冲动作（easing）子集。应用一个缓冲动作只需在两个关键帧之间右键点击并选择你想应用的缓冲动作的类型即可。
<img src="http://www.cocos2d-x.org/attachments/1611/keyframes.png" alt="" /></p>

<div style='display:none;'> 
Some of the easings have additional options, after the easing has been applied you can right click again and select Easing Setting… from the popup menu.
</div>


<p>一些缓冲动作有额外的选项，在应用缓冲动作之后，你可以再次右击并从弹出菜单中选择Easing Setting…。</p>

<!-- ### Using Multiple Timelines -->


<h3>使用多个时间轴</h3>

<div style='display:none;'>
A very powerful feature of CocosBuilder&#8217;s animation editor is the ability to have multiple timelines in a single file. You can name the different sequences and play them back from your code by using their name. It&#8217;s even possible to smoothly transition between the different timelines.

To select, add or edit your timelines use the timeline popup menu:
</div>


<p>CocosBuilder的动画编辑器有一个非常强大的特性就是在单个文件中可以含有多个时间轴。你可以命名不同的序列并通过它们的名字从代码中播放它们。在不同的时间轴之间会有平滑的过渡。</p>

<p>在选择之前，使用时间轴弹出菜单添加并编辑你的时间轴：</p>

<p><img src="http://www.cocos2d-x.org/attachments/1612/Multiple%20Timelines.png" alt="" /></p>

<div style='display:none;'>
In the edit timelines dialog you can get an overview of your timelines, rename them, add new ones and (optionally) set one of the timelines to automatically start playback directly when the ccbi-file is loaded by your app.
</div>


<p>在编辑时间轴的对话框中，你可以获得时间轴的大致信息、重命名它们、添加新的时间轴以及（可选）设置时间轴中的一条在ccbi文件从你的应用程序加载后立即自动开始播放。
<img src="http://www.cocos2d-x.org/attachments/1613/autoStart.png" alt="" /></p>

<div style='display:none;'>
Properties in timelines that do not have keyframes set share their values across timelines. E.g. if you move one node in one timeline it will be moved in all timelines as long as they do not have a keyframe set for the position property. I can sometimes be useful to add a single keyframe to a property just to override the shared value for a specific timeline.
</div>


<p>没有设置关键帧的时间轴中的属性会在时间轴时间共享它们的值。例如，如果你移动某条的一个node，只要它没有为位置属性设置关键帧，它就会在所有的时间轴中被移动。有时，我觉得为一个特定的时间轴添加单个关键帧来覆盖共享值是挺有用的。</p>

<!-- ### Chaining Timelines -->


<h3>锁定时间轴</h3>

<div style='display:none;'>
You can automatically play back a sequence of timelines by chaining them. You can also use this feature for automatically looping a timeline.
</div>


<p>你可以通过锁定时间轴来自动回放时间轴序列。你也可以使用这个特性来自动重播一个时间轴。
<img src="http://www.cocos2d-x.org/attachments/1614/autoPlayback.png" alt="" /></p>

<div style='display:none;'>
To have a timeline play in sequence, click the No chained timeline text and select the timeline you want to play right after the current one.
</div>


<p>为了播放时间轴序列中的一个时间轴，点击No chained timeline文本并选择当前时间轴后你想播放的那个。</p>

<h3>通过代码播放动画</h3>

<div style='display:none;'>
To programmatically control the animations you create with CocosBuilder you will need to retrieve theCCBAnimationManager. The animation manager will be assigned to the nodes userObject when the ccbi-file is loaded.
</div>


<p>想要通过代码控制你用CocosBuilder创建的动画，你需要检索CCBAnimationManager。当ccbi文件加载时，该动画管理器将分配node userObject。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>CCNode *myNodeGraph = ccbReader-&gt;readNodeGraphFromFile("myFile.ccbi", this);</span></code></pre></td></tr></table></div></figure>


<div style='display:none;'>
The action manager will be returned as an autoreleased object. To play back a specific timeline call therunAnimationsForSequenceNamed: method. If a timeline is currently playing it will be immediately stopped when calling this method.
</div>


<p>动作管理器会作为一个自动释放对象返回。回放特定的时间轴需调用runAnimationsForSequenceNamed: 方法。如果时间轴当前正在播放，当调用此方法时它会立刻停止。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>animationManager-&gt;runAnimationsForSequenceNamed("My Timeline");</span></code></pre></td></tr></table></div></figure>


<div style='display:none;'>
Optionally, you can use a tween duration to smoothly transition to the new timeline. Where possible linear interpolations will be used for the transition.
</div>


<p>或者，你可以使用时间轴之间的时间间隔来平滑过渡到新的时间轴。一般情况下线性插入会应用于此过渡。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>animationManager-&gt;runAnimationsForSequenceNamedTweenDuration("My Timeline",0.5f);</span></code></pre></td></tr></table></div></figure>


<div style='display:none;'>
It is also possible to receive a callback whenever a timeline has finished playing. You will receive these callbacks even if another timeline is chained in sequence. Use the CCBAnimationManagerDelegate to receive the callbacks.
</div>


<p>也可以在时间轴播放完毕后接收一个回调。即使另外的时间轴锁在序列中，你也能接收到这些回调。你可以用CCBAnimationManagerDelegate来接收回调。</p>

<h2>总结</h2>

<div style='display:none;'> 
Thank you taking the time to read through the tutorial and happy coding!If you have other tools for skeleton animation,please let us known or post to this wiki.
</div>


<p>谢谢你们花时间来阅读本教程，祝编程愉快！如果你有其他骨骼动画的动作，请通知我们或者发邮件到此wiki。</p>

<h2>参考</h2>

<p><a href="http://code.zynga.com/2012/10/creating-a-game-with-cocosbuilder/">Creating a game with cocosbuilder</a>  <br/>
<a href="http://cocosbuilder.com/">CocosBuilder Documentation</a></p>
</div>
  
  
    </article>
  
  
    <article>
      
  <header>
    
      <h1 class="entry-title"><a href="/blog/2013/03/04/scheduler-and-timer-callback/">[Cocos2d-x wiki翻译]Scheduler and Timer Callback</a></h1>
    
    
      <p class="meta">
        

<time datetime="2013-03-04T16:57:00+08:00" pubdate data-updated="true">Mar 4<span>th</span>, 2013</time>
        
      </p>
    
  </header>


  <div class="entry-content"><h2>Scheduler and Timer Callback</h2>

<div style='display:none;'>
Scheduler is responsible for triggering the scheduled callbacks.
</div>


<p>调度器负责触发调度回调.</p>

<h3>两种不同类型的回调 (selectors):</h3>

<div style='display:none;'>
update selector: the &#8216;update&#8217; selector will be called every frame. You can customize the priority.
custom selector: A custom selector will be called every frame, or with a custom interval of time.
The &#8216;custom selectors&#8217; should be avoided when possible. It is faster, and consumes less memory to use the &#8216;update selector&#8217;.
</div>


<ul>
<li>更新selector: &#8216;update&#8217; selector会被每个frame调用.你可以自定义优先级.</li>
<li>自定义selector: 自定义selector会被每个frame调用, 或自定义的时间段内调用.</li>
</ul>


<p>&#8216;custom selectors&#8217;尽可能避免使用。相对于使用&#8217;update selector&#8217;来说，它比较快，且内存消耗较小.</p>

<h3>CCScheduler vs. NSTimer</h3>

<div style='display:none;'>
The Cocos2D Scheduler provides your game with timed events and calls. You should not use NSTimer. Instead use CCScheduler class.

The reasons as follow:
</div>


<p>Cocos2D Scheduler 为你的游戏提供了时间事件和调用.你最好不要使用NSTimer，而用CCScheduler类替代.</p>

<p>原因如下:</p>

<div style='display:none;'>
CCNode objects know how to schedule and unschedule events,and using the Cocos2D Scheduler has several distinct advantages over just using NSTimer.
</div>


<div style='display:none;'>
- CCNode objects know how to schedule and unschedule events,and using the Cocos2D Scheduler has several distinct advantages over just using NSTimer.
- The scheduler calls get deactivated whenever the CCNode is no longer visible or is removed from the scene.
- The scheduler calls are also deactivated when Cocos2D is paused and are rescheduled when Cocos2D is resumed.
- The scheduler delivers a interval time of the milliseconds that have passed since the last call.This interval time is useful in Physics engines.
- Using scheduler with this->scheduleUpdate(); call ensures that your update function will be called before each frame needs to be rendered.
</div>


<ul>
<li>CCNode对象知道如何去调度和解除调度事件，和仅使用NSTimer相比，使用Cocos2D Scheduler有很多独特的优点.</li>
<li>每当CCNode不再可见或者需从场景中移除时，调度器调用会失效。</li>
<li>当Cocos2D暂停或者Cocos2D继续时重新调度，调度器调用也会失效。</li>
<li>调度器会传递距离上一次调用的间隔时间(单位毫秒)。间隔时间在物理引擎中十分有用。</li>
<li>通过调用this->scheduleUpdate();使用调度器能确保你的更新方法在每帧需要渲染前调用。</li>
</ul>


<div style='display:none;'>
Accordingly,CCScheduler can save you a lot of time over NSTimer and let you focus on the mechanics of your game.

Last updated by Iven Yang at Updated about 1 month ago.
</div>


<p>因此，CCScheduler会比NSTimer节省很多时间，让你更加关注于你的游戏构成.</p>

<h3>Comment</h3>
</div>
  
  
    </article>
  
  
    <article>
      
  <header>
    
      <h1 class="entry-title"><a href="/blog/2013/03/04/animations/">[Cocos2d-x wiki翻译]Animations</a></h1>
    
    
      <p class="meta">
        

<time datetime="2013-03-04T16:57:00+08:00" pubdate data-updated="true">Mar 4<span>th</span>, 2013</time>
        
      </p>
    
  </header>


  <div class="entry-content"><h2>动画(Animations)</h2>

<div style='display:none;'>
Animations
Manual Animation
Sprite Sheet Animation
Creating from .png and .plist file
File animation
Skeleton Animation
Comment
</div>


<h3>Frame Animation（帧动画）</h3>

<div style='display:none;'>
You can create an animation from a series of image file, like this:
</div>


<p>你可以通过多张图片文件来创建一个动画，比如:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
</pre></td><td class='code'><pre><code class=''><span class='line'> CCAnimation *animation = CCAnimation::create();
</span><span class='line'> 
</span><span class='line'> // load image file from local file system to CCSpriteFrame, then add into CCAnimation
</span><span class='line'> for (int i = 1; i &lt; 15; i++)
</span><span class='line'> {
</span><span class='line'>     char szImageFileName[128] = {0};
</span><span class='line'>     sprintf(szImageFileName, "Images/grossini_dance_%02d.png", i);
</span><span class='line'>     animation-&gt;addSpriteFrameWithFileName(szImageFileName);  
</span><span class='line'> }
</span><span class='line'>
</span><span class='line'>animation-&gt;setDelayPerUnit(2.8f / 14.0f); // This animation contains 14 frames, will continuous 2.8 seconds.
</span><span class='line'>animation-&gt;setRestoreOriginalFrame(true); // Return to the 1st frame after the 14th frame is played. 
</span><span class='line'>
</span><span class='line'>CCAnimate *action = CCAnimate::create(animation);
</span><span class='line'>sprite-&gt;runAction(action);  // run action on sprite object</span></code></pre></td></tr></table></div></figure>


<div style='display:none;'>
Note that CCAnimation is composed by sprite frames, delay time per frame, durations etc, it&#8217;s a pack of &#8220;data&#8221;. While CCAnimate is an action, which is created base on CCAnimation object.
</div>


<p>注意CCAnimation是由sprite frame帧组、单个frame延时，持续时间等组成的，它是一组&#8221;数据&#8221;.
而CCAnimate是一个action，它是基于CCAnimation对象创建的。</p>

<h3>Sprite Sheet Animation</h3>

<div style='display:none;'>
Although manual animation is very easy to understand, it&#8217;s rarely used in real game projects. Instead, sprite sheet animation is the common solution of 2D animations.
</div>


<p>尽管帧动画是非常易于理解的,但事实上，它在真实游戏项目中是非常少用到的.相反，sprite sheet animation是2D动画中最常见的解决方案.</p>

<div style='display:none;'>
This is a typical sprite sheet. It can be a sequence of sprite frames for an animation, or can be images pack that will be used in a same scene.
</div>


<p>下面是一个典型的sprite sheet.它是动画中的一连串sprite frames，或者是可以在一个场景中用到的一组图片.</p>

<p><img src="http://www.cocos2d-x.org/attachments/download/1570" alt="" /></p>

<div style='display:none;'>
In OpenGL ES 1.1 period, sprite sheets was widely used for these benefits:
Reduce times of file I/O. Loading a big sprite sheet file is faster than loading lots of small files.
Reduce the memory consumption. OpenGL ES 1.1 can only use power-of-two sized textures (that is a width or height of 2,4,864,128,256,512,1024,&#8230;). In other words, OpenGL ES 1.1 allocates power-of-two sized memory for each texture even if this texture has smaller width and height. So using packed sprite sheet image will reduce the fragments of memory.
Reduce the draw calls to OpenGL ES draw method and speed up rendering.
</div>


<p>在OpenGL ES 1.1时代，sprite sheets被广泛使用是得益于:</p>

<ol>
<li>减少文件I/O时间.加载一个大的sprite sheet文件比加载多个小文件要快得多.</li>
<li>减少内存消耗.OpenGL ES 1.1仅可用2幂次方大小的texture（通常为 2,4,864,128,256,512,1024,&#8230;的宽高）.换言之，如果宽高比较小的话，OpenGL ES 1.1甚至为每个texture分配2幂次方大小内存.所以使用成组的 sprite sheet图片会减少内存碎片.</li>
<li>减少 OpenGL ES 调用方法绘制，加速渲染.</li>
</ol>


<div style='display:none;'>
Cocos2d-x v2.0 upgraded to OpenGL ES 2.0 based. OpenGL ES 2.0 doesn&#8217;t allocate power-of-two memory block for textures anymore, but the benefit of reducing file I/O times and draw calls are still working.
</div>


<p>Cocos2d-x v2.0已更新，是基于OpenGL ES 2.0的.OpenGL ES 2.0不再为textures分配2的幂次方内存块，但减少文件系统I/O和绘图调用时间的好处仍然是有效的.</p>

<div style='display:none;'>
Then how about the animation? As we can see, sprite sheet has no MUST-BE relationship with animations. But considering to these benefits above, sprite sheet animations are efficient. There&#8217;re different ways to create sprite sheet animations in cocos2d.
</div>


<p>那该如何动画呢？正如我们看到的，sprite sheet与动画没有的必然关系.但考虑到上面这些益处，sprite sheet是有效的.在cocos2d中有很多种不同的方法来创建sprite sheet.</p>

<h4>Creating from .png and .plist file</h4>

<div style='display:none;'>
In cocos2d-x 0.x and 1.x versions, CCSpriteSheet works for this purpose. While CCSpriteBatchNode is a replacement of CCSpriteSheet since v2.0
</div>


<p>在cocos2d-x 0.x和1.x版本中，CCSpriteSheet便是为此目的而生的.而CCSpriteBatchNode在v2.0版本之后替换了CCSpriteSheet</p>

<div style='display:none;'>
A CCSpriteBatchNode object contains the actual image texture of all the sprite frames. You must add it to a scene, even though it won&#8217;t draw anything itself; it just needs to be there so that it is part of the rendering pipeline. For example:
</div>


<p>CCSpriteBatchNode对象包含了所有sprite frames中用到的真实图片texture.你必须在场景中添加它，甚至它自身什么都不用画;它只需要放到那里，这样它就成了rendering pipeline的组成部分.比如:</p>

<div style='display:none;'>
1CCSpriteBatchNode* spritebatch = CCSpriteBatchNode::create(&#8220;animations/grossini.png&#8221;);
Next, you need to use the CCSpriteFrameCache singleton to keep track how frame names correspond to frame bounds – that is, what rectangular area of the sprite sheet. Example:
</div>


<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>CCSpriteBatchNode* spritebatch = CCSpriteBatchNode::create("animations/grossini.png");</span></code></pre></td></tr></table></div></figure>


<p>接下来，你需要使用CCSpriteFrameCache单例对象来保存frame名字如何对应到frame bounds——
也就是，sprite sheet中的矩形区域.例如:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>CCSpriteFrameCache* cache = CCSpriteFrameCache::sharedSpriteFrameCache();
</span><span class='line'>cache-&gt;addSpriteFramesWithFile("animations/grossini.plist");</span></code></pre></td></tr></table></div></figure>


<div style='display:none;'>
Once your sprite sheet and frames are loaded, and the sprite sheet has been added to the scene, you can create sprites that use these frames by using the “createWithSpriteFrameName” method, and adding it as a child of the sprite sheet:
</div>


<p>一旦你的sprite sheet和frames已经加载完毕，并且sprite sheet已经增加到场景中了，你可以通过这些frame创建sprite，使用 “createWithSpriteFrameName” 方法，把它添加为sprite sheet的子对象:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>m_pSprite1 = CCSprite::createWithSpriteFrameName("grossini_dance_01.png");
</span><span class='line'>spritebatch-&gt;addChild(m_pSprite1);
</span><span class='line'>addChild(spritebatch);</span></code></pre></td></tr></table></div></figure>


<div style='display:none;'>
createWithSpriteFrameName method will find the corresponding coordinates and rectangle from grossini.plist, then &#8220;clip&#8221; the texture grossini.png to a sprite frame.
</div>


<p>createWithSpriteFrameName方法会查找相应坐标和grossini.plist中定义的矩形，接着&#8221;裁剪&#8221;texture grossini.png到sprite frame.</p>

<div style='display:none;'>
Now we need to create a CCArray object and add all frames of the animation to it. In the case of this animation, we know all 14 frames have the same size, so we can use a nested loop to iterate through them all, and break the loop when we finish adding the 14th frame.
</div>


<p>现在，我们需要创建CCArray对象，增加动画中的所有frame到此对象中。在这个动画例子中，我们知道这14个frame都有一模一样的尺寸,所以我们使用了嵌套循环来迭代，当我们完成增加第14个frame的时候中断循环.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='c++'><span class='line'><span class="n">CCArray</span><span class="o">*</span> <span class="n">animFrames</span> <span class="o">=</span> <span class="n">CCArray</span><span class="o">::</span><span class="n">createWithCapacity</span><span class="p">(</span><span class="mi">15</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'><span class="kt">char</span> <span class="n">str</span><span class="p">[</span><span class="mi">100</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span><span class="mi">0</span><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="k">for</span><span class="p">(</span><span class="kt">int</span> <span class="n">i</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span> <span class="n">i</span> <span class="o">&lt;</span> <span class="mi">15</span><span class="p">;</span> <span class="n">i</span><span class="o">++</span><span class="p">)</span>
</span><span class='line'><span class="p">{</span>
</span><span class='line'>    <span class="n">sprintf</span><span class="p">(</span><span class="n">str</span><span class="p">,</span> <span class="s">&quot;grossini_dance_%02d.png&quot;</span><span class="p">,</span> <span class="n">i</span><span class="p">);</span>
</span><span class='line'>    <span class="n">CCSpriteFrame</span><span class="o">*</span> <span class="n">frame</span> <span class="o">=</span> <span class="n">cache</span><span class="o">-&gt;</span><span class="n">spriteFrameByName</span><span class="p">(</span> <span class="n">str</span> <span class="p">);</span>
</span><span class='line'>    <span class="n">animFrames</span><span class="o">-&gt;</span><span class="n">addObject</span><span class="p">(</span><span class="n">frame</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<div style='display:none;'>
Finally, we need to create a CCAnimate action instance which we can run on the CCSprite. Below, we also wrap the CCAnimate action in a CCRepeatForever action that does what you would expect: repeats the animation forever,like so:
</div>


<p>最后，我们需要创建CCAnimate动作实例，该实例能在CCSprite对像上运作.下面，我们还将CCAnimate动作封装到CCRepeatForever动作中，此动作正是你所需要的:重复动画,像这样:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='c++'><span class='line'><span class="n">CCAnimation</span><span class="o">*</span> <span class="n">animation</span> <span class="o">=</span> <span class="n">CCAnimation</span><span class="o">::</span><span class="n">createWithSpriteFrames</span><span class="p">(</span><span class="n">animFrames</span><span class="p">,</span> <span class="mf">0.3f</span><span class="p">);</span>
</span><span class='line'><span class="n">m_pSprite1</span><span class="o">-&gt;</span><span class="n">runAction</span><span class="p">(</span> <span class="n">CCRepeatForever</span><span class="o">::</span><span class="n">create</span><span class="p">(</span> <span class="n">CCAnimate</span><span class="o">::</span><span class="n">create</span><span class="p">(</span><span class="n">animation</span><span class="p">)</span> <span class="p">)</span> <span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<h4>File animation</h4>

<div style='display:none;'>
CCAnimationCache can load a xml/plist file which well describes the batch node, sprite frame names and their rectangles. The interfaces are much easier to use.
</div>


<p>CCAnimationCache 可以加载xml/plist文件，此文件可以非常好的描述批量node,sprite frame names和它们的矩形.
这个接口更简单易用.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='c++'><span class='line'><span class="n">CCAnimationCache</span> <span class="o">*</span><span class="n">cache</span> <span class="o">=</span> <span class="n">CCAnimationCache</span><span class="o">::</span><span class="n">sharedAnimationCache</span><span class="p">();</span> <span class="c1">// &quot;caches&quot; are always singletons in cocos2d</span>
</span><span class='line'><span class="n">cache</span><span class="o">-&gt;</span><span class="n">addAnimationsWithFile</span><span class="p">(</span><span class="s">&quot;animations/animations-2.plist&quot;</span><span class="p">);</span>
</span><span class='line'><span class="n">CCAnimation</span> <span class="n">animation</span> <span class="o">=</span> <span class="n">cache</span><span class="o">-&gt;</span><span class="n">animationByName</span><span class="p">(</span><span class="s">&quot;dance_1&quot;</span><span class="p">);</span>  <span class="c1">// I apologize for this method name, it should be getAnimationByName(..) in future versions</span>
</span><span class='line'><span class="n">CCAnimate</span> <span class="n">animate</span> <span class="o">=</span> <span class="n">CCAnimate</span><span class="o">::</span><span class="n">create</span><span class="p">(</span><span class="n">animation</span><span class="p">);</span>  <span class="c1">// Don&#39;t confused between CCAnimation and CCAnimate :)</span>
</span><span class='line'><span class="n">sprite</span><span class="o">-&gt;</span><span class="n">runAction</span><span class="p">(</span><span class="n">animate</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<div style='display:none;'>
Easy to use, isn&#8217;t it?
</div>


<p>简单易用吧？哈哈</p>

<h3>骨骼动画(Skeleton Animation)</h3>

<p>请参考 <a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Skeletal_Animation">Skeletal Animation</a> 页.</p>

<h3>评论</h3>
</div>
  
  
    </article>
  
  
    <article>
      
  <header>
    
      <h1 class="entry-title"><a href="/blog/2013/03/04/actions/">[Cocos2d-x wiki翻译]Actions</a></h1>
    
    
      <p class="meta">
        

<time datetime="2013-03-04T16:57:00+08:00" pubdate data-updated="true">Mar 4<span>th</span>, 2013</time>
        
      </p>
    
  </header>


  <div class="entry-content"><h2>Actions</h2>

<div style='display:none;'>
Actions are like orders given to any CCNode object. These actions usually modify some of the object&#8217;s attributes like position, rotation, scale, etc. If these attributes are modified during a period of time, they are CCIntervalAction actions, otherwise they are CCInstantAction actions.
For example, the CCMoveBy action modifies the position property during a period of time, hence, it is a subclass of CCIntervalAction.
</div>


<p>动作（Actions）就像给CCNode对象的命令一样。这些动作通常会修改对象的一些属性，如位置，旋转，缩放等。如果这些属性在一段时间内被修改，它们是CCIntervalAction动作（延时动作），相反则是 CCInstantAction 动作（瞬间动作）.</p>

<p>例如，CCMoveBy动作是在一段时间内修改了位置属性，因此，它是CCIntervalAction的子类.</p>

<div style='display:none;'>
You can run TestCpp -> Actions Test to see the actions&#8217; visual effects. And cocos2d-x/samples/Cpp/TestCpp/Classes/ActionsTest, ActionsEaseTest are good sample codes for the usage.
</div>


<p>你可以运行TestCpp -> Actions Test 来查看动作的可视化效果。cocos2d-x/samples/Cpp/TestCpp/Classes/ActionsTest, ActionsEaseTest中的用法是非常好的代码示例。</p>

<p>例如:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>// Move a sprite 50 pixels to the right, and 10 pixels to the top over 2 seconds.
</span><span class='line'>CCActionInterval*  actionBy = CCMoveBy::create(2, ccp(50,10));</span></code></pre></td></tr></table></div></figure>


<div style='display:none;'>
The CCIntervalAction actions have some interesting properties:
They can be accelerated using the time-altered actions
</div>


<p>CCIntervalAction动作有一些有意思的属性:</p>

<p>使用变速动作可以对CCIntervalAction动作进行加速等，变速动作有：</p>

<ul>
<li>CCEaseIn</li>
<li>CCEaseOut</li>
<li>CCEaseInOut</li>
<li>CCSpeed</li>
</ul>


<div style='display:none;'>
Etc. (See the ActionsEaseTest.cpp example for more info)
</div>


<p> (更多信息，详见ActionsEaseTest.cpp实例)</p>

<div style='display:none;'>
You can pause/resume all actions by using the CCActionManager:
</div>


<p>你可以通过用CCActionManager来暂停和恢复所有动作:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>// Pause actions
</span><span class='line'>CCDirector *director = CCDirector::sharedDirector();
</span><span class='line'>m_pPausedTargets = director-&gt;getActionManager()-&gt;pauseAllRunningActions();
</span><span class='line'>// resume actions
</span><span class='line'>CCDirector *director = CCDirector::sharedDirector();
</span><span class='line'>director-&gt;getActionManager()-&gt;resumeTargets(m_pPausedTargets);</span></code></pre></td></tr></table></div></figure>


<h3>Basic Actions</h3>

<div style='display:none;'>
Basic actions are the ones that modify basic properties like:
</div>


<p>基本动作是指修改基本属性如:</p>

<h4>位置(position)</h4>

<ul>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/dc/df6/classcocos2d_1_1_c_c_move_by.html">CCMoveBy</a></li>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/d2/d2b/classcocos2d_1_1_c_c_move_to.html">CCMoveTo</a></li>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/db/d25/classcocos2d_1_1_c_c_jump_by.html">CCJumpBy</a></li>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/d2/d6c/classcocos2d_1_1_c_c_jump_to.html">CCJumpTo</a></li>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/df/d33/classcocos2d_1_1_c_c_bezier_by.html">CCBezierBy</a></li>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/dc/d17/classcocos2d_1_1_c_c_bezier_to.html">CCBezierTo</a></li>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/de/dbf/classcocos2d_1_1_c_c_place.html">CCPlace</a></li>
</ul>


<h4>缩放(scale)</h4>

<ul>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/d4/d62/classcocos2d_1_1_c_c_scale_by.html">CCScaleBy</a></li>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/da/d23/classcocos2d_1_1_c_c_scale_to.html">CCScaleTo</a></li>
</ul>


<h4>旋转(rotation)</h4>

<ul>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/d6/d57/classcocos2d_1_1_c_c_rotate_by.html">CCRotateBy</a></li>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/d9/df5/classcocos2d_1_1_c_c_rotate_to.html">CCRotateTo</a></li>
</ul>


<h4>可见性(visible)</h4>

<ul>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/d3/de8/classcocos2d_1_1_c_c_show.html">CCShow</a></li>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/d1/d72/classcocos2d_1_1_c_c_hide.html">CCHide</a></li>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/d8/de2/classcocos2d_1_1_c_c_blink.html">CCBlink</a></li>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/dc/d90/classcocos2d_1_1_c_c_toggle_visibility.html">CCToggleVisibility</a></li>
</ul>


<h4>不透明度(opacity)</h4>

<ul>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/d7/d89/classcocos2d_1_1_c_c_fade_in.html">CCFadeIn</a></li>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/d6/d6d/classcocos2d_1_1_c_c_fade_out.html">CCFadeOut</a></li>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/da/d44/classcocos2d_1_1_c_c_fade_to.html">CCFadeTo</a></li>
</ul>


<h4>颜色(color)</h4>

<ul>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/de/de1/classcocos2d_1_1_c_c_tint_by.html">CCTintBy</a></li>
<li><a href="http://www.cocos2d-x.org/reference/native-cpp/dd/dfa/classcocos2d_1_1_c_c_tint_to.html">CCTintTo</a></li>
</ul>


<p>例如:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>CCSprite *sprite = CCSprite::create("Images/grossini.png");
</span><span class='line'>sprite-&gt;setPosition(ccp(100, 100));
</span><span class='line'>addChild(sprite);
</span><span class='line'>
</span><span class='line'>CCMoveBy* act1 = CCMoveBy::create(0.5, ccp(100, 0));
</span><span class='line'>sprite-&gt;runAction(CCRepeat::create(act1, 1));</span></code></pre></td></tr></table></div></figure>


<div style='display:none;'>
The act1 will be a CCMoveBy action of duration 0.5, but with the position value of ccp(100,0).
</div>


<p>act1是持续0.5秒的CCMoveBy动作,并且使用ccp(100,0)作为移动的位置值.</p>

<h3>评论</h3>
</div>
  
  
    </article>
  
  
    <article>
      
  <header>
    
      <h1 class="entry-title"><a href="/blog/2013/03/03/coordinate-system/">[Cocos2d-x wiki翻译]Coordinate System(ok)</a></h1>
    
    
      <p class="meta">
        

<time datetime="2013-03-03T17:05:00+08:00" pubdate data-updated="true">Mar 3<span>rd</span>, 2013</time>
        
      </p>
    
  </header>


  <div class="entry-content"><p>Coordinate System·坐标系</p>

<ul>
<li>Introduction of Different Coordinate Systems

<ul>
<li>Cartesian Coordinate System</li>
<li>UI Coordinate System</li>
<li>Direct3D Coordinate System</li>
<li>OpenGL and Cocos2d Coordinate System</li>
</ul>
</li>
<li>Parent and Childrens</li>
<li>Anchor Point</li>
<li>getVisibleSize, getVisibleOrigin vs getWinSize</li>
<li>How to convert co-ordinates

<ul>
<li>convertToNodeSpace：</li>
<li>convertToWorldSpace：</li>
<li>convertToWorldSpaceAR，</li>
<li>Sample code：</li>
</ul>
</li>
<li>References</li>
<li>Comment</li>
</ul>


<div style='display:none;'>
## Cartesian Coordinate System
</div>


<h2>笛卡尔坐标系</h2>

<div style='display:none;'>
### Introduction of Different Coordinate Systems·
</div>


<h3>不同坐标系简介</h3>

<div style='display:none;'>
#### Cartesian Coordinate System·
</div>


<h4>笛卡尔坐标系</h4>

<div style='display:none;'>
You probably have known &#8220;Cartesian Coordinate System&#8221; from school where it&#8217;s heavily used in geometry lessons. If you have forgotten, these image will remind you quickly:
</div>


<p>你可能上学的时候就已经知道“笛卡尔坐标系”了，它在几何课本里经常用到。如果你已经忘得差不多了，下面这些图片可以很快唤起你的记忆：</p>

<p><img src="http://www.cocos2d-x.org/attachments/download/1561" alt="" /></p>

<div style='display:none;'>
There&#8217;re 3 types of coordinate system that you will meet in mobile games development.
</div>


<p>在移动游戏开发过程中，你可能会遇到三种类型的坐标系：</p>

<div style='display:none;'>
#### UI Coordinate System·
</div>


<h4>UI坐标系</h4>

<div style='display:none;'>
 In common UI Coordinates on iOS/Android/Windows SDK:

- The origin (x=0, y=0) is at the top-left corner.
- X axis starts at the left side of the screen and increase to the right;
- Y coordinates start at the top of the screen and increase downward,
</div>


<p>iOS/Android/Windows SDK中的通用UI坐标系：</p>

<ul>
<li>起点坐标(x=0, y=0)位于左上角</li>
<li>X轴从屏幕最左边开始，由左向右渐增</li>
<li>Y轴坐标从屏幕最上方开始，由上向下渐增</li>
</ul>


<div style='display:none;'>
looks like this
</div>


<p>详见下图</p>

<p><img src="http://www.cocos2d-x.org/attachments/download/1564" alt="" /></p>

<div style='display:none;'>
    #### Direct3D Coordinate System·
</div>


<p></p>

<h4>Direct3D坐标系</h4>

<div style='display:none;'>
DirectX uses Left-handed Cartesian Coordinate.
</div>


<p>DirectX 使用Left-handed Cartesian Coordinate（左手笛卡尔坐标系）。</p>

<div style='display:none;'>
    #### OpenGL and Cocos2d Coordinate System
</div>


<h4>OpenGL和Cocos2d坐标系</h4>

<div style='display:none;'>
Cocos2d-x/-html5/-iphone uses the same coordinate system as OpenGL, which is so called &#8220;Right-handed Cartesian Coordinate System&#8221;.
</div>


<p>Cocos2d-x/-html5/-iphone使用的坐标系和OpenGL的坐标系一样，名为“Right-handed Cartesian Coordinate System”（右手笛卡尔坐标系）。</p>

<p><img src="http://www.cocos2d-x.org/attachments/download/1563" alt="" /></p>

<div style='display:none;'>
We only use x-axis & y-axis in 2D world. So in your cocos2d games:

- The origin (x=0, y=0) is in the bottom-left corner of screen, which means the screen is in the first quartile of right-handed cartesian coordinate system,
- X axis starts at the left side of the screen and increase to the right;
- Y axis starts at the bottom of the screen and increase upwards.
</div>


<p>在2D世界中，我们仅会使用x轴和y轴。所以在你的cocos2d游戏中：</p>

<ul>
<li>起点坐标(x=0, y=0)位于右下角，这意味着屏幕位于右手笛卡尔坐标系的第一象限</li>
<li>X轴从屏幕最左边开始，由左向右渐增</li>
<li>Y轴坐标从屏幕最下方开始，由下向上渐增</li>
</ul>


<div style='display:none;'>
And here’s a picture that helps illustrate Cocos2d-x Coordinates a bit better:
</div>


<p>下面这张图片有助于更好的阐述Cocos2d-x坐标：</p>

<p><img src="http://www.cocos2d-x.org/attachments/1556/SpriteCoordinates.jpg" alt="" /></p>

<div style='display:none;'>
Note that it&#8217;s different from common UI coordinate systems and DirectX coordinate systems.
</div>


<p>一定要注意：通用UI坐标系和DirectX坐标系是不一样的。</p>

<h3>Parent and Childrens</h3>

<div style='display:none;'>
Every class derived from CCNode (Ultimate cocos2d-x class) will have a anchorPoint property.
When determining where to draw the object (sprite, layer, whatever), cocos2d-x will combine both properties position and anchorPoint. Also, when rotating an object, cocos2d-x will rotate it around its anchorPoint.
</div>


<p>由于每个类都继承自CCNode（cocos2d-x的最顶层类），所以每个类都会默认有anchorPoint属性。
当我们决定在一个位置画一个对象的时候，cocos2d-x会结合属性位置和anchorPoint。还有，当旋转一个对象时，cocos2d-x会绕anchorPoint旋转这个对象。</p>

<div style='display:none;'>
We create a sprite as a gray parent and another sprite as blue child.Set parent&#8217;s position to ccp(100,100),child&#8217;s anchor point in the center of circle .
</div>


<p>我们创建一个灰色父对象和一个蓝色子对象。设置父对象位置是ccp(100,100),子对象的anchor point位于圆心。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>CCSprite* parent = CCSprite::create("parent.png");
</span><span class='line'>parent-&gt;setAnchorPoint(ccp(0, 0));// Anchor Point
</span><span class='line'>parent-&gt;setPosition(ccp(100, 100));
</span><span class='line'>parent-&gt;setAnchorPoint(ccp(0, 0));
</span><span class='line'>addChild(parent);
</span><span class='line'>
</span><span class='line'>//create child 
</span><span class='line'>CCSprite* child = CCSprite::create("child.png");
</span><span class='line'>child-&gt;setAnchorPoint(ccp(0.5, 0.5));
</span><span class='line'>child-&gt;setPosition(ccp(0, 0));
</span><span class='line'>parent-&gt;addChild(child);//add child sprite into parent sprite.</span></code></pre></td></tr></table></div></figure>


<div style='display:none;'>
Although we set child&#8217;s position of ccp(0,0),parent&#8217;s position is ccp(100,100).Therefore,child&#8217;s position is :
</div>


<p>由于我们设置子对象的位置是ccp(0,0)，父对象位置是ccp(100,100)。所以，子对象位置如图：</p>

<p><img src="http://www.cocos2d-x.org/attachments/1559/parent.jpeg" alt="" /></p>

<div style='display:none;'>
### Anchor Point·
</div>


<h3>锚点</h3>

<div style='display:none;'>
As a example, this sprite has an anchorPoint of ccp(0,0) and a position of ccp(0,0). 
</div>


<p>举个例子，下面这个精灵的锚点位于 ccp(0,0)，位置位于ccp(0,0)。</p>

<p><img src="http://www.cocos2d-x.org/attachments/1545/bottomleft.png" alt="" /></p>

<div style='display:none;'>
This rectangle sprite will be placed at the bottom left corner of its parent, the layer.

example:
</div>


<p>这个矩形精灵将被放到它的父对象（layer）的左下角。</p>

<p>示例：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>// create sprite
</span><span class='line'>CCSprite* sprite = CCSprite::create("bottomleft.png");
</span><span class='line'>sprite-&gt;setAnchorPoint(ccp(0, 0));// Anchor Point
</span><span class='line'>sprite-&gt;setPosition(ccp(0,0));
</span><span class='line'>addChild(sprite);</span></code></pre></td></tr></table></div></figure>


<p><img src="http://www.cocos2d-x.org/attachments/1557/anchor_left.png" alt="" /></p>

<div style='display:none;'>
In another example, we will assign a anchorPoint of ccp(0.5,0.5) to better understand the relative value of the anchor point.
</div>


<p>在另一个例子中，我们会摆放一个anchorPoint坐标为ccp(0.5,0.5)的对象，以便您更好地理解锚点的相对值。</p>

<p><img src="http://www.cocos2d-x.org/attachments/1546/center.png" alt="" /></p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>// create sprite
</span><span class='line'>CCSprite* sprite = CCSprite::create("center.png");
</span><span class='line'>sprite-&gt;setAnchorPoint(ccp(0.5, 0.5));// Anchor Point
</span><span class='line'>sprite-&gt;setPosition(ccp(0,0));
</span><span class='line'>addChild(sprite);</span></code></pre></td></tr></table></div></figure>


<p><img src="http://www.cocos2d-x.org/attachments/1553/anchor_center.png" alt="" /></p>

<div style='display:none;'>
As you can see in the image, the anchor point is not a pixel value. The value of X and Y are relative to the size of the node.
</div>


<p>正如你从图中所见，锚点取的不是像素值，此值的X和Y是相对于此节点的大小而言。</p>

<div style='display:none;'>
### getVisibleSize, getVisibleOrigin vs getWinSize
</div>


<h3>获取可视区域大小, 获取可视区域起点 vs 获取窗口大小</h3>

<ul>
<li><a href="http://www.proxyee.com/sohu.php?u=g6QXlZ4DNWBAxCi9G6VfFZDcGz9wRSMxPcWDz6pirP7qxzcikzUMuwFBVm%2BmUfs%2F%2Bggq3kMo%2Fb%2FjyNLgzuR7KoJwBHGwiTD8HSw9yZSdW%2FifzOs%3D&amp;b=3#a7cc45ff42a969700f878bb2485adf3b1">获取可视区域大小</a></li>
<li><a href="http://www.proxyee.com/sohu.php?u=g6QXlZ4DNWBAxCi9G6VfFZDcGz9wRSMxPcWDz6pirP7qxzcikzUMuwFBVm%2BmUfs%2F%2Bggq3kMo%2Fb%2FjyNLgzuR7KoJwBHGwiTD8HSw9yZSdW%2FifzOs%3D&amp;b=3#af991a412cb6621bf25ec655a95deddaa">获取可视区域起点</a></li>
<li><a href="http://www.proxyee.com/sohu.php?u=g6QXlZ4DNWBAxCi9G6VfFZDcGz9wRSMxPcWDz6pirP7qxzcikzUMuwFBVm%2BmUfs%2F%2Bggq3kMo%2Fb%2FjyNLgzuR7KoJwBHGwiTD8HSw9yZSdW%2FifzOs%3D&amp;b=3#aa78f85a3666553d0d4fe73118e0c82ac">获取窗口大小</a></li>
</ul>


<div style='display:none;'>
VisibleSize returns visible size of the OpenGL view in points.The value is equal to getWinSize if don&#8217;t invoke CCEGLView::setDesignResolutionSize().
getVisibleOrigin returns visible origin of the OpenGL view in points. Please refer to [Multi resolution support](Multi resolution support) for more details
</div>


<p><em>VisibleSize</em>（可视区域大小）会返回此点OpenGL视图的可视区域大小。如果没有调用CCEGLView::setDesignResolutionSize()的话，此值等于getWinSize的大小。 <br/>
getVisibleOrigin（获取可视区域起点）会返回此点OpenGL视图的可视区域起点。请移步<a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Multi_resolution_support">更多支持方案</a>查看详情。</p>

<div style='display:none;'>
### How to convert co-ordinates·
</div>


<h3>如何转换坐标</h3>

<h4>convertToNodeSpace：</h4>

<div style='display:none;'>
convertToNodeSpace will be used in, for example, tile-based games, where you have a big map. convertToNodeSpace will convert your openGL touch co-ordinates to the co-ordinates of the .tmx map or anything similar.

Example:

The following picture shows that we have node1 with anchor point (0,0) and node2 with anchor point (1,1).

We invoke CCPoint point = node1->convertToNodeSpace(node2->getPosition()); convert node2&#8217;s SCREEN coords to node1&#8217;s local.As the result,node2 with the position of (-25，-60).
</div>


<p>举例来说，convertToNodeSpace用于tile-based的游戏，即有一个大地图。convertToNodeSpace会将openGL触摸点坐标转换成.tmx 地图或者其他近似的坐标。</p>

<p>例子：</p>

<p>下面的图片会展现，node1的锚点(0,0)，node2的锚点是(1,1)。</p>

<p>我们调用CCPoint point = node1->convertToNodeSpace(node2->getPosition()); 相对node1的本地位置转换node2的屏幕坐标。结果node2的位置是(-25，-60).</p>

<p><img src="http://www.cocos2d-x.org/attachments/download/1783" alt="" /></p>

<h4>convertToWorldSpace：</h4>

<div style='display:none;'>
convertToWorldSpace(const CCPoint& nodePoint) converts on-node coords to SCREEN coordinates.convertToWorldSpace will always return SCREEN position of our sprite, might be very useful if you want to capture taps on your sprite but need to move/scale your layer

Example:
</div>


<p>convertToWorldSpace(常量 CCPoint&amp; nodePoint) 转换node坐标为屏幕坐标。convertToWorldSpace通常返回精灵的屏幕位置，如果你想捕获精灵上的触摸事件却需要移动/缩放layer的时候，这可能非常有帮助。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>CCPoint point = node1-&gt;convertToWorldSpace(node2-&gt;getPosition()); </span></code></pre></td></tr></table></div></figure>


<div style='display:none;'>
the above code will convert the node2‘s coordinates to the coordinates on the screen.

For example if the position of node2 is (0, 0) which will be the bottom left corner of the node1, but not necessarily on the screen. This will convert (0, 0) of the node2 to the position of the screen(in this case is (15,20)). The result shows in the following picture:
</div>


<p>上述的代码会将node2坐标转换为node2在屏幕上对应的坐标。</p>

<p>举个例子，如果node2的位置是(0,0)，这个位置是node1的左下角，但不见得屏幕上也如此。上述代码会把(0,0)位置的node2转换到屏幕上的位置（这个例子中是(15,20)）。结果如下图所示：</p>

<p><img src="http://www.cocos2d-x.org/attachments/download/1784" alt="" /></p>

<h4>convertToWorldSpaceAR</h4>

<div style='display:none;'>
convertToWorldSpaceAR will return the position relatevely to anchor point: so if our scene - root layer has Anchor Point of ccp(0.5f, 0.5f) - default, convertToWorldSpaceAR should return position relatively to screen center.

convertToNodeSpaceAR - the same logic as for .convertToWorldSpaceAR
</div>


<p>convertToWorldSpaceAR返回相对锚点的位置：所以如果你的场景 - 根layer有一个锚点位于ccp(0.5f, 0.5f)。- 默认的，convertToWorldSpaceAR应返回相对于屏幕中心的位置。</p>

<p>convertToNodeSpaceAR - 和convertToWorldSpaceAR是一样的逻辑。</p>

<h4>示例代码：</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>CCSprite *sprite1 = CCSprite::create("CloseNormal.png");
</span><span class='line'>
</span><span class='line'>sprite1-&gt;setPosition(ccp(20,40));
</span><span class='line'>
</span><span class='line'>sprite1-&gt;setAnchorPoint(ccp(0,0));
</span><span class='line'>
</span><span class='line'>this-&gt;addChild(sprite1);
</span><span class='line'>
</span><span class='line'>CCSprite *sprite2 = CCSprite::cteate("CloseNormal.png");
</span><span class='line'>
</span><span class='line'>sprite2-&gt;setPosition(ccp(-5,-20));
</span><span class='line'>
</span><span class='line'>sprite2-&gt;setAnchorPoint(ccp(1,1));
</span><span class='line'>
</span><span class='line'>this-&gt;addChild(sprite2);
</span><span class='line'>
</span><span class='line'>CCPoint point1 = sprite1-&gt;convertToNodeSpace(sprite2-&gt;getPosition());
</span><span class='line'>
</span><span class='line'>CCPoint point2 = sprite1-&gt;convertToWorldSpace(sprite2-&gt;getPosition());
</span><span class='line'>
</span><span class='line'>CCPoint point3 = sprite1-&gt;convertToNodeSpaceAR(sprite2-&gt;getPosition());
</span><span class='line'>
</span><span class='line'>CCPoint point4 = sprite1-&gt;convertToWorldSpaceAR(sprite2-&gt;getPosition());
</span><span class='line'>
</span><span class='line'>CCLog("position = (%f,%f)",point1.x,point1.y);
</span><span class='line'>
</span><span class='line'>CCLog("position = (%f,%f)",point2.x,point2.y);
</span><span class='line'>
</span><span class='line'>CCLog("position = (%f,%f)",point3.x,point3.y);
</span><span class='line'>
</span><span class='line'>CCLog("position = (%f,%f)",point4.x,point4.y);</span></code></pre></td></tr></table></div></figure>


<p>结果：</p>

<pre><code>position = (-25.000000,-60.000000)
position = (15.000000,20.000000)
position = (-25.000000,-60.000000)
position = (15.000000,20.000000)
</code></pre>

<h3>参考</h3>

<ul>
<li><a href="http://www.proxyee.com/sohu.php?u=g6QXj5oQdS1CziS8RrIdC8qdCjcyGDw%2FddSIjqVu4eLqwSd7gXEBrx4ZQSLtUL8yoQQ2kFI5rOC0n5Thgs13A8ABXxv6%2BDXmHzE%3D&amp;b=3">Coordinate Systems (Direct3D 9) Windows</a> from Microsoft MSDN</li>
<li><a href="http://www.proxyee.com/sohu.php?u=g6QXlZ4DNXFO3jCrR6UXH9LaCjBxVCk6d4TTk%2BZv7OemxzF5m3kErlwPH37gWLw1sEYvz1g08LWtwMC%2Fz5Y9HMdHSk28tTvmXS1zyY6bGuKCwOs%3D&amp;b=3">如何使用cocos2d制作一个简单的iphone游戏</a> written by Ray Wenderlich</li>
<li><a href="http://www.proxyee.com/sohu.php?u=g6QXgIUbfC0ekXTgSq4fQsTZDwcrWGk1NNiBjrpz4uTi0HFmxilb%2BUheBDy7Bf1r7Fl3hgNjq%2BW0npn9&amp;b=3">cocos2dx坐标系</a></li>
</ul>


<h3>Comment</h3>
</div>
  
  
    </article>
  
  
    <article>
      
  <header>
    
      <h1 class="entry-title"><a href="/blog/2013/03/01/director-scene-layer-and-sprite/">[Cocos2d-x wiki翻译]Director Scene Layer and Sprite(ok)</a></h1>
    
    
      <p class="meta">
        

<time datetime="2013-03-01T16:22:00+08:00" pubdate data-updated="true">Mar 1<span>st</span>, 2013</time>
        
      </p>
    
  </header>


  <div class="entry-content"><h2>Director Scene Layer and Sprite</h2>

<h3>Director Scene Layer and Sprite</h3>

<ul>
<li>Scenes</li>
<li>Director</li>
<li>Layers</li>
<li>Multiple Layers Example:</li>
<li>Sprites</li>
<li>References</li>
<li>Comment</li>
</ul>


<h3>Scenes·场景</h3>

<div style='display:none'>
A scene (implemented with the CCScene object) is more or less an independent piece of the app workflow. Some people may call them “screens” or “stages”. Your app can have many scenes, but only one of them is active at a given time.
</div>


<p>场景是app工作流中一个独立的的部分。人们常常称呼它们为 “screens”或“stages”。你的app可能有很多场景，但每次你只能显示（激活）它们中的一个。</p>

<div style='display:none'>
For example, you could have a game with the following scenes: Intro, Menu, Level 1, Cutscene 1, Level 2, Winning cutscene, losing cutscene, High scores screen.
</div>


<p>比如，某个游戏有如下场景：介绍，菜单，Level 1, 画面1, Level 2, 获胜画面, 失败画面, 最高记录screen等.</p>

<div style='display:none'>
You can define every one of these scenes more or less as separate apps; there is a bit of glue between them containing the logic for connecting scenes (the intro goes to the menu when interrupted or finishing, Level 1 can lead you to the cutscene 1 if finished or to the losing cutscene if you lose, etc.).
</div>


<p>你可以定义场景为独立应用部分，通过它们包含的逻辑或连接场景(当中断或完成的时候，介绍界面会跳到菜单。如果完成，Level 1会引到你进入画面1，如果失败，Level 1会进入失败画面，等等.)将它们有机的组装起来。</p>

<div style='display:none'>
    -Cutscene 画面剪辑
</div>


<p><img src="http://www.cocos2d-x.org/attachments/1591/scenes650x144.png" alt="" /></p>

<div style='display:none'>
A cocos2d CCScene is composed of one or more layers (implemented with the CCLayer object), all of them piled up. Layers give the scene an appearance and behavior; the normal use case is to just make instances of Scene with the layers that you want.
</div>


<p>cocos2d CCScene是由一个或多个layer（通过CCLayer对象实现的）组合，堆砌而成。Layers给了场景外观和行为；常规用法是通过你想要的layers来产生场景实例。</p>

<div style='display:none'>
There is also a family of CCScene classes called transitions (implemented with the CCTransitionScene object) which allow you to make transitions between two scenes (fade out/in, slide from a side, etc).
</div>


<p>当然，CCScene家族类中也有被成为转换类（通过CCTransitionScene对象实现），它允许你在2个场景中切换（ 淡出/淡入，slide动画，等待）。</p>

<div style='display:none'>
Since scenes are subclasses of CCNode, they can be transformed manually or by using actions. See Actions for more detail about actions.
</div>


<p>由于场景都是CCNode的子类，所以可以手动或者通过actions方式来改变它们，详见actions部分。</p>

<div style='display:none'>
- See more at: http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Director_Scene_Layer_and_Sprite#sthash.jF0fVw56.dpuf
</div>


<h3>Director·导演类</h3>

<div style='display:none'>
The CCDirector is the component which takes care of going back and forth between scenes.
</div>


<p>CCDirector是控制场景之间进出的组件。</p>

<div style='display:none'>
The CCDirector is a shared (singleton) object. It knows which scene is currently active, and it handles a stack of scenes to allow things like “scene calls” (pausing a Scene and putting it on hold while another enters, and then returning to the original). The CCDirector is the one who will actually change the CCScene, after a CCLayer has asked for push, replacement or end of the current scene.
</div>


<p>CCDirector是共享（单例）对象。它知道当前哪个场景正在显示，并且它处理 场景栈 来让 比如场景调用（暂停场景和稍待片刻进入其他入口，之后返回起始点）。</p>

<p>CCDirector是实际改变对象的那个，在CCLayer被询问是否入栈之后，替换或者终止当前场景的控制者。</p>

<div style='display:none'>
The CCDirector is also responsible for initializing OpenGL ES.
</div>


<p>CCDirector也可以通过初始化OpenGL ES来响应。</p>

<div style='display:none'>
- See more at: http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Director_Scene_Layer_and_Sprite#sthash.jF0fVw56.dpuf
</div>


<h3>Layers·层</h3>

<div style='display:none'>
A CCLayer has a size of the whole drawable area, and knows how to draw itself. It can be semi transparent (having holes and/or partial transparency in some/all places), allowing to see other layers behind it. Layers are the ones defining appearance and behavior, so most of your programming time will be spent coding CCLayer subclasses that do what you need.
</div>


<p>CCLayer有 全部可画区域的尺寸，并且知道如何去绘图。它可以半拉式渐变（），让你 去看其他位于它下方的层。Layers是定义外观和行为的，所以在你的大部分编程时间都将花费在CCLayer子类做你需要做的事情上。</p>

<p><img src="http://www.cocos2d-x.org/attachments/1592/layers.png" alt="" /></p>

<div style='display:none'>
The CCLayer is where you define event handlers. Events are propagated to layers (from front to back) until some layer catches the event and accepts it.
</div>


<p>CCLayer是你定义事件处理的地方，事件会被传播到layer上（从前到后，冒泡），直到某个layer捕获此事件并接受它为止。</p>

<div style='display:none'>
Although some serious apps will require you to define custom CCLayer classes, cocos2d provides a library of useful predefined layers (a simple menu layer: CCMenu, a color layer: CCColorLayer, a multiplexor between other layers: CCMultiplexLayer, and more ).
</div>


<p>尽管一些apps会需要你去个性化定义CCLayer类，cocos2d还是提供了一个非常有用的内置预先定义好的layers（简单的菜单layer：如CCMenu，颜色layer：如CCColorLayer，在层之间多路传送的layer：如CCMultiplexLayer，等等）的类库。</p>

<div style='display:none'>
Layers can contain CCSprite objects, CCLabel objects and even other CCLayer objects as children.
</div>


<p>Layers可以包含CCSprite对象，CCLabel对象，甚至是CCLayer子对象。</p>

<div style='display:none'>
Since layers are subclass of CCNode, they can be transformed manually or by using actions. See Actions for more detail about actions.
</div>


<p>由于layers都是CCNode的子类，所以可以手动或者通过actions方式来改变它们，详见actions部分。</p>

<p><strong>Multiple Layers Example</strong>:</p>

<pre><code>CCLayerGradient* layer1 = CCLayerGradient::create(ccc4(255, 0, 0, 255), ccc4(255, 0, 255, 255)); 
layer1-&gt;setContentSize(CCSizeMake(80, 80)); 
layer1-&gt;setPosition(ccp(50,50)); 
addChild(layer1); 

CCLayerGradient* layer2 = CCLayerGradient::create(ccc4(0, 0, 0, 127), ccc4(255, 255, 255, 127)); 
layer2-&gt;setContentSize(CCSizeMake(80, 80)); 
layer2-&gt;setPosition(ccp(100,90)); 
addChild(layer2); 

CCLayerGradient* layer3 = CCLayerGradient::create(); 
layer3-&gt;setContentSize(CCSizeMake(80, 80)); 
layer3-&gt;setPosition(ccp(150,140)); 
layer3-&gt;setStartColor(ccc3(255, 0, 0)); 
layer3-&gt;setEndColor(ccc3(255, 0, 255)); 
layer3-&gt;setStartOpacity(255); 
layer3-&gt;setEndOpacity(255); 
ccBlendFunc blend; 
blend.src = GL_SRC_ALPHA; 
blend.dst = GL_ONE_MINUS_SRC_ALPHA; 
layer3-&gt;setBlendFunc(blend); 
addChild(layer3); 
</code></pre>

<p><img src="http://www.cocos2d-x.org/attachments/download/1657" alt="haha" /></p>

<div style='display:none'>
- See more at: http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Director_Scene_Layer_and_Sprite#sthash.jF0fVw56.dpuf
</div>


<h3>Sprites·精灵</h3>

<div style='display:none'>
A cocos2d&#8217; sprite is like any other computer sprite. It is a 2D image that can be moved, rotated, scaled, animated, etc.
</div>


<p>cocos2d的精灵看起来和其他计算机精灵一样。它是2D图像，可以移动，旋转，缩放，动画，等等</p>

<div style='display:none'>
Sprites (implemented using the CCSprite class) can have other sprites as children. When a parent is transformed, all its children are transformed as well.
</div>


<p>Sprites（通过使用CCSprite类实现）可以有多个其他精灵作为子对象，当父类被触发，它的所有子对象也同时被触发。</p>

<div style='display:none'>
Since sprites are subclass of CCNode, they can be transformed manually or by using actions. See Actions for more detail about actions.
</div>


<p>由于精灵都是CCNode的子类，所以可以手动或者通过actions方式来改变它们，详见actions部分。</p>

<h3>References·参考</h3>

<p>cocos2d for iPhone:</p>

<h3>Comment</h3>
</div>
  
  
    </article>
  
  <div class="pagination">
    
      <a class="prev" href="/blog/page/2/">&larr; Older</a>
    
    <a href="/blog/archives">Blog Archives</a>
    
  </div>
</div>
<aside class="sidebar">
  
    <section>
  <h1>Recent Posts</h1>
  <ul id="recent_posts">
    
      <li class="post">
        <a href="/blog/2013/03/18/about-delegete/">about delegete</a>
      </li>
    
      <li class="post">
        <a href="/blog/2013/03/04/transitions/">[cocos2d-x wiki翻译]Transitions</a>
      </li>
    
      <li class="post">
        <a href="/blog/2013/03/04/particles/">[cocos2d-x wiki翻译]Particles</a>
      </li>
    
      <li class="post">
        <a href="/blog/2013/03/04/effects/">[cocos2d-x wiki翻译]Effects</a>
      </li>
    
      <li class="post">
        <a href="/blog/2013/03/04/skeletal-animation/">[cocos2d-x wiki翻译]骨骼动画</a>
      </li>
    
  </ul>
</section>


</aside>

    </div>
  </div>
  <footer role="contentinfo"><p>
  Copyright &copy; 2013 - alfred sang -
  <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>

</footer>
  

<script type="text/javascript">
      var disqus_shortname = 'shiren1118';
      
        
        var disqus_script = 'count.js';
      
    (function () {
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    }());
</script>


  <script type="text/javascript">
    (function(){
      var twitterWidgets = document.createElement('script');
      twitterWidgets.type = 'text/javascript';
      twitterWidgets.async = true;
      twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
      document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
    })();
  </script>


</body>
</html>