Cocos2d-x 3.2-2048-Article 1

Cocos2d-x 3.2-2048-Article 1

* *********************************** Please specify the source: bytes ******************************************

2048 this game has been around for a while and has always wanted to be a game.

However, the cocos2d-x engine is learning, and there are other things busy, until now.

Okay, I have to do it now ~.~

This is the first article, which mainly describes:

-- Screen Adaptation

-- Main Interface layout and design

In the preface, I have already shown 2048,

The content of this tutorial will show that the most basic 2048 production,

Scenario, button, and Shenma, add as you like ~

O, and, my environment is WIN7 + VS2012 + cocos2d-x 3.2

At the end of each article, the code for the current chapter will be loaded,

I also wrote a little, and I wrote one,

If any error occurs, please note that O (∩ _ ∩) O thank you!

Start, Go!

Step 1: screen adaptation

Previously, in the article on screen adaptation,

You can use 320*480 or 480*800,

Here, the display is convenient, and 320*480 is used,

In AppDelegate. cpp:

 if(!glview) {        glview = GLView::create("My Game");        director->setOpenGLView(glview);glview -> setFrameSize( 320 , 480 );    }glview -> setDesignResolutionSize(320,480,ResolutionPolicy::EXACT_FIT);

Well, the adaptation problem is like this,

Let's talk about the structure of this game:

-- Three game interfaces (main interface, game interface, and game end interface)

-- A macro definition class (mainly including the macro definition of game content)

-- A digital block class (that is, the number we need to slide)

Yes, only these classes are available ~.~

Does it make your mind clearer?

First, let's look at the main interface,

The original HelloworldScene was removed directly,

Right-click Project-> Add-> new item, enter the class name, and select a Classes folder.

Add the MainScene. h and. cpp files,

Add the following content in MainScene. h:

# Ifndef _ test2048_MAINSCENE_H __# define _ test2048_MAINSCENE_H __# include "cocos2d. h "USING_NS_CC; class MainScene: public Layer {public: // create scenario static Scene * createScene (); // initialize the function bool init (); CREATE_FUNC (MainScene );}; # endif

Then, in. cpp, set the function defined by. h:

# Include "MainScene. h "USING_NS_CC; // create Scene scene * MainScene: createScene () {auto Scene = Scene: create (); auto layer = MainScene: create (); scene-> addChild (layer); return scene;} // initialization function bool MainScene: init () {// if the parent class fails to be initialized, falseif (! Layer: init () {return false;} return true ;}

Then, add some related content in this scenario,

For example: Game name, start game button, exit game button

Before setting these things, you must first set some macro definitions related to games,

For example, the screen width and height,

Create a GameDefine. h:

#ifndef __test2048_GameDefine_H__#define __test2048_GameDefine_H__#define Game_Screen_Width 320#define Game_Screen_Height 480#endif

This class stores some macro definitions of games,

The back is also, sliding up, down, left, right (Enumeration type ),

Set several rows and several columns and the length of each column in each row.

Of course, if this macro is not defined, the screen size can also be called through the function:

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

To get down to business, add some buttons, which can be image buttons or text buttons,

Start the game with a text button,

Exit with the image button.

Add the game name. I used the font file (. ttf) found on the Internet to create it,

Load ttf first, and then use Label: createWithTTF to create:

// Load the ttf file and set the TTFConfig ("HelloKitty. ttf ", 60); // display the game name auto labelGame = Label: createWithTTF (config," 2048 "); labelGame-> setPosition (Point (GAME_SCREEN_WIDTH/2, GAME_SCREEN_HEIGHT * 2/3); this-> addChild (labelGame); labelGame-> setScale (1.5 );

Then, add the exit button, and use the original image, which is placed in the lower right corner:

auto closeItem = MenuItemImage::create(                                           "CloseNormal.png",                                           "CloseSelected.png",                                           CC_CALLBACK_1(MainScene::menuCloseCallback, this));    closeItem->setPosition(Point( GAME_SCREEN_WIDTH - closeItem->getContentSize().width/2 , closeItem->getContentSize().height/2 ) );    auto menu = Menu::create(closeItem, NULL);    menu->setPosition(Vec2::ZERO);    this->addChild(menu);

Of course, you need to add the callback function of THiS button in the. h file:

void menuCloseCallback( Ref* pSender );

Then, add the following in. cpp:

void MainScene::menuCloseCallback( Ref * pSender ){Director::getInstance()->end();}

PS: Let's explain why we set this location,

We need to put the close button in the lower right corner, and the lower left corner of the screen is,

The image's anchor is at the 0.5, 0.5, and central locations,

GetContentSize is used to obtain the size of the current object,

What should I do with soy sauce? ~

In this way, you can run the command to check the effect,

Before running, add MainScene. h to AppDelegate. cpp and change the running scenario to MainScene:

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

The effect is as follows:

Then, add the text button for starting the game:

auto startItem = MenuItemFont::create(" Start ",CC_CALLBACK_1(MainScene::menuStartCallback,this));startItem -> setPosition( Point( GAME_SCREEN_WIDTH/2,GAME_SCREEN_HEIGHT/2));auto menu = Menu::create(closeItem,startItem, NULL);    menu->setPosition(Vec2::ZERO);    this->addChild(menu);

Then, follow the previous method to create a class, GameScene,

. H and. cpp are still the same.

Add the start button callback,

Void MainScene: menuStartCallback (Ref * pSender) {auto scene = GameScene: createScene (); // Add an animation Director: getInstance ()-> replaceScene (TransitionFadeDown :: create (0.5f, scene ));}

Come on, run it:

Download: http://pan.baidu.com/s/1gdzPoFD

* *********************************** Please specify the source: bytes ******************************************