1. Introduction to development environment

Operating system: UOS1060 professional version.

cocos2dx: version

Environment construction tutorial:

Configure and install cocos2dx development environment under Tongxin UOS_Sanlei Technology's Blog-CSDN Blog

Main content of this lesson:

1. Add sprites

2. Scene transition

2. Development content

After the game resources are loaded, jump to the welcome home page. Users can set game-related properties, start the game, and view credits through this page. Because there are many codes, the welcome page is divided into two chapters. The first chapter mainly introduces the basic layout of the welcome page. The sprite sets his position through setPosition.

The content of the file is as follows:

Scene/WelcomeScene.h

#ifndef __WELCOME_SCENE_H__
#define __WELCOME_SCENE_H__

#include "cocos2d.h"

USING_NS_CC;

class WelcomeScene : public Scene
{
public:
    static cocos2d::Scene* createScene();

    virtual bool init();
    
    // implement the "static create()" method manually
    CREATE_FUNC(WelcomeScene);
        //  初始化背景图
        void initBackGround();
        // 初始化 Logo图
        void initLogo();
        // 初始化记录菜单
        void initMemuSave();
        // 初始化Credit按钮
        void initButtonCredit();
        // 初始化start 按钮
        void initButtonStart();
        // 初始化声音按钮
        void initSoundButton();
        // 初始化LogoAnimation();
        void initLogoAnimation();


private:

        // 用于记录屏幕的大小
        Size visible_size_;
        // 记录logo的位置，有一些精灵需要通过该位置设置其相对位置。
        Point point_logo_;
        // 标志精灵
        Sprite * sprite_logo_;
        // 精灵
        Sprite* sprite_menu_save_;

        MenuItemSprite* sprite_menu_save_close_;

        Point point_menu_save_close_;

        Point point_menu_save_;
        // 游戏开始按钮
        Sprite* sprite_button_start_;

        //
        Sprite* sprite_button_credit_;



        void onEnterTransitionDidFinish();
};

#endif // __WELCOME_SCENE_H__

Scene/WelcomeScene.cpp

#include "WelcomeScene.h"

USING_NS_CC;


Scene* WelcomeScene::createScene()
{
    return WelcomeScene::create();
}


// on "init" you need to initialize your instance
bool WelcomeScene::init()
{
    //
    // 1. super init first
    if ( !Scene::init() )
    {
        return false;
    }
    visible_size_ = Director::getInstance()->getVisibleSize();

    initBackGround();
    initLogo();
    initMemuSave();
    initButtonStart();
    initButtonCredit();
    initSoundButton();

    return true;

}

void WelcomeScene::initBackGround()
{

    auto sprite_background = Sprite::createWithSpriteFrameName("mainmenu_bg.png");

    sprite_background->setPosition(Point(visible_size_.width/2,visible_size_.height/2));
    sprite_background->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
    // -1表示插入无论有几个节点都在最底层。ZOrder默认值是0。
    addChild(sprite_background,-1);
}

void WelcomeScene::initLogo()
{
     // 加载 Logo.png 图片
    sprite_logo_ =  Sprite::createWithSpriteFrameName("logo.png");
    sprite_logo_->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
    // 设置Logo屏幕局中，居上
    // 设置logo.png的坐标为左右居中
    point_logo_.x = visible_size_.width/2;
    // 设置Logo局上（顶着上面排放）
    point_logo_.y = visible_size_.height - (sprite_logo_->getContentSize().height/2);
    // 初始化效果为0.2f,初始化为缩小状态，图片加载完使其变大，有弹出效果。
    sprite_logo_->setScale(1.0f);
    sprite_logo_->setPosition(point_logo_);
    addChild(sprite_logo_);
}

void WelcomeScene::initMemuSave()
{
    sprite_menu_save_ = Sprite::createWithSpriteFrameName("mainmenu_saveslot_bg.png");
    point_menu_save_.x = point_logo_.x;
    point_menu_save_.y = point_logo_.y - sprite_logo_->getContentSize().height*1.4/2;
    sprite_menu_save_->setPosition(point_menu_save_);
    addChild(sprite_menu_save_,0);

    sprite_menu_save_close_ = MenuItemSprite::create(Sprite::createWithSpriteFrameName("mainmenu_saveslot_close_0001.png"),
                                                     Sprite::createWithSpriteFrameName("mainmenu_saveslot_close_0002.png"));
    point_menu_save_close_.x = point_logo_.x;
    point_menu_save_close_.y = point_menu_save_.y - sprite_menu_save_->getContentSize().height/2 + sprite_menu_save_close_->getContentSize().height/2;
    sprite_menu_save_close_->setPosition(point_menu_save_close_);

    auto menu = Menu::create(sprite_menu_save_close_,nullptr);
     menu->setPosition(Vec2::ZERO);
     addChild(menu,0);
}

void WelcomeScene::initButtonCredit()
{
    sprite_button_credit_= Sprite::createWithSpriteFrameName("menu_creditschain_0001.png");
    sprite_button_credit_->setPosition(point_logo_.x,point_logo_.y- 180) ;
    addChild(sprite_button_credit_,0);
}

void WelcomeScene::initButtonStart()
{
    sprite_button_start_ = Sprite::createWithSpriteFrameName("menu_startchain_0001.png");
    sprite_button_start_->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
    sprite_button_start_->setPosition(point_logo_.x,point_logo_.y);
    addChild(sprite_button_start_,1);
}

void WelcomeScene::initSoundButton()
{

}

void WelcomeScene::initLogoAnimation()
{

}

// 过渡动画播放完毕后，该方法会被自动调用。
void WelcomeScene::onEnterTransitionDidFinish()
{
    log("onEnterTransitionDidFinish");
}

After loading resources, you need to jump to the welcome page.

3. Display effect

4. Summary of Knowledge Points

4.1 Scene transition

Jumping from the loading page to the welcome page, we understand it as a transition.

We can make transitions with the following function

// Myscene:为你需要转场的场景对象。
Director::getInstance()->runWithScene(Myscene);

4.2 Scene transition process

`init()`: This is the initialization method of the scene, which will be called when the scene object is created. You can initialize various properties, nodes, etc. required by the scene here.
`onEnter()`: This method will be called after the scene object is added to the scene manager. Here you can do some initialization work, such as adding event listeners, loading resources, etc.
`onEnterTransitionDidFinish()`: This method is called after the scene transition animation has finished playing. Scene transition animations are usually played when switching scenes, for example when switching scenes using the `Director::pushScene` or `Director::replaceScene` methods. In this method, you can handle some logic that needs to be executed after the transition animation ends, such as starting the game, playing sound effects, etc.
`onExitTransitionDidStart()`: This method is called when the scene exit transition animation starts. Scene exit transition animations usually play when the current scene is switched to a new scene. In this method, you can handle some logic that needs to be executed when the scene exit transition animation starts.
`onExit()`: Called after the scene object is removed from the scene manager. Here you can do some cleanup, such as removing event listeners, releasing resources, etc.

The following is a complete sample code showing the complete sequence of the scene transition process:

#include "YourScene.h"

bool YourScene::init() {
    if (!Scene::init()) {
        return false;
    }

    // 在这里初始化场景

    return true;
}

void YourScene::onEnter() {
    Scene::onEnter();

    // 在这里进行一些初始化工作
    // 例如添加事件监听器、加载资源等
}

void YourScene::onEnterTransitionDidFinish() {
    Scene::onEnterTransitionDidFinish();

    // 在这里处理过渡动画结束后需要执行的逻辑
    // 例如开始游戏、播放音效等
}

void YourScene::onExitTransitionDidStart() {
    Scene::onExitTransitionDidStart();

    // 在这里处理场景退出过渡动画开始时需要执行的逻辑
}

void YourScene::onExit() {
    Scene::onExit();

    // 在这里进行一些清理工作
    // 例如移除事件监听器、释放资源等
}

4.3 Difference between MenuItemSprite and Sprite

In Cocos2d-x, `MenuItemSprite` and `Sprite` are two different classes with different functions and purposes.

1. `MenuItemSprite`:
`MenuItemSprite` is a class used to create menu items, it inherits from `MenuItem` class, and is used to create clickable menu buttons in the game. `MenuItemSprite` can be a button composed of sprites, which can contain sprites in normal state, selected state and disabled state. When the user clicks on the menu item, it will trigger the corresponding callback function.

Sample code:

// 创建一个普通状态的精灵
auto normalSprite = Sprite::create("normal.png");

// 创建一个选中状态的精灵
auto selectedSprite = Sprite::create("selected.png");

// 创建一个禁用状态的精灵
auto disabledSprite = Sprite::create("disabled.png");

// 创建一个菜单项，并将普通状态、选中状态和禁用状态的精灵作为参数传入
auto menuItem = MenuItemSprite::create(normalSprite, selectedSprite, disabledSprite, CC_CALLBACK_1(YourClass::menuCallback, this));

// 创建菜单，并将菜单项添加到菜单中
auto menu = Menu::create(menuItem, nullptr);
menu->setPosition(Vec2::ZERO);
this->addChild(menu);

2. `Sprite`:
`Sprite` is a class used to create sprites in the game. It is the basic element in the game and can represent various game objects such as characters, props, and backgrounds. The `Sprite` class inherits from the `Node` class and has the properties and functions of a node.

Sample code:

// 创建一个精灵
auto sprite = Sprite::create("example.png");
sprite->setPosition(Vec2(100, 100));
this->addChild(sprite);

Summary:
- `MenuItemSprite` is used to create clickable menu items, which can contain sprites in normal, selected and disabled states.
- `Sprite` is used to create sprite elements in the game, representing various game objects.

Previous section: "Entry Level-Cocos2d 4.0 Tower Defense Game Development"---Lesson 2: Game Loading Interface Development

"Entry Level-Cocos2d 4.0 Tower Defense Game Development"---Lesson 3: Welcome Interface Development (1)