how-to-make-a-video-game-in-unity-score-ui-e0

Jiezcode

2025-11-18 2025-11-18

Course: 【油管100w+】 Unity 入门视频

🎮 视频标题｜How to make a Video Game in Unity — SCORE & UI (E07)

👤 主讲人｜Brackeys

📅 系列定位｜Unity 初学者系列 Episode 07

🏷 关键词｜UI系统｜ Canvas ｜ Text组件｜ Transform ｜ ToString ｜字体导入｜实时分数显示｜ Format格式化

🏛 课程目标

为游戏添加一个实时更新的分数系统（Score System），
学习使用 Unity UI 系统（Canvas + Text），并理解如何在脚本中与 UI 元素交互。

🧭 项目整理：结构优化

创建文件夹结构以保持整洁：
- 📂 Scripts → 存放 PlayerMovement.cs、PlayerCollision.cs 等
- 📂 Materials → 存放材质 ObstacleMat、PlayerMat
- 📂 Fonts → 用于自定义字体（稍后导入）

🧩 养成良好的项目管理习惯，将来项目增大时维护更轻松。

📦 修复碰撞检测问题（精度提升）

出现问题：

玩家偶尔穿过障碍物未检测到碰撞。

解决方案：

1️⃣ 选中 Player 与 Obstacle → Rigidbody → Collision Detection 设置为 Continuous

2️⃣ 打开 Edit → Project Settings → Time → 将 Fixed Timestep 从 0.02 调整为 0.01

→ 让物理更新更频繁，减少漏检。

3️⃣ 因时间步更短 → 玩家需要更大的力：

ForwardForce = 8000
SidewaysForce = 120

✅ 碰撞检测更平滑，控制手感保持一致。

📚 创建 UI 界面（Canvas + Text）

1️⃣ 在 Hierarchy 右键 → UI → Text

→ 自动生成 Canvas（画布）+ EventSystem。

2️⃣ 进入 2D 模式（快捷键 2D 按钮），选中 Text → 按 F 聚焦。

3️⃣ Canvas 特性：

自动适配 Game View 尺寸
Text 是在屏幕坐标中渲染的，不随场景摄像机移动

4️⃣ 调整 Text 属性：

水平、垂直居中
字体大小约 250
文本内容：250（占位）
颜色：白色
对齐方式：Center

🎯 画布（Canvas）是所有 UI 元素的容器，
它在屏幕空间上绘制图像，与 3D 场景分离。

🧠 调整 UI 缩放模式

默认 Canvas Scaler 设置为：

“Constant Pixel Size”（像素大小恒定）

切换为：

Scale With Screen Size
让 UI 随屏幕分辨率自动缩放。

这样无论窗口多大，字体位置比例都保持一致。

同时可勾选 Pixel Perfect 提高渲染清晰度。

📚 导入自定义字体

“我真的真的讨厌 Arial！” —— Brackeys 😄

推荐字体：Roboto（Google Fonts）

导入步骤：

1️⃣ 前往 fonts.google.com → 搜索 “Roboto”

2️⃣ 下载 ZIP → 解压 → 拖入 Unity Fonts 文件夹

3️⃣ 在 Text 组件的 Font 属性中选择 Roboto-Regular 或 Roboto-Light

📘 提示：

黑色文字在浅色背景上更清晰
可根据场景氛围调整颜色与粗细

🧩 编写分数脚本：Score.cs

目标：让文本动态显示玩家在 Z 轴方向的移动距离。

using UnityEngine;
using UnityEngine.UI;

public class Score : MonoBehaviour
{
    public Transform player;     // 玩家引用
    public Text scoreText;       // UI 文本引用

    void Update()
    {
        scoreText.text = player.position.z.ToString("0");
    }
}

📘 关键点解释：

player.position.z：玩家前进的 Z 坐标值
.ToString("0")：将浮点数格式化为整数文本
public Text：允许拖入 Unity 的 Text 组件引用

🎯 将脚本挂在 Text 对象上

→ 拖入 Player（Transform）与 Text（组件）引用。

🧪 关于数据类型与类型转换

类型	说明	示例
`float`	小数值，如玩家坐标	`3.14f`
`string`	字符串（文本）	`"Score: 5"`
`.ToString()`	将数值转为文本	`score.ToString("0")` → “5”

🧩 注意：若直接将 float 赋值给 string，会报错：
“Cannot implicitly convert type ‘float’ to ‘string’”。

✅ 完整工作流回顾

步骤	内容	文件
1️⃣	创建 UI Canvas + Text	Hierarchy
2️⃣	导入字体	Assets/Fonts
3️⃣	调整 Canvas 缩放模式	Inspector
4️⃣	编写 `Score.cs`	Scripts 文件夹
5️⃣	连接引用（Player + Text）	Inspector 面板
6️⃣	测试 → 跑动中实时更新分数	Game View

结果：

玩家前进时，屏幕中央实时显示分数（距离），字体清晰，比例自适应。

🧠 补充知识点

概念	说明
Canvas Render Mode	控制 UI 绘制空间（Screen Space、World Space）
UI Text vs TextMeshPro	TextMeshPro 提供更清晰字体与丰富排版，后续可升级
ToString 格式控制	`"0.00"` 保留两位小数；`"0000"` 强制四位显示
Pixel Perfect	使 UI 元素在不同分辨率下锐利显示

🪄 延伸练习建议

1️⃣ 添加“最高分”保存功能：

使用 PlayerPrefs.SetFloat("HighScore", score);

配合 PlayerPrefs.GetFloat() 读取。

2️⃣ 添加单位显示：

scoreText.text = player.position.z.ToString("0") + " m";

3️⃣ 使用 TextMeshPro 重构 UI：

改进字体渲染质量与性能。

4️⃣ 添加得分动画或渐变效果：

利用 CanvasGroup 或 Color.Lerp() 让分数变化更具动感。

📚 下一集预告：Restart System & Game Over UI

Episode 08 将介绍如何创建 GameManager.cs
实现“死亡重启机制 + Game Over 提示界面”。
你将学到：
SceneManager.LoadScene() 重载场景
Invoke() 延迟调用
按键检测返回主界面或重新开始游戏