(一)cocos2d-x初识

ゝ一世哀愁。 2022-03-16 16:52 231阅读 0赞

# cocos2d简介 #

cocos2d国人维护开发的游戏引擎,比较适合做2d游戏  
优势:跨平台,免费,开源  
主要版本:cocos2d-iPhone,Cocos2d-X,Cocos2d-HTML5,JavaScript bindings for Cocos2d-x

cocos2d-x: X 表示两个意思,意识c++文件CXX,“X” 标志该项目是由c++ 编写的,另一个意思是交叉,这个开源项目的目标是让用户创建跨平台的代码.  
2d-x广泛的应用:我叫MT,龙之力量,大掌门,神仙道等等

# 开发环境集成工具 #

刚开始环境配置会很复杂,还好有cocosStudio 的windows安装包(集成了开发环境cocos2dx 3.10 版本)  
资源难找,在此摆上网盘链接,与各位分享

链接：[https://pan.baidu.com/s/1jWsNOZySCK3iF7qXaHYGRw][https_pan.baidu.com_s_1jWsNOZySCK3iF7qXaHYGRw]  
提取码：jrv8

# cocos2d 主要功能: #

1.  流程控制:可以非常容易的管理不同场景之间的流程控制,直接使用导演(Diretcor) 对象,就可以进行场景的跳转
2.  精灵(sprite,子图):引擎实现了精灵,直接使用引擎的方法就可以创建精灵
3.  动作(Action):引擎实现了很多动作,移动,旋转,缩放等,动作还可以组合
4.  特效(effects):引擎实现了很多特效,包括波浪(Wave),旋转(twirl) 和镜头
5.  平面地图(tiled maps):支持矩形和六边形平面地图
6.  转换(transition):支持从一个场景移动到另外的场景,可以添加动画,并且有30多种转场动画
7.  GUI:实现了很多的GUI控件,CCTableView,CCScrollView等
8.  文本渲染(text rendering):支持标签和html标签动作
9.  基于OPENGL:支持硬件加速

# 几个基本概念: #

Director: 导演,权力最大,可以选择场景的切换,游戏的暂停,继续和停止,转换坐标,设置动画帧速率以及系统信息显示  
Scene: 场景,类似话剧中的一幕(背景基本不变化,或者是说周围环境不会变化)  
如:开场,过长,串场和游戏结束等视频或文字,主要用于进行游戏功能选择,游戏参数设置等选项场景类和游戏过程的游戏主场景.  
Layer: 布景层,使用布景层可以将游戏界面中的各种元素分组管理.  
如:将地图由地图布景层管理:将UI元素用UI布景层管理,将角色元素用角色布景层管理.一般会将布景层设置为透明,这样就不会干扰其他布景层中元素的显示.  
Sprite:精灵(子图,但是感觉精灵更文雅,但是不太准确),拥有自己的行为,可以移动,旋转  
Node:节点,场景上的所有元素都是节点之间关联起来的,形成一棵树,节点只是占据一个位置,和其他节点的位置关系,没有自己的行为,也没有形状, 其他的大多数类都是Node 的子类,拥有自己的行为,以及绘制方法

# demo工程搭建: #

1: 安装cocosstudio ,此处略  
2: 打开cocostudio,文件->新建项目->勾选源代码,c++ ->确定  
![在这里插入图片描述][20190308194845163.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70]

1.  项目->发布与打包->发布为visualstudio 工程->确定(弹出提示是否使用vs 打开工程)  
    ![在这里插入图片描述][20190308195219737.png]
2.  进入vs 运行(可能需要十分钟编译,很多cpp文件,之后启动,则很快了)
3.  启动成功  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 1]

# 工程目录结构解读: #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 2]

## cocos2d-x基本框架核心文件: ##

main.h/main.cpp 启动类  
AppDelegate.h/Appdelegate.cpp  
HelloWorldScene.h/HelloWorldScene.cpp 场景类,主要代码也是在此类中编写  
其他用户自定义源文件

### 1. main.h/main.cpp ###

1.  此文件在工程的proj.win32目录下
2.  是cocos2d-x 程序的入口
3.  实例花了AppDelegate 类的app 对象,并在Application:: getInstance()->run() 方法中启动了Applegate类的ApplicationDidFinishLaunching() 方法

main.cpp 代码:

#include "main.h"
    #include "AppDelegate.h"
    #include "cocos2d.h"
    
    USING_NS_CC;
    
    int APIENTRY _tWinMain(HINSTANCE hInstance,
                           HINSTANCE hPrevInstance,
                           LPTSTR    lpCmdLine,
                           int       nCmdShow)
    { 
        UNREFERENCED_PARAMETER(hPrevInstance);
        UNREFERENCED_PARAMETER(lpCmdLine);
    
        // create the application instance
        AppDelegate app; // 创建app对象
        return Application::getInstance()->run();
    }

Application::getInstance()->run()代码:

int Application::run()
    { 
        PVRFrameEnableControlWindow(false);
    
        // Main message loop:
        LARGE_INTEGER nLast;
        LARGE_INTEGER nNow;
    
        QueryPerformanceCounter(&nLast);
    
        initGLContextAttrs();
    
        // Initialize instance and cocos2d.
        if (!applicationDidFinishLaunching())
        { 
            return 1;
        }
    
      ..........
    
        /
    }

### 2. AppDelegate.h/Appdelegate.cpp ###

1.  文件在工程目录的cCasses目录下
2.  AppDelegate类是基于cocos2d-x的应用程序的入口类
3.  ApplicationDidFinishLaunching() 方法是AppDelegate类的主要方法,也是游戏程序的真正入口

AppDelegate.h代码:

/** @brief The cocos2d Application. The reason for implement as private inheritance is to hide some interface call by Director. */
    class  AppDelegate : private cocos2d::Application
    { 
    public:
        AppDelegate();
        virtual ~AppDelegate();
    
        virtual void initGLContextAttrs();
    
        /** @brief Implement Director and Scene init code here. @return true Initialize success, app continue. @return false Initialize failed, app terminate. */
        virtual bool applicationDidFinishLaunching();
    
        /** @brief The function be called when the application enter background @param the pointer of the application */
        virtual void applicationDidEnterBackground();
    
        /** @brief The function be called when the application enter foreground @param the pointer of the application */
        virtual void applicationWillEnterForeground();
    };
    
    #endif // _APP_DELEGATE_H_

applicationDidFinishLaunching():  
代码见下:

bool AppDelegate::applicationDidFinishLaunching() { 
        // initialize director
        auto director = Director::getInstance();
        auto glview = director->getOpenGLView();
        if(!glview) { 
            glview = GLViewImpl::createWithRect("HelloCpp", Rect(0, 0, 960, 640));
            director->setOpenGLView(glview);
        }
    
        director->getOpenGLView()->setDesignResolutionSize(960, 640, ResolutionPolicy::SHOW_ALL);
    
        // turn on display FPS
        director->setDisplayStats(true);
    
        // set FPS. the default value is 1.0/60 if you don't call this
        director->setAnimationInterval(1.0 / 60);
    
        FileUtils::getInstance()->addSearchPath("res");
    
        // create a scene. it's an autorelease object
        auto scene = HelloWorld::createScene();
    
        // run
        director->runWithScene(scene);
    
        return true;
    }

主要功能:

1.  初始化导演类
2.  创建并获取OpenGL视图做游戏程序的基本视图
3.  设置是否显示性能参数,比如fps
4.  设置频速率
5.  HelloWorld 类的实例化与加载(创建HelloWorld 场景,然后导演对象启动场景)

**applicationDidEnterBackground()**: 程序进入后台时的回调函数(可以看成是事件监听),这里面可以写一些代码,保存或者暂停游戏,比如声音停止播放等等  
**applicationWillEnterForeground()**:程序即将进入前台时的回调函数,比如执行声音恢复,本地缓存刷新等等

### 3. HelloWorldScene.h/HelloWorldScene.cpp ###

HelloWorldScene.cpp

#include "HelloWorldScene.h"
    #include "cocostudio/CocoStudio.h"
    #include "ui/CocosGUI.h"
    
    USING_NS_CC;
    
    using namespace cocostudio::timeline;
    
    // 
    Scene* HelloWorld::createScene()
    { 
        // 'scene' is an autorelease object
        auto scene = Scene::create();
        
        // 'layer' is an autorelease object
        auto layer = HelloWorld::create();
    
        // add layer as a child to scene
        scene->addChild(layer);
    
        // return the scene
        return scene;
    }
    
    // on "init" you need to initialize your instance
    bool HelloWorld::init()
    { 
     
        
        //
        // 1. super init first
        if ( !Layer::init() )
        { 
            return false;
        }
        
       auto rootNode = CSLoader::createNode("MainScene.csb");
       addChild(rootNode);
    	
    
        return true;
    }

HelloWorld 类

1.  cocos2d-x 生成的应用程序示例类
2.  源文件位于Classes 文件夹
3.  包含cocos2d-x 应用的基本范例,用户应用类可以参照此类创建

功能:

1.  创建场景CreateScene()
2.  创建背景层:Create()/CREATE\_FUNC()
3.  创建用户应用Linit()

# 坐标 #

1.  opengl坐标: (与世界坐标方向一致)  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 3]
2.  屏幕坐标:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 4]  
**注意**:屏幕触摸shijianTouch 传入的位置信息使用的是屏幕坐标,因此在使用触摸事件前,需要将触摸点坐标转为OpenGL坐标系,通过Director的convertRoGL方法变换  
cocos-2dx 3.x 版本,可直接调用Touch 的getLocation 世界获得坐标,不需要转换

1.  锚点AnchorPoint(需要注意理解)  
    个人将其理解为是质点,将一个物体投射到宽为1的正方形中,左下角为原点,向上为y,向右为x  
    则锚点(0,0 ) 表示是原图形的左下角那一点  
    (0.5,0.5) 表示原图形中央.  
    在进行setPostion 时,其实是将图形的位置抽象成那个锚点来计算  
    比如setPostion(100,110)  
    锚点为(0.5,0.5)  
    那么最终锚点在屏幕中的位置是(100,110)  
    图案的其他部分相对锚点平移过来显示  
    举例说明:  
    以下代码是为了将人物**放置在屏幕靠右1/5**,**高度居中**的位置

//替换init方法中的代码
      if ( !Layer::init() )
        { 
            return false;
        }
      /* auto rootNode = CSLoader::createNode("MainScene.csb"); addChild(rootNode);*/
    	Size visibleSize = Director::getInstance()->getVisibleSize();//获取试图区域尺寸
    	Vec2 origin = Director::getInstance()->getVisibleOrigin();// 获取原点位置
    	auto bgNode= Sprite::create("Background.jpg");
    	 背景图锚点选取左下角
    	bgNode->setAnchorPoint(Vec2(0, 0));
    	addChild(bgNode);
    
    	auto eraNode = Sprite::create("ERA.png");
    	//bgNode->setPosition(origin.x+visibleSize.width/2,origin.y);
    	// 八路的锚点选取中间
    	eraNode->setAnchorPoint(Vec2(0.5, 0.5));
    	eraNode->setPosition(origin.x + 4 * visibleSize.width / 5, origin.y + visibleSize.height/ 2);
        addChild(eraNode);
    
        return true;

效果:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 5]锚点更改:

eraNode->setAnchorPoint(Vec2(0,0));// 锚点取人物的左下角

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 6]观察发现:  
eraNode->setPosition(origin.x + 4 \* visibleSize.width / 5, origin.y + visibleSize.height/ 2);  
这行设置位置的代码是同样的,不同的是锚点的设置不一样  
表可以看出,两幅图中角色的锚点还是在窗口的同一位置,也就是说**设置位置,其实是在设置锚点**在显示区域中的位置!!(锚点默认设置是(0.5,0.5))

**注意**:图片资源文件应该放在项目文件下的Resources\\res 下,如果不行,请把文件放在Resources 下(我的只能放在res下,原因是由于AppDelegate 中读取资源时是指明了资源文件夹是res)

bool AppDelegate::applicationDidFinishLaunching(){ 
    ... 
    
        FileUtils::getInstance()->addSearchPath("res");
    ...
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 7]

[https_pan.baidu.com_s_1jWsNOZySCK3iF7qXaHYGRw]: https://pan.baidu.com/s/1jWsNOZySCK3iF7qXaHYGRw
[20190308194845163.png]: /images/20220311/dcb85b095bfc4ca4bfe22667aae23fa8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70]: /images/20220311/d0c60b8aa07c4779aaec865b7b6c988d.png
[20190308195219737.png]: /images/20220311/c3e976d044814470a125fdd452de181f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 1]: /images/20220311/90fb7f9434e04d1f986afcbfccda1ffb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 2]: /images/20220311/9c3d709381cd4682a0858aab6f5ab29b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 3]: /images/20220311/517d627388e848b8846d5d7ea3446dca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 4]: /images/20220311/48cd41a776ad4db59580a0738805b576.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 5]: /images/20220311/5e2471f3f080405690bb5056cb020221.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 6]: /images/20220311/acf343539675463898c30219c755d60c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 7]: /images/20220311/835ce984871a45248c4d843415c9d27a.png