Cocos2d-x 基础元素

 Cocos2d-x  基础元素

看过本章,然后实践之后,应该会掌握以下的认识:

1、Cocos2d-x引擎的基本运转过程

2、Cocos2d-x引擎的一些初始设置

3、对导演及图层及现实对象的认识

4、如何定义自己的显示对象

1.引擎的运转

游戏设计的问题: 在游戏设计之初,我们就需要设置游戏是横屏的还是竖屏的。 展示图像的清晰度是多少? 帧数? 适配哪些屏幕?

在处理以上问题之前,我们需要了解引擎的运转是怎么样的? (以后补充)

关于XCode设置游戏屏幕竖屏的方式:

2.显示对象

每一个节点对象都继承一个node节点对象。包含了设置节点对象的位置,旋转角度,缩放,锚点以及管理子对象的功能。

导演Director是单例类,是cocos2d的引擎的核心
Scene的切换由导演来处理。
在Cocos2d工程中的Resources文件夹下是放置图片、字体等资源的地方。

场景:scene,包含多个层
层:layer,包含多个精灵
精灵:Sprite

先删除掉官方的部分代码,保留下面的部分

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();

    return true;
}

然后把,需要的图片文件拷贝进工程中的Resources文件夹里

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }

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

    //1、创建一个精灵对象,并且绑定到资源图片文件
    auto logo = Sprite::create("logo.png");
    //2、设置精灵的大致位置
    logo->setPosition(visibleSize/2);
    //3、添加到场景中
    addChild(logo);

    return true;
}

其实我们不这么添加显示图片精灵,我们可以这样:

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }

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

    //1、先通过导演类获取纹理对象,然后通过纹理对象的添加图片方法
    auto img = Director::getInstance()->getTextureCache()->addImage("logo2.png");
    //2、获取纹理图片的尺寸
    auto logoSize = img->getContentSize();
    CCLOG("logo size:%f %f",logoSize.width,logoSize.height);
    //3、通过精灵类的加载纹理的方法创建精灵对象
    auto logo = Sprite::createWithTexture(img);
    logo->setPosition(visibleSize/2);
    //4、添加到场景中
    addChild(logo);

    return true;
}

下面通过layer图层对象调用添加加载好的三张图片

// on "init" you need to initialize your instance
bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }

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

    auto layer1 = Layer::create();
    auto layer2 = Layer::create();
    auto layer3 = Layer::create();

    auto img1 = Sprite::create("layer1.png");
    auto img2 = Sprite::create("layer2.png");
    auto img3 = Sprite::create("layer3.png");
    img1->setAnchorPoint(Vec2(0, 0));
    img2->setAnchorPoint(Vec2(0, 0));
    img3->setAnchorPoint(Vec2(0, 0));

    layer1->addChild(img1);
    layer2->addChild(img2);
    layer3->addChild(img3);
    addChild(layer1);
    addChild(layer2);
    addChild(layer3);

    layer1->setPosition(Vec2(0, 20));
    layer2->setPosition(Vec2(50, 60));
    layer3->setPosition(Vec2(100, 100));

    return true;
}

这里有一个问题:6s的苹果手机可能坐标系统变化了。 最后我们通过一种方式切换场景:

// on "init" you need to initialize your instance
bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }

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

    auto layer1 = Layer::create();
    auto layer2 = Layer::create();
    auto layer3 = Layer::create();

    auto img1 = Sprite::create("layer1.png");
    auto img2 = Sprite::create("layer2.png");
    auto img3 = Sprite::create("layer3.png");
    img1->setAnchorPoint(Vec2(0, 0));
    img2->setAnchorPoint(Vec2(0, 0));
    img3->setAnchorPoint(Vec2(0, 0));

    layer1->addChild(img1);
    layer2->addChild(img2);
    layer3->addChild(img3);
    addChild(layer1);
    addChild(layer2);
    addChild(layer3);

    layer1->setPosition(Vec2(0, 20));
    layer2->setPosition(Vec2(50, 60));
    layer3->setPosition(Vec2(100, 100));

    //需要计时器时间表切换layer
    schedule([visibleSize,this](float f){
        auto scene2 = Scene::create();
        auto scene2Layer=Layer::create();
        scene2->addChild(scene2Layer);

        auto logo= Sprite::create("logo2.png");
        logo->setPosition(visibleSize/2);
        scene2Layer->addChild(logo);

        Director::getInstance()->replaceScene(scene2);
    }, 3, "test");

    return true;
}

3.自定义显示对象

首先定义一个继承于Node的最基本的显示对象。 首先创建一个C++ File 的C++类,取名LogoNode,然后就有了LogoNode.h和LogoNode.cpp文件,因为需要使用cocos引擎,所以要在h文件中导入 include “cocos2d.h”,并且要导入它的命名空间,直接另一行写:USINGNSCC,

然后在LogoNode.cpp中完成头文件中public声明的方法

 #include "LogoNode.hpp"

//    1、构造函数主要目的是对刚刚两个成员变量进行初始化
LogoNode::LogoNode():_logo(nullptr),_cocoslogo(nullptr)
{

}
//    2、虚函数的析构函数则没有实现
LogoNode::~LogoNode(){

}

//    3、然后需要一个虚构函数的并且返回的是bool值得初始化函数
bool LogoNode::init(){
//    4、如果创建失败了,就停止创建
    if (!Node::init()) {
        return false
    }
//    5、创建Logo
    _logo = Sprite::create("logo.png");
    _cocoslogl = Sprite::create("logo2.png");

//    6、添加到显示列表,也就是当前的node中
    addChild(_logo);
    addChild(_cocoslogl);

    _cocoslogl->setVisible(false);

//    添加一个计时器
    schedule([this](float f){
        _logo->setVisible(!_logo->isVisible());
        _cocoslogl->setVisible(!_logo->isVisible());
    }, 1, "test");

    return true;
}

然后新建一个场景类,GameScene.hpp和GameScene.cpp文件,

GameScene.hpp代码如下:
 #ifndef GameScene_hpp
 #define GameScene_hpp

 #include <stdio.h>
 #include "cocos2d.h"

USING_NS_CC;

class GameScene:public Layer{
public:
    GameScene();
    virtual ~GameScene();
    virtual bool init();
    CREATE_FUNC(GameScene);
    static Scene* createScene();
};

 #endif /* GameScene_hpp */
 

GameScene.cpp代码如下:


 #include "GameScene.hpp"
 #include "LogoNode.hpp"
GameScene::GameScene()
{

}
GameScene::~GameScene()
{

}
bool GameScene::init()
{
    if (!Layer::init()) {
        return false;
    }
    auto logo = LogoNode::create();
    addChild(logo);

    //将logo设置在居中的位置
    logo->setPosition(Director::getInstance()->getVisibleSize()/2);

    return true;
}
Scene* GameScene::createScene()
{
    //创建一个空的场景
    auto scene = Scene::create();
    auto layer = GameScene::create();

    scene->addChild(layer);

    return scene;
}

最后我们回到AppDelegate.cpp文件中: 首先添加

#include "GameScene.hpp"

然后将后面之前的

// create a scene. it‘s an autorelease object
auto scene = HelloWorld::createScene();

改为

auto scene = GameScene::createScene();
时间: 2024-12-28 11:29:25

Cocos2d-x 基础元素的相关文章

探索基础元素---基于WebGL的H5 3D游戏引擎BabylonJS

介绍 在本教程, 我们将学习如何使用Babylon.js创建基础元素, 比如盒子, 球体, 和平面. 娱乐场演示场景2 - 七个基本形状/网格 我怎么做到这个 ? 一个简单的方法是通过访问娱乐场演示场景 02来开始使用基础元素. 你可能想使用弹出菜单的'下载.zip压缩包' 选项. 你得到的zip压缩包里的index.html文件,包含有你开始创建基础元素所需的一切. 记住那个链接, 因为我们将更多的谈论到它. 我确定你已经读过Babylon.js初级教程 和 先前的教程, 因此你应该知道如何设

《ICECSS入门指南》第二章 使用方法和基础元素

使用ICECSS 首先你需要到 https://github.com/T-baby/ICECSS 上下载最新版本的包. 我们下载后可以看到这样一个文件结构,docs是文档,css中包含了普通版.压缩版.Less版三个版本的CSS文件,font是图标字体,html文件夹里存放了两个例子,同时也是建议大家在开发时将html文件放在html文件夹中.img下存放着图片ICECSS所需的两个图片和一个例子用的logo. 为了大家使用方便,在JS文件夹中不仅有ICECSS的JS还附带了Jquery和Les

Ansible的基础元素和YAML介绍

本节内容: YAML Ansible常用的数据类型 Ansible基础元素 一.YAML 1. YAML介绍 YAML是一个可读性高的用来表达资料序列的格式.YAML参考了其他多种语言,包括:XML.C语言.Python.Perl以及电子邮件格式RFC2822等.Clark Evans在2001年在首次发表了这种语言,另外Ingy d?t Net与Oren Ben-Kiki也是这语言的共同设计者. YAML Ain't Markup Language,即YAML不是XML.不过,在开发的这种语言

Ansible自动化运维之YAML、基础元素

YAML介绍 YAML是一个可读性高的用来表达资料序列的格式.YAML参考了其他多种语言,包括:XML.C语言.Python.Perl等.YAML不是XML,不过,在开发的这种语言时,YAML的意思其实是:"Yet Another Makup Language"(仍是一种标记语言) 特点: 1:具有很好的可读性,易于实现.2:表达能力强,扩展性好.3:和脚本语言的交互性好.4:有一个一致的信息模型.5:可以基于流来处理 YAML语法: YAML的语法和其他高阶语言类似,并且可以简单表达

自动化运维系列之Ansible的YAML、基础元素介绍

自动化运维系列之Ansible的YAML.基础元素介绍 YAML简介 YAML是一种用来表达资料序列的格式.YAML是YAML Ain't Markup Lanaguage的缩写,即YAML不是XML. 特点 1.具有很好的可读性,易于实现: 2.表达能力强,扩展性好: 3.和脚本语言的交互性好: 4.有一个一致的信息模型: 5.可以基于流来处理. YAML语法 YAML的语法和其他语言类似,也可以表达散列表.标量等数据结构. YAML结构通过空格来展示:序列里的项用"-"来代表:Ma

自动化运维工具 Ansible ——YAML、基础元素

YAML 的介绍 YAML是一个可读性高的用来表达资料序列的格式.YAML参考了其他多种语言,包括:XML.C语言.Python.Perl等.YAML不是XML,不过,在开发的这种语言时,YAML的意思其实是:"Yet Another Makup Language"(仍是一种标记语言) YAML 的特点 1:具有很好的可读性,易于实现.2:表达能力强,扩展性好.3:和脚本语言的交互性好.4:有一个一致的信息模型.5:可以基于流来处理. YAML 的语法 YAML的语法和其他高阶语言类似

Web UI自动化测试基础——元素定位(二)

本篇文章整理了元素定位的基础知识——多个元素定位方式. 一.多个元素定位方式简介 同单个元素定位方式相同,多个元素定位方式也有与之对应的8种方式,即id.name.class_name.tag_name.link_text.partial_link_text.xpath和css_selector.不同的是方法名中element需要写成复数形式.多个元素定位得到的结果通常是一个列表类型,可以通过索引方式访问具体元素. 二.实例 以百度首页为例,通过find_elements_by_tag_name

AngularJS的基础元素应用

<!doctype html> <!-- 标记ng-app告诉AngularJS处理整个HTML页并引导应用 --> <html ng-app> <head> <meta charset="UTF-8"> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> <script src=&quo

游戏基础元素之精灵——Cocos2d-x学习历程(九)

1.创建精灵 在实际使用中,精灵是由一个纹理创建的.在不加任何设置的情况下,精灵就是一张显示在屏幕上的图片.通常精灵置于层下,因此我们首选在层的初始化方法中创建精灵,设置属性,并添加到层中. 有多种方式可以创建精灵: (1)直接创建 auto sprite = Sprite::create("HelloWorld.png");this->addChild(sprite,0); (2)使用纹理来创建精灵 auto sprite1 = Sprite::createWithTextur