cocos2d-x 3.2 |如何实现图片显示和精灵动画 Sprite

#include <stdio.h>
#include "cocos2d.h"
using namespace cocos2d;
class BackGround:public Node
{
public:
CREATE_FUNC(BackGround);
//create方法会调用init
bool init();
};

#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>

总结：以上方法实现了背景显示、背景元素移动等方法。