Home Database Mysql Tutorial Cocos2dx3.2 Crazy Tetris 基本设置及主菜单页面(菜单、按钮)

Cocos2dx3.2 Crazy Tetris 基本设置及主菜单页面(菜单、按钮)

Jun 07, 2016 pm 03:48 PM
Basic set up

从本章开始就主要通过我制作 CrazyTetris 游戏的过程而展开。 制作伊始,我先大致地想象了一下整个游戏的流程: 因此,本章就是游戏入口以及开始菜单页面的制作。 游戏的入口主要是在 AppDelegate 中,这里主要是设置尺寸。考虑到最终是一款手机游戏,因此设

从本章开始就主要通过我制作Crazy Tetris游戏的过程而展开。

 

制作伊始,我先大致地想象了一下整个游戏的流程:

Cocos2dx3.2 Crazy Tetris 基本设置及主菜单页面(菜单、按钮)

因此,本章就是游戏入口以及开始菜单页面的制作。

 

游戏的入口主要是在AppDelegate中,这里主要是设置尺寸。考虑到最终是一款手机游戏,因此设计时以手机尺寸为主。这里选用480*720

 

设置窗口尺寸:

auto glview = director->getOpenGLView();

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

设置设计尺寸及屏幕适配策略:

glview->setDesignResolutionSize(480, 720, kResolutionExactFit );
Copy after login

设计尺寸之前屏幕适配有说过,设置好了后,游戏制作时的尺寸坐标就以该尺寸为基础就好了,遇到不同尺寸的设备,后根据相应屏幕适配策略进行调整。

setFrameSize是设置游戏窗口视图的大小,设置好这个后,在PC上运行时,窗口大小就是根据这个来的。


然后就是将入口场景从默认的HelloWorld改为自己的入口场景——主菜单场景:

// create a scene. it's an autorelease object
auto scene = MainMenu::createScene();
// run
director->runWithScene(scene);
Copy after login

接下来就是主菜单的制作,主菜单很简单,就一张背景,两个按钮——开始游戏和退出游戏。因此这里主要就是添加背景以及菜单及菜单按钮的制作。

 

主菜单是一个场景,这个场景该怎么写,我这里不多做赘述,如需要可以查看我之前的博客——cocos2dx3.2 整体概览(三)—— Scene(场景)

必要的函数是

//创建场景
static cocos2d::Scene * createScene();
//初始化
bool init();
CREATE_FUNC(MainMenu);
Copy after login

而添加背景和按钮菜单在init函数中实现就好了:

首先,获取相关坐标信息:

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

然后,添加背景图片:

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);
Copy after login

这里可以看出,背景也是一张图片,用Sprite将其载入,然后添加到场景中即可。设置位置时设置是设置图片中心所在位置,因此设置屏幕正中。

 

最后添加按钮:

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);
Copy after login

这里是添加图像按钮MenuItemImage,还可以添加纯文字的按钮或其他。

MenuItemImagecreate方法,这里使用了三个参数,依此的意义是普通状态下的按钮图片,被点击状态下的按钮图片以及该按钮点击时的回调函数。

CC_CALLBACK_1是引擎中的宏定义函数,是用来为目标对象绑定回调事件的,他的参数可以有许多,但是前两个是必须的,第一个参数是selector选择器,这里就当是被绑定的回调函数,第二个参数是target,就是绑定的目标对象。

定义好两个按钮后,将这两个按钮添加到菜单Menu中,(因此这两个按钮的坐标位置是Menu中的坐标),最后将Menu添加到场景中即可。

关于设置Menu的位置,可以把Menu想象成一个直角坐标系,设置它的位置就是设置其坐标原点的位置,Menu中的Item的位置就是根据这个直角坐标系来的。


另外就是按钮绑定的回调函数就是自己定义的一个函数,这里我在头文件中声明:

void menuStartCallback(cocos2d::Ref* pSender);
void menuExitCallback(cocos2d::Ref* pSender);
Copy after login

在源文件中定义:

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
}
Copy after login

这样,就完成了主菜单界面。运行效果如下:

Cocos2dx3.2 Crazy Tetris 基本设置及主菜单页面(菜单、按钮)
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to set the scheduled time for publishing works on Douyin? How does it set the video duration? How to set the scheduled time for publishing works on Douyin? How does it set the video duration? Mar 27, 2024 pm 06:11 PM

Publishing works on Douyin can attract more attention and likes, but sometimes it may be difficult for us to publish works in real time. In this case, we can use Douyin's scheduled release function. Douyin’s scheduled release function allows users to automatically publish works at a scheduled time, which can better plan the release plan and increase the exposure and influence of the work. 1. How to set the scheduled time for publishing works on Douyin? To set a scheduled release time, first go to Douyin's personal homepage, find the "+" button in the upper right corner, and click to enter the release page. There is a clock icon in the lower right corner of the publishing page. Click to enter the scheduled publishing interface. In the interface, you can choose the type of work you want to publish, including short videos, long videos, and live broadcasts. Next, you need to set a time for your work to be published. TikTok provides

Where is the Douyin tag set? How can it be tagged so that it can be pushed accurately? Where is the Douyin tag set? How can it be tagged so that it can be pushed accurately? Mar 27, 2024 am 11:01 AM

As one of the most popular short video platforms in the world, Douyin allows everyone to become a creator and share every moment of life. For Douyin users, tags are a very important function. It can help users better classify and retrieve content, and also allows the platform to push appropriate content to users more accurately. So, where are the Douyin tags set? This article will explain in detail how to set up and use tags on Douyin. 1. Where is the Douyin tag set? Using tags on Douyin can help users better classify and label their works, making it easier for other users to find and follow them. The method to set the label is as follows: 1. Open the Douyin APP and log in to your account. 2. Click the "+" sign at the bottom of the screen and select the "Publish" button. 3.

Setting up Chinese with VSCode: The Complete Guide Setting up Chinese with VSCode: The Complete Guide Mar 25, 2024 am 11:18 AM

VSCode Setup in Chinese: A Complete Guide In software development, Visual Studio Code (VSCode for short) is a commonly used integrated development environment. For developers who use Chinese, setting VSCode to the Chinese interface can improve work efficiency. This article will provide you with a complete guide, detailing how to set VSCode to a Chinese interface and providing specific code examples. Step 1: Download and install the language pack. After opening VSCode, click on the left

Do Not Disturb Mode Not Working in iPhone: Fix Do Not Disturb Mode Not Working in iPhone: Fix Apr 24, 2024 pm 04:50 PM

Even answering calls in Do Not Disturb mode can be a very annoying experience. As the name suggests, Do Not Disturb mode turns off all incoming call notifications and alerts from emails, messages, etc. You can follow these solution sets to fix it. Fix 1 – Enable Focus Mode Enable focus mode on your phone. Step 1 – Swipe down from the top to access Control Center. Step 2 – Next, enable “Focus Mode” on your phone. Focus Mode enables Do Not Disturb mode on your phone. It won't cause any incoming call alerts to appear on your phone. Fix 2 – Change Focus Mode Settings If there are some issues in the focus mode settings, you should fix them. Step 1 – Open your iPhone settings window. Step 2 – Next, turn on the Focus mode settings

How to set the watermark in the middle on Weibo_How to set the watermark in the middle on Weibo How to set the watermark in the middle on Weibo_How to set the watermark in the middle on Weibo Mar 29, 2024 pm 03:31 PM

1. First enter Weibo, then click on me in the lower right corner and select [Customer Service]. 2. Then enter [Watermark] in the search box and select [Set Weibo Image Watermark]. 3. Then click [Link] in the interface. 4. Then click [Image Watermark Settings] in the newly opened window. 5. Finally, check [Picture Center] and click [Save].

How to set up scheduled publishing on Weibo_Tutorial on how to set up scheduled publishing on Weibo How to set up scheduled publishing on Weibo_Tutorial on how to set up scheduled publishing on Weibo Mar 29, 2024 pm 03:51 PM

1. Open the Weibo client, click the three little dots on the editing page, and then click Scheduled Post. 2. After clicking on scheduled posting, there will be a time option on the right side of the publishing time. Set the time, edit the article, and click on the yellow words in the lower right corner to schedule posting. 3. The mobile version of Weibo does not currently support scheduled publishing. This function can only be used on the PC client!

Where to set Douyin recommendations and selections Where to set Douyin recommendations and selections Mar 27, 2024 pm 05:06 PM

Where are the recommendations and selections on Douyin? In Douyin short videos, there are two categories: selection and recommendation. Most users don’t know how to set up recommendations and selections. Next is the Douyin tutorial that the editor brings to users. Audio recommendations and selected setting method tutorials, interested users come and take a look! Douyin usage tutorial Where to set up Douyin recommendations and selections 1. First open the Douyin short video APP and enter the main page, click on the [Me] area in the lower right corner and select [three horizontal lines] in the upper right corner; 2. Then on the right The function bar will expand, slide the page to select [Settings] at the bottom; 3. Then on the settings function page, find the [Personal Information Management] service; 4. Finally jump to the personal information management page, slide [Personalized Content Recommendations] 】The buttons on the back can be set.

How to set the countdown to grab tickets in Damai How to set the countdown to grab tickets in Damai Apr 01, 2024 pm 07:01 PM

When buying tickets on Damai.com, in order to ensure that the ticket purchase time can be accurately grasped, users can set a floating clock to grab tickets. The detailed setting method is below, let us learn together. How to bind the floating clock to Damai 1. Click to open the floating clock app on your phone to enter the interface, and click on the location where the flash sale check is set, as shown in the figure below: 2. After coming to the page of adding new records, click on Damai.com Copy the ticket purchase link page copied in. 3. Next, set the flash sale time and notification time below, turn on the switch button behind [Save to Calendar], and click [Save] below. 4. Click to turn on [Countdown], as shown in the figure below: 5. When the reminder time comes, click the [Start Picture-in-Picture] button below. 6. When the ticket purchase time comes

See all articles