用unity开发教学辅助软件---幼儿绘本英语拼读

记录完整项目的制作，借鉴了大佬@被代码折磨的狗子 “unity创建《找不同》游戏图片编辑器”一文。

（建议通过目录阅读本文哦~）

项目演示：

幼儿英语教辅

幼儿英语绘本教学游戏整体架构

游戏开发中设计的整体框架

游戏的总体功能框架如下图所示。

主要先进入字母选择界面，选择一个需要学习的字母，然后进入到对应字母的选择模块界面，学生们先通过其中的视频了解一些单词和故事情节，然后老师带领学生体验各个游戏模块，自主决定教学顺序。

以字母a为例，视频中介绍了小蚂蚁（ant）Andy喜欢艺术（art），在画布上画苹果（apple），在画布上画宇航员（astronaut），在画布上画自己（Andy ant）的故事情节。找不同、画画、测试、迷宫、唱歌的游戏就围绕这个主题展开。如下图所示，就是字母a的纸质绘本。

目的：通过Unity3D引擎、C#脚本编程、游戏化设计，制作出更加有趣、有及时反馈的教学游戏和承载绘本内容、视频的平台。

幼儿英语绘本教学游戏的具体设计与实现

选择字母界面导航的设计与实现

选择字母界面与总体功能设计

实现的是通过不同的按钮点击进入不同的界面，界面如下图所示。

通过Grid Layout Group组件实现每一行按钮的与左右、上下的间距（Space）设置和按钮的大小（Cell Size）设置，然后通过通过Scroll Rect组件去控制所有按钮的所在区域，从而实现了规整的布局，如下图所示。

选择进入功能实现

实现的功能是通过UI素材放在Unity3D资源目录（Resource）下，动态生成各个按钮的图片，点击按钮后进入各自字母主题的界面。

新建CustomsPassData类存储每个按钮的图片，按钮图片如下图所示，通过ScriptableObject类来数据的永久储存，创建DataConfig，如下图所示，在Unity3D的主界面进行赋值的操作。

通过设计对应的数据类型来存储图片和相关数据（区域位置、大小以及模式参数等），代码设计如下图所示。

同时设计按钮的脚本CustomsPassItem类中的InitData（）函数用于生成按钮的数据（包括如何跳转、代表哪个字母），代码设计如下图所示。

在SelectCustomsPassPanel（选择字母脚本）中调用CustomsPassItem类的InitData（）函数，同时应用创建的DataConfig中存储的数据（在Unity3D平台的开发界面进行赋值）、这样就实现了自动获取按钮图片和字母内容，动态生成排列好的按钮，当按钮按下时就调用OnClick（）函数，进入下一个界面（选择模块界面），代码设计如下图所示。

选择模块界面导航的设计与实现

选择模块界面和总体功能设计

主要有5个游戏模块（点击进入不同的游戏）、视频模块（观看预设的教学故事）和一个标题（显示当前学习的字母和主题），界面设计如下图所示。

也是通过Grid Layout Group组件实现的规整分布，如下图所示。

各种游戏进入按钮功能的实现

实现的功能是当点击按钮时，执行类似于显示界面、打开音乐、获取对应内容的程序。主要是通过为每一个按钮绑定一个事件监听来实现的，如下图所示。

同时在每个监听事件里执行类似于显示界面、打开音乐、获取对应内容的程序，代码设计如下图所示。

视频播放器内容更新和播放功能实现

实现的功能有可以根据所选字母主题动态更新视频内容，然后实现了基础的视频放大缩小、播放、暂停、从头观看的功能。动态更新视频内容的功能实现主要是设计类似于文章前面提到的dataconfig，设计一个存储视频封面、视频播放内容等元素的类（videoandbookData），代码设计如下图所示。

新建videoandbookData类存储每个按钮的图片，通过ScriptableObject类来数据的永久储存，创建videoandbookDataconfig，在Unity3D平台的开发界面中填入数据，如下图所示。

同时选择字母界面的各个字母按钮上了挂载监听事件（挂载了CustomsPassItem脚本,使用onClick（）函数进行监听），当按钮被按下时，就会根据按钮的下标来生成对应的播放器内容，代码设计如下图所示。

再通过InitvideoandbookData（）函数，动态修改播放的视频和视频封面等元素，代码设计如下图所示。

而播放、暂停、从头开始播放的功能，是通过videoPlayer脚本中设计的PlayOnClick()、pause()、finishOnClick()函数去实现的。代码设计如图所示。

最大化/最小化功能设计是通过设计image_Controller脚本，调用DG.Tweening动画插件去实现放大缩小的界面效果，核心代码如图所示。

最后在界面中给四个界面中的按钮（GameObject父物体下的4个子物体）设置按下的监听事件，就能实现相应的功能。

找不同界面导航的设计与实现

找不同界面和总体功能设计

设计了两张模式，类似于对比两张图的不同点或寻找一张图片中不同的元素，通过鼠标点击，可以选择，同时设计了倒计时的机制，让该过程更具趣味性，界面设计如图所示。

找不同界面可视化编辑器设计

实现的功能如下：

①在对比两张图片不同处的游戏机制中，可以选择添加节点，增加需要找出的不同数量，解决了数量不同也可以整体设计的效果。同时对每一个不同点（Element）可以设置它在画布中的X、Y坐标和长度与宽度，如下图所示。

②针对在一张图片中找不同的游戏机制中，也是可以添加节点和设置节点的坐标和大小，如下图所示。

找不同（find difference）界面比较复杂，有对比两张图片找出不同（同时不同处的数量也有区别）的模式，也有在一张图片里找出相同或者不同的元素（一个或者多个）的模式，因此需要设计一个整体的架构，能做到可视化实现每个字母对应找不同界面的资源快速替换，同时规定它的游戏机制。

设计CustomsPassDataConfigEditer脚本，设计可视化编译器，核心界面设计代码如下图所示：

CustomsPassDataConfigEditer核心代码

编辑器界面设计代码

同时在数据初始化时，设计两行代码，第一行代码实现了对原本资源中数据读取，同时在数据初始化时调用SelectCustomsPassData（）函数，如下图程序所示。

SelectCustomsPassData（）函数设计如下图所示，主要是修改当前选择的关卡，并获取数据进行展示，主要是针对每一个字母对应的图片和模式进行修改和调整，其中在代码的最后调用了CreateAreaItem( )函数，通过CreateAreaItem( )函数进行具体数据的修改，例如每一个找不同节点的X、Y坐标和长度与宽度。