FlappyBird（像素鸟）小游戏 (基于 LabVIEW 保姆级教程)

Java 暂时停下了脚步，有个 LabVIEW 的大作业，出来应付下嘿嘿

基于 LabVIEW 的一个像素鸟小游戏，说明一下对这个程序的理解。关于程序代码将在文章末尾给出，大家一起学习思路，共同进步！

1 准备素材

准备以下 FlappyBird 所需要用到的图片素材

Ps: 这个 Score 图片没有用到，可以根据文章末尾的素材下载完整的素材，增添自己的想法，来完善游戏的功能

2 思路简述

这里我画了一个大致的结构图来描述一下

分成三个大步骤：

• 创建自定义控件以及主界面
• 创建一个 While 循环
• 退出循环后的处理

游戏思想即为

1. 通过自定义控件完成游戏界面的绘制
2. 整个程序为一个 While 循环，每次循环更新所有控件的属性状态（位置，可见性等等），并在循环中做出判断游戏规则，处理分数，指出何时退出循环
3. 退出循环后的操作（关闭软件的前面板）

3 详细制作过程

3.1 准备前面板添加素材

3.1.1 创建自定义控件

1. 在LabVIEW开发环境中依次选择菜单：“文件”–>“新建…”，在打开的新建对话框中选择“自定义控件”项即可新建一个空白的.ctl文件并打开了控件编辑器，如下图所示：

2. 在控件编辑器中点击右键弹出控件选板，选择“经典”–>“布尔”–>“方形按钮”，将方形按钮控件放置到自定义控件的编辑界面上，该控件只有2个部件，分别为“名称标签”和“布尔按钮”，可通过菜单中“窗口”–>“部件窗口”查看当前控件的所有部件
3. 点击控件编辑器工具栏上的工作模式按钮，切换当前工作模式为“自定义模式”，在控件类型的下拉列表框中选择控件类型为“严格自定义类型”

4. 选中“布尔按钮”部件，右键单击弹出如图下图所示的菜单，在“图片项”中存在着4幅图片，分别对应控件的4种状态，从左到右依次为假、真、真到假和假到真的状态。由此可见，我们只要替换这4幅图片就可以改变控件在不同状态下的外观。一般情况下替换的图片格式通常选择为“.png”格式，在不同的图片类型中，它对背景透明特性有着较好的支持性。对于该例，在右键菜单中依次选择4幅图片，通过右键菜单的“从文件导入…”选项，用准备好的素材替换掉每幅图片，就可完成自定义控件的外观编辑了，然后保存为“.ctl”格式的文件即可

修改后

同理定义一个关闭按钮

3.1.2 创建枚举列表

这里我详细说明一下添加素材至前面板的操作，主要是创建了枚举列表，然后透明创建对象上图：

此时弹出选择素材图片，按照顺序导入，然后如下图先导入一次剪贴板，之后选择下方的 After，即次序导入

依次导入后如下图

3.1.3 透明化对象

此时按下快捷键 Shift + 鼠标右键，选择颜色板，锁定工具

然后光标变化成一个笔刷，此时放在控件上右击鼠标，选择右上角 T，表示透明，然后点击需要透明的边框

点击需要透明的控件边框，边框透明后，取消显示的标签和增减符号，即去掉对勾

同理可以创建所有的对象

3.1.4 添加背景图片

此处可以直接拖动图片至 LabVIEW 的前面板中，将其拼成你需要的样子，完成后选中图片，选择前面板右上角按钮，如下图，可以调整图片图层的上下关系，将背景图片的最左上角对齐原点，方便之后程序中相对位置计算，最后选中背景图，选择下图中按扭中的 Lock 选项，锁定背景图层，可以防止之后调整管道时误选择

完成后可以调整相对位置至一个大约的位置，如下图

此时还会在程序框图生成对应的控件，其中部分之后会用到，如下图

3.2 主程序的绘制编写

3.2.1 创建一个 While 循环

1. 循环内部

为了更新控件的位置属性和当前的分数状态，所以主程序部分应当都写在一个循环中，这里我们创建一个 While 循环，在程序框图中函数选板中的结构里面，尽量绘制的大一些

2. 循环外部

循环外部程序无非两种，程序最初的部分初始化内容、一些创建的对象所产生的不需要在循环内使用的控件以及程序退出循环后（即按下关闭按钮）所需要执行的关闭前面板的操作

3.2.2 循环中主程序部分

1 小鸟动效部分

选一个边角使用求余函数获得除以 3 余数当作小鸟控件切换图片的索引，这样每次循环都会循环播放三张小鸟，产生小鸟控件上小鸟飞行的动效

此处小鸟控件需要改为输入模式

2 判断事件结构

在循环内部创建一个事件结构，事件结构类型于中断事件，相当于中断程序的入口

上方为开始暂停按钮和关闭按钮的控件，下面这个黄棕色的框就是事件结构

此时默认有个超时 (Timeout) 事件，是指若多久(ms)后就超时，然后执行超时内部的程序，此处 0 常量连接超时节点，表示若无中断事项，则一直执行默认的超时内部的程序，即上图中的红色字符串传递。详细讲解可以看官方的帮助文档或者网上搜索

在这里添加两个事件，开始/暂停以及关闭，当对应按钮按下执行其操作，添加步骤

右键事件结构的边框，选择添加事件

选择控件，事件为值改变，即按下按钮后控件值改变，触发该中断；选择完成后点击左下角添加事件 Add Event

添加完毕是这样滴

接下来选择开始/暂停的这个事件，创建两个字符串（粉紫色框），如下图，还有一个枚举型常量，主要为了方便调试，包含下图

然后创建开始暂停按钮的属性节点，在开始暂停按钮上右键 -> 创建 -> 属性节点 -> 禁用，然后再继续把属性节点的框往下拉，改变属性为值，一共 Disabled 和 Value 的两个属性，Disabled 控制此按钮是否禁用，此处使用上面创建的枚举常量选择启用（注意属性是写入还是读取），值选择输出模式，连接一个选择器

创建选择器，将其结合如下图

主要功能为启用开始暂停按钮，开始暂停按钮值改变时，执行此代码框，根据控件的值判断此时是继续游戏（GetReady）还是暂停游戏，将字符串发送至条件结构，执行对应的代码块

关闭按钮，功能为当关闭按钮被点击后，执行将真布尔值赋给真时停止循环，结束循环，跳转至循环外关闭程序

3 判断条件结构

在这里条件结构分为几个部分，判断条件由字符串组成，方便理解

• 启动界面
• GetReady
• 开始游戏
• 暂停游戏
• 显示得分

接下来就开始说明最为重要的处理部分了

启动界面

首先给展示一张整体结构图，方便理解

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

中间的条件结构中启动界面中的代码块，蓝色线表示计分线，启动时计分一直为初始化的 0，值传递中没有操作，不改变，经过移位寄存器通过循环一直传递，同理字符串和初始化设备 ID 后的移位寄存器保持无操作连线

内部创建了开局提示信息的可见性属性和局部变量，分别赋值真布尔常量和 0，表示启动界面可见提示信息控件的第一张图片 FlappyBird 的字样，同时分数同理设置为不可见

对于右边的簇数组，这里使用了自定义的控件类型，好处是在后面的分类计算中可以直接按自定义名称解捆绑操作对象控件的位置坐标，不难看出，这些簇数组是用来记录小鸟和 6 根管道的初始坐标的，完成其位置的初始化

• 簇数组是将簇组成数组，每一个元素为一个簇，这里用一个簇元素中的两个常量表示位置坐标，说明一下簇数组的创建

先自定义一个下面类型的控件，其中 Position 为簇，内部的 Left 和 Top 为整数值输入控件

然后在主界面的 VI 中打开程序框图，右键选择 VI，选择这个控件

引入后为下方右侧样式，然后创建一个数组常量，将簇放置进去即为自定义类型的簇数组

GetReady

这个环节不难看出就是在顺序结构下顺序执行了显示 GetReady，3，2，1；之后不显示提示信息，将分数显示关闭，同时传递出一个 开始游戏 的字符串，通过寄存器移位重新判断条件至下一个条件 —> 开始游戏

开始游戏

此模块内部大致图如图

创建条件结构

0，Default

1. 计分寄存器无操作连接，计分不变，即保持原分数

2. 管道位置的寄存器无操作连接，位置不变

3. 添加 True 布尔量到显示得分的条件框

4. 此条件中相当于小鸟纵坐标为0，即空格按下太快，小鸟直接 飞出了地图，直接显示得分，障碍物和计分保持停止

1…384

​ 创建条件结构

​ 0，Default

​ 计分移位寄存器无操作连接，计分值不变；管道寄存器从 1…384 的条件结构进入后，经过索引数组索引0，按名称解捆绑选择出第 1 根管道位置的 横 坐标，判断所有管道向左移动了多少，管道的位置移位寄存器连接一个减法，每次使所有管道横坐标减去5，表示所有的管道每次循环都向左移动 5

由于其他条件最大也有-34，默认值会一直执行，即为所有管道向左移动至34个坐标，表示此时小鸟控件位置刚刚好右侧接触到了中间管道的左侧；小鸟初始横坐标 80；第2列管道横坐标初始为150；小鸟像素大小为36*36；则相距距离为150 - 36 - 80 = 34。详细可以通过在前面板调整枚举图像控件的属性来查看调整大小

​ -122…-34

​ 计分移位寄存器无操作连接，计分值不变；管道寄存器从 1…384 的条件结构进入后， 管道的位置移位寄存器连接一个减法，每次使所有管道横坐标减去5，表示所有的管道每次循环都向左移动 5；从位置的寄存器连接线引出获取位置簇数组，通过索引函数获取初始状态第2列的管道坐标，即索引为 1，4，按其纵坐标名称解捆绑，通过运算纵坐标是否与小鸟纵坐标发生交叠产生碰撞，来确定是否发送结束游戏显示得分的布尔值根据判断的布尔值确定是否结束游戏

​ 这里面创建一个 5，0的簇数组用来控制管道向左移动速度

提取索引 1 ，即 2 号管道纵坐标，图片高度为320，纵坐标 -100，则-100 + 320即为2号上管道的最下方坐标，判断小鸟的纵坐标位置是否小于等于此纵坐标（即碰撞）

---

提取索引 4 ，即 5 号管道纵坐标，图片纵坐标 360，则-100 + 320即为2号上管道的最下方坐标，判断小鸟的纵坐标 + 小鸟像素大小（36，即为小鸟的下方脚处）位置是否大于等于此纵坐标（即碰撞）

---

将两次判断的布尔值进行或运算，将值发送至条件结构外显示碰撞游戏结束，

---

若无碰撞发生，则第一列管道左移至-122处（即小鸟坐标左侧距离2号管道右侧边缘的坐标的距离，|80 - 150| + 36）

​ -200…-150

​ 此时计分 +1，小鸟已经通过了第二列管道，第一列管道需要刷新时，即第一列管道向左移动到了需要刷新时

​ 使用元素同址操作结构，用索引数组函数接出索引 2 的管道位置，即第三根管道，此时向左移动了150，第二列在原来的第一列的位置，第三列在原来第二列的位置，元素同址操作结构比起替换数组会更加节省效率节省内存

​ 将2列换成1列，3列换成2列，第1列换成3列并更改横坐标使其重新产生在地图右侧

​ 可以用一个 53 的浮点类型和随机数相乘后取整当作索引，在提前创建的 53 个坐标中索引，解捆绑出值更改管道的中央的宽度，53 即为可能的种类一共有 54 种管道中央空隙大小

暂停游戏

此处暂停游戏，当按键按下时，循环中事件结构的值改变，进入事件开始暂停，假，则传递 暂停游戏 的字符串

进入如下的条件选择中

即为所有连线无操作连线，数据保持不变，显示 FlappyBird 提示信息，且保证开始/暂停按钮可以使用，而当再次按下开始/暂停按钮时，事件结构再次改变，则重新选择进入 GetReady 条件中，延时 3 秒后继续进入开始游戏条件中，进行继续游戏的操作

显示得分

在开始游戏中因为小鸟飞过高或者因与管壁发生碰撞时，使得开始游戏条件中对外面的一个真假选择结构发出真布尔常量，使其判断游戏结束，将显示得分的字符串发送给移位寄存器，让其进入显示得分的框图内执行程序

显示得分中，通过求余函数计算出十进制的得分值，通过显示枚举控件中的 0-9 的图片对应显示分数，提示信息显示为 5 —> GameOver ，同时重新初始化管道和小鸟坐标，等待下一次游戏开始

再次按下开始/暂停按钮时，由于值变换，会先转到暂停游戏，然后显示初始界面，到最后再次按下开始时游戏才会开始，能够对应好按键

3.3 退出循环后的处理

创建一个顺序结构，执行关闭键盘，引用本 VI 中的前面板关闭方法，使其前面板关闭，最后关闭引用，顺序执行，此时 VI 关闭，结束游戏

注意连线设备 ID，如下图

4 文件打包应用程序以及制作安装包

关于打包的方式，可以查看 —> 参考资料，这里我也会简要概述一下

4.1 打包应用程序

1. 在本 VI 窗口新建一个项目，然后会提示是否将这个 VI 添加进新项目，选择添加即可
2. 在项目中的计算机中右键添加文件，将你的依赖文件全部添加进去

然后最下面的图标右键，可以生成 EXE 执行程序，但是需要LabVIEW的运行环境，可以生成安装包这样会直接安装运行环境

在首页的信息中可以根据需求修改文件名和保存路径，这里需要注意一下源文件的添加，如下图，选择主 VI 添加，然后子 VI 以及其他文件添加到右下方

最后选择 Build 生成即可

4.2 制作安装包

在上方选择生成安装包，然后注意源文件处将生成的EXE添加进去即可

吐槽：这鬼安装包还要打包安装一个LabVIEW 的程序运行环境，差评！！！

5 后述

文件来源：传送门

我添加注释的VI，加一份中文的LabVIEW帮助文档，以及附带自己绘制思维导图的文件：传送门

中文文档打开后选择 lvhelp.chm 打开
附带一个百度云的 链接，之前设置有问题是积分资源，改不成免费 PS：提取码 4321

之前搭了一个托管在 Coding 的个人博客，内容与 CSDN 一致，就是一个初搭的小白，可以来吃个瓜嘛：我的博客

由于本人知识能力有限，理解和制作能力水平不高，希望对其中讲述的一些错误大佬们可以批评指正一番，在下不胜感激！！！

**********完结散花**********

参考资料

此乃老夫为写文章扒拉的网上的内容和素材，还有部分关于 LabVIEW 的进阶教程

像素鸟素材下载

使用LabVIEW制作一个简单的前面板循环图片

LabVIEW创建簇数组常量

LabVIEW中自定义控件（.ctl控件）的方法

下拉列表和枚举控件

创建透明对象

LabVIEW打包应用程序和安装文件

还有一个 LabVIEW宝典

ps: 宝典提取码：1234