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

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

第一部分：图片显示(以背景为例)

新建背景类 BackGround 

BackGround.h如下:

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

BackGround.cpp如下：

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

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