王者荣耀实时对战服务器Photon之PUNLobby UI

发表于2017-11-18
评论0 3.2k浏览

本部分将重点介绍为大厅创建用户界面(UI)。 它是Unity开发游戏的基础,也就是纯Unity的开发和使用,与Photon网络关联不是很大,但是这是游戏必须开发实现的内容。

The Play Button

目前,我们的大厅自动将我们连接到一个房间,这对于现阶段测试是有好处的,但是我们希望让用户选择是否加入房间。所以我们只需要提供一个Button即可。

1,打开Unity场景启动器。

2,使用Unity菜单“GameObject / UI / Button”创建一个UI按钮,命名为“按钮”按钮

注意它在场景层次结构中创建了一个Canvas和一个EventSystem GameObject组件。

3,Play按钮的子文本值编辑为“播放”

4,选择播放按钮,然后找到按钮组件中的On Click()部分

5,点击小的'+'添加一个条目

6,将启动器GameObject从层次结构拖动到字段中

7,在下拉菜单中选择Launcher.connect()现在我们已经将Button与我们的Launcher Script连接起来了,所以当用户按下该按钮时,它会从我们的Launcher脚本中调用“Connect()”方法。

8,打开脚本启动器。

9,Start()中删除我们调用Connect()的行,之前为了测试我们之间在Start()方法中进行连接测试的。

10,保存脚本启动器并保存场景。

如果你现在打了运行场景,注意你直到你按下按钮才会连接,因为在Start函数中已经没有Connect(),它已经绑定到了Button按钮上。

The Player Name

一般在游戏中都需要让用户输入他们角色的名字,以便其他玩家知道他们在玩什么。 我们将添加一个简单的任务,通过使用PlayerPrefs来记住名称的值,以便当用户进入游戏场景时,我们可以传递名称。 这是一个非常方便和相当重要的功能,在游戏经常会用到。

我们先创建一个脚本来管理和记住角色的名称,然后创建相关的UI

创建PlayerNameInputField

1.创建一个新的C#脚本,称之为PlayerNameInputField

2.这是它的全部内容。 相应地编辑并保存PlayerNameInputField脚本:

我们分析一下这个脚本:

RequireComponent(typeof(InputField))

我们首先确保这个脚本执行了InputField,因为我们需要这个脚本,才可以获取到用户输入的信息。

PlayerPrefs.HasKey(),PlayerPrefs.GetString()和PlayerPrefs.SetString()

PlayerPrefs是配对条目的简单查找列表(如具有两列的Excel表格),一个是关键字,就是Value。钥匙是一个字符串,完全是任意的,你决定如何命名,你将需要在整个开发过程中保持唯一。因此,将PlayerPrefs键始终存储在一个本地的,一个方便的方式是使用[Static |变量声明,因为它不会随着游戏中的时间而改变,并且每次都是一样的。

所以逻辑非常简单。如果PlayerPrefs有一个给定的键,我们可以得到它,并在我们启动这个功能时直接读取该值,在我们的例子中,当我们启动时输入InputField,在编辑过程中,我们将PlayerPref Kea与当前的InputField的值,然后我们确定它已被存储在用户设备本地以备以后检索(下一次用户打开此游戏)。

PhotonNetwork.playerName

这是本脚本的要点,通过网络设置角色的名称。脚本在两个地方使用它,一旦在游戏场景启动之后,检查该名称是否存储在PlayerPrefs中,并在公共方法SetPlayerName()内。现在,没有什么是调用这个方法,我们需要将InputField OnValueChange()绑定到调用SetPlayerName(),以便每次用户编辑InputField时,我们都会记录它。只有当用户按下播放按钮时。

创建角色名称的UI,这是角色跟随的UI

使用Unity菜单“GameObject / UI / InputField”创建UI InputField,名称为GameObject Name InputField

RectTransform中的PosY值设置为35,以便它位于播放按钮的上方

找到Name InputFieldPlaceHolder子项,并将其设置为“输入您的名称...

选择Name InputField GameObject

添加我们刚刚创建的PlayerNamerInputField脚本

找到InputField Component中的On Value ChangeString)部分

点击小的'+'添加一个条目

拖动将组件PlayerNamerInputField启动到字段中

在下拉菜单中选择“动态字符串”部分下的PlayerNameInputField.SetPlayerName()

保存场景

现在,您可以运行场景时候,输入您的名字,并停止播放,再次运行,您输入的输入刚刚显示。

连接进度

我们将在输入角色的名称之后,点击按钮进行网络连接,可以连接到photonCloud。在连接的时候在UI界面上显示“正在连接...”。

要做到这一点,我们将分组播放按钮并命名字段,以便我们只需激活和停用该组。后来更多的功能可以添加到组,它不会影响我们的逻辑。

1.确保你还在游戏场景中。

2.使用Unity菜单“GameObject / UI / Panel”创建一个UI面板,命名为GameObject Control Panel

3.从控制面板中删除图像和画布渲染器组件,我们不需要此面板的任何视觉效果,我们只关心其内容。

4.将播放按钮和名称输入框拖放到控制面板上

5.使用Unity菜单“GameObject / UI / Text”创建UI文本,名称GameObject Progress Label不用担心它在视觉上干扰,我们将在运行时相应地激活/禁用它们。

6.选择进度标签的文本组件

7.将对齐设置为中心对齐和中间对齐

8.将文本值设置为“正在连接...

9.将颜色设置为白色。

10.保存场景

此时,为了进行测试,您可以简单地启用/禁用控制面板和进度标签,以查看各种连接阶段的内容。现在我们来编辑脚本来控制这两个GameObjects的激活。

1.编辑脚本启动器

2.在公共属性区域中添加以下两个属性

[Tooltip("The Ui Panel to let the user enter name, connect and play")]

public GameObject controlPanel;

[Tooltip("The UI Label to inform the user that the connection is in progress")]

3.添加到Start()方法如下

progressLabel.SetActive(false);

controlPanel.SetActive(true);

4.Connect()方法的开头添加如下

progressLabel.SetActive(true);

controlPanel.SetActive(false);

5.添加到OnDisconnectedFromPhoton()方法的开头如下

progressLabel.SetActive(false);

controlPanel.SetActive(true);

6.保存脚本启动器并等待Unity完成编译

7.确保你还在现场启动器。

8.在层次结构中选择GameObject Launcher

9.从“层次结构控制面板”和“进度标签”拖放到其启动器组件中的各自的字段

10.保存场景.

现在,如果你运行游戏场面。 您将只看到控制面板,只要您点击播放,Progres标签就会显示。

现在,我们对大厅部分基本完成。 为了进一步向大厅添加功能,我们需要切换到游戏本身,并创建各种场景,以便我们在加入房间时根据不同人数加载正确的房间地形。 我们将在下一节中做到这一点,之后我们将完善大厅系统。


不管你有关于Photon产品的问题或者是Photon价格问题或者Photon教程方面的问题或者其他问题都可以联系我们给我我们留言,我们真诚的为您服务。关注我们公众号PhotonServer获取等多新鲜资讯。


关注我们公众号PhotonServer 获取最新教程资源。

王者荣耀实时对战服务器Photon之Pun应用系列文章 如果你喜欢请关注我公众号,并推荐给你你的小伙伴,谢谢。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引