How To Make a DOOM CLONE in Unity || E1M7 Basic UI

Summary

本视频教程介绍了如何为Doom克隆游戏创建用户界面（UI）。首先，在Unity中创建一个新的UI Canvas，并设置为随屏幕尺寸缩放。接着，添加背景和健康指示器等UI元素，并使用锚点预设来调整它们的位置和大小。教程还涵盖了如何使用Text Mesh Pro创建自定义字体文本，并为UI元素编写脚本以实现动态更新。通过创建一个Canvas Manager脚本来管理UI元素的引用，并使用Singleton模式确保脚本可以在游戏的其他脚本中轻松访问。最终，通过在游戏脚本中调用Canvas Manager来更新UI，确保UI与游戏状态同步。

Takeaways

• 🎮 创建了一个名为'playerui'的UI画布，用于Doom克隆游戏的界面设计。
• 🔧 设置了UI的缩放模式，使其能够根据屏幕尺寸进行调整，并设置了参考分辨率1920x1080。
• 🖼️ 在UI中创建了背景图像，并调整了其大小和锚点，以适应不同分辨率。
• 👤 为游戏中的'Doom Guy'创建了四个不同的面部表情精灵，并将其设置为2D UI纹理。
• 💊 创建了健康指示器UI图像，并设置了其大小和位置，用于显示玩家的生命值。
• 🔑 创建了钥匙指示器和子图像，用于显示玩家收集的钥匙数量和类型。
• 📜 使用了自定义字体，并利用Text Mesh Pro创建了UI文本，用于显示弹药、健康和护甲信息。
• 🔄 设计了一个UI管理器脚本，用于统一管理UI元素的更新，而不是每个脚本单独更新。
• 🔑 实现了通过脚本控制UI元素的显示，如根据玩家状态更新角色的面部表情和钥匙指示器。
• 🔧 通过Singleton模式简化了对UI管理器的访问，使得其他脚本可以方便地调用UI管理器的功能。
• 🛠️ 在Unity中对脚本进行了测试和调试，确保UI元素能够正确反映玩家的状态变化。

Q & A

在Unity中创建UI Canvas的第一步是什么？

在Unity的层级结构中创建一个新的UI Canvas，并暂时命名为playerUI。

如何设置UI Canvas以适应不同屏幕尺寸？

设置UI Canvas的Scale Mode为Scale With Screen Size，并设置参考分辨率，例如1920x1080。

如何将2D精灵设置为UI图像？

将精灵拖入UI Canvas中，然后更改其Texture Type为2D UI。

如何调整UI元素的位置和大小？

使用锚点预设（Anchor Presets）来调整UI元素的位置和大小，可以通过同时按住Shift和Alt键来同时改变锚点和位置。

如何创建健康指示器UI图像？

在player canvas中创建一个新的UI图像，并命名为健康指示器（health indicator），然后使用锚点预设进行定位和调整大小。

如何为UI添加自定义字体？

首先创建一个名为font的新文件夹，将下载的.ttf字体文件拖入其中，然后在Text Mesh Pro中使用Font Asset Creator生成字体图集。

如何使用Text Mesh Pro创建UI文本？

在UI中创建一个新的UI Text Text Mesh Pro，设置字体资产，并使用Wreck Tool调整大小和位置。

如何更新UI文本元素的值？

创建一个UI管理器（Canvas Manager）脚本，该脚本持有对每个文本元素的引用，并在其他脚本中调用UI管理器的更新函数来更新值。

如何实现UI管理器的单例模式？

在Canvas Manager脚本中声明一个私有静态Canvas Manager实例，并提供一个公共静态实例访问器，确保全局只有一个UI管理器实例。

如何通过脚本更新玩家的生命值、护甲和弹药？

在玩家健康、护甲和弹药相关的脚本中调用Canvas Manager的updateHealth、updateArmor和updateAmmo函数，并传递相应的值。

如何在游戏中更新和重置钥匙的UI显示？

使用Canvas Manager的updateKeys函数来更新钥匙UI的显示，并使用clearKeys函数来重置所有钥匙的状态。

Outlines

00:00

🎮 创建Doom克隆游戏的UI界面

视频教程介绍了如何为Doom克隆游戏创建用户界面(UI)。首先，在Unity的层级结构中创建一个新的UI Canvas，并命名为playerui。设置缩放模式以适应屏幕尺寸，并设置参考分辨率为1920x1080。在Canvas内部，创建一个新的UI Image作为背景，并在项目中新建一个UI文件夹，将背景和Doom角色的四个表情精灵拖入其中。接着，更改纹理类型为2D UI，并设置背景图片的锚点和大小，调整颜色。然后，创建健康指示器UI Image，并设置其颜色和位置。此外，还创建了一个空对象作为钥匙指示器，并为其添加子图像，使用与钥匙拾取相同的精灵，并设置锚点和大小。最后，介绍了如何使用Text Mesh Pro创建自定义字体的UI文本，并调整其位置、大小和颜色。

05:04

🖌️ 完善UI设计并实现UI管理脚本

继续UI设计，教程中介绍了如何复制弹药文本并修改为健康值显示，并添加百分比符号。通过复制健康文本来创建护甲显示，并调整其在UI中的位置。创建UI管理器脚本以简化各脚本对UI元素的更新操作，避免每帧检查，而是在值变化时通知UI管理器更新。定义了Canvas Manager脚本，其中包括公共变量如健康、护甲、弹药的Text Mesh Pro UI、健康指示器Image以及钥匙的GameObject。在Unity中分配这些变量后，编写更新健康、护甲、弹药值的方法，以及更新Doom角色精灵和钥匙激活状态的函数。还实现了一个单例模式，以便其他脚本可以轻松访问Canvas Manager。

10:04

🔧 脚本编写与UI更新逻辑

本段介绍了如何在Canvas Manager脚本中编写具体的更新逻辑。详细说明了如何根据健康值更新健康指示器的精灵，并根据健康值的不同显示不同的Doom角色表情。同时，也展示了如何更新弹药和护甲的文本显示。对于钥匙的更新，通过传入键的颜色来激活相应的钥匙UI，并提供了一个清除所有钥匙的函数。此外，还讨论了如何将Canvas Manager集成到其他脚本中，例如玩家健康脚本和玩家库存脚本，以及如何调用更新函数来反映游戏状态的变化。

15:06

🔄 测试UI功能并修复问题

在完成UI脚本编写后，教程进入了测试阶段。测试中发现弹药和护甲在游戏开始时没有正确更新，因此对枪械脚本和玩家健康脚本进行了修改，确保在游戏开始时调用相应的Canvas Manager更新函数。经过修正，测试显示弹药、护甲、钥匙拾取以及角色受到伤害时的UI更新均能正常工作。视频最后表示期待在接下来的视频中进一步开发游戏玩法，并结束了本教程。

Keywords

💡UI

UI，即用户界面，是人与计算机系统交互的图形界面。在视频中，UI用于创建游戏《毁灭战士》的克隆版本，是游戏的重要组成部分，用于展示玩家的状态信息，如生命值、弹药和钥匙数量等。例如，创建'playerui' UI Canvas，以及健康指示器和弹药计数器等元素，都是UI设计的一部分。

💡Unity

Unity是一个广泛使用的跨平台游戏开发引擎，支持开发者创建2D和3D游戏。视频中提到的Unity用于构建游戏界面和脚本，如创建UI Canvas和编写Canvas Manager脚本。Unity的UI系统允许开发者设计和实现游戏的用户界面，使其适应不同的屏幕尺寸和分辨率。

💡Canvas

在Unity中，Canvas是一个渲染表面，用于显示UI元素。Canvas可以包含图像、文本、按钮等UI组件。视频中，'playerui' Canvas是用于展示玩家信息的主要UI元素，它通过锚点和位置调整来适应不同的屏幕大小。

💡Anchor Presets

锚点预设是Unity UI系统中用于快速设置UI元素对齐方式的工具。通过锚点预设，开发者可以轻松地将UI元素对齐到Canvas的边缘或角落。视频中，使用锚点预设来调整背景、健康指示器和钥匙指示器的位置和大小。

💡Sprites

精灵（Sprites）是2D图像或动画，常用于游戏中表示角色、物品或环境。视频脚本中提到了使用精灵来创建背景和角色的生命值指示器。例如，使用'doom guy'的四个面部精灵来表示角色的不同生命状态。

💡Text Mesh Pro

Text Mesh Pro是Unity的一个流行的文本渲染插件，它提供了比Unity默认UI文本更高级的文本渲染功能。视频中，开发者使用Text Mesh Pro创建了弹药、健康和护甲的文本显示，并通过调整字体、大小和颜色来集成到游戏UI中。

💡Singleton

Singleton是一种设计模式，确保一个类只有一个实例，并提供一个全局访问点。在视频中，Canvas Manager使用Singleton模式，使得其他脚本可以轻松地访问和更新UI元素，而无需每个脚本都持有对UI组件的引用。

💡Script

在Unity中，脚本是附加到游戏对象上的C#代码文件，用于定义对象的行为。视频中，开发者编写了多个脚本，如Canvas Manager、Player Health Script和Gun Script，用于控制UI更新、玩家生命值和弹药管理等。

💡Key Indicator

钥匙指示器是游戏中用于显示玩家当前拥有的钥匙数量的UI元素。在视频脚本中，开发者创建了一个名为'key indicator'的空GameObject，并在其下创建了代表不同颜色钥匙的图像，用于指示玩家收集到的钥匙。

💡Health Indicator

健康指示器是游戏中用于展示玩家生命值的UI组件。视频中，健康指示器通过一个图像组件实现，该图像会根据玩家的生命值变化而改变，使用不同的'doom guy'精灵来表示不同的生命状态。

Highlights

创建Doom克隆游戏的用户界面(UI)。

在项目中创建一个新的UI Canvas并命名为playerui。

设置UI Canvas的缩放模式以适应屏幕尺寸，并设置参考分辨率。

创建UI图像用作背景，并调整其锚点和大小。

创建并配置健康指示器UI图像。

创建空对象作为键指示器，并添加子图像表示不同颜色的钥匙。

使用自定义字体创建UI文本元素。

使用Text Mesh Pro创建弹药、健康和护甲的文本显示。

创建Canvas Manager脚本来管理UI元素的更新。

使用单例模式让其他脚本能够轻松访问Canvas Manager。

在Player Health脚本中更新健康、护甲和弹药的显示。

在Player Inventory脚本中初始化键的状态，并在获取钥匙时更新UI。

在Gun脚本中更新弹药计数并在游戏开始时初始化。

在Key Pickup脚本中根据钥匙颜色更新UI。

修正游戏开始时弹药和护甲未正确更新的问题。

完成UI的测试，确保所有元素如预期工作。

计划在未来的视频中进一步开发游戏玩法。

Transcripts

spinecamp here today we're going to make

a ui for our doom clone

and write a script to tie it all

together so on our project the first

thing we're going to do is go to the

hierarchy and we're going to create a

new ui canvas

and we'll name it playerui for now we

can go into our 2d mode while we lay

this out

but before we go any farther let's make

the scale mode scale with screen size

and put in your reference resolution

mine is 1920 by 1080.

and inside we'll create a new ui image

to start off

and let's name it background so let's go

back to our sprites folder of our

project

and i create a new folder for my ui

called ui

and i'm ready to drag in my sprites i

have a background and four face sprites

of the original doom guy

so once they're all in here we can

select them and change our texture type

to 2d

ui

and hit apply

and on the background that we just

created let's go ahead and drag in our

sprott in the source image

and untick raycast target so now we can

fix the position

and size of this thing by using the

anchor presets here at the top

i'm going to hold shift and alt to

change his anchor and position at the

same time and i'm going to click

this icon and it's going to stretch it

across the bottom and anchor it at the

bottom

to fix the height we're going to take a

peek at the background image

and we'll see here there's 224 pixels so

we can go back to the background

inspectors

and change the height manually to 224

i think this is a bit too bright so

let's just change the color

a little bit good good

so let's create another ui image in our

player canvas

and this will be called the health

indicator and the anchors i'll again use

shift and alt but this time i'm going to

anchor it without stretching

and i'm going to zoom in and we're going

to adjust the size

and then the position

we're going to set the color to black

for now

so now we're going to create an empty

and this is going to be called

key indicator we're gonna hold shift and

alt

and we're gonna anchor this to the

bottom right corner

and then we're gonna take our move tool

and move it

to the center of where we want our keys

so now as a child of the key indicator

we'll create a new image

and we're going to call this blue we're

going to move it up

to about the top position here and then

we'll resize it to something that looks

right

and for the source image of this image

we're going to use

the same sprite that we used for the key

pickups so let's go find those in our

project

and drag it in then we want to uncheck

brake as target

and before i forget let's go and do the

same thing to our health indicator

and then we can make the other two keys

the same way

we'll make a green key and then we'll

make a red key

and once we get all the keys made we can

go ahead and select them all

disable them all

so now that our images are set up let's

go ahead and work on our text

and we'll also be using a custom font

i'm going to create a new folder for our

font called font

and i'm going to drag in this dot ttf

file that i downloaded for free

the links in the description now we need

to go up to windows

and go to our text mesh pro click the

font

asset creator so if this is the first

time with text mesh pro in your project

you'll need to

import the essentials then we'll need to

select our font

for our source font file and then we're

going to click

generate font atlas and then after that

we'll hit save

we'll make sure that this is in our font

folder

and we're ready to use it so in our ui

we'll create a new ui

text text mesh pro

and name it ammo we'll be working left

or right so first off we'll hold shift

and alt

and we'll select the bottom left from

our anchor preset tool

and move it into position

in the inspector we select our new font

for the font asset

and use our wreck tool to resize this a

bit

next i'll change the text to 100

and i'll mess with the size 72 seems

good

and i'll be aligning it to the right

side

and line this up to the center

and then i'll mess with the color a bit

to get it to fit with the ui better

now we need health so let's just

duplicate our ammo and name it health

the rest are going to be percentages so

to get our text centered let's go ahead

and add a percent to the end

we'll then align this in our health

section of the ui

and then we'll duplicate the health and

you sit for our armor

and now since this is closer to the

right side of our screen

we'll use the anchor presets and while

holding shift and alt

we'll align this to the bottom right

now we can align this in the armor

section of our ui i'm just going to

check one of the other texts that we

just made

and find out what the y position is to

make sure this is straight

and with our anchors correctly set we'll

see that if we go into play mode

and mess around with our aspect ratio

that you'll see that our ui scales

accordingly

[Music]

now we have a ui canvas and we also have

our player who has these scripts

we could have each script change the

value for each text element

but we'll use a ui manager instead that

will hold a reference to each of these

text elements

now we could have the ui manager check

each script every frame but it's better

to only update our values when we need

to

so instead we'll have each script tell

the ui manager when it's changed

and it will update the correct value for

us

so with that in mind i'll select my

player ui canvas and add a

new component this will be a script

called something like

canvas manager and we'll hit enter twice

and double click it to open it in visual

studio

to begin with we only need the use in

unity engine statement

and we'll add unity engine.ui

and tm pro for our text mesh elements

now we can get rid of everything inside

the class and we'll start fresh

let's get all our variables ready to use

we'll need a public text

mesh pro ugui called health

and two more for our armor and ammo

we'll need a reference to our health

indicator where our little doom guy's

face is going to be

so we'll use public image health

indicator

and we'll need the sprotts that we're

going to use for it so public sprott

health 1

health 2 health 3 and health 4.

we'll start with health 1 being our full

health

lastly we'll need our keys that we set

up and disabled

we'll just use public game objects here

and have one for red

blue and green

before we go into the logic we'll save

the script and go into unity

and we'll assign all these variables

[Music]

so i'm going to just drag in our health

armor and ammo text

elements and our health indicator is

next

next we'll expand out our key indicator

and grab our keys

and assign them finally we need our

health sprites

and these won't be in the project so

instead we'll just drag our sprotts that

we imported earlier from our project

window

so health 1 was our healthy doom guy

health 2 was our hurt doomed guy held 3

a little bit more hurt and 4 would be

dead and before we jump back into the

script and i forget we need to select

the health indicator

and change the color back to white for

doom guy sprites to

show properly now back in the script we

need some methods to update our values

first we'll have a public void update

health and

we'll pass in an integer called health

value as the argument

now we'll need two more of these for

updating our armor and our ammo

and we'll call the ins here armor value

and ammo value now we need a function

for updating our doom guy sprite so

we're going to say public void

update health indicator and this time

with no arguments

and finally one last function

called public void update keys

now back in our update health

we'll set our health dot text equals the

health value we get

and we need to convert it to a string

with dot to string

then we'll plus percentage sign in

quotations

to take it on to the end and then if our

health ever changes we need to check

our health sprites by calling the update

health indicator function

now we'll set our armor text the same

way inside the update armor function

with the armor value and then again for

our ammo function

only this time we can get rid of the

plus parentheses

so in our update health indicator

function i lied because we're going to

need an argument

so up in the update health we're going

to pass the health value into this

function and back at the actual function

we'll grab this by adding

int health value as an argument

we use if statements to change the

sprott and since there's only three

sprouts where the player is alive we'll

split 100 into thirds

so our first statement is if health

value is greater than

equal to 66 then we set the health

indicator dot sprite to equal our health

one sprout

if health value is less than 66 and the

health value is greater than or equal to

33 then we'll set it to be

our health 2 sprite and if it's less

than 33 and greater than zero

then it's our health three spot

and if somehow it's less than zero well

you're dead and our sprout should be

health four

now we'll finish out the functions we

need with the update keys

and here i also decided to pass in

something we can use so as an argument

we'll use a string

called key color and inside the function

it'll be pretty simple with

f key color equals red

then set our red key game object to be

active with dot set active true

and we can do the exact same thing for

the other keys

and here you'll see me adding a extra

function called clear keys

which sets them all to false and this

would be used

to reset the keys say at the start of a

new level

now this is basically the completed ui

script it'll do everything we needed to

do but we need a way to easily access it

from our other scripts

and i don't want to need a reference for

each script so here i'm just going to

write out a basic singleton

we'll declare a private static canvas

manager named underscore instance

and a public static one called capital

instance

with open bracket get open bracket

return underscore instance and

close off those brackets and we'll need

an awake

where we ask if underscore instance is

not null

and it's not this

so we're saying if it exists and it

isn't this one then we'll destroy this

one

else it does exist and it is this one so

we'll set the underscored instance to

equal this

now we can save our script and go back

into unity to get the rest of our

scripts to communicate with it

we'll navigate to the player and the

first script that i'll edit is our

player health script

we're going to go up here and find our

start function and we'll say

canvasmanager.instance.updatehealth

health

we'll pass in our health now we can find

where our player takes damage

and at the very bottom of this function

after all the logic is ran

we'll say canvas manager.instance

again and we'll pass in our health

and i just realized in this function

where we take damage we could also be

taking damage to our armor

so we also want to call

canvasmanager.instance.updatearmor and

pass in our armor

now at the very bottom of our give

health function we're going to update

our health

and then at the very bottom of the give

armor function

we're going to update our armor

now we can save that script and back in

unity we'll hop into our player

inventory next

we'll create a start function because at

the beginning of this script we want to

call the last function that we made in

our canvas manager to clear the keys

and our key pickup is what actually

modifies the script anyway so we'll

update our key ui

and the actual key pickup so save this

script and it's finished

next we'll update the ammo and for this

it's pretty simple because we only have

one gun for now

so we'll open our gun script we'll find

where we deduct the ammo

and call the update ammo function

and pass in the ammo and we'll also need

to update it when we're given ammo so at

the bottom

of our give ammo function we can save

that

and back in unity finally we'll update

the keys by going and finding our key

pickup script

so once it's open we can use

canvasmanager.instance.updatekeys

and it's asking for our key color so now

we'll just use a string

so for red we'll just use red

and if is blue key we'll use the same

method but we'll pass in blue

and then we'll do green for green

save that and we can go back into unity

i'm going to collapse the ui because

we're done with it i think

and i'm going to go out of 2d mode and

if i'm correct we can just scatter

around the prefabs

and everything should work

well everything doesn't work it appears

our ammo is not updated

when the game starts so let's go up here

and in our start

function of our gun script we're going

to go ahead and call that ammo function

in our canvas manager

so we can save that the next thing i

noticed was our armor wasn't getting

updated so

we'll go into our player hell script and

also in the start function

here we're gonna update our armor as

well as our health

we can save that script then after those

two mistakes are fixed we can go

and play test and you'll see that

everything's working our ammo

our armor our key pickups and with our

hotkey we can damage the player and see

that our sprott

is being updated accordingly so with the

ui out of the way i look forward into

getting into some more gameplay

in the next few episodes so that's all i

got

spawn camp out