Cocos2dx3.2CrazyTetris Basic settings and main menu page (menu and button)

From the beginning of this chapter, we will focus on the process of making the CrazyTetris game. At the beginning, I first roughly imagined the entire game process: therefore, this chapter describes how to create the game portal and the Start menu page. The entry to the game is mainly in AppDelegate, where dimensions are mainly set. Considering that it is eventually a mobile game

From the beginning of this chapter, we will focus on the process of making the CrazyTetris game. At the beginning, I first roughly imagined the entire game process: therefore, this chapter describes how to create the game portal and the Start menu page. The entry to the game is mainly in AppDelegate, where dimensions are mainly set. Considering that it is eventually a mobile game

From the beginning of this chapter, we will focus on the process of making the Crazy RIS game.

At the beginning, I first roughly imagined the entire game process:

Therefore, this chapter describes how to create the game portal and the Start menu page.

The entry to the game is mainly in AppDelegate, where dimensions are mainly set. Considering that the game is ultimately a mobile phone game, the design is based on the mobile phone size. 480*720 is used here.

Set window size:

auto glview = director->getOpenGLView();if(!glview) {    glview = GLView::create("Crazy Tetris");glview->setFrameSize(480, 720);    director->setOpenGLView(glview);}

Set the design size and screen adaptation policy:

glview->setDesignResolutionSize(480, 720, kResolutionExactFit );

The screen adaptation has been said before the design of the size, after the configuration, the size coordinates of the game production is based on this size, in the face of different sizes of equipment, then adjust according to the corresponding screen adaptation policy.

SetFrameSize is used to set the size of the game window view. After this is set, the window size is based on this when running on the PC.

Then, change the entry scenario from the default HelloWorld to your own entry scenario-Main Menu scenario:

// create a scene. it's an autorelease objectauto scene = MainMenu::createScene();// rundirector->runWithScene(scene);

The next step is to make the main menu. The main menu is very simple. There is a background and two buttons-start the game and exit the game. Therefore, you can add a background and create menus and menu buttons.

The main menu is a scenario. How to Write this scenario? I will not repeat it here. For details, refer to my previous blog-cocos2dx3.2 overall overview (III)-Scene (scenario ).

The necessary functions are:

// Create the scenario static cocos2d: Scene * createScene (); // initialize bool init (); CREATE_FUNC (MainMenu );

The following code adds the background and button menu in the init function:

First, obtain the relevant coordinate information:

Size visibleSize = Director::getInstance()->getVisibleSize();Vec2 origin = Director::getInstance()->getVisibleOrigin();

Then, add the background image:

auto background = Sprite::create("Img/background/background.png");background->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));this->addChild(background, 0);

We can see that the background is also an image. Use Sprite to load it and add it to the scene. When you set the position, the image center is set. Therefore, the center of the screen is set.

Last Add button:

auto startItem = MenuItemImage::create("Img/button/startgame.png","Img/button/startgame_selected.png",CC_CALLBACK_1(MainMenu::menuStartCallback, this));startItem->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));auto exitItem = MenuItemImage::create("Img/button/exit.png","Img/button/exit_selected.png",   CC_CALLBACK_1(MainMenu::menuExitCallback, this));exitItem->setPosition(Vec2(origin.x + visibleSize.width - exitItem->getContentSize().width/2 - 35,origin.y + exitItem->getContentSize().height/2 + 35 ));auto menu = Menu::create(startItem, exitItem, NULL);menu->setPosition(Vec2::ZERO);this->addChild(menu, 1);

Here is the Add image button MenuItemImage, you can also add a text button or other.

In the create method of MenuItemImage, three parameters are used here. In this case, the button image in the normal state is used, the button image in the clicked state, and the callback function when the button is clicked.

CC_CALLBACK_1 is a macro-Defined Function in the engine. It is used to bind callback events to the target object. Its parameters can be many, but the first two are required. The first parameter is the selector, here is the bound callback function. The second parameter is target, which is the bound target object.

After defining the two buttons, add them to the Menu (the coordinates of the two buttons are the coordinates in the Menu), and add the Menu to the scene.

For setting the position of Menu, you can think of Menu as a Cartesian coordinate system. Setting the position of Menu is to set its coordinate origin. The position of Item in Menu is based on this Cartesian coordinate system.

In addition, the callback function bound to the button is a self-defined function. Here I declare in the header file:

void menuStartCallback(cocos2d::Ref* pSender);void menuExitCallback(cocos2d::Ref* pSender);

Define in the source file:

void MainMenu::menuStartCallback(cocos2d::Ref* pSender){//auto newScene = GameView::createScene();//Director::getInstance()->replaceScene(TransitionFade::create(1.2, newScene));  }void MainMenu::menuExitCallback(cocos2d::Ref* pSender){#if (CC_TARGET_PLATFORM == CC_PLATFORM_WP8) || (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT)MessageBox("You pressed the close button. Windows Store Apps do not implement a close button.","Alert");    return;#endif    Director::getInstance()->end();#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)    exit(0);#endif}

In this way, the main menu interface is completed. The running effect is as follows: