[教你做小游戏] H5小游戏技术选型分析,低代码?小游戏框架?canvas或SVG?还能用React?

我是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实现,可方便的适配多种分辨率 不适合开发工程量大的游戏;不适合制作包含复杂动画的游戏

方案决策树

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

[教你做小游戏] H5小游戏技术选型分析,低代码?小游戏框架?canvas或SVG?还能用React?_第1张图片

但是具体的技术选型,情况相对复杂,还需要各位根据实际情况,权衡一下各个方案的优缺点,作出最终抉择。

当然最重要的决定因素还是看上手成本,很多时候我们不用某项技术,不是因为它不好,而是我们认为:不花精力学它、使用已熟练掌握的技术方案我们能更快实现,这一点,对个人技术选型、团队技术选型均适用。

案例

《联机五子棋》

游戏体验地址

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 噢~我有空了会分享做游戏的相关技术。

你可能感兴趣的:([教你做小游戏] H5小游戏技术选型分析,低代码?小游戏框架?canvas或SVG?还能用React?)