先看效果图

界面制作过程

1. 初始化加载动画：包括初始化背景，初始化标题，初始化进入游戏按钮。

void LoadingGameScene::InitLoadingGameAnimation()
{// 初始化背景InitBackground();// 初始化标题InitTitle();// 初始化进入游戏按钮InitEnterGameButton();
}

1. 初始化背景图

void LoadingGameScene::InitBackground()
{// 创建背景图片作为一个精灵auto backgroundSprite = Sprite::create("images/loadingGameImages/background.png");// 设置背精灵位置backgroundSprite->setPosition(Vec2(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));// 将精灵添加到场景中addChild(backgroundSprite);
}

效果图：

源图：

1. 初始化标题

    // 标题auto titleSprite = Sprite::create("images/loadingGameImages/title.png");titleSprite->setScaleX(1.25f);auto titleSize = titleSprite->getContentSize();// 动画光auto sparkSprite = Sprite::create("images/loadingGameImages/spark.png");sparkSprite->setPosition(Vec2(-sparkSprite->getContentSize().width, 0));sparkSprite->setScale(2.0f);sparkSprite->runAction(RepeatForever::create(Sequence::create(MoveTo::create(1.0f, Vec2(titleSize.width, 0)), DelayTime::create(2.0f),CallFunc::create([=]() {sparkSprite->setPosition(Vec2(-titleSize.width, 0));}), nullptr)));/* 创建裁剪节点 */auto clippingNode = ClippingNode::create();clippingNode->setPosition(Vec2(visibleSize.width / 2, visibleSize.height + titleSize.height / 2));clippingNode->runAction(MoveTo::create(0.5f, Vec2(visibleSize.width / 2, visibleSize.height - (titleSize.height / 3 * 2))));addChild(clippingNode);clippingNode->setAlphaThreshold(0.01f); clippingNode->setContentSize(titleSize);clippingNode->setStencil(titleSprite);clippingNode->addChild(titleSprite); clippingNode->addChild(sparkSprite);

效果图：

源图：

1. 初始化进入游戏按钮。

    // 地auto groundSprite = Sprite::create("images/loadingGameImages/ground.png");groundSprite->setScale(2.0f);groundSprite->setPosition(Vec2(visibleSize.width / 2 + origin.x, visibleSize.height / 5));addChild(groundSprite);// 草坪auto greenswardSprite = Sprite::create("images/loadingGameImages/greensward.png");greenswardSprite->setScale(2.0f);greenswardSprite->setPosition(Vec2(visibleSize.width / 2 + origin.x, visibleSize.height / 5 + groundSprite->getContentSize().height));addChild(greenswardSprite);// 进入游戏按钮auto label = MenuItemLabel::create(Label::createWithTTF(TR("开始游戏"), WENSHUAI_FONT_TTF, 40),CC_CALLBACK_1(LoadingGameScene::BeginGameCallBack, this));label->setColor(Color3B(0, 255, 255));auto action = TintBy::create(0.5f, 0, 255, 255);label->runAction(RepeatForever::create(Sequence::create(action, action->reverse(), nullptr)));label->setEnabled(true);/* 创建菜单 */auto menu = Menu::create(label, nullptr);menu->setPosition(Vec2(visibleSize.width / 2 + origin.x, visibleSize.height / 5 - 10));addChild(menu);

效果图：

源图：

源代码

// LoadingGameScene.h
// vs2022 + cocos2dx 4.0
// by: wangjie
#ifndef __LOADING_GAME_SCENE_H__
#define __LOADING_GAME_SCENE_H__
#include "SceneBase.h"
NS_PVZ_BEGIN
class LoadingGameScene : public SceneBase
{
public:CREATE_FUNC(LoadingGameScene);static NS_CC::Scene* createScene();bool init() override;
private:// 初始化 cocos2dx图标void InitCocos2dxLogo();// 初始化加载游戏动画void InitLoadingGameAnimation();// 初始化水印void InitWatermark();// 初始化背景void InitBackground();// 初始化标题void InitTitle();// 初始化进入游戏按钮void InitEnterGameButton();// 运行加载后回调函数void RunLoadingCallBack(NS_CC::Node* node);// 开始游戏回调函数void BeginGameCallBack(NS_CC::Ref* pSender);
private:NS_CC::Size visibleSize;NS_CC::Vec2 origin;
};
NS_PVZ_END
#endif // __LOADING_GAME_SCENE_H__

// LoadingGameScene.cpp
// vs2022 + cocos2dx 4.0
// by: wangjie
#include "LoadingGameScene.h"
#include "HomePageScene.h"
USING_NS_CC;
NS_PVZ_BEGIN
Scene* LoadingGameScene::createScene()
{return LoadingGameScene::create();
}
void LoadingGameScene::InitCocos2dxLogo()
{auto cocos2dxLogoSprite = Sprite::create("images/loadingGameImages/cocos2dx_logo.png");if (cocos2dxLogoSprite != nullptr){cocos2dxLogoSprite->setName("cocos2dxLogoSprite");cocos2dxLogoSprite->setScale(2);cocos2dxLogoSprite->setPosition(Vec2(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));addChild(cocos2dxLogoSprite, 0);cocos2dxLogoSprite->runAction(Sequence::create(FadeIn::create(1.f),FadeOut::create(1.f), CallFuncN::create(CC_CALLBACK_1(LoadingGameScene::RunLoadingCallBack, this)), NULL));}
}
void LoadingGameScene::InitLoadingGameAnimation()
{InitBackground();InitTitle();InitEnterGameButton();
}
void LoadingGameScene::InitWatermark()
{auto label = Label::createWithTTF("by:wangjie\nqq:1020785391\nemail:1020785391@qq.com", MARKER_FELT_TTF, 24);if (label != nullptr){float x = origin.x + visibleSize.width - label->getContentSize().width / 2;float y = origin.y + label->getContentSize().height / 2;label->setPosition(Vec2(x, y));label->setTextColor(Color4B(0, 255, 255, 100));addChild(label, 1);}
}
void LoadingGameScene::InitBackground()
{// 背景auto backgroundSprite = Sprite::create("images/loadingGameImages/background.png");backgroundSprite->setPosition(Vec2(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));addChild(backgroundSprite);
}
void LoadingGameScene::InitTitle()
{// 标题auto titleSprite = Sprite::create("images/loadingGameImages/title.png");titleSprite->setScaleX(1.25f);auto titleSize = titleSprite->getContentSize();// 动画光auto sparkSprite = Sprite::create("images/loadingGameImages/spark.png");sparkSprite->setPosition(Vec2(-sparkSprite->getContentSize().width, 0));sparkSprite->setScale(2.0f);sparkSprite->runAction(RepeatForever::create(Sequence::create(MoveTo::create(1.0f, Vec2(titleSize.width, 0)), DelayTime::create(2.0f),CallFunc::create([=]() {sparkSprite->setPosition(Vec2(-titleSize.width, 0));}), nullptr)));/* 创建裁剪节点 */auto clippingNode = ClippingNode::create();clippingNode->setPosition(Vec2(visibleSize.width / 2, visibleSize.height + titleSize.height / 2));clippingNode->runAction(MoveTo::create(0.5f, Vec2(visibleSize.width / 2, visibleSize.height - (titleSize.height / 3 * 2))));addChild(clippingNode);clippingNode->setAlphaThreshold(0.01f);clippingNode->setContentSize(titleSize);clippingNode->setStencil(titleSprite);clippingNode->addChild(titleSprite);clippingNode->addChild(sparkSprite);
}
void LoadingGameScene::InitEnterGameButton()
{// 地auto groundSprite = Sprite::create("images/loadingGameImages/ground.png");groundSprite->setScale(2.0f);groundSprite->setPosition(Vec2(visibleSize.width / 2 + origin.x, visibleSize.height / 5));addChild(groundSprite);// 草坪auto greenswardSprite = Sprite::create("images/loadingGameImages/greensward.png");greenswardSprite->setScale(2.0f);greenswardSprite->setPosition(Vec2(visibleSize.width / 2 + origin.x, visibleSize.height / 5 + groundSprite->getContentSize().height));addChild(greenswardSprite);// 进入游戏按钮auto label = MenuItemLabel::create(Label::createWithTTF(TR("开始游戏"), WENSHUAI_FONT_TTF, 40),CC_CALLBACK_1(LoadingGameScene::BeginGameCallBack, this));label->setColor(Color3B(0, 255, 255));auto action = TintBy::create(0.5f, 0, 255, 255);label->runAction(RepeatForever::create(Sequence::create(action, action->reverse(), nullptr)));label->setEnabled(true);/* 创建菜单 */auto menu = Menu::create(label, nullptr);menu->setPosition(Vec2(visibleSize.width / 2 + origin.x, visibleSize.height / 5 - 10));addChild(menu);
}
bool LoadingGameScene::init()
{if ( !Scene::init() ){return false;}visibleSize = Director::getInstance()->getVisibleSize();origin = Director::getInstance()->getVisibleOrigin();// 加cocos2dx logoInitCocos2dxLogo();// 加水印InitWatermark();return true;
}
void LoadingGameScene::RunLoadingCallBack(Node* node)
{auto sprite = dynamic_cast<Sprite*>(node);if (sprite == nullptr) {return;}std::string name = sprite->getName();removeChild(sprite);if (name._Equal("cocos2dxLogoSprite")) {// 初始化加载游戏动画InitLoadingGameAnimation();}
}
void LoadingGameScene::BeginGameCallBack(NS_CC::Ref* pSender)
{Director::getInstance()->replaceScene(HomePageScene::createScene());
}
NS_PVZ_END