我为女儿的生日设计了一款手机游戏

…一个月后终于发布了。


如果您有自己的孩子,则可以证明收藏过多的玩具和小装饰品似乎会使父母的生活变得混乱。 新的闪亮物体似乎正以指数级的速度堆积,直到您终于开始与朋友和家人进行尴尬的交谈。 这些对话可以用类似“谢谢,但不用谢。 请停止提供礼物。”最坏的情况是,您最终看起来像一个忘恩负义的千禧一代,最好的情况,就像是一个人。

但是你孩子的生日呢? 您是否与自己矛盾,并让她得到闪亮的新物体,以便您能建立起幸福的家庭回忆? 她会在另一周内甚至喜欢这种新事物吗,还是会成为新事物呢? 当我意识到女儿真的不需要大笔物品,但她喜欢拼图时,这些就是我开始问自己的问题。 她一直对我玩的游戏非常感兴趣,并且出人意料地精通“ Where’s Waldo”。 在仔细考虑了我为她的生日做些什么之后,这让我震惊了,为什么不给她做些什么呢?

现在,无论如何我都不是打杂工。 我不是熟练的画家或作家(正如您正在阅读的杰作所证明的那样)。 我涉足了很多爱好,但最终,只有几件事我真正地知道自己比普通人更擅长。 我不得不说,我拥有的主要差异化技能是构建事物的能力。 尤其是从移动设备到Web,从游戏到企业软件的应用程序。 因此,当然,仅仅为她打造一个游戏就很有意义。 毕竟,她确实喜欢游戏。 又有什么能显示您所爱的人,而不是在周末熬夜,赶着自己设定截止日期?


这个项目是手工制作的,我负责100%的创意和工程工作(您可能会玩的很清楚)。 这是一个非常简单的游戏,但即使是最简单的艺术品也可能很耗时。 当需要通过触摸事件和碰撞检测将插图进行动画处理并叠加在一起时,这会花费更多时间。

构架

由于高度的舒适感和熟悉度,我在此项目中使用了“本地反应”。 我每天都在Tiled使用它,并且还用它制作了tychus。 通常,本机反应相当有限。 话虽这么说,进入门槛非常低,以至于使为生日聚会准备快速游戏的想法变得切实可行。 对于这个应用程序,我使用了expo和create-react-native-app(反应本机生态系统的两个部分)来尽可能快地完成该项目。 有关构建本机应用程序的更多信息,请随时阅读我的​​其他文章,其中涉及我以前的宠物项目中的技术挑战和经验教训。

SVG

毫无疑问,这会让我的设计师朋友感到畏缩:我通过触控板完成了所有SVG工作,并使用了来自GitHub的随机SVG编辑工具代替了Illustrator或其他完善的SVG创建工具。

这是工作演示的链接(我花了很多小时在这里):

SVG编辑

编辑说明

svg-edit.github.io

这是git repo的链接,如果您喜欢这种事情:

SVG编辑

SVG-edit是一种快速的,基于Web的,由JavaScript驱动的SVG绘图编辑器,可在任何现代浏览器中使用。 – SVG编辑

github.com

获得的经验教训(针对本地反应人员)

尽管这是一个非常简单的概念,但这次我还是吸取了一些粗略的教训。 一个重要的教训是在移动设备上使用SVG进行响应的方法。

我在网络上使用SVG已有一段时间了,它们是一个知名的实体。 当试图在反应本地使用SVG时,会有些棘手。 这实际上是我真正决定挑战这个项目的另一个原因。 虽然我确实找到了在react-native中支持SVG的库,但它实际上有一些非常严重的限制(仅支持多边形对象,不支持转换等)。 除了这些限制,我在布局和位置方面也犯了一些“新手错误”。

在不深入探讨这一细节的前提下,我只想说您在游戏中遇到的场景并不是我最初设计,绘制或完全制作动画的场景。 最初,我非常努力地尝试一种“纯粹”的方法,该方法利用统一的SVG视图框并在应用程序的代码中定位项目(和动画)。 在将我的头撞在墙上足够长的时间后,我意识到,要使这种方法在我所有支持的设备上都能工作将变得更加困难。 最终,我放弃了以前所做的所有艰苦的工作,将其撕碎并重新开始。 但是,下一次,在将SVG导出为代码之前,我将每个对象都精确地精确定位在较大场景中所需的位置。

tl;博士:我试图以困难的方式导出和定位SVG,以为它更好,而实际上,更简单的方法更清洁,从而产生了更好的产品。


如果您想看看这个非常简单的游戏,甚至可能和年轻的孩子一起玩,请随时在iOS上抓住它:

查找MurV

本着“瓦尔多在哪里”的精神,玩捉迷藏的益智游戏。 这个游戏非常简单,适合儿童……

itunes.apple.com