六、点击相册中的图片，放大显示(“欣赏”模式)

(1)制作带相框大图的UI

在Popup Window Canvas下新建UI>Panel，命名为Picture Show，按照之前介绍的方法设置大小、位置、背景图等。(参考大小：长1208宽730)
在Picture Show下新建UI>Image，命名为Picture，调整大小和位置。(参考大小：长1180宽690)它将用来存放显示的截图。
在Picture Show下新建UI>Image，命名为Frame，调整大小和位置。(参考大小：稍大于Picture即可，以恰好能显示出相框为度)它将作为相框，所以还要给它挑选一张你喜欢的相框图片。相框图片的中部应为透明，否则会显示不出我们的截图。
在Picture Show下新建UI>Button，命名为Close Picture Btn，将它放到图片右上角，调整大小，并删除其默认子物体Text。
做好之后，关闭带相框大图的显示。
完成后的带相框大图UI将类似于下图：

(2)点击图片放大

SlotHolder.cs 
public GameObject largePicture;
    public Button closePicture;

    void Start()
    {        
        //给大图显示窗口的关闭按钮加上监听事件
        closePicture.onClick.AddListener(ClosePicture);  
    }

    public void OnPointerClick(PointerEventData eventData)
    {
        //单击左键显示大图
        if (eventData.button == PointerEventData.InputButton.Left  && this.transform.GetChild(0).gameObject.activeInHierarchy == true && confirmPanel.gameObject.activeInHierarchy == false)
        {
            //获得当前格子名称
            selectedSlotName = name;
            //将该名称赋给AlbumManager中的slotname
            albumManager.GetComponent<AlbumManager>().slotname = name;
            selectedSlot = GameObject.Find(selectedSlotName);
            //关闭相册
            albumManager.GetComponent<AlbumManager>().ShowOrHideAlbum();
            largePicture.SetActive(true);
         //把选中格子的图片赋给大图
            largePicture.transform.GetChild(0).gameObject.GetComponent<Image>().sprite = selectedSlot.transform.GetChild(0).gameObject.GetComponent<Image>().sprite;
        }
    }

    void ClosePicture()
    {
        largePicture.SetActive(false);
    }
点击Slot Holder，找到SlotHolder脚本，将Picture Show拖入Large Picture栏位，将Close Picture Button拖入Close Picture栏位。
这里将单击左键设为显示大图的触发键，用来确定所点击格子的方法和删除图片部分介绍的方法基本一致，只是要注意，if条件是三个而不是两个。这是因为我在开始写教程时发现了一个小bug：如果在已经单击右键打开删除图片确认窗口后，又在图片上单击左键打开大图，那么关闭大图后，确认窗口仍会显示。这时，如果点击“是”删除图片，由于整个相册已关闭，就会出现报错。解决这个bug的方法当然也很简单，在if条件后加一个确认窗口未显示即可。
到这步为止的脚本如下：
AlbumManger.cs(同第五步)
SlotHolder.cs 
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
using System;

public class SlotHolder : MonoBehaviour, IPointerClickHandler
{
    public GameObject confirmPanel;
    public GameObject albumManager;
    GameObject selectedSlot;
    String selectedSlotName;
    public GameObject largePicture;
    public Button confirmButton;    
    public Button cancelButton;
    public Button closePicture;

    void Start()
    {
        confirmButton.onClick.AddListener(CloseConfirmWindow);
        cancelButton.onClick.AddListener(CloseConfirmWindow);
        closePicture.onClick.AddListener(ClosePicture);  
    }


    public void OnPointerClick(PointerEventData eventData)
    {
        if (eventData.button == PointerEventData.InputButton.Right && this.transform.GetChild(0).gameObject.activeInHierarchy == true)
        {
            selectedSlotName = name;
            albumManager.GetComponent<AlbumManager>().slotname = name;
            selectedSlot = GameObject.Find(selectedSlotName);
            OpenConfirmWindow();
        }
        if (eventData.button == PointerEventData.InputButton.Left  && this.transform.GetChild(0).gameObject.activeInHierarchy == true && confirmPanel.gameObject.activeInHierarchy == false)
        {
            selectedSlotName = name;
            albumManager.GetComponent<AlbumManager>().slotname = name;
            selectedSlot = GameObject.Find(selectedSlotName);
            albumManager.GetComponent<AlbumManager>().ShowOrHideAlbum();
            largePicture.SetActive(true);
            largePicture.transform.GetChild(0).gameObject.GetComponent<Image>().sprite = selectedSlot.transform.GetChild(0).gameObject.GetComponent<Image>().sprite;

        }
    }
    void OpenConfirmWindow()
    {
        confirmPanel.SetActive(true);
    }

    void CloseConfirmWindow()
    {
        confirmPanel.SetActive(false);
    }

    void ClosePicture()
    {
        largePicture.SetActive(false);
    }    
}

七、结语

看到这里，你应该已经做出属于自己的游戏相册了，恭喜恭喜！在教程的基础上，大家可以发挥想象力，对这个相册做很多有趣的扩展。比如，将图片改为视频，将单页相册扩展为多页相册，等等。期待看到你们的作品！也欢迎大家对我的教程提出改进意见~
最后，衷心感谢帮助我做出这个教程的大佬们：
我跟着麦扣老师的教程制作出了自己的第一个3D RPG游戏，本教程中的相册UI系统也借鉴了麦扣老师的背包做法。所以，首先要感谢麦扣老师。
感谢路过的Madao在字典的使用上给了我很宝贵的启示。
感谢火水和大道孤心帮我分析bug，提出解决建议。
示例视频
# 游戏
Logo
Unity官方开发者社区

分享前沿Unity技术干货和开发经验，精彩的Unity活动和社区相关信息

更多推荐

cover

【unity游戏开发——热更新】YooAsset+HybridCLR代码热更新实践

avatar Unity官方开发者社区
cover

【unity游戏开发——热更新】HybridCLR代码热更新的使用

avatar Unity官方开发者社区

Unity AR动物科普

在Unity中导入制作好的动物模型，同时使用Unity的地形工具或导入外部场景资源（如从Asset Store获取），搭建与动物习性相符的虚拟场景，如草原、森林、海洋；添加环境元素，如树木、岩石、水体、天空盒，调整光照和阴影效果，营造逼真的氛围。明确要科普的动物种类（如濒危物种、常见动物等），规划需展示的知识点（生活习性、身体结构、生存环境），确定应用面向的用户群体（儿童、学生、大众），根据不同群

avatar Unity官方开发者社区