精华内容
下载资源
问答
  • LayaAirHTML5开源引擎,能开发中大型HTML5重度游戏,减少开发者的算法编写,动态编写
  • H5 游戏开发

    千次阅读 2018-07-15 13:31:07
    游戏引擎入门推荐2017/12/28 · HTML5 · 1 评论 · 游戏引擎原文出处: 凹凸实验室 前言很多刚刚接触到...试想一下,在游戏开发进行到中后期的时候,才发现项目引入的游戏引擎与需求相悖,这时候不管是重...
    
    

    游戏引擎入门推荐

    banner

    前言

    很多刚刚接触到游戏开发,准备大展拳脚的小鲜肉们,往往在技术选型这第一关就栽了跟头。毕竟网络上的游戏引擎良莠不齐,官网上相关资料也比较少,而选择一个适合的游戏引擎是一个项目最基础,也是很核心的一部分。
    试想一下,在游戏开发进行到中后期的时候,才发现项目引入的游戏引擎与需求相悖,这时候不管是重新做一些修修补补的工作或者更换游戏引擎,这都是相当耗费人力物力的一件事。为了避免这种情况的出现,在前期选择适合项目需求的游戏引擎显得尤为重要。
    接下来我们来聊一聊如何去选择适合项目的 JS 游戏引擎。

    游戏场景分类

    在刚接到游戏需求时,我们可以从以下几个方面进行考量,分析出游戏需求场景所属,从而作为我们选择游戏引擎的依据。

    • 游戏效果呈现方式( 2D ? 3D ? VR ?)
      这与游戏引擎能够支持的渲染方式直接挂钩。现在的 H5 游戏渲染方式一般有 2D 渲染、3D 渲染、VR 渲染三种。
      而 2D 渲染一般也有三种:Dom 渲染、Canvas 渲染、WebGL 渲染。Dom 由于性能原因,一般只适合做一些动画效果较少,交互较少的小游戏,本文主要针对 Canvas 和 WebGL 展开介绍。
      一般来说,对于 2D 小游戏来说,Canvas 渲染已经足够。然而 Canvas 渲染由于底层封装层次多,不足以支撑起大型游戏的性能要求,因此大型游戏最好选择 WebGL 渲染或者浏览器内嵌 Runtime 。
    • 游戏复杂度
      这与游戏引擎能够支持的功能,提供的API,性能等方面关系比较大。

    游戏引擎推荐

    笔者从业界较流行的一些框架,进行以下几个方面对比,希望能从客观数据上给大家的技术选型带来建议和参考。

    • 引擎支持的渲染方式
    • github上的 star 数
    • 更新时间
    • 文档详细度
    • 周边产品

    2D,3D,VR 都支持的游戏引擎

    name2D渲染(Canvas)2D渲染(WebGL)3D渲染(WebGL)VRgithub star 数文档详细程度周边产品备注
    EgretYESYESYESYES2k(最新更新2017.12)
    ▪ 有中文文档
    ▪ 例子充足
    ▪ 社区活跃
    游戏开发过程中的每个环节基本都有工具支撑。不仅仅提供了一个基于HTML5技术的游戏引擎,更是提供了原生打包工具和众多周边产品
    LayaAirYESYES(优先)YESYES0.7k(最新更新2017.12)
    ▪ 有中文文档
    ▪ 例子充足
    ▪ 社区活跃
    提供开发工具和可视化编辑器支持2D、3D、VR,能开发超大游戏,forgame的醉西游,腾讯的QQ农场,乐动卓越的浪漫h5这些大作就是用它开发
    Egret

    egret

    Egret 周边产品

    白鹭引擎是企业级游戏引擎,有团队维护。Egret 在工作流的支持上做的是比较好的,从 Wing 的代码编写,到 ResDepot 和 TextureMerger 的资源整合,再到 Inspector 调试,最后到原生打包(支持 APP 打包),游戏开发过程中的每个环节基本都有工具支撑。官网上的示例,教程也是比较多。值得一提的是,今年5月白鹭引擎支持了 WebAssembly ,这对于性能的提升又是一大里程碑。

    LayaAir

    在渲染模式上,LayaAir 支持 Canvas 和 WebGL 两种方式;在工具流的支持程度上,主要是提供了 LayaAir IDE。LayaAir IDE 包括代码模式与设计模式,支持代码开发与美术设计分离,内置了 SWF 转换、图集打包、JS 压缩与加密、APP 打包、Flash 发布等实用功能。

    下图是主要支持2D游戏的游戏引擎

    name2D渲染(Canvas)2D渲染(WebGL)3D渲染(WebGL)VRgithub star 数文档详细程度周边产品备注
    Pixi.jsYESYESNONO16.8k(最新更新2017.12)
    ▪ 英文文档
    ▪ 例子充足
    ▪ 英文社区
    依赖于canvas的WebGL渲染器
    PhaserYESYESNONO16.9k(最新更2017.07)
    ▪ 英文文档
    ▪ 例子充足
    ▪ 英文社区
    提供在线编辑器Phaser Sandbox 
    CreateJsYESYESNONO6.5k(最新更新2017.12)
    ▪ 英文文档
    ▪ 例子充足
    ▪ 有博客
    官方推荐TweenJS,SoundJS,PreloadJS配合使用
    HiloYESYESYES(Hilo3D)NO4.2k(最新更新2017.12)
    ▪ 有中文文档
    ▪ 例子充足
    提供资源下载和管理工具阿里巴巴集团推出,适合开发营销小游戏,以Chipmunk为2D物理引擎,与主流物理引擎兼容
    Cocos2d-xYESYESNONO11.2k(最新更新2017.12)
    ▪ 有中文文档
    ▪ js例子不多,c++例子较多
    ▪ 社区活跃
    Cocos Creator编辑器,打包工具等提供的功能相当完整
    lufylegend.jsYESNONONO0.4k(最新更新2016.03)
    ▪ 有中文文档
    ▪ 社区活跃
    仿ActionScript3.0的语法,支持Google Chrome,Firefox,Opera,IE9,IOS,Android等多种热门环境,可以配合Box2dWeb制作物理游戏,内置了LTweenLite缓动类等
    Pixi.js

    一般来说,WebGL 的渲染速度都会比 Canvas 快,这是由俩者的绘制路径决定的。Pixi 最大的特点在于,Pixi 具有完整的 WebGL 支持,却并不要求开发者掌握 WebGL 的相关知识,并在需要时无缝地回退到 Canvas 。相较于很多同类产品,它的渲染能力是比较强大的。然而,Pixi 也有不足的地方,Pixi 对于动画的支持是比较缺乏的,在实际开发中,常常需要引进额外的动画库,如 GSAP。

    Phaser

    Phaser 在渲染方面直接封装了 Pixi;架构方面,Phaser 内嵌了3个物理引擎(Arcade Physics、Ninja、p2.js),提供粒子系统、动画、预下载和设备适配方案;兼容性方面,Phaser 的焦点是放在移动端浏览器上的;API 方面,Phaser 能实现丰富的游戏功能,适合复杂度高的游戏开发。

    CreateJS

    createjs

    CreateJs 周边产品

    CreateJS 官方提供了 TweenJS 支持动画开发,同时通过 SoundJS 和 PreLoadJS 提供了音频和预下载的支持,对于 H5 游戏基础功能的支持是足够的。在兼容性方面,CreateJS 支持 PC 端和移动端几乎所有的浏览器。此外,CreateJS 还支持用 flash CC 开发导出由 CreateJS 渲染的 H5 游戏。

    Hilo

    Hilo 是阿里团队推出的一个开源项目,支持模块化开发,同时提供了多种模块范式的包装版本和跨终端解决方案,适合用来开发营销小游戏。其体积也是比较轻量的,只有70kb左右。Hilo 支持 DOM 渲染,Canvas 渲染和 WebGL 渲染,同时集成了 Hilo Audio, Hilo Preload。其后推出的 Hilo 3D 也是其亮点之一。

    Cocos2d-x

    Cocos2d-x 是业界比较老牌的游戏引擎了,同时支持 C++ ,Lua 和 JavaScript 三种开发语言,官方用例来看更倾向于 C++ 开发,适合做一些中大型游戏开发。Cocos2d-x 提供 Cocos Creator 游戏开发工具,组件化,脚本化,数据驱动,跨平台发布。

    lufylegend.js

    lufylegend.js 的最新更新是在16年,不过其社区还是十分活跃的,如果遇到什么开发问题,可以很方便地在社区上找到解决的方案。lufylegend.js 可以支持基础的游戏功能,但是其可拓展性不是很强。

    主要支持3D游戏的游戏引擎

    name2D渲染(Canvas)2D渲染(WebGL)3D渲染(WebGL)VRgithub star 数文档详细程度周边产品备注
    Three.jsNONOYES(倾向)NO37.6k(最新更新2017.12)
    ▪ 英文文档
    ▪ 例子充足
    ▪ 英文社区
    默认Ammo.js为默认物理引擎,基于JavaScript语言的3D库,耗性能,加载慢,效果一般
    PlayCanvasNONOYESYES3k(最新更新2017.12)
    ▪ 英文文档
    ▪ 例子充足
    ▪ 英文社区
    提供了在线编辑器,发布托管等教程较为详细,入门快
    Three.js

    threejs

    Three.js 示例案例

    相信对于很多有关注 3D 游戏的开发者来说,Three.js 早已经耳熟能详了。实际上,Three.js 官方定位并不是游戏引擎,而是一个 JS 3D 库。Three.js 更倾向于展示型的视觉呈现,比较少直接拿 Three.js 来开发 H5 游戏。渲染环境上,Three.js 支持 WebGL 和 CSS3D 两种渲染模式。

    PlayCanvas

    从渲染支持程度来看,PlayCanvas 不仅支持 3D WebGL渲染,同时保持到 VR 的支持,拥有比较好的拓展性。在工具流的支持上,提供了在线编辑器和发布托管等服务。从官方教程上看,教程也是比较详细的。

    结语

    现在市场上的 H5游戏引擎很多,很难去直接定义哪个引擎的好坏,只能说每个引擎都有自己的特性,在某方面跟项目的契合程度比较高,笔者根据现在市场上比较热门的几大引擎做了几点比较,希望能给刚入门的你做技术选型的时候有一点帮助,找到适合项目的引擎,更快、更准、更高效率地完成项目需求。

    感谢各位耐心读完,希望能有所收获,有考虑不足的地方欢迎留言指出。

    转载:http://web.jobbole.com/93505/


    展开全文
  • WEB开发与游戏开发的区别WEB前端的大部分工作集中在利用现有的主流前端框架(vue / react / angular)及其周边开源代码库生态组织整个项目的架构并实现业务逻辑代码,往往同一种逻辑可以选择用不同的抽象方式来实现...

    42e11f6ba32a5a6b1f23119e1e02e0f7.png

    WEB开发与游戏开发的区别

    222497f4782b15d1c74632509b64e504.png

    WEB前端的大部分工作集中在利用现有的主流前端框架(vue / react / angular)及其周边开源代码库生态组织整个项目的架构并实现业务逻辑代码,往往同一种逻辑可以选择用不同的抽象方式来实现,不同抽象方式的思想和实现差异巨大,如状态管理的不同实现方式:redux / mobx / rxjs.

    H5游戏的开发工作主要集中在基于游戏引擎的标准开发流程实现UI设计的动画效果以及完成游戏交互逻辑。对于游戏开发来说,需要利用具象思维能力来组织贴图等资源完成最终产品,实现的过程相对来说比较固定和模式化(利用选定的游戏引擎的粒子、骨骼、帧动画等API)。

    WEB前端在工程化领域日趋成熟,利用框架本身提供的API + IDE的完备提示 + webpack等打包工具可以实现“coding - debug - 部署”的一整套成熟的生产流程,同时框架本身往往只提供核心的“数据 - 视图 - 数据”功能,可以根据项目需求引入不同的设计模式。

    在H5游戏开发领域,由于不同游戏引擎之间的核心代码差异巨大,为了保护核心源码以及开发效率等,游戏引擎厂商往往会高度定制一套服务于该游戏引擎的开发流程:从IDE到代码架构到部署。因此,相对来说,H5游戏开发中,遵守“约定”是很重要的一个环节,H5游戏开发在选定了游戏引擎之后,整个开发流程往往都只能受限于在游戏引擎的官方推荐中做选择。

    Cocos Creator 和 Egret 的区别

    0d9c61f80751a108b78a44604edb1605.png

    对入门者来说

    Cocos Creator 的集成开发环境比较成熟,整套功能都集成在了开箱即用的 Cocos Creator 客户端内,除了代码逻辑需要用VSCode编写,场景编辑、动态组件设置、资源管理、部署等都可以在单一客户端内完成操作。

    相对来说 Egret 的开发环境有些混乱,有 Egret Launcher / Wing3 / Egret UI Editor / Egret Pro 等各种开发工具,有些功能彼此涵盖但又各不相同,产品线混乱,对新手来说并不友好。

    在官方文档上,Cocos Creator 更胜一筹,从基础的游戏Demo教程到API文档都比Egret的质量更高。在社区热度和市场占比方面,Cocos Creator 也比 Egret 的讨论多一些,所以更容易找到解决方案,对新手更加友好。

    在可视化编辑器上的一些差别

    Cocos Creator 官方更推荐在客户端用GUI操作完成大部分场景、图形、动画工作,在代码层仅编写业务代码以及一些比较复杂抽象的动画逻辑。

    优点:在制作动画效果和场景时更直观、方便;
    缺点:由于可视化编辑器功能繁多,学习操作有一定难度。

    Egret的可视化编辑器目前比较简陋,动画和业务逻辑都依赖在代码层编写。

    优点:开发方式对web开发者更为熟悉;
    缺点:制作场景和动画效果时并不直观,需要更多思维负担。

    总结

    想要从WEB前端转而上手H5游戏开发,首先要加强形象和抽象相互转换的思维能力,拥有从具体的动画效果抽象出代码控制逻辑的能力会很有优势。在选定游戏引擎后,还需要对该引擎的开发流程做充分了解,需要学习的部分:游戏引擎自研或推荐的IDE的使用、可视化场景编辑器的使用、代码架构方式、游戏引擎API、Debug方式、部署方式。

    从个人角度来说,Cocos Creator 有更清晰的产品线和文档、合适的难度曲线,更适合从 WEB前端转向游戏开发。

    展开全文
  • H5游戏开发:游戏引擎入门推荐

    万次阅读 2018-01-02 16:25:29
    前言很多刚刚接触到游戏开发,准备大展拳脚的小鲜肉们,往往在技术选型这第一关就栽了跟头。毕竟网络上的游戏引擎良莠不齐,官网上相关资料也比较少,而选择一个适合的游戏引擎是一个项目最基础,也是很核心的一部分...

    前言

    很多刚刚接触到游戏开发,准备大展拳脚的小鲜肉们,往往在技术选型这第一关就栽了跟头。毕竟网络上的游戏引擎良莠不齐,官网上相关资料也比较少,而选择一个适合的游戏引擎是一个项目最基础,也是很核心的一部分。
    试想一下,在游戏开发进行到中后期的时候,才发现项目引入的游戏引擎与需求相悖,这时候不管是重新做一些修修补补的工作或者更换游戏引擎,这都是相当耗费人力物力的一件事。为了避免这种情况的出现,在前期选择适合项目需求的游戏引擎显得尤为重要。
    接下来我们来聊一聊如何去选择适合项目的 JS 游戏引擎。

    游戏场景分类

    在刚接到游戏需求时,我们可以从以下几个方面进行考量,分析出游戏需求场景所属,从而作为我们选择游戏引擎的依据。

    • 游戏效果呈现方式( 2D ? 3D ? VR ?)
      这与游戏引擎能够支持的渲染方式直接挂钩。现在的 H5 游戏渲染方式一般有 2D 渲染、3D 渲染、VR 渲染三种。
      而 2D 渲染一般也有三种:Dom 渲染、Canvas 渲染、WebGL 渲染。Dom 由于性能原因,一般只适合做一些动画效果较少,交互较少的小游戏,本文主要针对 Canvas 和 WebGL 展开介绍。
      一般来说,对于 2D 小游戏来说,Canvas 渲染已经足够。然而 Canvas 渲染由于底层封装层次多,不足以支撑起大型游戏的性能要求,因此大型游戏最好选择 WebGL 渲染或者浏览器内嵌 Runtime 。
    • 游戏复杂度
      这与游戏引擎能够支持的功能,提供的API,性能等方面关系比较大。

    游戏引擎推荐

    笔者从业界较流行的一些框架,进行以下几个方面对比,希望能从客观数据上给大家的技术选型带来建议和参考。

    • 引擎支持的渲染方式
    • github上的 star 数
    • 更新时间
    • 文档详细度
    • 周边产品

    2D,3D,VR 都支持的游戏引擎


    name2D渲染(Canvas)2D渲染(WebGL)3D渲染(WebGL)VRgithub star 数文档详细程度周边产品备注
    EgretYESYESYESYES2k(最新更新2017.12)
    ▪ 有中文文档
    ▪ 例子充足
    ▪ 社区活跃
    游戏开发过程中的每个环节基本都有工具支撑。不仅仅提供了一个基于HTML5技术的游戏引擎,更是提供了原生打包工具和众多周边产品
    LayaAirYESYES(优先)YESYES0.7k(最新更新2017.12)
    ▪ 有中文文档
    ▪ 例子充足
    ▪ 社区活跃
    提供开发工具和可视化编辑器支持2D、3D、VR,能开发超大游戏,forgame的醉西游,腾讯的QQ农场,乐动卓越的浪漫h5这些大作就是用它开发
    Egret

    Egret 周边产品

    白鹭引擎是企业级游戏引擎,有团队维护。Egret 在工作流的支持上做的是比较好的,从 Wing 的代码编写,到 ResDepot 和 TextureMerger 的资源整合,再到 Inspector 调试,最后到原生打包(支持 APP 打包),游戏开发过程中的每个环节基本都有工具支撑。官网上的示例,教程也是比较多。值得一提的是,今年5月白鹭引擎支持了 WebAssembly ,这对于性能的提升又是一大里程碑。

    LayaAir

    在渲染模式上,LayaAir 支持 Canvas 和 WebGL 两种方式;在工具流的支持程度上,主要是提供了 LayaAir IDE。LayaAir IDE 包括代码模式与设计模式,支持代码开发与美术设计分离,内置了 SWF 转换、图集打包、JS 压缩与加密、APP 打包、Flash 发布等实用功能。

    下图是主要支持2D游戏的游戏引擎

    name2D渲染(Canvas)2D渲染(WebGL)3D渲染(WebGL)VRgithub star 数文档详细程度周边产品备注
    Pixi.jsYESYESNONO16.8k(最新更新2017.12)
    ▪ 英文文档
    ▪ 例子充足
    ▪ 英文社区
    依赖于canvas的WebGL渲染器
    PhaserYESYESNONO16.9k(最新更2017.07)
    ▪ 英文文档
    ▪ 例子充足
    ▪ 英文社区
    提供在线编辑器Phaser Sandbox 
    CreateJsYESYESNONO6.5k(最新更新2017.12)
    ▪ 英文文档
    ▪ 例子充足
    ▪ 有博客
    官方推荐TweenJS,SoundJS,PreloadJS配合使用
    HiloYESYESYES(Hilo3D)NO4.2k(最新更新2017.12)
    ▪ 有中文文档
    ▪ 例子充足
    提供资源下载和管理工具阿里巴巴集团推出,适合开发营销小游戏,以Chipmunk为2D物理引擎,与主流物理引擎兼容
    Cocos2d-xYESYESNONO11.2k(最新更新2017.12)
    ▪ 有中文文档
    ▪ js例子不多,c++例子较多
    ▪ 社区活跃
    Cocos Creator编辑器,打包工具等提供的功能相当完整
    lufylegend.jsYESNONONO0.4k(最新更新2016.03)
    ▪ 有中文文档
    ▪ 社区活跃
    仿ActionScript3.0的语法,支持Google Chrome,Firefox,Opera,IE9,IOS,Android等多种热门环境,可以配合Box2dWeb制作物理游戏,内置了LTweenLite缓动类等
    Pixi.js

    一般来说,WebGL 的渲染速度都会比 Canvas 快,这是由俩者的绘制路径决定的。Pixi 最大的特点在于,Pixi 具有完整的 WebGL 支持,却并不要求开发者掌握 WebGL 的相关知识,并在需要时无缝地回退到 Canvas 。相较于很多同类产品,它的渲染能力是比较强大的。然而,Pixi 也有不足的地方,Pixi 对于动画的支持是比较缺乏的,在实际开发中,常常需要引进额外的动画库,如 GSAP。

    Phaser

    Phaser 在渲染方面直接封装了 Pixi;架构方面,Phaser 内嵌了3个物理引擎(Arcade Physics、Ninja、p2.js),提供粒子系统、动画、预下载和设备适配方案;兼容性方面,Phaser 的焦点是放在移动端浏览器上的;API 方面,Phaser 能实现丰富的游戏功能,适合复杂度高的游戏开发。

    CreateJS

    CreateJs 周边产品

    CreateJS 官方提供了 TweenJS 支持动画开发,同时通过 SoundJS 和 PreLoadJS 提供了音频和预下载的支持,对于 H5 游戏基础功能的支持是足够的。在兼容性方面,CreateJS 支持 PC 端和移动端几乎所有的浏览器。此外,CreateJS 还支持用 flash CC 开发导出由 CreateJS 渲染的 H5 游戏。

    Hilo

    Hilo 是阿里团队推出的一个开源项目,支持模块化开发,同时提供了多种模块范式的包装版本和跨终端解决方案,适合用来开发营销小游戏。其体积也是比较轻量的,只有70kb左右。Hilo 支持 DOM 渲染,Canvas 渲染和 WebGL 渲染,同时集成了 Hilo Audio, Hilo Preload。其后推出的 Hilo 3D 也是其亮点之一。

    Cocos2d-x

    Cocos2d-x 是业界比较老牌的游戏引擎了,同时支持 C++ ,Lua 和 JavaScript 三种开发语言,官方用例来看更倾向于 C++ 开发,适合做一些中大型游戏开发。Cocos2d-x 提供 Cocos Creator 游戏开发工具,组件化,脚本化,数据驱动,跨平台发布。

    lufylegend.js

    lufylegend.js 的最新更新是在16年,不过其社区还是十分活跃的,如果遇到什么开发问题,可以很方便地在社区上找到解决的方案。lufylegend.js 可以支持基础的游戏功能,但是其可拓展性不是很强。

    主要支持3D游戏的游戏引擎

    name2D渲染(Canvas)2D渲染(WebGL)3D渲染(WebGL)VRgithub star 数文档详细程度周边产品备注
    Three.jsNONOYES(倾向)NO37.6k(最新更新2017.12)
    ▪ 英文文档
    ▪ 例子充足
    ▪ 英文社区
    默认Ammo.js为默认物理引擎,基于JavaScript语言的3D库,耗性能,加载慢,效果一般
    PlayCanvasNONOYESYES3k(最新更新2017.12)
    ▪ 英文文档
    ▪ 例子充足
    ▪ 英文社区
    提供了在线编辑器,发布托管等教程较为详细,入门快
    Three.js

    Three.js 示例案例

    相信对于很多有关注 3D 游戏的开发者来说,Three.js 早已经耳熟能详了。实际上,Three.js 官方定位并不是游戏引擎,而是一个 JS 3D 库。Three.js 更倾向于展示型的视觉呈现,比较少直接拿 Three.js 来开发 H5 游戏。渲染环境上,Three.js 支持 WebGL 和 CSS3D 两种渲染模式。

    PlayCanvas

    从渲染支持程度来看,PlayCanvas 不仅支持 3D WebGL渲染,同时保持到 VR 的支持,拥有比较好的拓展性。在工具流的支持上,提供了在线编辑器和发布托管等服务。从官方教程上看,教程也是比较详细的。

    结语

    现在市场上的 H5游戏引擎很多,很难去直接定义哪个引擎的好坏,只能说每个引擎都有自己的特性,在某方面跟项目的契合程度比较高,笔者根据现在市场上比较热门的几大引擎做了几点比较,希望能给刚入门的你做技术选型的时候有一点帮助,找到适合项目的引擎,更快、更准、更高效率地完成项目需求。

    感谢各位耐心读完,希望能有所收获,有考虑不足的地方欢迎留言指出。

    如果对「H5游戏开发」感兴趣,欢迎关注我们的专栏

    参考资料

    目前有哪些比较成熟的 HTML5 游戏引擎?

    HTML5游戏引擎深度测评

    现在 TypeScript 的生态如何?

    感谢您的阅读,本文由  凹凸实验室  版权所有。如若转载,请注明出处:凹凸实验室( https://aotu.io/notes/2017/12/27/h5-game-engine-recommend/
    展开全文
  • 我们在cocos creator创建节点,创建预制体节点,创建sprite节点的时候,都需要写几行代码,非常麻烦,这里封装了一些常用到的创建节点的静态方法工具类,直接一句话就可以实现创建节点功能 /** * @example * ...

    前言

    我们在cocos creator创建节点,创建预制体节点,创建sprite节点的时候,都需要写几行代码,非常麻烦,这里封装了一些常用到的创建节点的静态方法工具类,直接一句话就可以实现创建节点功能

    
    
    
    /**
     * @example
     * ObjectTool.getInstance().createNode(name,sprite,parentNode);
     * ObjectTool.getInstance().InstanceWithPrefab(name,prefab,parent);
     */
    export class ObjectTool
    {
    
        /**
         * 创建空节点
         * @param _name 节点名字
         * @param _parent 父节点
         */
        public static createNode(_name, _parent, _pos: cc.Vec2 = new cc.Vec2(0, 0)): cc.Node
        {
            var _node = new cc.Node(_name);
            if (_parent != null) _parent.addChild(_node);
            else cc.director.getScene().addChild(_node);
            return _node;
        }
    
        /**
         * 复制对象节点,指定其父对象
         * @param _name 名字
         * @param _node 复制的节点
         * @param _parent 父对象
         * @param _pos 位置
         */
        public static createNodeWithParent(_name: string, _node: cc.Node, _parent: cc.Node, _pos: cc.Vec2 = new cc.Vec2(0, 0)): cc.Node
        {
            var _node = cc.instantiate(_node);
            _node.name = _name;
            if (_parent != null) _parent.addChild(_node);
            else cc.director.getScene().addChild(_node);
            _node.setPosition(_pos);
            return _node;
        }
    
        /**
         * 创建精灵节点,设置图片
         * @param _name 实例化的命名
         * @param _sprite 图片资源spriteFrame object
         * @param _parent 要挂载到的父节点
         */
        public static createSpriteNode(_name: string, _sprite: cc.SpriteFrame, _parent?: cc.Node): cc.Node
        {
            var _node = new cc.Node(_name);
            var sp = _node.addComponent(cc.Sprite);
            sp.spriteFrame = _sprite;
            if (_parent != null) _parent.addChild(_node);
            else cc.director.getScene().addChild(_node);
            return _node
        }
    
        /**
         * 实例化预制体节点对象
         * @param _name 实例化的命名
         * @param _prefab 实例化的预制体
         * @param _parent(可选) 要挂载到的父节点
         * @param _pos(可选) 位置
         */
        public static instanceWithPrefab(_name: string, _prefab: cc.Prefab, _parent?: cc.Node, _pos: cc.Vec2 = new cc.Vec2(0, 0)): cc.Node
        {
            var _node = cc.instantiate(_prefab);
            if (_node == null) console.error('the _prefab ' + _name + ',_prefab name:' + _prefab + ' is null!!!');
            _node.name = _name;
            if (_parent != null) _parent.addChild(_node);
            else cc.director.getScene().addChild(_node);
            _node.setPosition(_pos);
            return _node;
        }
    
        /**
         * 实例化节点对象
         * @param _name 实例化的命名
         * @param _prefab 实例化的节点
         * @param _parent(可选) 要挂载到的父节点
         * @param _pos(可选) 位置
         */
        public static instanceWithNode(_name: string, _prefab: cc.Node, _parent?: cc.Node, _pos: cc.Vec2 = new cc.Vec2(0, 0)): cc.Node
        {
            var _node = cc.instantiate(_prefab);
            if (_node == null) console.error('the _prefab ' + _name + ',_prefab name:' + _prefab + ' is null!!!');
            _node.name = _name;
            if (_parent != null) _parent.addChild(_node);
            else cc.director.getScene().addChild(_node);
            _node.setPosition(_pos);
            return _node;
        }
    
        /**
         * 全局查找节点
         * 从Canvas开始
         * @param _url 路径不包含'Canvas/'
         */
        public static GlobalFindObj(_url: string): cc.Node
        {
            let _node: cc.Node = cc.find('Canvas/' + _url);
            if (_node == null) console.error('!!!the find node is null------------------------');
            return _node;
        }
    
        /**
         * 根据父节点向下查找节点
         * @param _url 节点路径
         * @param _parent 节点父对象
         * @example 在Panel节点下有a->a1->a2,b->b1,c->c1。要获得a2则传入路径: 'a/a1/a2'
         */
        public static FindObjWithParent(_url: string, _parent: cc.Node): cc.Node
        {
            let _node: cc.Node = cc.find(_url, _parent);
            if (_node == null) console.error('!!!the find ' + _url + ' node is null------------------------');
            return _node;
        }
    
        public static GetCanvas(): cc.Node
        {
            return cc.find('Canvas');
        }
    
        public static GetMainCamera(): cc.Node
        {
            return cc.find('Canvas/Main Camera');
        }
    
    }
    
    
    

    把这个类放到项目目录里,调用方法也很简单

     ObjectTool.createNode(node,_parent,cc.Vec2.ZERO);
    ObjectTool.instanceWithPrefab('name',prefab,parent,cc.Vec2.ZERO);
    ObjectTool.instanceWithNode('name',node,parent,cc.Vec2.ZERO);
    

    很方便的一个工具,希望大家喜欢

    PS:本文将持续更新新的好用的工具方法

    展开全文
  • 目前市面上最流行的H5引擎就是egret和layabox了,传说中layabox的性能要优于egret,由于egret的工具更加完善一点,所以当初选择了egret。但是发现开发过程中,为了方便项目的使用。序列帧动画生成工具,地图编辑器...
  • H5游戏见缝插针开发

    2016-09-08 16:10:00
    中秋节马上就要来临,公司开发了一个h5游戏叉月饼,其实就是游戏“见缝插针”的翻版。这个游戏开发任务落到了我的头上。。。 一 游戏介绍 游戏场景基本如下所示: 二 所用工具 这次的开发还是用的公司...
  • H5游戏开发:一笔画

    2017-11-02 16:39:35
    一笔画是图论科普中一个著名的问题,它起源于柯尼斯堡七桥问题科普。数学家欧拉在他1736年...寻找连通图这条路径的过程就是「一笔画」的游戏过程,如下:游戏的实现「一笔画」的实现不复杂,笔者把实现过程分成两...
  • 一个H5游戏开发

    2020-06-08 12:13:28
    一个H5游戏的开发游戏中用到的静态数据 今天开始利用空闲时间,把自己在开发一个游戏完整的流程一点点总结一下,让自己在后面的开发中思路更清晰明确,同时希望对能看到文章的人有点帮助.这篇文章先说一下游戏开发框架...
  • 开发H5游戏引擎的选择:Egret或Laya?

    万次阅读 多人点赞 2017-06-01 22:20:16
    一、H5游戏开发的引擎介绍开发H5游戏的引擎有很多,比如egret、laya、cocos-js等等。这里主要是分析的是egret和laya,因为我们团队是从as3转过来的。所以天然地在有as3基因的egret和laya之中挑选一个。 Egret ...
  • Cosos H5开发工具箱(上)

    千次阅读 2017-02-10 18:24:31
    cocoscreator与cocos2d-js 都是使用 javascript 语言,前一篇《探索cocos H5正确的开发姿势(一)》讲过它们与 cocos2d-x和 cocos2d-lua 在开发理念上有很大的不同,所以他们在开发、调试中使用到的工具上也有很大区别...
  • H5游戏性能测试工具 选择与实践总结

    万次阅读 多人点赞 2018-01-16 20:26:13
    本文会对本人在使用白鹭做h5游戏进行性能测试的过程送使用的工具做一些简单记录。 包括 内存,cpu,耗电,启动时间,网络监控,弱网络,流量几个方面介绍。 背景 玩吧提测有一个性能需要求列表。需要每项指标达到...
  • 「消灭星星」是一款很经典的「消除类游戏」,它的玩法很简单:消除相连通的同色砖块。1. 游戏规则「消灭星星」存在多个版本,不过它们的规则除了「关卡分值」有些出入外,其它的规则都是一样的。笔者介绍的版本的...
  • 不用游戏引擎,怎么写游戏? 来跟着作者用 JavaScript 写一个 H5 游戏案例《辩色》 本 Chat 中包含以下内容: 需求分析、数据结构设计 HSL 调色模式 ...适合人群: 对入门游戏开发有兴趣的人员...
  • H5游戏开发实战之 - 变身盒子

    千次阅读 2015-03-02 09:19:08
    游戏界面: 在线运行 在线编辑下面我们就用 所见即所得 WYSIWYG 的方式,画出游戏的界面。准备工作1、申请一个云盘帐号,百度、又拍、新浪都可以; 2、chrome(或firefox)地址栏输入七巧板在线IDE网址:http://os
  • 微信小游戏出现后,游戏(特别是小型游戏)的开发已经进入了一个相当火爆的时期。那么作为一个普通的前端开发者,如何取选择一个合适的手游平台开发框架来学习和提高开发效率呢? 我是一名前端开发人员,目前在一家...
  • 我们的H5游戏服务器框架是用Go语言开发的。以前做页游的时候是用的php和python,都是动态语言。在上线之后,高并发的时候,单机有性能问题,一直没有好的解决办法! 13年的时候我原来的领导开始转用Go来开发手游的...
  • 前端游戏开发h5前端开发 介绍 (Intro) Front-end development involves the building of webpages and user interfaces for web applications. You may think just learning HTML, CSS and JavaScript is all you ...
  • H5游戏实战

    2017-12-15 13:35:35
    H5游戏 HTM5 游戏开发实战.pdf
  • construct2中文版HTML5游戏开发工具 construct2中文版HTML5游戏开发工具
  • 从0到1开发H5游戏

    千次阅读 多人点赞 2018-05-09 10:24:08
    前言每个游戏犹如一部电影,它能带给我们快乐,让我们在游戏世界中释放最真...H5游戏具有即开即玩、碎片化、上手简单、易玩等特点,市面上的游戏平台包括了:微信公众号、微信小游戏、QQ玩一玩、Facebook InstantGam...
  • H5游戏开发实战之 - 忍者跳跃

    千次阅读 2015-03-06 18:23:25
    这是一款快节奏的攀爬游戏游戏目标是不断的攀高,途中会遇到敌方忍者、生气的飞鸟、同时要避开屋角障碍,点屏幕时忍者会从墙的一头跳到另一头,进行躲避和击杀。先Show一下最终的成果 在线运行 在线编辑游戏...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,604
精华内容 2,641
热门标签
关键字:

h5游戏开发工具