html5游戏开发:cocos v2.2.5支持3D控件扩展

时间:2019-05-12 16:46:03下载本文作者:会员上传
简介:写写帮文库小编为你整理了多篇相关的《html5游戏开发:cocos v2.2.5支持3D控件扩展》,但愿对你工作学习有帮助,当然你在写写帮文库还可以找到更多《html5游戏开发:cocos v2.2.5支持3D控件扩展》。

第一篇:html5游戏开发:cocos v2.2.5支持3D控件扩展

html5游戏开发:cocos v2.2.5支持3D控件扩展

html5游戏开发版本的推陈出新,产品不断优化,归根结底,是为了更好的服务于用户。

近日,触控科技发布了最新一代的cocos v2.2.5游戏开发一站式解决方案,其中html5游戏开发备受行业关注的3D功能也迎来了一个里程碑似的变化--支持了3D控件扩展功能!之前cocos v2.2.1版本推出的自定义控件扩展功能广受好评,同时开发者们也对cocos的3D扩展充满了期待。而现在3D扩展功能正式推出了!能够对3D控件进行自定义扩展,这无疑大幅提高了cocos 3D场景编辑的灵活性、全面性!

随着新版本cocos的发布,全新cocos v2.2.5不但优化了新建项目流程,还增加了一键发布到手机、资源面板文件支持复制粘贴等功能,使得cocos整体工具链的易用性得到了大幅度的提升。

html5游戏开发一键部署到手机,方便调试

Cocos v2.2.5可以将Cocos Studio编辑的场景UI直接发布到手机上,查看运行效果。设计人员可以直观的看到自己所设计的界面在手机上的运行状态,而无需顾虑UI界面在手机上的效果差距等问题;编程人员可以在手机上调试项目,方便更加直观的对项目进行调整;而测试人员同样也可以在手机上对项目进行直观的测试,效率有效提升。总体上看,一键发布到手机,让团队之间依赖性得到解耦,降低沟通成本,减少返工次数。

html5游戏开发支持3D控件扩展

支持3D控件扩展是本次更新中最重磅的消息。之前在cocos春季开发者大会中,公布了cocos支持自定义控件功能后,大会现场瞬间沸腾,各种惊叹与兴奋的声音随之而来。同时一个疑问也产生了,3D支持扩展么?现在,可以肯定的回复--3D支持扩展了!开发者只需经过几个简单的步骤即可轻松自定义一个简单的3D扩展控件,亦可通过编写C#代码来自定义一个高级的3D控件。

新建项目流程,创建项目更加方便快捷

除了以上闪亮的功能外,html5游戏开发cocos v2.2.5的开发团队,从开发者的角度出发,做了更多细节性的优化,比如:资源面板文件支持复制粘贴;文本控件增加描边、阴影属性、取色器面板支持颜色历史记录;结构树下图层的属性可批量操作……是不是很贴心,还有哦!cocos v2.2.5支持双击嵌套的节点,可以打开并编辑该文件;属性栏标示出所有可以作为动画帧的属性;支持快捷键(Shift + Q/W/T/B)控制调整对象的渲染层级……

此次html5游戏开发cocos v2.2.5的更新,在原来cocos v2.2.1的基础上,从细节出发,优化创新。在维持原有功能的情况下,做出更多的优化调整,让开发者可以随心所欲的调整UI布局,方便管理UI资源。

html5游戏开发Cocos v2.2.5更新说明:

【新增】一键部署并运行App在iOS、Android、win32、Mac以及浏览器平台上

【新增】JS项目可以打包成HTML5 App 【新增】支持3D控件扩展

【新增】资源面板csd文件支持拷贝操作,快捷键为Ctrl/Command+D 【新增】双击嵌套的csd文件, 直接进入编辑状态

【新增】文本控件增加描边、阴影属性设置(Cocos2d-x 3.6支持解析)【新增】动画缓动设置。(Cocos2d-x 3.6支持解析)【新增】精灵控件,粒子控件blending功能。(Cocos2d-x 3.6支持解析)

【新增】取色器面板支持颜色历史记录

【新增】多选结构树节点,可批量操作显示与锁定 【优化】完整项目与资源项目整合为cocos项目,简化创建项目流程

【优化】资源项目可以升级为完整项目 【优化】整合打包与发布项目

【优化】支持快捷键(Shift + Q/W/T/B)控制调整对象的渲染层级

【优化】创建序列帧动画,增加“是否追加第一帧为最后一帧”选项,可方便的创建循环的序列帧动画

【优化】去掉节点不可以重名的判断

【优化】九宫格参数可以更直观的通过拖动的方式进行设置 【优化】给控件设置资源,控件的尺寸将默认设置为资源的尺寸 【优化】3D网格参考线显示 【优化】整合发布与打包界面

【修复】导入1.6 UI项目只改变结构树显示,不改变控件可见性,导致模拟器里面仍然显示的问题

【修复】ScrollView Area大小受content size限制的问题

第二篇:如何开发网页3D游戏

如何开发网页3D游戏

2013-03-20 22:02 129人阅读 评论(0)收藏 举报

最近在网上突然冒出了一款3D的网页游戏,因为它使得我对网页中一些招人诟病的问题有了新的认识,让我产生了想要研究一下的想法。

想要制作网页中的3d游戏,有这样几个技术问题是需要考虑的:

 网页插件实现

用户安装插件是否有阻碍

如何在插件中绘制3d图形

如何链接服务端

美术资源如何缓存

美术资源如何更新

浏览器兼容问题

本文就是来解答这些问题中的一部分,并且给出具体的实现方案。

ActiveX插件技术

目前浏览器的插件技术还是蛮多的,不过能够流行起来的不多。之前因为浏览器插件安全的问题,导致大部分人都对插件有十分的警惕。

ActiveX是微软提供的浏览器插件技术,wiki上的介绍:http://zh.wikipedia.org/wiki/ActiveX。我实在是难以搞清楚微软这些年来提供的几个技术之间的关系,OLE、ALT等,包括现在最新的.Net也是一样。要学习微软的这套框架,光理解其中的概念都需要花费非常多的时间,加上代码复杂,远不如开源技术来的直接和清晰。我这里使用的是VS2005,新建一个“MFC ActiveX控件”工程。

根据向导,它会自动帮你创建一个后缀名为OCX的插件的工程。要调试运行,需要修改下项目属性,改成“ActiveX控件测试容器”,如下图:

这是一个工具,专门用来加载ActiveX控件,每次调试打开这个界面后,还需要手工点击菜单:编辑->插入新控件,找到你创建的这个OCX插件。如果在弹出的列表里面没有你制作的这个插件,就需要重新编译下(编译的最后会重新注册一次控件,当然你也可以用regsvr32.exe或者其他工具来手工注册)。

当你插入过一次之后,记得保存一下,下次你就可以在文件菜单的最近打开里面找到你保存的这个会话。

到此为止,你就可以用MFC的那套框架随意的添加各种MFC提供的各种功能,比如窗口、消息、事件处理等等。如果你学过Direct3D或者OpenGL,那么完全有能力在这个空的MFC工程中添加上相关的代码,跑起你自己的Demo来。

整合3D引擎:IrrLicht

本文的目标是开发3D游戏,自然不可能从图形API开始写起,我找来了IrrLicht这个开源的引擎,据我所知国内已经有由这个引擎开发的成功的商业项目了,那么也就是说是比较成熟了。关于引擎的介绍你可以访问官网:http://irrlicht.sourceforge.net/ 当前你也可以整合进其他的引擎,wiki:游戏引擎列表http://zh.wikipedia.org/wiki/%E6%B8%B8%E6%88%8F%E5%BC%95%E6%93%8E%E5%88%97%E8%A1%A8

IrrLicht引擎比较友好,编译过程中基本没遇到问题。切记,仔细的读一读文档和各个目录中的readme文件,这是程序员的一个好习惯。

我这里采用静态编译,正确编译后,在IrrLicht目录/bin/lib/下就会有对应不同编译器的目录,里面有编译好的lib文件。一般都会生成两个版本 Debug版:IrrLicht_d.lib,Release版:IrrLicht.lib。我会用不同的lib文件来编译我的不同版本的插件。

接下来再次配置插件的工程,这个很关键!在“C/C++”下面的“预处理器”属性页中,加入一个预处理器定义_IRR_STATIC_LIB_。

配置输入的静态链接库,给Debug和Release分别配置IrrLicht_d.lib和IrrLicht.lib(当然你需要在之前设置好VS2005的全局目录,保证这里IrrLicht.lib和IrrLicht_d.lib文件可以被找到):

然后根据IrrLicht的例子和文档,就可以在绘制控件的时候加入相关的代码,把3D图像绘制到MFC控件之中。在IrrLicht目录/Doc下面有引擎的文档,文档的第一页就有一个最短小的例子(很感叹IrrLicht的设计者,接口非常友好,而且跨平台)。

例子中的代码可以参考,但是无法用,因为这是在MFC的框架之中。MFC是消息驱动的,而一般的3D游戏都需要不断循环来推动图像的绘制。这就需要自己去解决这个绘制循环的问题。我这里参考了网上的一些方法,建立了一个死循环的线程,由这个线程来推动绘制。在我的工程中,我创建了一个叫做GameFrame的类,用来做游戏逻辑层和外部的结合层,这样游戏逻辑就无需知道自己运行在什么环境中了。游戏逻辑层的初始化和主循环的驱动,由GameFrame类的提供。

GameFrame类的结构,请看头文件:

Init和Update这两个接口是最基本的,里面的是游戏逻辑代码。外部通过调用setDc来设置DC和窗口句柄,在setDc中触发Init函数。并且,外部通过createUpdateThread来启动绘制循环,循环调用Update,驱动游戏逻辑。

制作测试用html页面 我这里暂时没有考虑兼容性问题,只是给出了一个简单的例子。(这部分内容足够我写一篇文章了,呵呵)

可以看到主要是用了 这个标签,里面关键的是定义了classid,这个id的具体内容,是你的控件的全局唯一ID,VS2005已经帮你自动生成好了,在项目名Ctrl.CPP这个文件的“初始化类工厂和 guid”下面。

如果你的插件注册好了,那么打开IE浏览器,就可以看到你所绘制的东西。

第三篇:3D视频游戏开发介绍笔摘

3D视频游戏开发介绍笔摘

2008年06月16日 星期一 11:46 微软专家的讲座

系列课程概要

• 3D游戏基本概念介绍 • 创建3D动态和静态物体 • 摄像机处理操作 • 游戏物体行为编程 • 背景处理和物体之间的碰撞 • 人工智能(AI)的编程 • 显示文本和抬头显示(HUD)• 菜单界面编程 • 添加灯光,音乐和音效

介绍

• 3D图像处理引擎完成3D图像处理过程 – 程序控制 – 几何变换 – 特效 – 等等

• 渲染是在3D场景中生成2D图像的处理过程

渲染处理

• 由两个主要部分组成 – 几何变换– 应用于顶点 – 三角形光栅化– 应用于像素点 • 固定功能管线 • 像素和顶点着色器

– 替代特定特效的固定功能管线

坐标系系统

• 用于描述物体位置和方向的空间 • 最简单的坐标系系统是笛卡尔平面

重要的3D几何学知识 • 3D物体由多边形组成

– 多边形由按照指定顺序描述的顶点集合组成 • 三角形是最简单的多边形

• 例如,使用三角形来描述一个立方体,那么每个面都需要使用2个三角 形 来描述,并且由于立方体一共有6个面,因此我们需要12个三角形来 描述一 个立方体 • 每个顶点包含: – x, y, z坐标值 – 颜色

– 用于计算灯光的法线 – 纹理坐标,通常是(u,v)

更多的3D几何信息

• 通过所有的变换,将顶点从物体局部坐标系变换到视口坐标系系统 •平移,旋转和缩放等变换操作通常使用矩阵来执行

• 在投影之后,每个顶点都在投影平面上有一个新的x和y值用于描述它的位置,同时还有一个描述深度的z值。• 在管线处理的最后阶段,将纹理填入到各个三角形或者表面当中

探究几种常用的坐标系系统 主要空间坐标系系统

物体坐标系系统

• 使用层次模型来表示由各个部分“装配”起来的物体 • 每个物体都有自己的坐标系

• 下面的图像显示了两个在它们自己的坐标系系统中所看到的正方体

世界坐标系系统

• 也被称为“全局坐标系系统”

• 所有对象实例都能够缩放,平移和旋转的空间 • 所有的几何体都在同一坐标系中,使用同一坐标系原点

• 下面的图像在世界坐标系系统中显示了两个绿色的立方体和一个红色的立方体的实例

摄像机坐标系系统

• 也被称为“参考坐标系系统”

• 指明在世界空间中的某一角度中任意放置的摄像机的位置,方向和方位的空间。• 所有物体的位置都根据摄像机的中心和方向重新变换 • 下图显示了摄像机在世界坐标系系统中从左侧观看物体

• 下图显示了从左侧摄像机坐标系系统,或者摄像机点中所看到的相同的场景。

• 下面的图像显示了在世界坐标系系统内摄像机从右侧观看世界的场景

• 下面的图像显示了在右侧摄像机坐标系系统内或者摄像机点中所看到的相同的场景

投影坐标系系统

• 也被称为“裁剪坐标系系统” • 由视图截锥和投影方法定义的空间 • 裁剪并且投影3D物体到2D视图平面

视口坐标系系统

• 在显示窗口中图像被实际绘制的矩形区域 • 由原点和窗口的延伸方向定义 • Z值通常被保留

• 有时候也被称作“2.5D”

• 对于渲染阶段的理解 3D处理管线

• 为了实现时间平行性 • 类似于装配线

• 通过将任务分割为一系列子任务来完成 • 子任务由特定的硬件来执行 • 各个处理阶段并发操作

• 连续的任务在子任务层面上重叠执行

3D图像处理管线

• 应用程序处理阶段通过软件在CPU中实现 • 几何变换和光栅化在GPU(图像处理单元)中实现

应用程序处理阶段 • 软件实现

• 游戏引擎:碰撞检测和响应,动画,AI,用户输入的读取和解析 • 准备GP所使用的图元,属性和相关函数 • 加速和优化非常重要

应用程序处理阶段组件 • 游戏逻辑 • 人工智能 • 动画物体 • 摄像机控制 • 剔除算法 • 碰撞检测和响应 • 游戏物理和动力学特性 • 几何运算库

游戏逻辑

• 控制游戏流和层级流 • 用户界面控制 • 输入/输出(I/O)处理 • 物体的导入和加载

人工智能 • 不可玩角色反应 • 不可玩角色行为 • 不可玩角色路径查找 • 脚本事件

动画物体 • 刚性物体 • 可变形物体 • 关节物体

摄像机控制 • 第一人称视角 • 第三人称视角

• 跟踪正在移动物体的路径

• 在不同的摄像机角度和方向之间内插数值(Quaternions)以提供合理的路径 • 重播

几何运算库 • 向量和矩阵操作 • 距离和角度测量 • 交集和包含运算 • 搜索和排序算法

剔除算法 • 背面剔除

– 如果一个绘制元素的法线方向背离视点观察方向,则该绘制元素必不可见 • 摄像机平截体内部的对象之间的遮挡测试

– 遮挡剔除:如果一个绘制元素被其他不透明绘制元素(组)所遮挡,则该绘制元素必不可见 • 空间分割

– 八叉树(Octree)– 二元空间分割树(BSP)• 潜在可见集合(PVS)• 层次细节(LOD)

游戏的物理和动力学特性 • 正向和反向运动

• 动力学逆过程(已知力求运动)• 刚体和柔体物体对象 • 碰撞检测和响应

几何处理阶段

几何变换

• 将3D的几何体变换到2D的屏幕上 • 在这个阶段不会产生任何绘制操作 – 完全的数学计算

• 由许多的坐标系系统和在这些系统之间相互转换的操作方法组成 – 矩阵运算

世界变换

• 将所有的物体转换为统一的全局坐标 • 由不同的模型组成并且通过世界变换创建 – 缩放 – 旋转 –平移 视图变换

• 转为从摄像机的角度看到的世界坐标系 • 设置摄像机位置和方向 – 设置注视点和参考点 • 设置灯光位置,方向和属性

• 以摄影机为原点,从原点到注视点为Z轴,再加上参考点,确定Y-Z平面,构成视图坐标系系统(VCS)• 创建无限的棱锥面 • 将场景从WCS变换为VCS

灯光和阴影

• 对每个顶点计算RGBA颜色数值 • 灯光模型方程应用于一组输入参数

• 使用顶点和像素着色器可以实现灵活的灯光处理

灯光 • 输入参数 • 顶点位置坐标 • 顶点法线坐标系 • 灯光源位置坐标

• 灯光源属性(点光,聚光灯,方向光)

• 表面材质属性(漫反射和环境光反射,散射,镜面反射)• 操作

• 物体颜色由光源和表面属性决定 • 为每个顶点计算法线向量 • 在每个顶点上应用照明模型

• 每个顶点都保存漫反射和环境光反射,散射和镜面反射颜色

透视转换 • 介绍前后裁剪面

• 将无限的视图棱锥体截为有限的视图截锥

• 将VCS场景转换为齐次剪裁坐标系系统(CCS, 视口坐标系系统的另一个名字– 2.5D)• 将有限的视窗体扭曲为长方体(实现近大远小的效果)• 在CCS中裁减算法非常简单

剪裁

• 删除长方体外部的场景

• 实现Sutherland-Hodgeman多边形裁剪算法 – 每次用裁剪窗口的一条边裁剪多边形。

– 裁剪窗口的一条边以及延长线构成的裁剪线,把平面分成两个部分: • 一部分包含窗口,称为可见一侧 • 另一部分称为不可见一侧

透视除法

• 投影3D物体到2D视图平面

• 将可视长方体压扁到屏幕坐标系系统上 • 通过奇次坐标分割奇次CCS坐标

– 光栅希望以x/w、y/w和z/w坐标的形式得到顶点,同时还要求RHW,即齐次w的倒数 • SCS是设备无关的

• SCS中不包含2D视图之外的像素

屏幕映射变换

• 视口是包含SCS映射内容的显示设备区域。它定义了被显示的2D图像的位置 • 视口变换重新解释SCS坐标系为相应的硬件像素坐标 光栅化处理阶段

• 将几何图元转换为二维图像的过程

– 图象的每个点都包含诸如颜色、深度、纹理数据等信息 – 像素点和它的相关信息合起来称作碎片 设置

• 如果背面(back-face)剔除被打开,只光栅化前面(front-facing)的三角形

– 从三角形的前面看三角形,顶点是按照顺时针方向排列,背面剔除可以剔除那些背离屏幕(顶点逆时针方向排列)的三角形

• 为三角形光栅化计算参数 – 边斜度 – 颜色渐变层 – 贴图坐标梯度

光栅化

• 计算三角形所覆盖的像素的坐标 • 计算每个内部像素的数据 – 颜色 – 深度 – 纹理坐标 – RGBA颜色 • 处理凸凹形多边形 • 转换多边形为线段和像素点

碎片处理

• 处理内像素的颜色和深度值 • 材质查找 • 雾化 • 反锯齿 • 深度测试 • 混合

• 保存内部像素的颜色和深度值 • 决定像素是否可见

• Z值表示了像素点到视口的距离 • 将最后计算出来的颜色写入到帧缓冲区 • 将深度值写入深度缓冲区

• 内部像素传递路径:

纹理影射

• 图像数据从系统内存传递到在线纹理存储器中 • 使用内插值纹理坐标来查找纹理内存并且获取颜色数 • 将纹理颜色数据输入到颜色融合函数中 – Replace – Modulate – Add – Blend 纹理映射

• 多纹理在管线纹理处理阶段处理

• 每个独立单元被称为纹理环境发生器(TEV)

• 第一个TEV单元结合纹理颜色,顶点颜色(或者第二个纹理颜色)以及约束条件 • 处理结果被传递到下一个TEV单元

• 第二个和后继的TEV单元将另一个纹理或者内插值与前一个结果相结合雾化

• 景深效果处理:当效果被打开时,物体随着距离的延长而淡出 • Colorfinal =(f)Colorfragment +(1−f)Colorfog • 雾化混合因子被定义为f ∈ [0, 1] • 雾化效果随着观察者距离的增加而增强 • 不同的雾化混合因子:线形,指数,„

• 对每个顶点以及内插点进行计算,或者对每个碎片进行计算

图像反锯齿

• 当高频信息通过低频像素采样时,会发生锯齿 – 连续的数学表达式与离散的像素之间的误差 – 低分辨率显示设备

• 反锯齿技术尝试减轻赝样锯齿

• 根据碎片所覆盖的像素的总量调整像素颜色

• 在MIP映射(多纹理映像纹理)中,原始纹理被过滤为许多子纹理,形成纹理序列 – 每一级纹理都比上一级纹理的高和宽图像小二次幂

单个碎片操作

• 光栅化产生的碎片只有通过过一系列的测试后,才允许它修改相应的帧缓冲象素。– 通过测试,碎片数据可以直接替代帧缓冲中现有的数据

– 否则,根据某些模式的状态,碎片数据可能与帧缓冲已有数据结合 • 剪切测试(Scissor Test)– 判断碎片是否在视口中 – 如果测试失败,碎片将被抛弃 • Alpha Test

– 将碎片的alpha值与固定参考值进行比较 – 如果测试失败,碎片将被抛弃 • 蒙板测试(Stencil Test)

– 蒙板缓冲是一组不可显示的位平面(1-8)– 视口中的每个象素都有对应的蒙板值 – 将碎片的蒙板值与蒙板参考值进行比较

• 深度测试

– 判断新进入的碎片是否比以前已经渲染过的碎片更近– 将新进入的碎片深度值与深度缓冲器中的当前值进行比较 – 如果测试失败,碎片将被抛弃

– 否则,如果DB需要更新,则更新为碎片的深度值 • 混合

– 透明,合成,绘画,„

– 将新进入的碎片的颜色与帧缓冲区中碎片所在位置的颜色相结合 – 将计算出来的颜色部分截取在1.0以内 – 将颜色写回到帧缓冲区

– ColorFinal = αColorFragment +(1− α)ColorFB • 逻辑运算

– 逻辑运算应用于新进入的碎片的颜色和帧缓冲区中碎片所在位置的颜色

第四篇:html5游戏开发—Cocos2d-x游戏暂停、继续游戏、重新开始界面的实现--之游戏开发《赵云要格斗》(10)

Cocos2d-x游戏暂停、继续游戏、重新开始界面的实现--之游戏开发《赵云要格斗》(10)

Evankaka2015-01-21 10:11:203020 次阅读

本文要实现游戏中的暂停、重新开始。将当前界面截图,然后用这张图去构造一个层(以这张图为背景),然后加个按钮,主界面点暂停时,pushScene(),然后转到游戏暂停界面,当在游戏暂停界面点继续游戏popScne()。在Cocos2d-x中推进(pushScene())暂停场景,之前运行的场景将会自动暂停,然后我们可以在暂停场景中操作,当我们不再需要暂停场景时,可以popScene()将暂停场景弹出。重新开始游戏直接replaceScene()。

Cocos2d-x版本:2.2.5

工程环境:Windows7+VS2010

打开方式:将工程放在Cocos2d-x安装目录下的project文件夹下用VS打开

本文效果:

一、游戏暂停界面初步实现

思路:将当前界面截图,然后用这张图去构造一个层(以这张图为背景),然后加个按钮,主界面点暂停时,pushScene(),然后转到游戏暂停界面,当在游戏暂停界面点继续游戏时popScne()。

首先看看自定义的游戏暂停的层:

头文件 Gamepause.h

#ifndef __Gamepause__H__ #define __Gamepause__H__ #include “cocos2d.h” USING_NS_CC;class Gamepause : public cocos2d::CCLayer { public: virtual bool init();static cocos2d::CCScene* scene(CCRenderTexture* sqr);CREATE_FUNC(Gamepause);//继续游戏

void menuContinueCallback(CCObject* pSender);

private: };

#endif // __Gamepause_H__

然后是实现文件 #include “Gamepause.h” //传入一个CCrenderTexture //相当于一个正在运行的游戏的截图作为这个暂停对话框的背景

//这样就看起来像是对话框在游戏界面之上,一般游戏当中都是这样子写的。CCScene* Gamepause::scene(CCRenderTexture* sqr){

CCScene *scene = CCScene::create();Gamepause *layer = Gamepause::create();scene->addChild(layer,1);//增加部分:使用Game界面中截图的sqr纹理图片创建Sprite //并将Sprite添加到GamePause场景层中 //得到窗口的大小

CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();CCSprite *back_spr = CCSprite::createWithTexture(sqr->getSprite()->getTexture());back_spr->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));//放置位置,这个相对于中心位置。

back_spr->setFlipY(true);//翻转,因为UI坐标和OpenGL坐标不同

back_spr->setColor(cocos2d::ccGRAY);//图片颜色变灰色 scene->addChild(back_spr);return scene;}

bool Gamepause::init(){

if(!CCLayer::init()){ return false;} //得到窗口的大小

CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();//原点坐标

CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

//继续游戏按钮

CCMenuItemImage *pContinueItem = CCMenuItemImage::create(“pause_continue.png”, “pause_continue.png”, this, menu_selector(Gamepause::menuContinueCallback));

pContinueItem->setPosition(ccp(visibleSize.width/2 ,visibleSize.height/2+30));

CCMenu* pMenu = CCMenu::create(pContinueItem,NULL);pMenu->setPosition(CCPointZero);this->addChild(pMenu, 2);

return true;} void Gamepause::menuContinueCallback(CCObject* pSender){ CCDirector::sharedDirector()->popScene();}

使用方法

在游戏主界面init函数加个:

CCMenuItemImage *pCloseItem = CCMenuItemImage::create(“CloseNormal.png”, “CloseSelected.png”, this, menu_selector(HelloWorld::menuPauseCallback));

pCloseItem->setPosition(ccp(visibleSize.widthpCloseItem->getContentSize().height/2));

// create menu, it's an autorelease object CCMenu* pMenu = CCMenu::create(pCloseItem, NULL);pMenu->setPosition(CCPointZero);this->addChild(pMenu, 1);

然后是回调用的函数 暂停界面((记得加上面的头文件就是了))void HelloWorld::menuPauseCallback(CCObject* pSender){ //得到窗口的大小

CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();CCRenderTexture *renderTexture = CCRenderTexture::create(visibleSize.width,visibleSize.height);

//遍历当前类的所有子节点信息,画入renderTexture中。//这里类似截图。

renderTexture->begin();this->getParent()->visit();renderTexture->end();

//将游戏界面暂停,压入场景堆栈。并切换到GamePause界面

CCDirector::sharedDirector()->pushScene(Gamepause::scene(renderTexture));}

这里来看看效果:

效果就是这样了,基本实现了游戏暂停的功能了。上面的代码可以直接拿去用,自己把图片改改就行了

二、游戏暂停界面美化实现

单单只有上面的肯定是不行的,太难看了,所以给图片的按钮加个背景图片,然后再加三个按钮。

这是按钮背景图片

这是三个按钮的图片

要用的直接拿去用,全是我原创的。

直接看下代码,就是在上面的基础上来增加函数的。

Gamepause.h

#ifndef __Gamepause__H__ #define __Gamepause__H__ #include “cocos2d.h” USING_NS_CC;class Gamepause : public cocos2d::CCLayer { public: virtual bool init();static cocos2d::CCScene* scene(CCRenderTexture* sqr);CREATE_FUNC(Gamepause);//继续游戏

void menuContinueCallback(CCObject* pSender);//重新开始游戏

void menuRestart(CCObject* pSender);//回主界面

void menuLogin(CCObject* pSender);private: };

#endif // __Gamepause_H__ Gamepause.cpp

#include “Gamepause.h” #include “HelloWorldScene.h”//重新开始游戏的头文件 //传入一个CCrenderTexture //相当于一个正在运行的游戏的截图作为这个暂停对话框的背景

//这样就看起来像是对话框在游戏界面之上,一般游戏当中都是这样子写的。CCScene* Gamepause::scene(CCRenderTexture* sqr){

CCScene *scene = CCScene::create();Gamepause *layer = Gamepause::create();scene->addChild(layer,1);//把游戏层放上面,我们还要在这上面放按钮

//增加部分:使用Game界面中截图的sqr纹理图片创建Sprite //并将Sprite添加到GamePause场景层中 //得到窗口的大小

CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();CCSprite *back_spr = CCSprite::createWithTexture(sqr->getSprite()->getTexture());back_spr->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));//放置位置,这个相对于中心位置。

back_spr->setFlipY(true);//翻转,因为UI坐标和OpenGL坐标不同 back_spr->setColor(cocos2d::ccGRAY);//图片颜色变灰色 scene->addChild(back_spr);

//添加游戏暂停背景小图,用来放按钮

CCSprite *back_small_spr = CCSprite::create(“back_pause.png”);back_small_spr->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));//放置位置,这个相对于中心位置。

scene->addChild(back_small_spr);

return scene;}

bool Gamepause::init(){

if(!CCLayer::init()){ return false;} //得到窗口的大小

CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();//原点坐标

CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

//继续游戏按钮

CCMenuItemImage *pContinueItem = CCMenuItemImage::create(“pause_continue.png”, “pause_continue.png”, this, menu_selector(Gamepause::menuContinueCallback));

pContinueItem->setPosition(ccp(visibleSize.width/2 ,visibleSize.height/2+30));

//重新开始游戏按钮

CCMenuItemImage *pRestartItem = CCMenuItemImage::create(“pause_restart.png”, “pause_restart.png”, this, menu_selector(Gamepause::menuRestart));

pRestartItem->setPosition(ccp(visibleSize.width/2 ,visibleSize.height/2-20));

//回主界面

CCMenuItemImage *pLoginItem = CCMenuItemImage::create(“pause_login.png”, “pause_login.png”, this, menu_selector(Gamepause::menuLogin));

pLoginItem->setPosition(ccp(visibleSize.width/2 ,visibleSize.height/2-70));

// create menu, it's an autorelease object CCMenu* pMenu = CCMenu::create(pContinueItem,pRestartItem,pLoginItem,NULL);pMenu->setPosition(CCPointZero);this->addChild(pMenu, 2);

return true;} void Gamepause::menuContinueCallback(CCObject* pSender){ CCDirector::sharedDirector()->popScene();} //重新开始游戏

void Gamepause::menuRestart(CCObject* pSender){ CCDirector::sharedDirector()->replaceScene(HelloWorld::scene());} //回主界面

void Gamepause::menuLogin(CCObject* pSender){

下载html5游戏开发:cocos v2.2.5支持3D控件扩展word格式文档
下载html5游戏开发:cocos v2.2.5支持3D控件扩展.doc
将本文档下载到自己电脑,方便修改和收藏,请勿使用迅雷等下载。
点此处下载文档

文档为doc格式


声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:645879355@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。

相关范文推荐