，几个大厂小伙，产品策划，设计师，程序员，一起打造游戏，48小时，能有什么被开发的游戏？背景上周末，我们几个人从周五晚上到周日晚上激战了48小时。游戏策划、游戏美术、游戏开发，一切从零开始！创造了一个新玩法的游戏，并参加了GMTKGameJam2022比赛。现在比赛已经结束，共有6217个参赛作品。活动介绍GMTKGameJam是一年一度的游戏制作马拉松，个人和团队在短短48小时内尝试制作符合主题的游戏。人工翻译：GMTKGamJam是一年一度的游戏制作马拉松，个人或团队需要在短短48小时内制作出符合主题的游戏。本期的主题是“掷骰子”。该主题可能会立即激发随机性和概率，或棋盘游戏和赌场的想法，但一如既往-您可以随心所欲地解释这个主题。人工翻译：本期主题是Rollthedice。这可能会让你想到随机性、概率或者桌游等等，当然你也可以用自己的方式来解读这个话题。游戏体验地址这是第一次参加GMTK游戏jam2022，不过我不拉票了，因为注册后打10个作品再给任何作品打分很麻烦。游戏如下，点击DiceCrush的itch.io页面玩：https://itch.io/jam/gmtk-jam-2022/rate/1622181我也部署在我的服务器上：https://game.hullqin.cn/diceday1清晨：题材的游戏思路非常灵活，容易适用于各种类型的游戏。思路一：只考虑现有的游戏类型，但任何摇骰子的随机因素都可以契合主题。例如：王者荣耀掷骰选择英雄，射击游戏掷骰选择武器，超级马里奥掷骰选择关卡等。想法2：考虑使用骰子作为核心元素的游戏。比如大富翁，飞行棋等等。引入很多随机事件，但这种情况很容易造成整个游戏随机性大，用户没有参与感。因此，需要用户做出主观选择，影响游戏进程，获得可玩性。以上两个应该是将骰子融入游戏的常见思路。但我们认为游戏需要创新。以上两种思路主要是循规蹈矩，没有什么新意。而我们希望创造一个可玩的玩法，所以通过了以上两个想法。最终我们想出了这个游戏玩法：受俄罗斯方块启发，但玩法不同。设置一个6*10的游戏区域，每个格子里放一个骰子，每个骰子都有一个数字（1-6）。如果水平骰子的点数总和或垂直骰子的点数总和等于一定数，则可以消除。大家一致认为这个玩法很好，于是朝这个方向发展。这时候，我们花了8个小时（凌晨1点提出问题，凌晨3点提出想法，9点达成共识）。核心玩法：此时已经10点多了，程序员（我）起床了。我太高兴了，一觉醒来就有了计划。day1下午：MVP版本作为程序员，是时候进行技术选型了。今天就给大家出一个MVP版本，让大家体验一下，看看玩法是否需要适当调整一下。与此同时，其他同学也在忙着定美术风格，找音效，找BGM~技术选型是因为组里多了一个开发同学，但是他是做算法的，对JS不是很了解，所以他需要学习新东西，所以我的结论是：没有cocoscreator这样的游戏框架，没有React这样的前端框架，没有PixiJS这样的渲染框架。尽量使用原生的JS来实现，使用dom来展示各种游戏元素，让他能够快速的理解和修改代码。（因为他这周看了原生JS做的游戏的代码）。当然，使用原生JS还需要编译和引入类型定义，这样可以大大提高开发效率。所以我使用Vite作为打包框架。怎么做？使用Vite以React-ts为模板，然后删除React相关的依赖和配置。然后就可以用typescript写原生JS代码了~Development这是commit记录，右边显示的是前两个commit文件列表：讨论玩法细节的时候，还有一些小细节没讲完之前考虑过，比如：我们的结论一定要淘汰。又比如消除掉中间某行后，有一个空格，上面的骰子会不会掉下来。作为一个程序员，为了给自己减轻工作量，找了这个借口说服产品：如果去向，之前的数字布局发生了变化，有人可能会依法安排，会乱的。如果让玩家预测淘汰后的链条，这不像匹配，链条很直观。我们的骰子数独并不直观。这串玩家更可能是靠运气而不是靠实力。如果说有靠实力的，那肯定是少之又少。MVP初体验就是MVP，就不介绍音效和画面了。我优先考虑核心玩法的实现，方便测试产品的可玩性。效果如下：day2凌晨：此时真正的MVP，素材基本敲定，我把核心玩法添加到骰子素材中，供大家体验。还添加了一些音效。打开体验后，他们发现它非常有趣和令人上瘾。更加坚定了我们继续前行的决心。Day2：产品和开发的冲突产品同学疯狂画素材，群里发了一张又一张的，产品已经画了5-6页：但是我今天的工作量很重，包括：路由逻辑需要从0开始开发（使用native的缺点是没有ReactRouter这么方便的工具），我用window.history手写了一个SPA。很多素材只是作为背景放置，需要手动调整距离。比如我需要实现一个固定比例的按钮，保证按钮和图片的大小一致。Button的点击状态和Hover状态也需要通过改变背景来实现。要使游戏画面适应各种宽度和高度的设备，您必须编写自己的样式。音频播放和BGM切换需要手动实现，其他库我没用过。按键事件的响应需要手动实现，其他库我没用过。产品同学很NICE。当我的团队提前告知我无穷无尽的“风险”时，我立即通过电话与我沟通。我表达了具体原因，并提出了自己的建议：产品交互越简单越好。我的建议是从首页开始，点击后直接选择关卡，点击关卡后直接开始游戏，不需要设置复杂的中间页面。产品同学接受了，并按照这个想法画了一个新的原型图，并给出了设计稿。与这样的团队共事真是太棒了！Day2晚上：一起提交，还是遇到了一些问题。比如我用Vite打包构建之后，在他们的系统上跑不了。查了一下，发现所有在系统上运行的资源都会有一个前缀（https://v6p9d9t4.ssl.hwcdn.net/html/6180032/），但是我打包的都是绝对路径，很多资源都是/xxx路径，导致404。方案一：可以通过Vite配置文件的target.base指定绝对路径前缀。但是发现每次打包上传资源前缀号都会变化，这是不可预知的。不得不放弃。方案二：通过相对路径打包调整所有静态资源的导入方式。最终耗时半个多小时，使用方案二成功上传静态资源~撒花~欢迎来玩：https://game.hullqin.cn/dice我还贴心的添加了功能：暂停，缓存.隐藏浏览器后，游戏暂停（并暂停BGM）。关闭页面后，记录也会保存在localStorage中，下次玩同样的关卡，还可以继续赚取积分！昨晚用Target=26，在飞机上得到了11170分。你得了多少分？把游戏截图发到评论区吧！最后我是HullQin，我独立开发《联机桌游合集》，是一个网页，可以轻松和朋友一起在线玩游戏，五子棋等游戏，不收费，无广告。喜欢的话可以关注我~有空我会分享制作游戏的相关技术。
