基于WebGL的3D网页游戏的开发方法及系统技术方案

本发明专利技术涉及基于WebGL的3D网页游戏的开发方法及系统，该方法包括获取HTML5的canvas元素，通过canvas元素建立基于WebGL标准的绘制环境；对游戏模型进行三维建模，并在建立的三维游戏模型中设计骨骼节点；提取三维游戏模型中的建模参数与骨骼节点信息，将提取的建模参数与骨骼节点信息导入PlayCanvas编辑器构造游戏场景；创建游戏脚本、游戏逻辑以及角色逻辑，发布得到所述3D网页游戏。本发明专利技术实施例提供的基于WebGL的3D网页游戏开发方法，无需安装文件，在浏览器内打开一个网址便能获得3D效果的游戏体验，运行该游戏也无需下载插件即可实现，而且该游戏可以跨平台使用，提升了用户的使用体验。

The development method and system of 3D webpage game based on WebGL

The present invention relates to a method and system development based on WebGL 3D web games, the method includes canvas elements to obtain HTML5, through the canvas element WebGL standard established based on rendering environment; 3D modeling on the game model, and design the skeleton nodes in 3D game model; information extraction model parameters and bone node 3D game in the model, the extraction of modeling parameters and skeletal node information into the PlayCanvas game scene editor structure; create the game script, game logic and role logic, released the 3D web game. The development method of 3D web game based on WebGL provided by the embodiment of the invention, no need to install the file, open a URL in the browser will be able to get the 3D effect of the game experience, to run the game also need to download the plug-in can be realized, and the game can cross platform use, enhance the user experience.

【技术实现步骤摘要】
基于WebGL的3D网页游戏的开发方法及系统
本专利技术涉及互联网
，特别涉及一种基于WebGL的3D网页游戏的开发方法及系统。
技术介绍
游戏产业是当今国家战略性新兴产业中极其重要的一员，其中随着各方面技术的成熟网页游戏行业从快速发展进入了平稳扩展的阶段，2016年，网页游戏市场依旧保持较为强劲的增长势头。在网页游戏市场竞争日趋白热化的今天，技术表现力的创新有望成为快速打破同质化、强调个性化的解决方案之一。现有技术中为了在web端实现3D效果，通常需要安装各种各样的插件，这样的做的弊端有很多。一是浏览器经常需要更新各式各样的插件以获得更好的效果，这样会让用户感到厌烦；二是越多的插件就意味着越多的安全风险，计算机受到的攻击手段越多；三是这些插件会受到不同操作系统和不同浏览器的限制，比如说苹果的safari放弃支持flash，这样的用户体验会受到很大程度的降低。
技术实现思路
鉴于上述问题，提出了本专利技术以便提供一种克服上述问题或者至少部分地解决上述问题的一种基于WebGL的3D网页游戏的开发方法。第一方面，本专利技术实施例提供一种基于WebGL的3D网页游戏的开发方法，包括：获取HTML5的canvas元素，通过所述canvas元素建立基于WebGL标准的绘制环境；对游戏模型进行三维建模，并在建立的三维游戏模型中设计骨骼节点；提取所述三维游戏模型中的建模参数与骨骼节点信息，将提取的建模参数与骨骼节点信息导入PlayCanvas编辑器构造游戏场景；创建游戏脚本、游戏逻辑以及角色逻辑，发布得到所述3D网页游戏。在一个实施例中，所述导入PlayCanvas编辑器构造游戏场景，包括：导入PlayCanvas编辑器，通过PlayCanvas提供的API对游戏进行初始化布局；实例化一个对象，并为游戏添加光源和摄像头组件。在一个实施例中，所述创建游戏脚本包括：对物理效果的设置和对场景的布置。在一个实施例中，所述游戏逻辑包括：游戏状态切换、用户交互设计、游戏主角生命值设计、游戏中敌人设计、游戏得分设计和游戏关卡切换设计。在一个实施例中，所述角色逻辑包括：动画、声音脚本、通过用户输入检测来切换状态的脚本或游戏内人物与其他对象的交互切换状态的脚本。在一个实施例中，在所述创建游戏脚本、游戏逻辑以及角色逻辑之后，所述方法包括：调试游戏代码，通过Node.js启动上线服务，通过websocket实现客户端和服务器端的双向实时通信。第二方面，本专利技术实施例提供一种基于WebGL的3D网页游戏的开发系统，包括：获取建立模块，用于获取HTML5的canvas元素，通过所述canvas元素建立基于WebGL标准的绘制环境；建模设计模块，用于对游戏模型进行三维建模，并在建立的三维游戏模型中设计骨骼节点；提取导入模块，用于提取所述三维游戏模型中的建模参数与骨骼节点信息，将提取的建模参数与骨骼节点信息导入PlayCanvas编辑器构造游戏场景；创建发布模块，用于创建游戏脚本、游戏逻辑以及角色逻辑，发布得到所述3D网页游戏。在一个实施例中，所述提取导入模块中的导入PlayCanvas编辑器构造游戏场景，包括：导入PlayCanvas编辑器，通过PlayCanvas提供的API对游戏进行初始化布局；实例化一个对象，并为游戏添加光源和摄像头组件。在一个实施例中，还包括：通信模块，用于通过websocket实现客户端和服务器端的双向实时通信。本专利技术实施例提供的上述技术方案的有益效果至少包括：本专利技术实施例提供的基于WebGL的3D网页游戏的开发方法，包括获取HTML5的canvas元素，通过所述canvas元素建立基于WebGL标准的绘制环境；对游戏模型进行三维建模，并在建立的三维游戏模型中设计骨骼节点；提取所述三维游戏模型中的建模参数与骨骼节点信息，将提取的建模参数与骨骼节点信息导入PlayCanvas编辑器构造游戏场景；创建游戏脚本、游戏逻辑以及角色逻辑，发布得到所述3D网页游戏。本专利技术实施例提供的基于WebGL的3D网页游戏开发方法，无需安装文件，在浏览器内打开一个网址便能获得3D效果的游戏体验，运行该游戏也无需下载插件即可实现，而且该游戏可以跨平台使用，提升了用户的使用体验。本专利技术的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本专利技术而了解。本专利技术的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。下面通过附图和实施例，对本专利技术的技术方案做进一步的详细描述。附图说明附图用来提供对本专利技术的进一步理解，并且构成说明书的一部分，与本专利技术的实施例一起用于解释本专利技术，并不构成对本专利技术的限制。在附图中：图1为本专利技术实施例提供的基于WebGL的3D网页游戏的开发方法的流程图；图2为本专利技术实施例提供的游戏技术框架示意图；图3为本专利技术实施例提供的步骤S103的流程图；图4为本专利技术实施例提供的举例的开发方法技术架构图；图5为本专利技术实施例提供的基于WebGL的3D网页游戏的开发系统的框图。具体实施方式下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。参照图1所示，本专利技术实施例提供的基于WebGL的3D网页游戏的开发方法，深入分析了WebGL的实现原理，并对游戏整体逻辑、开发架构进行分析筛选。其中：WebGL(全写WebGraphicsLibrary)是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGLES2.0结合在一起，通过增加OpenGLES2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。该方法包括：步骤S101～S104；S101、获取HTML5的canvas元素，通过所述canvas元素建立基于WebGL标准的绘制环境；S102、对游戏模型进行三维建模，并在建立的三维游戏模型中设计骨骼节点；S103、提取所述三维游戏模型中的建模参数与骨骼节点信息，将提取的建模参数与骨骼节点信息导入PlayCanvas编辑器构造游戏场景；S104、创建游戏脚本、游戏逻辑以及角色逻辑，发布得到所述3D网页游戏。本实施例中，在三维场景或模型绘制之前，首先需要获取HTML5的canvas元素，然后通过该元素获得WebGL的绘制环境。canvas画布元素是HTML5中的一个非常重要的元素，canvas元素为HTML5能够支持较高性能的动画和游戏提供了可行性。canvas元素本质上是在浏览器中提供了一块可绘制区域，JavaScript代码可以访问该区域，并且通过一套完整的API进行二维图像的绘制。另外，只要显卡硬件支持3D图形功能，就可以使用canvas绘制3D图形。步骤S102中，在游戏中，模型的分类是多种多样的，有场景模型、建筑模型、动画模型、人物模型以及角色使用的道具模型。本专利技术所述的游戏模型是指，需要运用到游戏本文档来自技高网...

【技术保护点】
基于WebGL的3D网页游戏的开发方法，其特征在于，包括：获取HTML5的canvas元素，通过所述canvas元素建立基于WebGL标准的绘制环境；对游戏模型进行三维建模，并在建立的三维游戏模型中设计骨骼节点；提取所述三维游戏模型中的建模参数与骨骼节点信息，将提取的建模参数与骨骼节点信息导入PlayCanvas编辑器构造游戏场景；创建游戏脚本、游戏逻辑以及角色逻辑，发布得到所述3D网页游戏。

【技术特征摘要】
1.基于WebGL的3D网页游戏的开发方法，其特征在于，包括：获取HTML5的canvas元素，通过所述canvas元素建立基于WebGL标准的绘制环境；对游戏模型进行三维建模，并在建立的三维游戏模型中设计骨骼节点；提取所述三维游戏模型中的建模参数与骨骼节点信息，将提取的建模参数与骨骼节点信息导入PlayCanvas编辑器构造游戏场景；创建游戏脚本、游戏逻辑以及角色逻辑，发布得到所述3D网页游戏。2.如权利要求1所述的基于WebGL的3D网页游戏的开发方法，其特征在于，所述导入PlayCanvas编辑器构造游戏场景，包括：导入PlayCanvas编辑器，通过PlayCanvas提供的API对游戏进行初始化布局；实例化一个对象，并为游戏添加光源和摄像头组件。3.如权利要求2所述的基于WebGL的3D网页游戏的开发方法，其特征在于，所述创建游戏脚本包括：对物理效果的设置和对场景的布置。4.如权利要求2所述的基于WebGL的3D网页游戏的开发方法，其特征在于，所述游戏逻辑包括：游戏状态切换、用户交互设计、游戏主角生命值设计、游戏中敌人设计、游戏得分设计和游戏关卡切换设计。5.如权利要求2所述的基于WebGL的3D网页游戏的开发方法，其特征在于，所述角色逻辑包括：动画、声音脚本、通过用户输入检测来切换状态的脚本或游戏内人物与其他对象的交互切换状...

【专利技术属性】
技术研发人员：司占军，张姣姣，沈珂，
申请(专利权)人：天津科技大学，
类型：发明
国别省市：天津,12