立即下载
EN
中文
极限开发《TheCode》和《Shoot the F》创作笔记|Cocos 技术派第11期
2019.09.24 by Cocos
教程 案例展示

在这个被越来越华丽的 3A 大作和抓住人们碎片化时间的手机游戏瓜分,甚至独立游戏的开发成本也水涨船高的年代,仍有很多复古游戏爱好者,在用行动在支持和证明,复古掌机和复古游戏仍然有着独特的魅力。

日前掌机开发商 clockwork 与机核联合举办的游戏创作活动 BOOOM GameJam 在北京落下帷幕。GameJam 要求参赛开发者在规定的时间内,根据主题【SHIFT】,完成一款包含核心玩法的游戏 Demo。

在 GameJame 上,花叔的5人团队 D.B.M 一共展出了两款利用 Cocos Creator 开发的 GameShell 掌机游戏,分别为科幻解谜游戏《TheCode》和射击生存游戏《Shoot the F》。策划、美术以及程序通力合作,在这场活动中感受到了游戏开发所带来的纯粹的造物快感。

今日团队作客 Cocos 技术派,带来这两款掌机游戏的介绍及创作理念、技术实现等分享。

原创:龙猫、辛望

编辑:C姐

文末提供了游戏【桌面网页版】,没有掌机也可试玩!

1.游戏介绍之《TheCode》

游戏类型:科幻/解密/文字/单人

创作理念:

团队成员都是做营销策划的老师傅,对于吆喝吹牛画亮晶晶的东西很擅长,对于游戏交互、机制或者关卡的认知则是非常质朴的。

主题公布前,我们就从概念入手想了 6-7 个方向:“信息解读的局限性”、“立场对立和舆论的拉拢”、“对崩溃信仰的捍卫”、“蜂群社会的创造力”和“大数据不能做的事”。

“SHIFT”的主题让我们感受比较深的是,资讯发达的现代,是否可以通用控制舆论来改变科学技术的发展呢?

这时刚好和朋友们聊到“看上去像真人的假人 VS 看上去像假人的真人”(仿生人电子羊)的话题,突然觉得这个主题如果结合“信息解读的片面性”可以完成一个比较整体的游戏,于是就有了《The Code》的故事。

游戏背景:

在机械义肢化狂热的年代,神秘的科学家(玩家)通过编撰科学理论,或者对新学说进行反驳,来干预当前社会的机械化舆论,使人们对机械化产生不信任和恐慌。

游戏玩法:

玩家用听写编撰摩斯密码(门槛难度适宜,且有挑战,好实现)给媒体接头人的方式,把对科学家、权威媒体、科学大会的反对信息,发表到行业论坛上,从而达到干扰科学进程技能树的目的。

根据难度的不同,每一条编撰的信息都有不同的内容,玩家编撰的信息如果准确度高则舆论的反应正面,反之就是显得很滑稽。

 从美术到文本《TheCode》都塞了一些私货,感兴趣的玩家可以去探索一下。

下文包含剧透:游戏中有个结局,是有反转的(不想看剧透请快速划过)。

剧透:实际上,玩家是来自未来的保留人性的半改造人,在未来时空中,人类几乎已经全机械化,并呈现蜂群社会结构。而玩家的目的,就是穿越来到现在这个时代,改变社会的科技发展方向。

场景设计:

我们设计了一些非常有趣的叙事道具:左下的厨房是作为机器人的主角无法享用的,每个关卡的最后,他都会去厨房煎蛋,然后看着煎锅发呆来作为过关动画(没有时间做了),布满蜘蛛网的床,主角是不会使用的,床边的箱子里装得是机械维护的液体,还有枯萎的植物等等。

由于时间关系,目前游戏只开发了 5 个关卡,玩法还比较单一,难度仅仅是体验在增加摩斯码的长度和播放码率,本该设计的事件和人物、场景多结局都没有加进去。

试玩视频: https://www.bilibili.com/video/av68318099/

2.游戏介绍之《Shoot the F》

游戏类型:射击/单人/生存/美食

创意来源:

我们在调侃主题“SHIFT”的时候,突然想到去掉 SHIFT-F=SHIT,哈哈!然后立马就有了新的游戏灵感:做一款“屎壳郎爸爸外出觅食”的射击游戏,团队成员都觉得很有趣,且工作量不大,就又做了一款游戏,就是这款《Shoot the F》,然后我们的小组名也诞生了,“屎壳郎小组 D.B.M”

Shit Happens Everyday,当你为今日的挫折与困难烦恼时,也许并未意识到,人生就是日复一日吃 shi 的循环,成年人的世界没有容易二字。

玩家在游戏中扮演的蜣螂爸爸,身负养家糊口的 shi 命, 踏上荒野觅食的辛苦旅程(做父亲真不容易啊)

你需要将“SHIFT”的“F”射掉,才会得到“SHIT”, 没有 SHIT,蜣螂全家都会挨饿

团队成员庞大门同学,在闲聊的时候说了一句很感人的话,“谢谢这次机会,让我们把自己平时积累的那些没用的知识用上了”,游戏的音频,90 段文案,部分质朴的美术,项目管理都是他负责的。

试玩视频: https://www.bilibili.com/video/av68317588/

GameJam 的过程很痛苦,交作业的时候很美妙,交完了很消沉,就像贤者时间。

3. 掌机游戏技术实现

为什么选择 Cocos Creator?

  • GameShell 的系统里内置了一个编译好的 ARM 版本 NWJS 执行包,使用NWJS,理论上我们就能在 GameShell上运行任意的 Web 项目。
  • 同时满足使用 JavaScript 编程,又能速导出 Web 项目的引擎,我们第一时间想到了熟悉的 Cocos Creator。
  • Cocos Creator 具有成熟且强大的跨平台能力,使用 Cocos Creator 来开发,方便我们后续将游戏发布到微信小游戏,电脑网页版甚至 Steam 等多个游戏平台。

如何将 Cocos Creator 项目发布到掌机?

1、项目分辨率

GameShell 的屏幕尺寸为 320x240 的固定尺寸,所以项目不需要做屏幕兼容。

2、交互方式

GameShell 作为掌机,并不支持 onclik,ontouch,所以在游戏交互上只能通过监听 onkeydown、onkeyup 来实现,下面是 GameShell 中常用按键的 keycode。

3、构建发布

4、定制 Loading 页

项目构建后,在 index.html 中找到以下内容:

可以发现 Loading 页的样式是通过 HTML+CSS 来实现的,所以只需要替换相应的图片素材、和修改对应的 CSS 样式即可定制 Loading 页。

5、gameshell——nw.js使用教程

nwjs-sdk:

GameShell 是 ARM7 内核的 Linux 系统,与网上 nwjs 的 Linux 版 SDK 不兼容,幸好在 clockwork os 0.4 版本的系统里自带了编译好的 ARM 版本 SDK。SDK 路径在~/apps/ 文件夹下。

添加 nwjs 启动脚本:

执行完上述命令后,掌机 UI 界面的菜单里将会多出一个 mygame 的图标,进入 mygame 将会执行 mygame.sh 脚本。

mygame.sh:

上面这条命令是调用 nwjs 的 SDK,执行 ~/games/mygame/ 文件夹下的 nwjs 项目,后面的四个参数是 ARM 版 SDK 必须要带的。

nwjs 项目文件夹结构:

package.json:

入口文件 nw_index.js:

部署 nwjs 项目到掌机:

  • ftp 链接掌机

将 mygame 文件夹复制到掌机 ~/games/ 目录下,即可点击脚本启动。

  • scp 命令直接传

项目部署的路径跟上面 mygame.sh 脚本里的路径要一致。

4. 关于跨平台

可能很多同学都没有 GameShell 掌机,但这并不妨碍大家试玩我们的游戏。

上文提到过 Cocos Creator 拥有成熟且强大的跨平台能力,所以我们花了不到一个小时的时间,就成功导出了【桌面网页版】,大家可以在网页上直接打开试玩。

奉上链接(PC 端浏览器版本):

The Code:

https://dbm-inc.itch.io/the-code

Shoot the F:

https://dbm-inc.itch.io/shoot-the-f

在线游戏/游戏下载:

The Code:

https://dbm-inc.itch.io/the-code

Shoot the F:

https://dbm-inc.itch.io/shoot-the-f5.参赛感想

BoooM Party 氛围很棒,堪称是一场开发者和硬核玩家的狂欢聚会,在摊位面对面介绍自己的游戏,看着玩家试玩的时候特别有成就感。Cocos Creator 开发效率很高,三周时间做出两个完整的游戏,这个效率真的难以想象。

6. 特别鸣谢

  • 花叔(开发)
  • 龙猫(开发)
  • 庞大门(音频/策划/美术)
  • 小柒 catwang(美术)
  • 辛望(策划/美术)

非常感谢花叔及团队小伙伴带来的精彩分享!

花叔,想必 Cocos 的开发者都非常熟悉了,腾讯高级工程师,腾讯互动娱乐创意设计部平台开发组负责人,先后对接过腾讯增值业务、架构业务以及游戏市场推广业务,喜欢倒腾小玩意,业余时间会在他的个人公众号上分享开发经验和技术教程,感兴趣的开发者请关注公众号:Minprogram。

花叔部分文章作品:

技术派,是 Cocos 全新推出的专栏,我们将不定期邀请知名的游戏制作者,为广大开发者分享来自真实项目的实用的开发技术和实战经验。欢迎大家推荐想要学习的游戏产品和想要了解的技术知识,也诚邀有技术分享意愿的开发者联系我们噢~

技术派 01 |《野蛮人大作战》H5项目从开发到上线

技术派 02 | Cocos Creator 2.0 摄像机的灵活运用

技术派 03 |  推荐一款可查看节点树的插件

技术派 04 | 实时竞技小游戏技术实现分享

技术派 05 | Camera 摄像机详解

技术派 06 | 3D 人物渲染详细教程

技术派 07 | 重度小游戏《三国封魔传》技术实现方案

技术派 08 | 畅销 SLG《乱世王者》深度优化方案

技术派 09 | 3D小游戏《快上车》技术分享