游戏示例 - 旋转的文字

跟随本章教程，制作一个简单的旋转文字，帮助你快速了解 Easy2D 的使用方法。

准备

在 VS 中写好我们新手入门里学习的基本代码，运行后显示一个 300*300 大小的窗口。

main.cpp

#include <easy2d/easy2d.h>

using namespace easy2d;

int main()
{
    if (Game::init())
    {
        // 设置窗口标题和窗口大小
        Window::setTitle("Rotating Text");
        Window::setSize(300, 300);

        /* 设计游戏内容 */

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

显示文本

在设计游戏内容的部分，创建一个场景和一个 Text 对象，然后文本添加到场景中。

main.cpp

#include <easy2d/easy2d.h>

using namespace easy2d;

int main()
{
    if (Game::init())
    {
        // 设置窗口标题和窗口大小
        Window::setTitle("Rotating Text");
        Window::setSize(300, 300);

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

        // 创建一个 Text 对象
        auto test = gcnew Text("Hello Easy2D!");
        // 将 Text 添加到场景中
        scene->addChild(test);

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

用我们在新手入门中学到的方法，修改文本中心点和文本坐标，让它在屏幕上居中显示

main.cpp

#include <easy2d/easy2d.h>

using namespace easy2d;

int main()
{
    if (Game::init())
    {
        // 设置窗口标题和窗口大小
        Window::setTitle("Rotating Text");
        Window::setSize(300, 300);

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

        // 创建一个 Text 对象
        auto text = gcnew Text("Hello Easy2D!");
        // 将 Text 添加到场景中
        scene->addChild(text);

        // 居中显示在屏幕上
        text->setAnchor(0.5f, 0.5f);
        text->setPos(Window::getWidth() / 2, Window::getHeight() / 2);

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

运行后的结果如下图所示

Rotating Text

动画的实现

实现动画有很多种方式，我们使用一个新概念来实现这个功能，它的名字叫 Action(动作)。

Action 可以让一个节点动起来，它有许多的派生类，分别实现不同的效果。例如 RotateTo 可以让节点在一定时间内旋转至一定的角度，它的构造函数需要两个 float 类型的参数，一个代表动作时长（秒），另一个代表旋转后的角度。

// 创建一个旋转动画，3 秒后旋转至 180 度
auto rotate = gcnew RotateTo(3, 180);

Node::runAction 可以让节点执行一个动作，添加下面的代码并运行，可以看到文本慢慢旋转至了 180 度。

// 让 Text 执行这个动作
text->runAction(rotate);

为了让节点不停地旋转，我们不使用 RotateTo 这个动作，而是使用 RotateBy。RotateBy 也是旋转动画，它与 RotateTo 不同的是，它表示一段相对的旋转。

我们刚刚测试的动画，无论节点一开始的角度是多少，它 3 秒后都旋转到 180 度。也就是说，这个动画运行的结果是一定的，那就是文本倒立显示在屏幕上。

Rotating Text

而 RotateBy 动画是一段相对动画，如果节点一开始的角度是 20 度，那么 3 秒后它将旋转到 200 度（20+180=200）。

删掉刚刚创建的旋转动画，重新创建一段 RotateBy 动画

// 创建一个旋转动画，1 秒内顺时针旋转 60 度
auto rotate = gcnew RotateBy(1, 60);

但这个动画也不是无限运行的，它 1 秒钟后就会结束。

Loop 用来创建一段循环动画，它可以让另一个动作不断的执行。

// 创建一个循环动画
auto action = gcnew Loop(rotate);

执行这个动画，文本将一直旋转，永远都不会停下来。

// 让 Text 执行这个动作
text->runAction(action);

完整代码

main.cpp

#include <easy2d/easy2d.h>

using namespace easy2d;

int main()
{
    if (Game::init())
    {
        // 设置窗口标题和窗口大小
        Window::setTitle("Rotating Text");
        Window::setSize(300, 300);

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

        // 创建一个 Text 对象
        auto text = gcnew Text("Hello Easy2D!");
        // 将 Text 添加到场景中
        scene->addChild(text);

        // 居中显示在屏幕上
        text->setAnchor(0.5f, 0.5f);
        text->setPos(Window::getWidth() / 2, Window::getHeight() / 2);

        // 创建一个旋转动画，1 秒内顺时针旋转 60 度
        auto rotate = gcnew RotateBy(1, 60);
        // 创建一个循环动画
        auto action = gcnew Loop(rotate);
        // 让 Text 执行这个动作
        text->runAction(action);

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