【菜菜丸的菜鸟教程】做一个简单的游戏截图相册（1）
游戏相册是大家喜闻乐见的一个功能。有了相册，我们就可以将游戏中动人心魄的美景，精彩绝伦的战斗场面或是任何承载游戏回忆的瞬间截图保存下来，方便日后随时翻看。这个小教程就将带大家来做一个简单的游戏截图相册，它可以很方便地植入你的游戏项目中。首先要说明的是，这是一个针对新手的教程，我本人也是边学边做。虽然我尽量让这个教程简明易懂，并考虑了许多在编程中可能遇到的问题，但实现方法不一定是最优解。欢迎大家交流
·
游戏相册是大家喜闻乐见的一个功能。有了相册，我们就可以将游戏中动人心魄的美景，精彩绝伦的战斗场面或是任何承载游戏回忆的瞬间截图保存下来，方便日后随时翻看。这个小教程就将带大家来做一个简单的游戏截图相册，它可以很方便地植入你的游戏项目中。
首先要说明的是，这是一个针对新手的教程，我本人也是边学边做。虽然我尽量让这个教程简明易懂，并考虑了许多在编程中可能遇到的问题，但实现方法不一定是最优解。欢迎大家交流探讨，提出改进意见。
好了，下面就让我们一起来动手制作吧！
相册制作步骤分解
首先，要确定我们的相册需要实现哪些基本功能，然后根据这个目标来设计制作步骤。大家可以回忆一下，游戏中常见的基本相册功能有哪些？ 只是截图和显示图片显然是不够的。我们还要考虑到相册的保存数量限制，最好还能放大相册中的任何一张图片，进入“欣赏”模式。 所以，我把这个过程分为以下六步：
-
制作相册的UI。
-
实现游戏内截图和保存。
-
将保存的截图显示在相册UI中
-
如果相册已满，则提示需要删除图片，并在删除图片之前禁止截图保存。
-
删除相册中的图片
-
点击相册中的图片，放大显示。
一、制作相册的UI
首先，准备好相册UI需要的素材，大家可以去Unity资源商店下载，也可以自己搜集制作。主要包括：相册背景图、相册标题图、相框、按钮等等，这里就不赘述了。之后，在项目窗口(Project)>Assets中新建文件夹Asset Packs，再在Asset Packs文件夹下新建文件夹UI，将搜集的素材放进去。
(1)新建Unity项目(以3D核心模板为例)，在项目中新建场景(Scene)，命名为Screenshot，打开这个场景。
(2)在层级窗口(Hierarchy)中新建UI>Canvas，命名为Album Canvas。将Canvas Scaler组件中的UI Scale Mode设为Scale With Screen Size；Reference Resolution设为X=1920，y=1080；Match设为0.5。
(3)右键单击Album Canvas，新建UI>Panel，命名为Album。这就是我们的相册主体。点击Image组件的Set Native后，将Rect Transform组件中的Width设为1200，Height设为800，适当调整在窗口中的位置。然后，在Image组件的Source Image中选择一张你喜欢的背景图。(这里也可以在Image组件的Color中适当调整透明度，示例中使用的透明度为220)
注意：要使PNG等格式的图片变为能显示在相册中的图片，需要将它的Texture Type改为Sprite(2D and UI)，并点击Apply。如果你不希望图片被拉伸变形，可以在这里打开Sprite Editor，按照类似于下图的方法设置，并点击窗口右上角的Apply。最后，将Image组件的Image Type设为Sliced。
(4)右键单击Album，新建UI>Image，命名为Title。它将作为相册的标题。同上，适当调整它的长宽、位置和源图片。右键单击Title新建子物体UI>Text，设置相册标题的文字、字体、字号等，这里大家可以自由发挥创意，调整出最理想的效果。
(5)右键单击Album，新建UI>Button，命名为Album Close Btn。它将作为相册的关闭按钮。同上，适当调整它的长宽、位置和源图片。一般来说，关闭按钮放在相册右上角。如果你不希望按钮上带有文字，可以删除Button默认的子物体Text。
(6)右键单击Album，新建UI>Panel，命名为Screenshot Container。它将作为相册格子的父物体。将Rect Transform组件中的Width设为1200，Height设为800。在Image组件中，将Color的透明度改为0。
-
注意：在Screenshot Container的Image组件中，应取消勾选Raycast Target，否则可能阻挡鼠标射线，造成相册关闭按钮无法正常响应鼠标点击。
(7)右键单击Screenshot Container，新建空子物体(Create Empty)，命名为Slot Holder。这将作为相册中的图片格子。在Image组件的Source Image中选择你喜欢的相框图片，并按之前的方法调整大小和位置(我设置的大小为长300，宽200)。
(8)右键单击Screenshot Container，新建UI>Image，命名为Screenshot Slot。这将用来存放我们的截图。这里，要把它的长宽调整得略小于Slot Holder，好让相框显示出来。将Image组件中的Source Image改为None。
(9)回到Screenshot Container，点击Add Component，添加Grid Layout Group组件，它将帮助我们快速排列相册格子，使之美观整齐。我的设置如图，大家可以根据自己的喜好来调整。
(10)现在，我们可以复制多个Slot Holder出来，观察它们的排列效果，并进一步调整。我在相册中一共放了9个格子，最后的效果见下图。
到这里，相册的UI就算制作完成了。取消勾选Album，使之隐藏。接下来我们将正式开始编写相册脚本。
分享前沿Unity技术干货和开发经验，精彩的Unity活动和社区相关信息
更多推荐
1
2- 0
已为社区贡献718条内容
所有评论(0)