前言
去年羊了个羊的爆火，引发了我对小游戏开发的兴趣，直到现在我依然感觉小游戏市场中存有后劲，哪怕没有一夜暴富的机会，也可小小盈利一把。之前苦于自身没有设计能力，无法独立完成游戏的开发工作，今年随着 AIGC 的浪潮，AI 图片生成让开发者能自主生成一些好看的图片用于游戏素材，受益于此，开发游戏的梦想终于可以得到实践了。
本文将从以下4个方面介绍我开发并上线的第一款游戏，文章较长，感兴趣的小伙伴可以直接去阅读对应的模块
1. 前端与游戏开发
游戏开发一般是需要借助游戏引擎的，与前端童鞋们最常用的 html 不同，游戏引擎都是基于 canvas 来完成所有的界面操作的，这可能会让已经十分擅长写 css 的我们觉得游戏开发的布局很麻烦。我本次是使用 cocos-creator2.x 的版本来进行开发的，简单总结下使用 cocos-creator 的心得体会，让感兴趣的小伙伴能够快速了解两者的异同，轻松上手游戏开发。
1.1. 相似点
1.1.1. 生命周期主导的代码范式
cocos-creator 与主流的 mvvm 框架如 react, vue 一样，也是有生命周期的概念的，虽然作用不尽相同，但是这种模式相当于确定了一种开发范式，让大家写的代码，即使没有注释，也更加容易被理解。
比如 cocos-creator 的 onLoad()，就和 react 和 vue 的 mount(componentDidMount|mounted) 周期很像，尽管执行的顺序，机制不一样，但我们都会在这个生命周期里进行一些数据，元素初始化操作。
一张 3 栏分割代码图，带你了解，代码范式的力量～，可以说掌握好 cocos 生命周期，你的游戏开发就算是入门啦。
1.1.2. 组件化的思想
在 cocos-creator、react 和 vue 中，都鼓励将界面元素或功能模块封装成独立的组件，以提高代码的可维护性和重用性。这种模块化的设计使得开发者可以更容易地管理复杂的应用，提高开发效率。比如我这次做的华容道游戏，界面如下：
可以看到，目前的界面由标题，难度，积分，关卡，棋盘（棋子），重置，提示，对白组成。 如果按组件封装的思路，中间的棋盘棋子，对白对话框大概率会封装起来，其他元素可以直接在主界面罗列，大致的结构应该是
jsx
<Game>
{/* 其他元素，按钮 */}
{/* 棋盘组件*/}
<ChessMap />
{/* 对白组件*/}
<Dialog />
{/* 其他按钮 */}
</Game>cocos 中拆分组件也是一样，只需要给不同的节点，挂上不同的脚本（下文有讲如何挂），即可完成组件的拆分。
1.2. 不同点
1.2.1. 编辑器
react, vue 大家都懂得，直接 vscode 一把梭了。
cocos-creator 除了用 vscode 来写代码外，还有一个自研的编辑器，一开始我还挺不理解的，感觉是个累赘，直到我做了1～2个游戏后，我开始有些佩服起来。
自研编辑器你可以看作一个代码配置平台，一些非常成熟的功能（比如布局，动画，碰撞检测），我们根据可视化界面中的配置一一完成，这样这一部分的代码，就不用我们自己在 vscode 里手写了，vscode 中我们只用关注数据的逻辑，流程的流转就 ok 了。举个例子，以 react 为例
jsx
const Game = () => {
const [name, setName] = useState('小游戏');
useEffect(() => {
setName('小游戏1');
}, []);
return <div>{name}</div>
}
ts
const { ccclass, property } = cc._decorator;
@ccclass
export default class Game extends cc.Component {
@property(cc.Label)
name = '小游戏';
onLoad() {
this.name.string = '小游戏1'
}
}可以看到 cocos 中并没有如何渲染 name 相关的代码，这一部分的工作量由自研编辑器代劳了。
稍微提一下，cocos 如何做元素和脚本的绑定的，对没接触过但有兴趣的小伙伴也许有帮助：
首先每一个节点都可以挂载脚本，挂载后，脚本中定义的属性就会出现在可视化编辑器中，我们可以将这个场景下的需要用到的节点在编辑器中做一个快捷的映射，这样可以在编码时节省很多查找元素的工作。
- 选中左侧
Canvas, 右侧属性面板选择添加组件 -> 用户脚本组件 -> 对应脚本文件
- 此时你的脚本中定义的变量就会出现在配置面板上，将左侧节点拖拽到对应
key值处，即可完成绑定
- 最后在代码中，我们就可以直接使用
this.title对应的就是界面中的标题了
1.2.2. 页面刷新机制
众所周知，在 mvvm 框架中有个被很多新手吐槽的点，就是状态变化时需要 immutable ，才能生效。
js
class Game extends Component {
state = {
info: {
name: '小游戏',
subTitle: '今天心情好',
}
};
componentDidMount() {
// 不生效
this.state.info.name = '小游戏1';
// 生效
this.setState({
info: {
...this.state.info,
name: '小游戏1'
}
});
}
render() {
return <div>{this.state.info.name}</div>;
}
}而在 cocos 中，就是直接修改即可，究其原因，因为每一帧的刷新，都是直接渲染，并不需要做 tree diff 看看到底需不需要渲染。在对元素的把控上，cocos 与 jquery 是相当类似。
2. 游戏 & 算法
没有进入软件开发这一行前，大家都有过琢磨算法的时候（不管是学校学习，还是面试刷leetcode），诚然，这是一种很好锻炼逻辑思维能力的方法，也是入职的敲门砖，但是也给很多人造成了不适应。
很多人都说：面试造火箭，入职拧螺丝。是对算法类的问题的强烈吐槽。
但是游戏中，真的会比写业务代码更需要了解算法，尽管一部分小游戏用到的算法，是一锤子买卖，第一版写完后，后面的迭代就是缝缝补补了。
比如这次我做的华容道游戏，里面有个功能是让电脑自动帮你找到将棋子移动到出口，找了很多资料，一开始是真不想去读，读个3，4行就能放弃的那种。
最终还是参考这位大神的方案：blog.lzh.today/klotski-sol...
算法的细节就不多描述了，也很难讲清楚，上面那篇文章讲的比我好10000倍，用的是广度优先搜索算法，这样可以找到最少的步数，将曹操移动到出口处。
不过在学习的过程中，发现一个小惊喜，原来算法之间存在这么简单又迷人的关系。
3. AI绘画 & PhotoShop 技巧
经典的 AI绘画 软件 stable diffusion webui 和 midjourney 就不多说了，当然如果你能使用到 midjourney 的话，恭喜你，应该可以吊打其他。stable diffusion webui 的问题就在于偏向中国风的画风的成熟模型不太好找，一个模型文件动辄几个g，下载下来后却不一定能给你想要的效果，网络上成熟的方案都是画二次元，美女之类的，可能做养成类的游戏会比较好。
经过同事的推荐，我用了 vega.ai 创作平台，对于开发者来说，一个可以省时间的 ai 平台真的蛮好用的，因为之前的 prompt 丢失了，再写文章时，我重新写了一段，让我们来看看效果
左侧的这个基本可以满足我们对马超的定义了～，当然子龙也行。prompt 用中文也行，不过直接用英文单词，可能可以更精准些。
vbnet
prompt: A young hero , white armor, dashing and handsome, with a silver helmet and a red tassel in his hand
掌握了这个，我们慢慢收集，就可以得到一些原始图片，比如我本次做的游戏，有如下原始图片
接着我们发现有了这些画是不够的，还需要处理下，自己得掌握一些必要的 ps 技巧
对我而言掌握以下几个就足够了 (mac，windows快捷键可能不同)
ctrl + t(选中调整大小)ctrl + d（取消选区）- 使用魔棒
- 磁性套索（这个想好就是耐心一点，放大图练习，按
delete可以退到上一个点）
基本就够用了，能把一张 ai 生成的图变成一个透明背景的图，就完成了第一步，至于二次创作，动画等，我暂时还没接触到，等掌握了，再来和大家交流下心得。经过处理，我们就可以得到以下图片.
4. 软著办理与小游戏平台上线
4.1. 软著办理
有了美术和代码，小游戏很快就能做出来，但是想让朋友们能在大平台（比如微信小游戏，抖音小游戏）玩到你做的游戏，还需要做一步很关键的动作：软著申请。
软著申请并不难，现在可以完全的线上操作了：中国版权保护中心，网站感觉有时有些 bug（之前有过用户名密码无法登录的问题，用验证码登录就行）, 基本不影响使用。
准备以下信息
- 身份认证（手持身份证），拍清楚一些，要不然又要等3天
- 登记材料（这个是在网站上直接填的，不需要word文档），主要包含了申请人，软件名，运行环境，开发环境，编程语言，功能，面向行业等表单
- 文档材料
- 一份代码pdf（如果代码超过了20页，只需要20页）,就打开代码文件一个个粘贴就行
- 一份设计说明，大概包含以下内容，最好写15页以上
- 签章（网站下载打印后，手写签名，上传照片）
- 等待受理和审核（2个月内）
所以如果你很着急的要上线你的游戏，不如提前把材料准备好，先去申请软著，否则等你全部写完了，再去可能就要交钱，找黄牛才能很快下证。
我的小游戏是 6.20 日提交的申请，8.11 号拿到的软著。将近2个月了，不过随着历史存档的清理（之前都是要跑去大厅交材料），可能以后会越来越快。
4.2. 小游戏平台上线
我本次上线了抖音和微信两个小游戏平台，上线后发现，iOS 的朋友可能基本玩不上.
- 抖音小游戏在
25.8.0以上的版本，被iOS审核给搞下线了。 - 微信小游戏需要填一个苹果开发者账号，我填了个之前的，不知道有没有用。
上线两者相同的点是都要一份自查自审报告（抖音后台有模版可以生成），如果没有打印机，但是会ps，可以自己在纸上签名后拍照，再ps到报告上，算是个小技巧（偷懒不想去打印店 ^_^)。
在上线过程中，抖音小游戏平台效率是很高的，材料审核基本10分钟以内，代码审核基本2个小时左右。而且需要填写的资料也更少，游戏截图只需要 3 张。
而微信小游戏，大概要20张左右不同的截图，对于一个简简单单的小游戏，真是绞尽了脑汁～
至于游戏的运营，我还没有做过，毕竟这个游戏可玩性一般，只是作为我跑通整个流程的一个试水游戏。有了更多的经验后再与大家分享。
如果大家想体验这个游戏可以这样搜索
- 抖音
- 微信
结语
最初是源于兴趣，体验了游戏的开发，后来想想既然都做出来了，为什么不把整个流程跑通试试呢。
程序员们心中应该都有个独立开发者的梦想吧，兴趣则是我们最好的老师。
文章涉及的点比较多，很多东西想写，但是又觉得篇幅太长，太杂乱。
如果有对里面细节想了解的童鞋，可以评论下，我都会回复，欢迎一起交流开发经验（私信我），一起进步！