从零开始的8-bit迷宫探险【Level 29】让你的 App 与众不同!设计 Icon 及 LaunchScreen

回到村子後,山姆变成了斜杠青年,他将探险的故事写成了一本书。
书的封面印着山姆的肖像。
而书名就叫做「Magical Crystal」
「然後呢,山姆终於去攀登世界的高山了。」
「你们看,这是他登顶的照片...。」长老对着一群孩子们说。

今日目标

  • 制作并加入 App icon
  • 萤幕锁定为直屏
  • 调整启动画面

PS. 这里是开发 iOS 手机游戏的系列文,如果还没看过之前 剧情 文章的朋友,欢迎先点这边回顾唷!


制作 App icon

我们来帮 App 加上属於自己游戏风格的 icon 吧!
在专案中的 Assets.xcassets 里点击 AppIcon,可以看到需要不同尺寸的 icon
https://imgur.com/FOMgKJb.png

我们可以使用 App Icon Maker 网站来制作不同尺寸的 icon
步骤如下:

1. 点击 CHOOSE FILE,选择要制作成 icon 的图片

我们就使用山姆的照片来当 icon 吧!
https://imgur.com/SDKpLI3.png

2. 点击 GENERATE

可以看到产生了不同尺寸的图片
https://imgur.com/BvQyCP2.png

3. 我们直接点击 download iOS icons zip file 下载档案

https://imgur.com/v5aHkPG.png

4. 解压缩後可以看到图片档

https://imgur.com/AUIaGqe.png


把 App icon 加进专案

在加上 App icon 之前,我们的游戏专案 icon 会是预设图

https://imgur.com/I0TL4lD.png

接着,我们来加入 icon 吧!

请直接将图片拖拉至专案中对应的尺寸框里
https://imgur.com/SYn10jx.png

执行专案

成功加入 App icon 罗
https://imgur.com/opp8CSk.png


锁定直屏

由於我们的游戏设计是直屏,不支援横屏,所以在 Device Orientation 里,只勾选 Portrait (直屏)
https://imgur.com/oIsowew.png

iPad 也需要设定为直屏,请单独勾选 iPad,一样在 Device Orientation 里,只勾选 Portrait (直屏)
设定完之後再将 iPhone 也勾选回来
https://imgur.com/3MwaqfD.png

执行结果

旋转後都还是维持同一个方向
https://imgur.com/2rf6orI.gif


调整启动画面 (LaunchScreen)

最後,我们来帮游戏加上启动时的画面吧!
大家是否注意到启动游戏时,会有一瞬间的空白,因为我们没有设计启动画面
大家可以设计一个漂亮的图片,直接加在 LaunchScreen.storyboard 里

  • LaunchScreen.storyboard

点击画面右上角的+,开启元件库,拖移 Image View 到画面中
https://imgur.com/RBEowbm.png

https://imgur.com/w5HsP3x.png

设定图片的 Constraints,让它与上下左右的间距都是 0
https://imgur.com/AGdR3ih.png

设定完後的样子
https://imgur.com/IuPXeuG.png

准备一张图片,档名为 launch
https://imgur.com/lcz8m1X.png

将 Image View 的 image 属性设定为这张图片,缩放设定为 Scale To Fill,将图片填满画面
https://imgur.com/X9k08Rl.png

将 View 的背景颜色设定为黑色 (Black Color)
https://imgur.com/SOI65CA.png

执行结果

https://imgur.com/pKGmYKy.gif


今日小结

今天做了游戏的最後收尾,设计起始画面的图片算是最开心的一部分了!
使用 Photoshop 把现有素材排版,挑个喜欢的字体,立马生出一张背景图片/images/emoticon/emoticon42.gif


参考来源:
App Icon Maker


<<:  Day 22 - 实战演练 — Portal 系列

>>:  爬虫怎麽爬 从零开始的爬虫自学 DAY23 python网路爬虫开爬-5程序优化

Proxmox VE 设定客体机高可用性

在 Proxmox VE 建立好丛集後,已经可以使用迁移、复写等等的功能以提升客体机的不停机服务时...

别在乎别人做什麽;做得比自己好,每天突破自己的纪录,你就是一位成功者!

别在乎别人做什麽;做得比自己好,每天突破自己的纪录,你就是一位成功者! Never mind wha...

Sass @import DAY34

今天我们要来学习如何把Sass切分支许多档案 这样会使我们比较容易管理 @import(汇入) 可将...

如何共用行事历?

公司使用Office365商业基本版 没有自建邮件服务器,是使用中华电信的hibox挂在Outloo...

31 赛後想法与游戏连结

再贴一次游戏规则 建立游戏: 按下 "Start a game" 後,下面有 &...