Flappy Bird开发学习记录

概述

为了了解一下Unity的开发过程，或者说感受？先搞简单的练练手。

工具

Unity:2022.3.51f1c1

visual studio 2022

开发过程

项目基本设置

新建2d项目，游戏画面设置为1080*1920（9：16）。

图片素材设置为sprite

游戏画面搭建

Camera Size：相机画面高度的一半

Pixels Per Unit：每个单元格的像素长度

地面

新建地面GameObject，拖到相机底部，或者通过图片像素大小和相机高度来计算位置。

以Ground素材为例：其图片大小为37*128，Pixels Per Unit 为100。

相机高度（Camera Size）为8，在没有移动过相机的情况下，相机中心点为（0,0），相机底部位置为(0,-8)，若要让Ground图片刚好在相机最底部，那么其Y轴为 $-8+(\frac{128}{100}\ast \frac{1}{2}=-7.36)$,Unity中可以直接输入算式然后Enter即可。

要将Ground平铺在底部，修改Draw Mode为Tiled，同时确保Ground素材的Sprite Mode为Single或者Multyple，以及MeshType为FullRect，避免报警告。

然后需要平铺几个Ground就把Ground的Width乘几，或者不在意也行，我没管。

背景

添加背景画面，将其DrawMode改为Sliced，同样MeshType设置为FullRect，然后点击Sprite Editor处理，切成九宫格（九宫格不同位置受拉伸影响不同），然后就可以拉伸了。

其实图片右侧还有一两个像素宽的灰色阴影，当采用两张背景平移轮播的方式时会有一条灰色的线在画面中移动，以AB的形式移动时候会有，A移出画面后挪到B后边时没有，很怪，于是我把图片右边黑色阴影涂成了旁边的颜色。

实现背景素材的连续滚动

public class BgMovement : MonoBehaviour
{private float BG_WIDTH = 9.8f;public Transform ground_1;public Transform ground_2;public Transform backGround_1;public Transform backGround_2;[Range(0,10)]public float moveSpeed = 3f;void Update(){if (GameStateManager.Instance.isFinish || GameStateManager.Instance.isPaused ) return;MoveBackground(ground_1, ground_2);MoveBackground(backGround_1, backGround_2);}private void MoveBackground(Transform obj1, Transform obj2){obj1.position -= new Vector3(moveSpeed * Time.deltaTime, 0, 0);obj2.position -= new Vector3(moveSpeed * Time.deltaTime, 0, 0);if (obj1.position.x < -BG_WIDTH){obj1.position = obj2.position + new Vector3(BG_WIDTH, 0, 0);}if (obj2.position.x < -BG_WIDTH){obj2.position = obj1.position + new Vector3(BG_WIDTH, 0, 0);}}
}

开始拼各种静态图片

其中的ReadyToStart是覆盖在画面上的一个按钮，目的是检测到点击之后正式开始游戏。

背景中的PieObj只是背景的一部分，所以checkpoint关闭，以防bug。

默认开启（活动？）的游戏对象，第一张图中亮着的以及GameOverUI下的全部，

默认关闭的游戏对象，GamingUI下的全部以及GameOverUI本身。

字体

别用TextMeshPro，不然这里边的字体可能没法用，反正我不会用，分数字体用Text组件就能用这里的字体了。

鸟的待机效果实现

待机动画制作

将鸟按三列一行的方式切分。

创建BirdAnimation，给动画添加关键帧，可以将图片直接拖到对应的时间点上。

注意，要先把Animation放在游戏对象上，然后确保选中的是目标游戏对象，才能把图片拖到它的Animation上作为关键帧。

待机动画控制

    private void Idle(){Radian += R * Time.deltaTime;var height = Mathf.Sin(Radian) * IdleHeight;transform.position = orgPosition + new Vector3(0, height, 0);}

游戏的状态管理

因为在点击Start之后有一个引导等待画面，所以状态分为：

Start（主界面）->Ready（显示引导等待点击）->Playing(游戏中，真的开始游戏)->Finish（游戏结束），以及Paused（暂停状态）。

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;// 主界面，点击start但是在游戏开始前的准备状态（此时显示游戏引导），游戏中状态，游戏结束状态，暂停
public enum GameState {Start, Ready, Playing, Finished, Paused }public class GameStateManager
{private static readonly Lazy<GameStateManager> instance = new Lazy<GameStateManager>(() => new GameStateManager());public static GameStateManager Instance => instance.Value;GameStateManager() { }public bool isStart;public bool isReady;public bool isPlaying;public bool isFinish;public bool isPaused;private MainPanel mainPanel;public void Setup(MainPanel panel){mainPanel = panel;}public void SetState(GameState state){switch (state){case GameState.Start:isStart = true; isReady = false; isPlaying = false; isFinish = false; isPaused = false; break;case GameState.Ready:isStart = false ; isReady = true; isPlaying = false; isFinish = false; isPaused = false; break;case GameState.Playing:isStart = false; isReady = false; isPlaying = true; isFinish = false; isPaused = false; break;case GameState.Finished:isStart = false; isReady = false; isPlaying = false; isFinish = true; isPaused = false;mainPanel.ShowGameOverUI();break;case GameState.Paused:isPaused = true;Time.timeScale = 0;break;}}// 游戏恢复public void Resume(){SetState(GameState.Playing);  // 恢复游戏状态Time.timeScale = 1;  // 恢复游戏速度}// 重启游戏public void Restart(){SetState(GameState.Start);  // 设置为开始状态Time.timeScale = 1;  // 恢复时间缩放}// 获取并更新分数public void GetScore(){int currentScore;if (int.TryParse(mainPanel.CurrentScore.text, out currentScore)){mainPanel.CurrentScore.text = (currentScore + 1).ToString();}}
}

游戏的控制

由于有一个暂停按钮在游戏中，当点击暂停按钮时同样会触发一次跳跃，所以对点击的位置进行判断。

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;public class BirdController : MonoBehaviour
{[Range(1, 10)]public float R = 5f; // 控制小鸟上下浮动的速度[Range(0, 1)]public float IdleHeight = 0.5f; // 小鸟在待机状态时的浮动高度private float Radian = 0; // 当前浮动的角度（弧度）private Vector3 orgPosition; // 初始位置public float Gravity = -9.81f; // 重力加速度public float JumpHeight = 1.3f; // 跳跃高度public Vector3 Velocity = Vector3.zero; // 当前速度public float MaxVelocity = -15f; // 最大下落速度private float RotationZ = 0; // 小鸟的旋转角度public float RotateSpeed = 8; // 旋转速度（弧度）private float JumpVelocity; // 跳跃的初始速度private Collider2D preCollieder; // 上次碰撞的物体void Start(){orgPosition = transform.position; // 记录小鸟的初始位置preCollieder = null; // 初始化碰撞器}// Update is called once per framevoid Update(){if (GameStateManager.Instance.isPaused) return;if (GameStateManager.Instance.isStart || GameStateManager.Instance.isReady){Idle();}else if (GameStateManager.Instance.isPlaying){CustomGravity();}else if(GameStateManager.Instance.isFinish){HandleBirdDie();}}// 控制小鸟在待机状态时的上下浮动private void Idle(){Radian += R * Time.deltaTime; var height = Mathf.Sin(Radian) * IdleHeight; // 根据角度计算当前浮动高度transform.position = orgPosition + new Vector3(0, height, 0); }// 控制小鸟的重力和跳跃private void CustomGravity(){if ((Input.touchCount > 0 && Input.GetTouch(0).phase == TouchPhase.Began) || Input.GetMouseButtonDown(0) ){Vector2 clickPosition;// 获取点击位置if (Input.touchCount > 0){clickPosition = Input.GetTouch(0).position; // 触摸位置}else{clickPosition = Input.mousePosition; // 鼠标位置}if (!InitSceenSize.ClickPause(clickPosition)){// 如果点击位置不在暂停按钮区域内，触发跳跃Jump();}//if (GameStateManager.Instance.isPlaying) Jump();}Velocity.y += Gravity * Time.deltaTime; // 受重力影响更新垂直速度if (Velocity.y < MaxVelocity) Velocity.y = MaxVelocity; // 限制最大下落速度transform.position += Velocity * Time.deltaTime; // 更新小鸟的位置// 控制小鸟的旋转角度，使其根据下落速度旋转if (Velocity.y < -JumpVelocity * 0.1f){RotationZ -= RotateSpeed * Time.deltaTime * 1000 * Mathf.Deg2Rad; // 放大1000倍才显得正常，帧率太高导致deltaTime过低？RotationZ = Mathf.Max(-90, RotationZ);// 限制旋转角度不超过-90°}transform.eulerAngles = new Vector3(0, 0, RotationZ);}// 鸟作为触发器去接触其他物体，要么是其他物体都设置为触发器检测是否碰到鸟，那么需要给每个会碰到鸟的物体写脚本。// 如果碰到后那些物体需要各种处理的话，也许其他作为触发器好点，毕竟还要给它们写其他东西。// 如果东西多的话，鸟要接触的东西太多了，集中在这里看起来也许不如分散到各自身上处理private void OnTriggerEnter2D(Collider2D collision){//Debug.Log(collision.tag);if(collision.CompareTag("ground") || collision.CompareTag("pipe")){//GameStateManager.Instance.Finish();GameStateManager.Instance.SetState(GameState.Finished);}if (collision.CompareTag("sky")){Velocity = new Vector3(0, -2, 0);}// 避免刚好接触时死亡，触发两次加分的情况if (collision.CompareTag("checkPoint") && ((preCollieder==null)|| preCollieder.GetComponent<Transform>().position != collision.GetComponent<Transform>().position)){GameStateManager.Instance.GetScore();preCollieder = collision;}}// 防止卡进去然后穿过去private void OnTriggerStay2D(Collider2D collision){if (collision.CompareTag("sky")){Velocity = new Vector3(0, -2, 0);}}private void HandleBirdDie(){float distance = -Camera.main.orthographicSize + 1.28f + 0.64f * 0.5f; // 通过手动计算得到的地面高度if(transform.position.y > distance){CustomGravity();}}// 重启游戏时重置小鸟的位置和状态public void Restart(){transform.position = orgPosition; // 恢复初始位置transform.eulerAngles = Vector3.zero; // 恢复旋转角度RotationZ = 0; // 恢复旋转值Velocity = Vector3.zero; // 恢复速度}// 使小鸟跳跃public void Jump(){Velocity.y = MathF.Sqrt(JumpHeight * -2 * Gravity); // 计算跳跃的初始速度JumpVelocity = Velocity.y; // 记录跳跃速度RotationZ = 30; // 跳跃时调整旋转角度}
}

障碍物的创建与控制

障碍物的创建

用两个管道图片拼接而成，给图片添加碰撞体，添加空游戏对象最为检查点，添加碰撞体，设置合适的位置和大小，注意设置tag。创建为预制体

障碍物的控制

using System.Collections.Generic;
using UnityEngine;public class PipeCreate : MonoBehaviour
{public BgMovement bgMove;private List<GameObject> pipeList;private float Distance = 5f;private float CameraHalfWidth;private GameObject pipePrefab;// Start is called before the first frame updatevoid Start(){pipePrefab = Resources.Load<GameObject>("Prefab/PipeObj"); // 只加载一次CameraHalfWidth = Screen.width * 1f / Screen.height * Camera.main.orthographicSize;//Debug.Log(CameraHalfWidth);pipeList = new List<GameObject>();// 也能通过协程的方式不断生成for(int i =0; i< 5;i++){var go = GameObject.Instantiate(pipePrefab);go.transform.position = new Vector3(i * Distance, Random.Range(-3f,4.5f), 0) + new Vector3(8,0,0);go.transform.SetParent(this.transform,true);pipeList.Add(go);}}public void Restart(){for (int i = 0; i < 5; i++){var go = pipeList[i];go.transform.position = new Vector3(i * Distance, Random.Range(-3f, 4.5f), 0) + new Vector3(8, 0, 0);}}// Update is called once per framevoid Update(){if(GameStateManager.Instance.isPlaying){foreach (var item in pipeList){item.transform.position += new Vector3(-Time.deltaTime * bgMove.moveSpeed, 0, 0);if (item.transform.position.x < -CameraHalfWidth - 1){var lastPipe = pipeList[pipeList.Count - 1];item.transform.position = lastPipe.transform.position + new Vector3(Distance, 0, 0);item.transform.position = new Vector3(lastPipe.transform.position.x + Distance, Random.Range(-3f, 4.5f), 0);pipeList.Remove(item);pipeList.Add(item);return;}}}}}

画面的控制与管理：开始，准备，游戏中，结束，暂停

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;
using Unity.VisualScripting;public class MainPanel : MonoBehaviour
{// 开始界面public Button StartButton;public Button RestartButton;public Image Title;public GameObject UIPipe;public CanvasGroup StartUI;// 准备界面public Button ReadyToStart;  public CanvasGroup Tutorial;// 游戏界面public Text CurrentScore;public Button PauseButton;public Button ResumeButton;// 结束界面public GameObject GameOverUI;public Text FinalScore;public Text BestScore;public Image Medal;public List<Sprite> Medals;public Image NewIcon;public BirdController birdController;public PipeCreate pipeCreate;private float FadeTime = 0.4f;private bool isClickStart;// Start is called before the first frame updatevoid Start(){StartButton.onClick.AddListener(OnClickStart);RestartButton.onClick.AddListener(OnClickRestart);ReadyToStart.onClick.AddListener(GameStart);PauseButton.onClick.AddListener(OnClickPause);ResumeButton.onClick.AddListener(OnClickResume);GameOverUI.gameObject.SetActive(false);ReadyToStart.gameObject.SetActive(false);NewIcon.gameObject.SetActive(false);isClickStart = false;CurrentScore.text = "0";GameStateManager.Instance.Setup(this);GameStateManager.Instance.SetState(GameState.Start);}private void OnClickStart(){// 点击过快会触发两次点击，从而出现鸟跳跃被打断重新回到ready状态，在Restart恢复if (isClickStart) return;isClickStart = true;//GameStateManager.Instance.Ready();GameStateManager.Instance.SetState(GameState.Ready);// 恢复初始UI状态NewIcon.gameObject.SetActive(false);Medal.gameObject.SetActive(true);ShowReadyUI();}private void OnClickRestart(){GameStateManager.Instance.Restart();GameOverUI.gameObject.SetActive(false);ShowStartUI();}private void OnClickPause(){GameStateManager.Instance.SetState(GameState.Paused);ResumeButton.gameObject.SetActive(true);}private void OnClickResume(){GameStateManager.Instance.Resume();ResumeButton.gameObject.SetActive(false);}public void ShowStartUI(){// 已被隐藏且关闭，先启用，再渐显Title.gameObject.SetActive(true);StartButton.gameObject.SetActive(true);isClickStart = false;StartUI.DOFade(1, FadeTime);UIPipe.gameObject.SetActive(true);CurrentScore.gameObject.SetActive(false);PauseButton.gameObject.SetActive(false);ResumeButton.gameObject.SetActive(false);birdController.Restart();pipeCreate.Restart();}public void ShowReadyUI(){// 隐藏UI，然后关闭UIStartUI.DOFade(0, FadeTime).onComplete = () =>{StartButton.gameObject.SetActive(false);Title.gameObject.SetActive(false);};UIPipe.gameObject.SetActive(false);CurrentScore.gameObject.SetActive(true);CurrentScore.text = "0";Tutorial.gameObject.SetActive(true);Tutorial.DOFade(1, FadeTime);ReadyToStart.gameObject.SetActive(true);}private void GameStart(){GameStateManager.Instance.SetState(GameState.Playing);birdController.Jump();Tutorial.DOFade(0, FadeTime).onComplete = () =>{Tutorial.gameObject.SetActive(false);};ReadyToStart.gameObject.SetActive(false);PauseButton.gameObject.SetActive(true);ResumeButton.gameObject.SetActive(false);}public void ShowGameOverUI(){int score = int.Parse(CurrentScore.text);CurrentScore.gameObject.SetActive(false);GameOverUI.gameObject.SetActive(true);PauseButton.gameObject.SetActive(false);ResumeButton.gameObject.SetActive(false);// 最高分处理if (score > PlayerPrefs.GetInt("BestScore")){PlayerPrefs.SetInt("BestScore", score);NewIcon.gameObject.SetActive(true);}if(score <10){Medal.gameObject.SetActive(false);}else if(score <20 && score >=10){Medal.sprite = Medals[0];}else if(score < 50&& score >= 20){Medal.sprite = Medals[1];}else if(score < 100 && score >=50){Medal.sprite = Medals[2];}else{Medal.sprite = Medals[3];}FinalScore.text = score.ToString();BestScore.text = PlayerPrefs.GetInt("BestScore").ToString();}}

屏幕设置

在手机上测试时，图片和按钮位置发生了偏移和拉伸，发现是因为我是按照1080*1920做的UI，但是我的手机是2400*1080，甚至用screensize获取手机的宽还是2400而不是1080，不知道其他手机是不是这样。所以通过比大小，把手机屏幕上小的边作为宽，大的作为高。

//int screen_min = Mathf.Min(screenHeight, screenWidth);
//int screen_max = Mathf.Max(screenWidth, screenHeight);//GetComponent<CanvasScaler>().scaleFactor = screen_min / (float)1080;

然后屏幕的宽来缩放，但是实际效果不太好，于是调整了UI的这个我也不知道叫啥的东西，修改他们的参考点。在不考虑会有更宽的手机的情况下，只对高度进行调整。

然后由于Start的先后顺序不一。忘了使用Awake了，不过问题不大，毕竟Awake虽然在Start之前调用，但是不同脚本之间，Awake是否真的能在Start之前我就不确定了。

所以一开始在InitScreenSize.cs中修改屏幕大小，然后在BirdControoller计算暂停按钮的位置，但是由于脚本先后顺序原因，画面虽然调整了，但是Bird中获取到的暂停按钮的坐标是一开始调整之前的坐标，导致点击暂停按钮的计算出现错误，又不希望每次点击都反复计算暂停按钮所在的边框，所以将暂停按钮的坐标计算放在了InitScreenSize脚本中。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class InitSceenSize : MonoBehaviour
{public RectTransform StartUI;public RectTransform GamingUI;public RectTransform FinishUI;private int screenWidth;private int screenHeight;public RectTransform pauseButtonRectTransform;private static float left;private static float right;private static float top;private static float bottom;void Start(){screenHeight = UnityEngine.Screen.height;screenWidth = UnityEngine.Screen.width;//int screen_min = Mathf.Min(screenHeight, screenWidth);//int screen_max = Mathf.Max(screenWidth, screenHeight);//GetComponent<CanvasScaler>().scaleFactor = screen_min / (float)1080;StartUI.sizeDelta = new Vector2(screenWidth, screenHeight);GamingUI.sizeDelta = new Vector2 (screenWidth, screenHeight);FinishUI.sizeDelta = new Vector2 (screenWidth, screenHeight);// 获取暂停按钮的世界坐标Vector3 buttonWorldPosition = pauseButtonRectTransform.position;// 获取暂停按钮的尺寸（宽度和高度）Vector2 buttonSize = pauseButtonRectTransform.rect.size;// 计算暂停按钮的四个边界位置left = buttonWorldPosition.x - buttonSize.x / 2;right = buttonWorldPosition.x + buttonSize.x / 2;top = buttonWorldPosition.y + buttonSize.y / 2;bottom = buttonWorldPosition.y - buttonSize.y / 2;//Debug.Log(pauseButtonRectTransform.position.y + "+" + pauseButtonRectTransform.rect.size.y / 2 + "=" + top);}public static bool ClickPause(Vector3 position){if (position.x >= left && position.x <= right && position.y >= bottom && position.y <= top){return true;}return false;}
}

参考链接

【Unity游戏开发：Flappy Bird (01)】

这是全B站最还原的2025-02-12-FlappyBird飞翔的小鸟！2025-02-12-FlappyBird开发教学合集！

素材资源

https://github.com/GameDevStation/2025-02-12-FlappyBirdDemo/blob/main/2025-02-12-FlappyBirdTexture.rar

https://pan.baidu.com/s/1Mo8wZoTr9jjelMK-28b1Cw

素材我也放项目的Asset下备份了，以防两位的链接失效。

仓库链接

MapleInori/2025-02-12-FlappyBird (github.com)

闲话

梳理这种东西好累啊，感觉要考虑的东西好多，我还是太菜了呜呜，什么时候能成为大佬呢。

素材里还有菜单按钮和排行榜按钮和分享按钮，但是我没去补充这些东西，有点超过我这个菜鸟的能力。

应该没把什么搞错。