• cocos2d-x 3.2 之 2048 —— 第一篇


    ***************************************转载请注明出处:http://blog.csdn.net/lttree******************************************



    2048这款游戏,已经有一段时间了,之前一直想做一款。

    可是。cocos2d-x 引擎 正在学习,并有别的事情忙。一直延到如今。

    好吧。最终要做一下了~。

    ~


    这是第一篇,主要会说明一下:

    ——屏幕适配

    ——主界面 布局及设计


    前言 中。已经展示过我做的2048,

    本次教程内容,将会显示,最基础的2048制作。

    场景,button,神马的,自己按兴趣加入吧~

    o,还有。我的环境是WIN7+VS2012+cocos2d-x 3.2

    每篇文章最后。都会载入做到眼下篇章的代码。

    我也是写一点。发一篇的,

    若有错误,敬请指出。O(∩_∩)O谢谢!



    開始,Go!


    第一步,屏幕适配

    之前,在  屏幕适配 一文中 也有说明。

    能够用320*480的。也能够用 480*800 的,

    这里。显示方便,就用了320*480的,

    AppDelegate.cpp中:

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

    恩,适配问题就大体这样了,

    说一下,本游戏结构:

    —— 三个游戏界面 类 ( 主界面,游戏界面,游戏结束界面 )

    —— 一个 宏定义 类 ( 主要放一些 游戏内容的 宏定义 )

    —— 一个数字块类  ( 就是 我们须要滑动的 数字 )


    没错,就仅仅有这几个类~。~

    是不是感觉思路略清晰了呢?


    首先,搞一下主界面,

    原带的HelloworldScene 直接移除了。

    右击项目->加入-> 新建项,填写类名称。并选择存在Classes目录



    加入MainScene.h 和 .cpp 两个文件。

    然后在MainScene.h 中 加入内容:

    #ifndef __test2048_MAINSCENE_H__
    #define __test2048_MAINSCENE_H__
    
    #include "cocos2d.h"
    USING_NS_CC;
    
    class MainScene : public Layer
    {
    public:
    	// 创建场景
        static Scene* createScene();
        // 初始化函数
    	bool init();  
        CREATE_FUNC(MainScene);
    };
    
    #endif 

    然后在.cpp中。对.h定义的函数进行设置:

    #include "MainScene.h"
    
    USING_NS_CC;
    
    // 创建场景
    Scene* MainScene::createScene()
    {
    	auto scene = Scene::create();
    	auto layer = MainScene::create();
    	scene -> addChild( layer );
    	return scene;
    }
    
    // 初始化函数
    bool MainScene::init()
    {
    	// 父类初始化失败。则返回false
    	if( !Layer::init() )
    	{
    		return false;
    	}
    
    
    
    	return true;
    }

    然后,要在这个场景中,加入一些相关内容,

    比方: 游戏名称 , 開始游戏button , 退出游戏button 


    等下,在这些东西设置前,要先设置一些 游戏 相关宏定义,

    比方。屏幕的宽高。

    新建一个 GameDefine.h  :

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

    这个类。就是存游戏一些宏定义。

    后面还有,滑动的上下左右(枚举类型),

    设置的几行几列 及  每行每列长度等等。


    当然,不定义这个宏,屏幕的大小也能够通过函数来调用:

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


    言归正传,要加一些button,能够是图片button。能够是文字button,

    開始游戏用 文字button,

    退出 用图片button吧。


    加入游戏名称。我用的 是 网上找的字体文件(.ttf )来创建的,

    首先要  将ttf载入进来,然后用Label::createWithTTF来创建:

    // 将ttf文件加载。并设置大小
    	TTFConfig config("HelloKitty.ttf",60);
    	//显示游戏名称
    	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);

    然后,增加退出button,这个就用原来自带的那个图片,放在右下角:

    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);

    当然,要在.h文件加上,这个button的回调函数:

    void menuCloseCallback( Ref* pSender );
    然后,在.cpp中加上。这个函数的定义:

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


    PS:说一下,为什么设置这个位置,

    我们要把  关闭 button放在右下角。整个屏幕  左下角是0,0点,

    并且图片锚点是在0.5,0.5及中央位置,

    getContentSize 是获取当前对象的大小。

    酱紫就明确了吧? ~



    这样,能够执行看一下效果,

    在执行之前,要在AppDelegate.cpp中加上MainScene.h ,并将执行场景换成MainScene:

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

    效果出来咯:



    然后,要加上開始游戏的文字button了:

    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);

    然后,依照之前方法,新建一个类,GameScene,

    .h和.cpp仍是原来样子。

    再加上startbutton的回调,

    void MainScene::menuStartCallback( Ref * pSender )
    {
    	auto scene = GameScene::createScene();
    	// 加入个动画
    	Director::getInstance() -> replaceScene(TransitionFadeDown::create(0.5f,scene));
    }

    来,执行试一下吧:



    以下有点空啊,能够随便加些什么。比方你的信息等等。


    第一篇就先到这里,

    第二篇主要讲述的就是游戏界面的格子绘制那些啦~

    本篇代码下载:http://pan.baidu.com/s/1gdzPoFD


    ***************************************转载请注明出处:http://blog.csdn.net/lttree******************************************

  • 相关阅读:
    flexbox子盒子order属性
    将页面中表格数据导出excel格式的文件(vue)
    vue.js生命周期钩子函数及缓存
    js获取n分钟(或n小时或n个月)后(或前)的时间(日期)
    微信小程序之模版的使用(template)
    微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)
    关于UUID
    关于axios及其在vue中的配置
    Vue.js之下拉列表及选中触发事件
    基于iview的后台管理
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/5155444.html
Copyright © 2020-2023  润新知