Swift 游戏开发之黎锦拼图(〇)

1,657 阅读6分钟

黎族有着三千年的历史,黎锦是世界非物质文化遗产之一,黎锦纺织技术通过黄道婆的改造影响后,进而提升了古代中国的纺织技术。在这个游戏中你可以体验到黎锦最核心的内容,在第一部分我将给你展示黎族的守护神之一“大力神”的神奇面貌,第二部分你可以使用内置的一些黎族标志,如动物、天气、食物等构建属于你自己的黎锦。——来自我的 WWDC19 学生奖学金项目简介

前言

第二个游戏我们将使用 UIKit 去完成,看看这个横跨整个 iOS 生命周期的框架是否能做出一些好玩的小游戏。

这个小游戏是我参加 WWDC19 学生奖学金评比的项目,并通过这个项目拿到了 WWDC19 的门票,除了机票外和晚餐外,真的可以在圣何塞一周随便玩耍且零支出。当时奖学金项目开始申请时,我还在滴滴实习,每天不但要兼顾实习的工作内容,还要尽力完成这个项目。我将从零开始,也就是从我知道今年 WWDC 学生奖学金项目开始的当天,与你一同回顾我在这十天里所经历过程,经历的这「痛不欲生」的过程。🤣

准备工作

创意搜索

今年三月十五日,我刷着微博,突然间看到了梁杰大大转发 ApolloZhu 的一条关于 Apple 今年 WWDC Scholarship 的活动介绍。我注意看了下时间,15 号早上 8 点到 25 号早上 8 点,总共就 10 天的时间,在这个十天的时间使用 Playground 做出一个 demo。当然这里说的 demo 肯定不是我们平常做技术验证那般无所谓,要求是能够完整表达自己的创意,并结合 Apple 的相关 API 完成。

大概是早上 10 点左右看到的消息,从上周五直到昨天,我整个人都处在一种十分的焦虑过程中,这种焦虑伴随着激动和不安,几乎每天晚上都没有睡好,早上到公司时也没有任何的状态,一心想着我要怎么做好这个事情。

得知这个消息后,立马开始在脑海里搜寻创意,我非常明白 Apple 对创意十分看重,然后又想到这两年 Apple 对人工智能的关注几乎到了 all in 地步,于是结合 CoreML 和 AR 能做些什么呢......

思考了二十分钟后,我彻底放弃了通过技术来搜寻创意的想法。突然灵光一闪,想到 Apple 近年来对教育和环境领域是相当重视!如果我做一个跟环境保护有关的教育项目呢?在思考的同时我又浏览了一遍 WWDC 2019 Scolarship 的 repo list,把几乎所有项目介绍中的视频都看了一遍,总结出了以下几点:

  • 不需要做太精美的 demo,但精美有加分;
  • 音乐如果运用不当还是算了吧;
  • 重点在于你要表达什么,而不是你做了什么;
  • Playground 也可以没有“交互体验”,直接看运行;

这时,我悬着的心终于可以放了下来,原来并不一定要做成向 Swift Playground 中那么精美的 demo 啊!但是值得注意的是,在去年 accepted 的 repo 中,有一部分是视觉上赢了。我在想,如果我直接拼 CoreML 和 AR 等的东西实在是没发现有什么好的点子,为何不来一个弯道超车?我也来做一个视觉上的冲击?

我继续在大脑里搜索,突然!我发现了这么**“黎锦”**这个东西一直给了我很大的震撼!它不但具备对称美、粗旷的线条,甚至还有夸张的图案!在吃午饭的时候我仔仔细细的全盘推演了一遍交互,如果我能够运用得好“对称美”这个关键点,一定很赞!经过了一番修正后,决定就是这个题目了!

黎锦

脑暴

午饭回来后,我开始清空大脑,放下所有其它事情,准备全力以赴。我首先确定了自己要做的是一个具备“对称美”的 demo,必须要围绕“对称”这个事情来展开;而且还要突出黎锦最核心的地方——粗旷的线条和夸张的图案,头脑风暴开始了......

健身完后,脑子连同身体一块轻松了,开始构思具体的交互和细节。黎锦,它的本质是纺织品,其次是黎族人对自然的崇拜的表达,最后才是工艺品,所以我最终目的也出来了:

  • 利用纺织品的底纹;
  • 突出黎族人的对自然崇拜的元素;
  • 尽可能做的精美;
  • 利用拼图的特性。

又经过了一个多小时的时间,把一些细节的地方都完善好,并确定自己也被自己陶醉了后,开始画原型图,下面是脑暴时的部分手稿:

手稿

原型图

临近下午六点时,终于把一些确定的元素都完成了。不得不说这些“突出黎族人对自然崇拜的元素”实在难以搞定,单是用 Sketch 画这几个小图,一两个小时就这么过去了,下面是原型图的展示:

原型图 1

原型图 2

插一句题外话:在此我要强烈鄙视曾经的我。以往参加各种比赛时,我都对原型图嗤之以鼻,认为这部分工作毫无意义,存粹是浪费时间。但经过 BonfirePLook 这两个项目后,给我打了一个狠狠的脸!真诚的希望大家在日后进行项目的开发工作时一定要先做好原型图。

需求确认

我们完善了项目启动初期需要做的事情后,也在脑海中过了一遍最终游戏呈现出的效果,现在根据我们已有的铺垫,列出该项目对应的需求:

  • 拼图素材准备;
  • 元素上图;
  • 状态维护;
  • 元素吸附;
  • UI 完善;
  • 判赢逻辑;
  • 胜利动效;

后记

在这篇文章中,我与你交代清楚了我为什么要做这个游戏,以及准备这个游戏的一些前期过程。可以说,我们很享受这个过程,并且我也非常喜欢为家乡做出自己微小的贡献,欢迎大家到海南来玩耍,去之前记得找我拿攻略!

我的 WWDC19 奖学金项目 github 地址(Playground):github.com/windstormey…

我的 WWDC19 奖学金项目 github 地址(iOS app):github.com/windstormey…