

【菜菜丸的菜鸟教程】3D幸运球抽奖器(二)
Penny Lu
挚爱Unity的入门级选手
阅读 945
2024年11月8日
在之前的菜鸟教程中,介绍过如何制作简单的抽奖器(https://developer.unity.cn/projects/65d01949edbc2a001a10c56f)。在本教程中,抽奖器升级为3D版,不仅可以目睹幸运球摇出的刺激过程,更增添了丰富有趣的效果。现在就来做做看吧!
二、UI
1.左上角按钮

首先来做左上角两个按钮。创建两个Button对象,分别命名为btnInputName和btnInfo。按你的喜好设置按钮背景图,并将对应按钮的Text改为“输入抽奖ID”和“制作组信息”。

注意:在创建UI元素时,要做分辨率自适应。
(1)修改Canvas相关设置。
将Canvas Scaler中的UI Scale Mode设为Scale With Screen Size。将Reference Resolution改为目标屏幕分辨率,Screen Match Mode改为目标匹配方式。以横版游戏为例,建议按照Width进行匹配。如图:

(2)将两个按钮Rect Transform中的对齐方式设为左上角对齐。

2.输入姓名面板
这个面板用来输入参与抽奖者的姓名。
在层级窗口中,新建一个Panel,重命名为InputNamePanel,Image组件的Color根据需要设置。

观察输入姓名面板,可以看到它有背景图、输入框、滚动视图、按钮、文字等UI元素。滚动视图位于右边空白区域,在这里会即时生成参与抽奖者列表。
在InputNamePanel下,创建以下UI元素:

imgBK:背景图
inputFieldName:姓名输入框
svNames:即时生成姓名列表滚动视图
txtInputInfo:说明文字
btnCloseInputNamePanel:关闭输入姓名面板按钮
btnClearNames:清空列表按钮
btnNameSure:确定按钮
各UI元素分布如下:

由于姓名列表是纵向列表,因此不需要水平滚动条。删掉InputNameSV下的Scrollbar Horizontal,同时将Scroll Rect组件中的Horizontal Scrollbar置空,并将Visibility设为永久显示(Permanent)。

此外,由于姓名列表可能较长,所以建议将Content的高度设为超过Viewport的高度,具体参数可根据需求调整。
3.制作组信息面板
这个面板用来显示素材出处、制作组名单等信息。
在层级窗口中,新建一个Panel,重命名为InfoPanel,Image组件的Color根据需要设置。
在InfoPanel下,创建以下UI元素:

imgBK:背景图
txtTitle:标题文字
txtMainInfo:主要信息文字
txtNote:附注文字
btnCloseInfoPanel:关闭制作组信息面板按钮
各UI元素分布如下:

4.提示面板
这个面板用来显示提示信息。
在层级窗口中,新建一个Panel,重命名为TipsPanel,Image组件的Color根据需要设置。
在TipsPanel下,创建以下UI元素:

imgBK:背景图
txtTips:提示信息文字
btnCloseTipsPanel:关闭提示面板按钮
各UI元素分布如下:

5.庆祝面板
这个面板用来显示中奖者信息。
在层级窗口中,新建一个Panel,重命名为CongratulationPanel,删掉Image组件。
为了呈现庆祝中奖的效果,我们会给中奖者信息做个简单动画。在CongratulationPanel下,新建一个空物体,重命名为congItems,作为动画对象。
在congItems下,创建以下UI元素:

imgBK:背景图
txtCong:庆祝文字
各UI元素分布如下:

现在来做动画效果:庆祝文字和图片从小变大,同时旋转一周,动画持续时间为1秒。
选中congItems,新建一个动画片段,命名为RotateImg。
点击开始录制按钮,在第0帧将Scale设为一个极小值,如(0.0001,0.0001,0.0001),在第60帧将Scale恢复为(1, 1, 1)。然后,设置旋转参数。在第0帧、第20帧、第40帧、第60帧分别将Rotation的Z设为0、120、240和360。做好动画后,记得取消勾选动画片段的Loop Time。由于动画只随着面板激活出现一次,因此无需做动画控制器。
0条评论

问
AI
全新AI功能上线
1. 基于Unity微调:专为Unity优化,提供精准高效的支持。
2. 深度集成:内置于团结引擎,随时查阅与学习。
3. 多功能支持:全面解决技术问题与学习需求。

问
AI