《入门级-Cocos2dx4.0 塔防游戏开发》---第七课：游戏界面开发（自定义Layer）

目录

 一、开发环境

二、开发内容

2.1 添加资源文件

2.2 游戏MenuLayer开发

2.3 GameLayer开发

三、演示效果

四、知识点

4.1 sprite、layer、scene区别

4.2 setAnchorPoint

 一、开发环境

操作系统：UOS1060专业版本。

cocos2dx:版本4.0

环境搭建教程：统信UOS下配置安装cocos2dx开发环境

本课主要内容：

  1. 自定义Layer开发
  2. 游戏餐单按钮相关开发

文章地址:

二、开发内容

我们把开发游戏的menu相关元素放在一个Layer进行处理。

新建Layer目录，在其中新建文件GameLayer.h、GameLayer.cpp、GameMenuLayer.h、GameMenuLayer.cpp。

GameLayer:用于管理游戏相关内容。

GameMenuLayer：用于管理游戏餐单相关内容。

2.1 添加资源文件

前面的文章其实已经提到我们可以在LoadingScene.cpp中先加载资源，等到我们使用的时候可以直接通过资源的名字获取该资源信息。

在loadSource函数添加以下内容：

    SpriteFrameCache::getInstance()->addSpriteFramesWithFile("map_spritesheet_32-hd.plist");SpriteFrameCache::getInstance()->addSpriteFramesWithFile("map_spritesheet_32_2-hd.plist");SpriteFrameCache::getInstance()->addSpriteFramesWithFile("map_spritesheet_16_na-hd.plist");

注意需要将对应的plist文件以及png图片拷贝到Resources目录中。否则精灵在创建是需要通过名称获取图片获取不到而导致程序崩溃。

2.2 游戏MenuLayer开发

GameMenuLayer.h文件内容代码如下：

#ifndef __LAYER_GAME_MENU_LAYER_H__
#define __LAYER_GAME_MENU_LAYER_H__#include "cocos2d.h"
USING_NS_CC;class GameMenuLayer : public Layer
{
public:virtual bool init();// implement the "static create()" method manuallyCREATE_FUNC(GameMenuLayer)MenuItemSprite *book_,*shop_,*update_;Sprite * sprite_map_stars_container_;Label * lable_star_,*lable_diamonds_;bool isFirst;void touchBook(Ref *pSender);void touchShop(Ref *pSender);void touchUpdate(Ref *pSender);void onEnterTransitionDidFinish();};#endif // __LAYER_GAME_LAYER_H__

GameMenuLayer.cpp文件内容代码如下：
#include "GameMenuLayer.h"// on "init" you need to initialize your instance
bool GameMenuLayer::init()
{//// 1. super init firstif ( !Layer::init() ){return false;}isFirst =  true;// 获取窗口大小auto winSize = Director::getInstance()->getWinSize();// 商店精灵shop_ = MenuItemSprite::create(Sprite::createWithSpriteFrameName("butShop_0001.png"),Sprite::createWithSpriteFrameName("butShop_0002.png"),CC_CALLBACK_1(GameMenuLayer::touchShop,this));// 百科全书精灵book_ = MenuItemSprite::create(Sprite::createWithSpriteFrameName("butEncyclopedia_0001.png"),Sprite::createWithSpriteFrameName("butEncyclopedia_0002.png"),CC_CALLBACK_1(GameMenuLayer::touchBook,this));// 升级精灵update_ = MenuItemSprite::create(Sprite::createWithSpriteFrameName("butUpgrades_0001.png"),Sprite::createWithSpriteFrameName("butUpgrades_0002.png"),CC_CALLBACK_1(GameMenuLayer::touchUpdate,this));book_->setPosition(Point(winSize.width - book_->getContentSize().width/2,book_->getContentSize().height/2 -130));update_->setPosition(Point(book_->getPosition().x - 160 , update_->getContentSize().height/2-130));shop_->setPosition(Point(update_->getPosition().x - 160 , shop_->getContentSize().height/2-130));auto menu = Menu::create(shop_,update_,book_,nullptr);menu->setPosition(Vec2::ZERO);addChild(menu);sprite_map_stars_container_ = Sprite::createWithSpriteFrameName("mapStarsContainer.png");sprite_map_stars_container_->setPosition(Point(winSize.width - sprite_map_stars_container_->getContentSize().width/2 - 10,winSize.height - sprite_map_stars_container_->getContentSize().height/2 + 60));addChild(sprite_map_stars_container_);// 星星的数量lable_star_ = Label::createWithTTF("0","SohoGothicProMedium.ttf",26);lable_star_->setPosition(Point(sprite_map_stars_container_->getContentSize().width/4*3 + 20,sprite_map_stars_container_->getContentSize().height/2));sprite_map_stars_container_->addChild(lable_star_);// 砖石的数量lable_diamonds_  = Label::createWithTTF("0","SohoGothicProMedium.ttf",26);lable_diamonds_->setPosition(Point(sprite_map_stars_container_->getContentSize().width/4,sprite_map_stars_container_->getContentSize().height/2));sprite_map_stars_container_->addChild(lable_diamonds_);return true;
}void GameMenuLayer::touchBook(Ref *pSender)
{}void GameMenuLayer::touchShop(Ref *pSender)
{}void GameMenuLayer::touchUpdate(Ref *pSender)
{}void GameMenuLayer::onEnterTransitionDidFinish()
{if(isFirst){book_->runAction(MoveBy::create(0.3f,Point(0,130)));update_->runAction(MoveBy::create(0.3f,Point(0,130)));shop_->runAction(MoveBy::create(0.3f,Point(0,130)));sprite_map_stars_container_->runAction(MoveBy::create(0.3f,Point(0,-70)));isFirst = false;}
}

2.3 GameLayer开发

其实GamelLayer添加了GameMenuLayer，并并且添加了一个背景就没啥了。


#ifndef __LAYER_GAME_LAYER_H__
#define __LAYER_GAME_LAYER_H__#include "cocos2d.h"
USING_NS_CC;class GameLayer : public Layer
{
public:static cocos2d::Scene* createScene();virtual bool init();// implement the "static create()" method manuallyCREATE_FUNC(GameLayer)Size win_size_;Sprite *sprite_background_;
};#endif // __LAYER_GAME_LAYER_H__

内容如下：

#include "GameLayer.h"
#include "GameMenuLayer.h"
USING_NS_CC;Scene* GameLayer::createScene()
{auto scene = Scene::create();auto game_layer = GameLayer::create();auto game_menu_layer = GameMenuLayer::create();scene->addChild(game_layer);scene->addChild(game_menu_layer);return scene;
}// on "init" you need to initialize your instance
bool GameLayer::init()
{//// 1. super init firstif ( !Layer::init() ){return false;}win_size_ = Director::getInstance()->getWinSize();sprite_background_ = Sprite::createWithSpriteFrameName("MapBackground.png");sprite_background_->setAnchorPoint(Vec2::ZERO);sprite_background_->setPosition(Vec2::ZERO);addChild(sprite_background_);return true;
}

三、演示效果

  

四、知识点

4.1 sprite、layer、scene区别

在 cocos2d-x 游戏引擎中，`Sprite`、`Layer` 和 `Scene` 都是用于构建游戏场景和图层的类，但它们在功能和用途上有一些区别。

1. Sprite（精灵）：

  •   `Sprite` 是游戏中可见的图像元素，通常用于表示游戏中的角色、物体、背景等。
  •   你可以将纹理（图像）加载到 `Sprite` 中，使其显示特定的图像。
  •   `Sprite` 可以进行位置、大小、旋转等的设置，还可以添加动画和事件监听器。
  •   用法示例：创建角色、敌人、道具、特效等可见的游戏元素。

2. Layer（图层）：

  •  `Layer` 是场景中的可视化图层，用于呈现游戏中的各种元素，如精灵、文本、UI 等。
  •   一个 `Layer` 通常是某种类型的视觉容器，可以用来组织和管理一组相关的游戏元素。
  •  `Layer` 可以添加到 `Scene` 中，一个 `Scene` 可以包含多个 `Layer`，从而实现图层的层次结构。
  •   用法示例：创建游戏界面、UI 图层、特效图层等。

3. Scene（场景）：

  •  `Scene` 是一个可视化的游戏场景容器，用于表示游戏中不同的画面、状态或关卡。
  • 一个 `Scene` 通常由多个 `Layer` 组成，每个 `Layer` 呈现不同的游戏元素。
  • `Scene` 可以管理场景之间的切换，实现从一个画面切换到另一个画面。
  • 用法示例：创建游戏的不同关卡、主菜单、游戏结束画面等。

区别总结：

  • `Sprite` 是游戏中的可见元素，用于表示角色、物体等。
  •  `Layer` 是图层容器，用于组织和呈现游戏元素。
  • `Scene` 是画面容器，用于管理不同画面之间的切换。

通常的开发实践是，一个游戏会有多个 `Scene`，每个 `Scene` 包含多个 `Layer`，而每个 `Layer` 中包含多个 `Sprite`。这样的层次结构可以帮助你有效地组织和管理游戏中的元素。

4.2 setAnchorPoint

`setAnchorPoint` 是 cocos2d-x 中 `Node` 类的成员函数之一，用于设置节点的锚点位置。锚点是节点相对于自身位置的一个点，影响了节点的定位和旋转。

节点的锚点是一个具有两个坐标值（x 和 y）的点，取值范围通常是从 0 到 1，表示节点的宽度和高度的相对比例。

示例用法：

auto sprite = Sprite::create("image.png");
sprite->setPosition(Vec2(200, 200)); // 设置节点的位置// 设置锚点为节点宽度的中心（x=0.5），高度的底部（y=0）
sprite->setAnchorPoint(Vec2(0.5, 0.0));this->addChild(sprite);

在上述示例中，`setAnchorPoint` 函数被用来设置精灵节点的锚点位置。在这个例子中，锚点被设置在精灵的底部中心，这意味着节点的位置 `(200, 200)` 将会指向精灵底部中心，而不是默认的左下角。

通过调整锚点，你可以更好地控制节点的旋转、缩放和定位行为。需要注意的是，节点的位置和锚点相互作用，所以改变锚点可能会导致节点的位置发生变化。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/55866.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

2.3.Dubbo的基本应用- 异步调用 、泛化调用 、动态配置

2.3.Dubbo的基本应用- 异步调用 、泛化调用 、动态配置

异步调用 官网地址： http://dubbo.apache.org/zh/docs/v2.7/user/examples/async-call/ 理解起来比较容易， 主要要理解CompletableFuture， 如果不理解， 就直接把它理解为Future 其他异步调用方式：Dubbo 同步调用太慢&a…
阅读更多...
web、HTTP协议

web、HTTP协议

目录 一、Web基础 1.1 HTML概述 1.1.1 HTML的文件结构 1.2 HTML中的部分基本标签 二.HTTP协议 2.1.http概念 2.2.HTTP协议版本 2.3.http请求方法 2.4.HTTP请求访问的完整过程 2.5.http状态码 2.6.http请求报文和响应报文 2.7.HTTP连接优化 三.httpd介绍 3.1.http…
阅读更多...
RK3399平台开发系列讲解（存储篇）Linux 存储系统的 I/O 栈

RK3399平台开发系列讲解（存储篇）Linux 存储系统的 I/O 栈

平台内核版本安卓版本RK3399Linux4.4Android7.1🚀返回专栏总目录 文章目录 一、Linux 存储系统全景二、Linux 存储系统的缓存沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇将介绍 Linux 存储系统的 I/O 原理。 一、Linux 存储系统全景 我们可以把 Linux 存储系…
阅读更多...
JUC并发编程(一)

JUC并发编程(一)

JUC并发编程 1. 查看进程和线程的方法1.1 Windows1.2 Linux 1. 查看进程和线程的方法 1.1 Windows 任务管理器可以查看进程和线程数&#xff0c;也可以用来杀死进程tasklist 查看进程taskkill 杀死进程 1.2 Linux ps -fe 查看所有进程ps -fT -p <PID> 查看某个进程&a…
阅读更多...
10*1000【2】

10*1000【2】

知识: -----------金融科技背后的技术---------------- -------------三个数字化趋势 1.数据爆炸&#xff1a;internet of everything&#xff08;iot&#xff09;&#xff1b;实时贡献数据&#xff1b;公有云服务->提供了灵活的计算和存储。 2.由计算能力驱动的&#x…
阅读更多...
【跟小嘉学 Rust 编程】十三、函数式语言特性：迭代器和闭包

【跟小嘉学 Rust 编程】十三、函数式语言特性：迭代器和闭包

系列文章目录 【跟小嘉学 Rust 编程】一、Rust 编程基础 【跟小嘉学 Rust 编程】二、Rust 包管理工具使用 【跟小嘉学 Rust 编程】三、Rust 的基本程序概念 【跟小嘉学 Rust 编程】四、理解 Rust 的所有权概念 【跟小嘉学 Rust 编程】五、使用结构体关联结构化数据 【跟小嘉学…
阅读更多...
Leetcode 191.位1的个数

Leetcode 191.位1的个数

编写一个函数&#xff0c;输入是一个无符号整数&#xff08;以二进制串的形式&#xff09;&#xff0c;返回其二进制表达式中数字位数为 1 的个数&#xff08;也被称为汉明重量&#xff09;。 提示&#xff1a; 请注意&#xff0c;在某些语言&#xff08;如 Java&#xff09;中…
阅读更多...
2023/08/27

2023/08/27

一、图片引入 项目中往往不使用相对路径引入文件&#xff0c;一般都使用实现绝对路径引入文件。 方式一&#xff1a;【适用vue2&#xff0c;不适用vue3】 <img :src"require(/assets/images/home/bottom_can.png)" alt"">方式二&#xff1a;【适用…
阅读更多...
mac m1 docker 安装kafka和zookeeper

mac m1 docker 安装kafka和zookeeper

获取本地ip地址 ifconfig en0 192.168.0.105. 下面的ip都会使用到 1、拉取镜像 docker pull wurstmeister/zookeeper docker pull wurstmeister/kafka 2、启动容器 启动 zookeeper docker run -d --name zookeeper -p 2181:2181 映射 3、 启动 kafka 注意&#xff…
阅读更多...
计网-All

计网-All

路由器的功能与路由表的查看_路由器路由表_傻傻小猪哈哈的博客-CSDN博客路由基础-直连路由、静态路由与动态路由的概念_MikeVane-bb的博客-CSDN博客路由器的功能与路由表的查看_路由器路由表_傻傻小猪哈哈的博客-CSDN博客 直连路由就是路由器直接连了一个网段&#xff0c;他就…
阅读更多...
一个短视频去水印小程序，附源码

一个短视频去水印小程序，附源码

闲来无事&#xff0c;开发了一个短视频去水印小程序&#xff0c;目前支持抖音、快手&#xff0c;后续再加上别的平台。 因为平台原因&#xff0c;就不放二维码了&#xff0c;你可以直接微信搜索【万能老助手】这里贴一张效果图。 页面非常简单&#xff0c;这里就不过多介绍了&…
阅读更多...
Git企业开发控制理论和实操-从入门到深入（五）｜标签管理

Git企业开发控制理论和实操-从入门到深入（五）｜标签管理

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总 然后就是博主最近最花时间的一个专栏…
阅读更多...
正则表达式总结

正则表达式总结

作为软件工程师&#xff0c;工作中经常都需要使用正则表达式进行搜索&#xff0c;替换&#xff0c;验证数据&#xff08;手机号、邮箱、账号&#xff09;等。 但没有系统的学习总结过。现在就来学习总结一下。 认识元字符 元字符就是一些特殊符号&#xff0c;代表一些特殊意思…
阅读更多...
初始Netty

初始Netty

文章目录 目录 文章目录 前言 一、netty 总结 前言 认识netty 一、netty Netty是一个基于Java的高性能网络应用框架&#xff0c;用于快速开发可扩展的网络服务器和客户端。它提供了易于使用的抽象API&#xff0c;使开发人员能够轻松地构建各种网络应用程序&#xff0c;包括…
阅读更多...
JavaScript基础语法

JavaScript基础语法

一、JavaScript编写方式 位置一&#xff1a;HTML代码行内&#xff08;不推荐&#xff09; <!-- 方式一&#xff1a;行内编写 --> <a href"javascript:alert(hello world)">hello world</a> <!-- 方式二&#xff1a;行内编写&#xff0c;通过监…
阅读更多...
学信息系统项目管理师第4版系列03_文件与标准

学信息系统项目管理师第4版系列03_文件与标准

审核未通过&#xff0c;删除文件部分&#xff0c;仅保留标准化相关内容&#xff0c;重发 12. 标准化 12.1. 采用国际标准和国外先进标准的程度分为等同采用、修改采用和等效采用 3 种 12.1.1. 【高21上选20】 12.1.2. 采用指与国际标准在技术内容和文本结构上相同,或者与国…
阅读更多...
期权是什么?期权的优缺点是什么?

期权是什么?期权的优缺点是什么?

期权是一种合约&#xff0c;有看涨期权和看跌期权两种类型&#xff0c;也就是做多和做空两个方向&#xff0c;走势标的物对应大盘指数&#xff0c;这也是期权与其他金融工具的主要区别之一&#xff0c;可以用于套利&#xff0c;对冲股票和激进下跌的风险&#xff0c;下文介绍期…
阅读更多...
DML语句的用法（MySQL）

DML语句的用法（MySQL）

文章目录 前言一、DML介绍二、DML语句操作1、给指定字段添加数据2、给全部字段添加数据3、批量添加数据4、修改数据5、删除数据 总结 前言 本文主要介绍SQL语句中DML语句的用法。 在实验开始之前我们先创建一下所要使用表&#xff0c;如下图所示&#xff1a; 一、DML介绍 DM…
阅读更多...
Modbus转Profinet网关连接三菱变频器博图快速配置

Modbus转Profinet网关连接三菱变频器博图快速配置

本案例将分享如何使用兴达易控的modbus转profinet网关&#xff08;XD-MDPN100&#xff09;来连接西门子1200系列plc&#xff0c;并实现三菱变频器的485通讯兼容转modbusTCP通信。通过在博图中进行配置&#xff0c;我们可以实现设备之间的连接和通信。 首先&#xff0c;我们需要…
阅读更多...
Vue自定义指令- v-loading封装

Vue自定义指令- v-loading封装

Vue自定义指令- v-loading封装 文章目录 Vue自定义指令- v-loading封装01-自定义指令自定义指令的两种注册语法&#xff1a; 02自定义指令的值03-自定义指令- v-loading指令封装 01-自定义指令 什么是自定义指令&#xff1f; 自定义指令&#xff1a;自己定义的指令&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023