猿创征文｜【C++游戏引擎Easy2D】炫酷动画来这学，位移动画构造函数让节点执行动画

---

---

🧛‍♂️iecne个人主页：：iecne的学习日志
💡每天关注iecne的作品，一起进步
💪学C++必看iecne
本文专栏：【C++游戏引擎】.
🐳希望大家多多支持🥰一起进步呀！

---

✨前言

共同学习，加入粉丝群，加V：YAN_Pisces_Boom
哈喽大家好，我是iecne，本期为大家带来的是CPP/C++【游戏引擎Easy2D】炫酷动画来这学，动画入门之位移动画，构造函数让节点执行动画。包教包会，快来看看吧！
引擎支持 Visual Studio 2013 及以上版本，如果你使用的是较低版本的 VS，那么你需要考虑一下更新你的编译器了

任务描述

如何根据据Button制作鼠标控制按钮类
本实践旨在通过多个代码的案列，让大家理解和掌握如何使用【游戏引擎Easy2D】炫酷动画来这学，动画入门之位移动画，构造函数让节点执行动画

---

---

Easy2D导读

对于编程而言，初学者最需要的不是技能，而是成就感。
如果你喜欢用 C/C++ 编写自己的小游戏，那么 Easy2D 将是个不错的选择，它大大简化了游戏制作过程，可以帮助你快速开发 Windows 上的 2D 小游戏。
它的特点和它的名字一样，Everything is Easy！

---

安装 Easy2D

使用简易安装器
运行里面的 install.bat 文件进行安装。
点击此链接进行下载（纯免费，给官方搞成了VIP）
点击下载
安装程序会检测您已经安装的 Visual Studio 版本，并根据您的选择将对应库文件解压至 VS 库目录下。
Easy2D 不支持 VS2012 及以下的版本（包括 VC6.0），如果你使用的是低版本的 VS，那你需要尝试一下新版的 Visual Studio 了。

安装环境：
操作系统：Windows 7 及以上操作系统。
编译环境：Visual Studio 2013 (x86 & x64) 及以上版本。

---

什么是节点动画

什么是动画
直接修改节点的属性会立即生效，体现不出时间的概念，也没有渐变的效果。想让一个精灵执行一段连贯的动画，需要用到 Action 动画类。

动画分为普通动画和组合动画。普通动画是执行一段时间，达到一种效果，组合动画是普通动画的组合。

目前普通动画有：

MoveTo （在一段时间内移动到指定位置）
MoveBy （在一段时间内移动到相对于当前位置的某个位置）
ScaleTo （在一段时间内缩放到指定大小）
ScaleBy （在一段时间内缩放到相对于当前大小的某个大小）
OpacityTo （在一段时间内透明度渐变到指定值）
OpacityBy （在一段时间内透明度渐变到相对于当前透明度的某个值）
FadeIn （在一段时间内透明度渐变到完全显示）
FadeOut （在一段时间内透明度渐变到完全消失）
RotateTo （在一段时间内旋转到到指定角度）
RotateBy （在一段时间内旋转到相对于当前角度的某个角度）
Delay （等待一段时间）
Animation （帧动画，只有 Sprite 可以执行该动画）
CallFunc （立即执行指定的回调函数）
组合动画有：

Sequence （组合多个动画，按顺序执行）
Spawn （组合多个动画，同时执行）
Loop （将一个动画循环执行，默认无限循环，也可以指定循环次数）

Tip
Action 不是节点，它只是描述了节点需要执行的动画的过程。

---

一.MoveTo

MoveTo 动画可以使节点在一段时间内移动到另一个位置，你需要在它的构造函数中指定这个动画的持续时间和目的地。

1.1 函数的用法

创建一个位移动画，2.5 秒后使节点移动到坐标 (100, 200) 处

auto moveTo = gcnew MoveTo(2.5f, Point(100, 200));

创建一个位移动画，1 秒后使节点移动到坐标 (100, 100) 处

auto moveTo = gcnew MoveTo(1.0f, Point(100, 100));

创建一个位移动画，10 秒后使节点移动到坐标 (200, 202) 处

auto moveTo = gcnew MoveTo(10.0f, Point(200, 202));

---

1.2 精灵的移动

调用节点的 runAction 函数，可以让节点执行动画。如下面的代码执行后，无论精灵在什么位置，它都会在 2.5 秒内移动到坐标 (100, 200) 处

创建一个精灵

auto sprite = gcnew Sprite();

让这个精灵执行位移动画

sprite->runAction(moveTo);

但是前提是你得有moveTo
则要在前面加上

创建一个位移动画，2.5 秒后使节点移动到坐标 (100, 200) 处

auto moveTo = gcnew MoveTo(2.5f, Point(100, 200));

加在一起则是

auto moveTo = gcnew MoveTo(2.5f, Point(100, 200));
auto sprite = gcnew Sprite();
sprite->runAction(moveTo);

你学会了吗？

---

二.MoveBy

MoveBy 动画也是位移动画，它使节点朝一个方向移动一定的距离，你需要在它的构造函数中指定这个动画的持续时间和位移的距离。

创建一个位移动画，2.5 秒内使节点移动横向移动 100像素

auto moveBy = gcnew MoveBy(2.5f, Vector2(100, 0));

执行这个动画后，节点会从它的起始位置开始，在 2.5 秒内向正右方移动 100 像素

不过作者认为他的作用不大，可以直接用MoveTo完成
例如我们在100,100要往右100像素
则：

auto moveTo = gcnew MoveTo(2.5f, Point(100, 100 + 100));

这样我们在写游戏的时候，便可以通过X和Y来控制某角色当前的坐标

---

三.实例

3.1 原做法

我之前写过一篇文章，【游戏引擎Easy2D】三分钟学会游戏的控制移动，键盘识别详解
点击下链接观看
【游戏引擎Easy2D】三分钟学会游戏的控制移动，键盘识别详解

3.1.1 设置窗口

#include <easy2d/easy2d.h>
 
using namespace easy2d;
 
int main()
{
    if (Game::init())
    {
        // 设置窗口标题和窗口大小
        Window::setTitle(L"Moving Man");
        Window::setSize(640, 480);
 
        /* 设计游戏内容 */
 
        Game::start();
    }
    Game::destroy();
    return 0;
}

---

3.1.2 man类

在代码第 2 行插入一个新的类，取名为 Man，继承 Sprite 类。

class Man : public Sprite
{
public:
    Man() {}
};

---

3.1.3 与Sprite联通

在 Man 的构造函数中调用父类的构造函数，将图片的文件名 “man.png” 传给 Sprite。

class Man : public Sprite
{
public:
    Man()
    {
        // 加载图片
        this->open(L"man.png");
    }
};

再全部联通

#include <easy2d/easy2d.h>
#include <iostream>
 
using namespace std;
using namespace easy2d;
 
class Man : public Sprite
{
public:
    Man()
    {
        // 加载图片
        this->open(L"man.png");
    }
};
 
int main()
{
    if (Game::init())
    {
        // 设置窗口标题和窗口大小
        Window::setTitle(L"Moving Man");
        Window::setSize(640, 480);
 
        // 创建场景
        auto scene = gcnew Scene;
        // 进入该场景
        SceneManager::enter(scene);
 
        // 创建一个 Man 对象
        auto hero = gcnew Man;
        // 将 Man 添加到场景中
        scene->addChild(hero);
 
        Game::start();
    }
    Game::destroy();
    return 0;
}

---

3.1.4 实现移动

void onUpdate()
{
    if (Input::isDown(KeyCode::Up))
    {
        // Man 的 Y 坐标减少 2
        this->movePosY(-2);
    }
    else if (Input::isDown(KeyCode::Down))
    {
        // Man 的 Y 坐标增加 2
        this->movePosY(2);
    }
 
    if (Input::isDown(KeyCode::Left))
    {
        // Man 的 X 坐标减少 2
        this->movePosX(-2);
    }
    else if (Input::isDown(KeyCode::Right))
    {
        // Man 的 X 坐标增加 2
        this->movePosX(2);
    }
}

---

3.2 综合CODE

#include <easy2d/easy2d.h>
 
using namespace easy2d;
 
class Man : public Sprite
{
public:
    Man()
    {
        // 加载图片
        this->open(L"man.png");
        // 居中显示在屏幕上
        this->setAnchor(0.5f, 0.5f);
        this->setPos(Window::getWidth() / 2, Window::getHeight() / 2);
    }
 
    void onUpdate()
    {
        if (Input::isDown(KeyCode::Up))
        {
            // Man 的 Y 坐标减少 2
            this->movePosY(-2);
        }
        else if (Input::isDown(KeyCode::Down))
        {
            // Man 的 Y 坐标增加 2
            this->movePosY(2);
        }
 
        if (Input::isDown(KeyCode::Left))
        {
            // Man 的 X 坐标减少 2
            this->movePosX(-2);
        }
        else if (Input::isDown(KeyCode::Right))
        {
            // Man 的 X 坐标增加 2
            this->movePosX(2);
        }
    }
};
 
int main()
{
    if (Game::init())
    {
        // 设置窗口标题和窗口大小
        Window::setTitle(L"Moving Man");
        Window::setSize(640, 480);
 
        // 创建场景
        auto scene = gcnew Scene;
        // 进入该场景
        SceneManager::enter(scene);
 
        // 创建一个 Man 对象
        auto hero = gcnew Man;
        // 将 Man 添加到场景中
        scene->addChild(hero);
 
        Game::start();
    }
    Game::destroy();
    return 0;
}

---

3.3 修改后

#include <easy2d/easy2d.h>
#include <iostream>
#include <windows.h>

using namespace easy2d;

int X = Window::getWidth() / 2;
int Y = Window::getHeight() / 2;

class Man : public Sprite
{
public:
    Man()
    {
        // 加载图片
        this->open(L"people.webp");
        // 居中显示在屏幕上
        this->setAnchor(0.5f, 0.5f);

        this->setPos(X, Y);
    }

    void onUpdate()
    {
        if (Input::isDown(KeyCode::Up))
        {
            // Man 的 Y 坐标减少 2
            auto y = gcnew MoveTo(0.1f, Point(X , Y-2));
            Y -= 2;
            this->runAction(y);
        }
        else if (Input::isDown(KeyCode::Down))
        {
            // Man 的 Y 坐标增加 2
            auto y = gcnew MoveTo(0.1f, Point(X, Y + 2));
            Y += 2;
            this->runAction(y);
        }

        if (Input::isDown(KeyCode::Left))
        {
            // Man 的 X 坐标减少 2
            auto x = gcnew MoveTo(0.1f, Point(X -2 , Y));
            X -= 2;
            this->runAction(x);
        }
        else if (Input::isDown(KeyCode::Right))
        {
            // Man 的 X 坐标增加 2
            this->movePosX(2);
            auto x = gcnew MoveTo(0.1f, Point(X + 2, Y));
            X += 2;
            this->runAction(x);
        }
        Sleep(50);
    }
};

int main()
{
    if (Game::init())
    {
        // 设置窗口标题和窗口大小
        Window::setTitle(L"Moving Man");
        Window::setSize(1280, 960);

        // 创建场景
        auto scene = gcnew Scene;
        // 进入该场景
        SceneManager::enter(scene);

        // 创建一个 Man 对象
        auto hero = gcnew Man;
        // 将 Man 添加到场景中
        scene->addChild(hero);

        Game::start();
    }
    Game::destroy();
    return 0;
}

代码各自看看，一定能看到其中奥秘，也欢迎各位copy放入自己的VS然后运行看看，图片不提供，去百度图片找找
效果如下：

---

关于命名

Easy2D 按照以下规律命名函数：

小驼峰式命名法则，第一个单词小写，后面的单词首字母大写，如Window::setTitle
所有函数均按照动词+名语形式命名，如Logger::showConsole
获取对象的属性值：get+属性名，如Node::getWidth
修改对象的属性值：set+属性名，如Node::setPos
获取对象的状态(bool值)：is+状态名，如Node::isVisiable

---

总结

本节课主要是讲解了Easy2D引擎实现的教程，至此该课示例的思想博主已经真真切切彻彻底底分享完了，相信大家对这个逻辑有了一定的理解，大家可以自己动手敲敲代码，感受一下，包教包会。若有任何侵权和不妥之处，请私信于我，定积极配合处理，看到必回！！！

帅的人已然点赞收藏关注，而丑的人还在犹豫，被犹豫了，快三连吧！
原创不易，还希望各位大佬支持一下
点赞，你的认可是我创作的动力！
收藏，你的青睐是我努力的方向！
评论，你的意见是我进步的财富！

---

感谢每一个观看本篇文章的朋友，更多精彩敬请期待～(￣▽￣～)~：
iecne的博客
若有任何侵权和不妥之处，请私信于我，定积极配合处理，看到必回！！！