【菜菜丸的菜鸟教程】做一个简单的游戏截图相册(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,提出解决建议。
示例视频
更多推荐
已为社区贡献717条内容
所有评论(0)