关于前端:教你做小游戏-H5小游戏技术选型分析低代码小游戏框架canvas或SVG还能用React

25次阅读

共计 2052 个字符,预计需要花费 6 分钟才能阅读完成。

我是 HullQin,公众号 线下团聚游戏 的作者(欢送关注公众号,发送加微信,交个敌人),转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》,是个网页,能够很不便的跟敌人联机玩斗地主、五子棋等游戏,不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢~我有空了会分享做游戏的相干技术。

问题形容

如果咱们想做一个 H5 小游戏,该用什么技术呢?

计划

4 种技术选型

前端的实现计划太多了,我依照 封装水平从高到低 列举了以下 4 种计划:

  • 低代码 / 无代码计划:应用现有的小游戏开发工具,能够套用其它游戏模版,改改素材间接做好。例如 RPG Maker MV 等。(当然如果你会写 RM 脚本,也能够把 RM 归类到小游戏框架 / 工具)
  • 小游戏框架 / 工具:应用现有的小游戏开发框架,集成了动画、素材、音效、物理引擎等制作游戏罕用的工具。例如 cocos、白鹭等。
  • 基于 canvas 的渲染库:应用更底层的前端库,针对 canvas 封装了适宜游戏开发的渲染 API。例如渲染 2D 的 pixi.js、渲染 3D 的 three.js 等。
  • 手撸:应用 canvas,通过 JS 绘制游戏;或应用 SVG、div 等 dom 标签(此时可搭配 React)绘制游戏。

优缺点

计划上手老本游戏代码体积特点限度
低代码 / 无代码计划与模板相干,通常不小交付速度快游戏玩法受模板限度,较难有创新性
小游戏框架 / 工具略大功能齐全;适宜各类小游戏;素材治理不便;适宜团队合作、迭代开发加载速度略慢
基于 canvas 的渲染库比起手撸:渲染速度快,适宜动画多或每帧刷新的场景须要本人搭配或开发物理引擎、音效、动画等(相当于本人灵便选插件,组装一个专属该游戏的游戏框架)
手撸很小简略游戏交付速度快;若用 dom 实现,可不便的适配多种分辨率不适宜开发工程量大的游戏;不适宜制作蕴含简单动画的游戏

计划决策树

为了不便各位做技术选型,我绘制了一个决策树:

然而具体的技术选型,状况绝对简单,还须要各位依据理论状况,衡量一下各个计划的优缺点,作出最终抉择。

当然最重要的决定因素还是看上手老本,很多时候咱们不必某项技术,不是因为它不好,而是咱们认为:不花精力学它、应用已熟练掌握的技术计划咱们能更快实现,这一点,对集体技术选型、团队技术选型均实用。

案例

《联机五子棋》

游戏体验地址

https://game.hullqin.cn/wzq

计划

手撸,React + SVG

你可能会好奇:React 还能做游戏?还能绘制 SVG?不要诧异,我甚至能通知你:React 还能做动作类游戏,成果也不会很差!能够关注我,当前教你😄

起因

  • 无需简单动画,且分辨率须要适配多端,故放弃应用 canvas。
  • 为了更好用户交互体验,棋盘须要容许放大,要求放大后棋子保真,故抉择了 SVG。
  • 游戏是 数据驱动 的,即通过棋盘棋子数据要渲染出 SVG,每次下棋也只是批改了游戏数据。所以抉择了 React。

对于《联机五子棋》的用户体验,可参考:

  • 《我做的《联机五子棋》是如何谋求极致用户体验的?(上)》
  • 《我做的《联机五子棋》是如何谋求极致用户体验的?(下)》

参考代码

无 React 版本,纯 SVG + dom API 实现: https://github.com/HullQin/gobang

《联机斗地主》

游戏体验地址

https://game.hullqin.cn/ddz

计划

手撸,React + div

起因

  • 冀望游戏加载速度很快,故放弃应用框架和大量游戏素材。
  • 无需简单动画,网页须要响应式,故放弃应用 canvas。
  • 游戏是 数据驱动 的,即通过场上扑克牌数据要渲染出游戏界面,每次出牌也只是批改了游戏数据。所以抉择了 React。

参考代码

React 实现的版本: https://github.com/HullQin/poker_fe

《合成大西瓜》

计划

cocos

起因

去年 2 月火爆全网的《合成大西瓜》是个绝对残缺的游戏,蕴含了物理引擎、素材、动画、音效,且他们团队是有人员分工的,且冀望疾速上线,那么应用游戏框架就是最佳抉择。

预报

我最近筹备复刻一个《合成大西瓜》,但不应用 cocos,而是应用 2D 渲染库 pixi.js 和 2D 物理引擎 box2d 来实现,减少了其它游戏玩法,敬请期待(不必 cocos 是因为我精力比拟多,不谋求疾速上线)。

更新:我曾经公布啦,快来玩:《《合 成 大 西 瓜》重 制 版!(联 机 版 在 做 了)》!(游戏地址在文章里)

备注:以后网上很多《合成大西瓜》的魔改版本,大都是基于原版游戏的 cocos 打包产物来批改的,其中外围代码曾经被 uglify(混同),所以魔改时有诸多限度,也很难发明出新的玩法。

写在最初

我是 HullQin,公众号 线下团聚游戏 的作者(欢送关注公众号,发送加微信,交个敌人),转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》,是个网页,能够很不便的跟敌人联机玩斗地主、五子棋等游戏,不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢~我有空了会分享做游戏的相干技术。

正文完
 0