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

(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活动和社区相关信息

更多推荐