#include "BackGround.h"
#include "cocos2d.h"
using namespace cocos2d;

bool BackGround::init()
{
    if (!Node::init()) {
        return false;
    }
    //新增背景圖片
    auto Gamebk=Sprite::create("bg_2.jpg");
    Gamebk->setTag(10);

    //設定背景層錨點、座標、新增背景到場景
    Gamebk->setAnchorPoint(Vec2(0,0));
    Gamebk->setPosition(Vec2(0,0));
    this->addChild(Gamebk);
    return true;
}
 

<span style="font-size:14px;">第二部分：精靈動畫<span style="color: rgb(255, 0, 0);">(以雲彩為例)</span></span>

<span style="font-size:14px;color:#ff0000;">分析：要在背景檢視上增加</span><span style="color: rgb(255, 0, 0); font-size: 14px; font-family: Arial, Helvetica, sans-serif;">元素：</span><span style="font-size:14px;color:#ff0000;">雲彩，因雲彩每一幀都在運動，我們可以利用update這個系統函式來管理雲彩每幀運動距離</span>
 

<span style="font-size:14px;">下面將update函式加入BackGround類，並增加一個計數器count 如下：</span>

<span style="font-size:14px;"></span><pre name="code" class="cpp">    void update(float t);<span style="font-family: Arial, Helvetica, sans-serif;">   </span>

<pre name="code" class="cpp">    int count;
 

加入了每幀運動還不夠，我們需要在.cpp中建立雲彩這個元素 如下:

<pre name="code" class="cpp">    //新增雲彩圖片
    auto Clouds=Sprite::create("img_cloud_1.png");
    Clouds->setScale(0.3, 0.3);
    this->addChild(Clouds);
    Clouds->setTag(13);
    Clouds->setAnchorPoint(Vec2::ZERO);

為了讓雲彩有隨機位置，我們需要利用偽隨機初始化雲彩位置：

<pre name="code" class="cpp">    int px=rand()%(int)Director::getInstance()->getWinSize().width;
    int py=rand()%(int)Clouds->getContentSize().height+Director::getInstance()->getWinSize().height;
    //CCLOG("%d %d ",px,py);
    Clouds->setPosition(px, py);

OK，接下來我們就要用到剛才新增的update 每幀更新函式以及計數器來設計雲彩的移動邏輯了

在BackGround.cpp中實現update函式 如下：

<p class="p1"><span class="s1">void</span> <span class="s2">BackGround</span>::update(<span class="s1">float</span> t)</p><p class="p1">{</p><p class="p2"><span class="s3">    </span>//<span class="s4">移動雲彩邏輯</span></p><p class="p3"><span class="s3">    </span>count<span class="s3">=</span>count<span class="s3">+</span><span class="s5">1</span><span class="s3">;</span></p><p class="p1">    <span class="s1">if</span> (<span class="s2">count</span>><span class="s5">1</span>)//當雲彩數量大於1，將雲彩Y軸每幀-2畫素</p><p class="p1">    {</p><p class="p1">        <span class="s1">auto</span> Clouds=<span class="s1">this</span>-><span class="s6">getChildByTag</span>(<span class="s5">13</span>);</p><p class="p1">        Clouds-><span class="s6">setPositionY</span>(Clouds-><span class="s6">getPositionY</span>()-<span class="s5">2</span>);</p><p class="p4">
</p><p class="p1">        <span class="s1">if</span> (Clouds-><span class="s6">getPositionY</span>()<-Clouds-><span class="s6">getContentSize</span>().<span class="s2">height</span>)//當雲彩Y值小余雲彩本省高度時</p><p class="p1">        {</p><p class="p1">            <span class="s1">int</span> px=<span class="s7">rand</span>()%(<span class="s1">int</span>)<span class="s2">Director</span>::<span class="s6">getInstance</span>()-><span class="s6">getWinSize</span>().<span class="s2">width</span>;//x座標為邊框寬度隨機值</p><p class="p1">            <span class="s1">int</span> py=<span class="s7">rand</span>()%(<span class="s1">int</span>)Clouds-><span class="s6">getContentSize</span>().<span class="s2">height</span>+<span class="s2">Director</span>::<span class="s6">getInstance</span>()-><span class="s6">getWinSize</span>().<span class="s2">height</span>;<span style="font-family: monospace;font-size:14px; white-space: pre; background-color: rgb(240, 240, 240);">//y座標為邊框高度隨機值</span></p><p class="p1">            Clouds-><span class="s6">setPosition</span>(px, py);//將雲彩位置設定為隨機值</p><p class="p1">        }</p><p class="p1">    }</p><p class="p1">}</p>

總結：以上方法實現了背景顯示、背景元素移動等方法。