【菜菜丸的菜鸟教程】做一个简单的游戏截图相册（6）（完结篇）
六、点击相册中的图片，放大显示(“欣赏”模式)(1)制作带相框大图的UI在Popup Window Canvas下新建UI>Panel，命名为Picture Show，按照之前介绍的方法设置大小、位置、背景图等。(参考大小：长1208宽730)在Picture Show下新建UI>Image，命名为Picture，调整大小和位置。(参考大小：长1180宽690)它将用来存放显示的截图。
·
六、点击相册中的图片，放大显示(“欣赏”模式)
(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，提出解决建议。
示例视频
分享前沿Unity技术干货和开发经验，精彩的Unity活动和社区相关信息
更多推荐
1
1- 0
已为社区贡献739条内容
所有评论(0)