qte教育模式设计

LUOYANG NORMAL UNIVERSITY 2015 届 本 科 毕 业 设 计 基于 Unity3D 的切剥电缆仿真 院 （ 系 ） 名 称 专 业 名 称 学 生 姓 名 学 号 110424040 指 导 教 师 黄 绍 龙 完 成 时 间 2015.5 洛阳师范学院本科毕业论文 1 基于 Unity3D 的切剥电缆仿真 数学科学学院 信息与计算科学 学号： 指导教师：黄绍龙 摘要：本文模仿游戏的 Quick Time Events 交互模式，运用 Unity 制作出虚拟仿真 的具有互动性和趣味性的切剥电缆的视频教学软件，学习者通过人机交互能更好 的自学到切剥电缆线的方法与步骤，有助于记忆且运用切剥电缆的方法。 关键词：Unity3D；交互；按钮；电缆 1 引言 由于多媒体技术以及科技的飞速发展，各种各样的仿真技术被大量的运用。 人们已经不满足二维动画视频的视觉体验，三维仿真应运而生。三维仿真不仅能 够带来视觉上的冲击，还有一种模拟现实的功能，使操作者有一种身临其境的感 觉，是一个十分具有发展前景的虚拟现实模式。 Unity3D 是由 UnityTechnologies 开发的一个玩家轻松创建诸如三维视频游戏、 建筑可视化、实时三维动画的类型互动内容的多平台的综合型游戏开发工具，是 一个全面整合的专业游戏引擎。Unity 是利用交互的图形化开发环境为首要方式 的软件，其编辑器运行在 Windows 和 MacOSX 下，可发布游戏至 Windows、Mac、Wii、iPhone、Windowsphone8 和 Android 平台，也可以利用 Unitywebplayer 插件发布网页游戏，支持 Mac 和 Windows 的网页浏览。它的网页 播放器也被 Macwidgets 所支持。 1 QTE 是 Quick Time Events(快速反应事件)的缩写，是一种交互式的电子游戏 方式，玩家必须根据画面指示输入指令，后续结果会根据玩家输入指令的正确与 否有所不同。QTE 广泛运用于 电子、电脑游戏中，尤其是动作游戏。当满足一定 条件时，就会触发 QTE 事件。 本文的题目是基于 Unity3D 的 PC 端的 10kV 电缆冷缩终端制作的 QTE 交互 教学，旨在成功的设计出一个可以运行在 PC 上的虚拟仿真 QTE 学习软件，使学 习者通过观看视频、QTE 交互操作、切剥电缆的虚拟操作练习学会正确切剥电缆 线。学习者不仅仅是观看学习视频，而是在视频播放到某些关键的点时按照给出 的一些交互按钮进行操作，当学习中完成此交互操作后才能观看后面的学习内容。 使学习者感觉不只是在看一个学习视频，而是在互动教学中学习一些知识，在实 际操作过程中初步了解一些要领。 2 研究主要内容 2.1 研究方法及手段 以 Unity3D 为开发平台开发的一个虚拟仿真教学系统，是一个逻辑完整的、 程序运行流畅的三维软件。通过对相关资料的大量查询以及对电力方面经验的总 结，对 Unity3D 游戏引擎有了相关的了解，对 Unity3D 中需要使用的编辑语言 C# 进行学习，查阅 C#相关资料，使自己的编程水平可以满足这个游戏的基本需要。 游戏的制作过程以及游戏实现后的整体过程大致分为以下几个步骤： (1)了解 Unity3D 平台，掌握相关的基本操控，熟悉 Unity3D 每个功能模块 的作用和操作方法。 (2)设计软件的 UI 主界面，对软件的整体功能进行架构，明确仿真软件的主 要功能以及软件的风格。 (3)设计软件的内容，策划软件的主题，并设定软件的相关场景。 (4)根据软件的设定内容，在 Unity3D 中制作下相关部分，包括交互逻辑， 加载逻辑，UI 逻辑等。 (5)初步测试，对游戏的各项功能进行测试，及时发现问题，进行逐项解决。 (6)在 PC 上进行发布，进行电脑上的测试运行。 2.2 开发的环境 2.2.1 3DMax 3D Studio Max，常简称为 3ds Max 或 MAX，是 Autodesk 传媒娱乐部开发的 基于 PC 系统的全功能的三维计算机图形软件， 3ds Max 运行在 Win32 和 Win64 平台上，广泛应用于广告、影视、工业设计、建筑设计、三维动画、多媒体制作、 游戏、辅助教学以及工程可视化等领域。在 2007 年 7 月，3ds Max 发布了第十版。 在 Windows NT 出现以前，工业级的计算机图形学制作被 SGI 图形工作站所垄断。 洛阳师范学院本科毕业论文 3 3D Studio Max + Windows NT 组合的出现一下子降低了 CG 制作的门槛，首选开 始运用在电脑游戏中的动画制作，后更进一步开始参与影视片的特效制作。在 Discreet 3Ds max 7 后，正式更名为 Autodesk 3ds Max，最新版本是 3Ds max 2014。 2 2.2.2 C# C#是 C+衍生出来的面向对象的编程语言，是微软发布的一种面向对象的于 NETFramework 之上的高级程序设计语言，并定于在微软职业开发者论坛 （PDC ）上登台亮相。C# 是微软公司研究员 AndersHejlsberg 的最新成果，看起来 与 Java 有着惊人的相似，但是微软公司 NETwindows 网络框架的主角。 3 2.2.3 AE Adobe After Effects 简称“AE”，是 Adobe 公司推出的一款图形视频处理软件， 适用于从事设计和视频特技的机构，包括电视台、动画制作公司、个人后期制作 工作室以及多媒体工作室，属于层类型后期软件。 4 2.2.4 Unity3D (1)Unity3D 总体概述 Unity3D 是一个用于创建诸如三维视频游戏、建筑可视化、实时三维动画等 类型互动内容的综合型创作工具，由 Unity Technologies 开发，是一个全面整合的 专业游戏引擎。Unity 类似于 Director、Blender 、Virtools 或 Torque Game Builder 等利用交互的图型化开发环境为首要方式的软件其编辑器运行在 Windows 和 Mac OS X 下，可发布游戏至 Windows、Mac、Wii、iPhone 、Windows phone 8 和 Android 平台，也可以利用 Unity web player 插件发布网页游戏，支持 Mac 和 Windows 的网页浏览。它的网页播放器也被 Mac widgets 所支持。Unity 分成 Free 与 Pro 版。 5 (2)Unity3D 软件特色 1)综合编辑：Unity 简单的用户界面，易上手的编辑模式。 2)导入资源：支持主要文件格式，并能和大部分相关应用程序协同工作。 3)一键部署：让玩家的作品在多平台呈现。 4)着色器：着色器系统整合了易用性、灵活性和高性能。 5)天空盒：优化软件流畅度的一种很好的办法。 6)资源包：对资源包进行动态加载。 7)音频和视频：实时三维混合音频流、视频流。 8)光影：提供了具有柔和和阴影与烘焙的高度完善的光影渲染系统。 9)文档：为学习者提供逐步的指导、文档和实例方案。 3 软件总体设计 本软件是基于 Unity 引擎做的一个简单的播放视频的一个小软件，只是给视 频增加了一些三维交互的体验，画面主要以视频为主，中间穿插一些小的交互按 钮。在视频播放时本来是以一个视频来作为总体的发展的，后来觉得一个视频的 话只能暂停和后退，后来就用 AE 视频剪辑软件做了一些剪切，剪切成了 10 个片 段，设定的少部分视频剪辑也可以倒回去看，这样更加生动有趣。 4 软件具体设计 一般的视频教学软件只是学习者在电脑屏幕前观看，没有互动性，学习者在 看过之后能记住的并不多，且容易遗忘。而视频交互学习软件有与学习者互动教 学的过程，让学习者在人机互动的操作中更好的掌握操作步骤，熟记操作要点。 本软件是模仿 QTE 运用 Unity 制作的视频交互学习教学软件，主要目的是让 学习者在与电脑的互动下更加快速有效的学会如何切割电缆线，且熟练的掌握操 作步骤。因此，我把操作分为以下几个小的步骤：首先，根据要求从电缆端口擦 拭电缆上的污垢；其次，量取需要的电缆尺寸，用记号笔做好切点标记；然后， 切开电缆外护套；最后，剥去电缆外护套。这样一步一步的与学习者进行互动操 作，可以让学习者参与到教学过程中来，能充分调动学习者的积极性与参与性， 让学习者对教学过程更感兴趣，在看过之后也能更清晰的记得自己学到的操作步 骤。 5 软件代码编写 5.1 设置静态变量 在此软件设定中，分别有几个三维内容，是动态加载的，就是到了视频播放 的某个时间点会实例化一些相应的交互内容，交互完成后销毁交互内容，所以会 对交互的脚本设置一些全局静态变量和公有的方法，这些静态变量会跟随全局的 变化而作一些相应的变化，但这是唯一的静态变量。 在声明公有 ID 号时这里使用了一个 C#的 get 和 set 方法，以便于通过属性 洛阳师范学院本科毕业论文 5 来控制对成员变量的读写，放置对成员变量的非法赋值。核心代码如下： public class getset : MonoBehaviour /定义为私有的一个整形变量 private int idex = 0; /给私有的整型变量赋值，声明为公有 ude， public int Idex get return idex; set idex = value; 在对静态变量定义时，考虑到视频播放的情况，定义了一下变量: (1)对视频是否播放的判断； (2)实例化那些交互按钮的执行判断； (3)新建一个在主脚本中步骤的 ID 号； (4)定义三个 Bool 值对前一个视频、现在播放的视频、下一个视频进行定义。 在编程前，根据前面的需求，先写了几个公有的方法，以便后面用到时不用 因为写重复的代码而浪费效率。公有方法说明如下： (1)声音播放的代码，先对声音进行加载，然后判断如果这个位置对象的音 频不为空，则播放此音乐；否则播放的音乐为报错音乐。 (2)视频播放的代码，播放视频代码除了播放的视频不一样外，其他的都是 一样的，调用的时候只需要传值播放就好了。 (3)按钮的淡入淡出效果，这个效果是通过对图片的 RGBA 值的改变来实现的， 在这里是用了一个 While 语句通过对时间的改变的循环，在交互完成后让图片的 alpha 值在 2 秒内慢慢的从零变到最大为淡入，2 秒内从最大变到最小为淡出， 然后再销毁这个按钮流程。 (4)对滑动条的动态加载，有一个滑动的效果，但是 Unity 不支持动画帧， 所以在这里就用 0.03 秒换一张图片共 60 张图的方法来实现类似于动画帧的效果， 对这 60 张图片的转换中，如果到 60 张图片了，就让下一张图片为第一张图片， 来进行循环播放这 60 张图片。这样就有了动画提示该怎么滑动。 (5)在视频播放的中间动态生成按钮，在每个重要的学习知识点，都会出现 一个相应的人机交互按钮，关键代码如下： /*加载 a 是视频的数组 ID，b 是视频的 ID，name 是视频的名字，pos 是加载三 维交互按钮的位置，Rot 是加载按钮的角度，Sca 是动态加载按钮的大小设置*/ void Process(int a, int b, string name, Vector3 pos, Quaternion Rot, Vector3 Sca) if (!_Moviea.isPlaying Slider_shipin.transform.parent = UIRoot.transform; Slider_ = name; Slider_shipin.transform.localPosition = pos; Slider_shipin.transform.localRotation = Rot; Slider_shipin.transform.localScale = Sca; Glove.idex.Idex+; 5.2 视频的储存以及初始化的脚本逻辑 在视频播放前首先是对加进来的视频进行存储，以便播放时使用，由于视频 的内容不多，又不做增删改查的一些细节上的操作，所以就定义了两个数组，然 后在编辑器模式下 Hierarchy 实例化窗口内，直接定义了 10 个贴图，把视频赋 值上去。关键代码为： /脚本单例模式简单定义 private static PlAY self; public static PlAY Self 洛阳师范学院本科毕业论文 7 get return self; public GameObject SHIPIN; /视频的数组 public MovieTexture _Movie; /视频贴图的定义 public Transform UIRoot; /Clone 对象的副节点 5.3 播放视频逻辑 视频播放这个软件的最基本的步骤，也是学习者学习的主要内容，视频是自 动播放，只是到了几个关键的学习点视频暂停了，进行 QTE 交互后才能继续播放 视频。关键代码如下： /根据视频的 ID 号来判断是否播放此视频 if (Glove.idex.Idex = /如果此视频没有播放 if (!_Movie1.isPlaying) /那么它的视频贴图的层级就调到最上层 SHIPIN0.GetComponent().depth = 0; SHIPIN1.GetComponent().depth = 2; /播放此视频 _Movie1.Play(); /视屏的 ID 号+ Glove.idex.Idex+; 5.4 按钮生成及交互逻辑 5.4.1 生成交互按钮逻辑 这个章节是这个小软件的最重要的一个环节，动态生成交互按钮。例图： 图 5-4-1 交互按钮 就是在视频播放到某一个重要的环节，视频暂停，交互按钮动态出现，出现 的位置和角度都要和交互的地方一致。在这里。交互按钮是提前写好的一些小逻 辑，完成后只要返回两个全局静态变量即可，把这些逻辑都给细分和模块化处理 了，交互出现的位置有几下几点： (1)语音和视频提示擦拭外护套时，暂停视频在外护套旁动态生成一个来回 拖动按钮。 (2)语音和视频提示用笔做好记号时，动态生成悬浮和点击按钮。 (3)语音和视频提示切割时，动态生成悬浮和点击切割按钮。 (4)语音和视频提示先环切后竖切时，动态生成旋转拖动按钮。 (5)语音和视频提示先环切后竖切时交互后后，动态生成向左拖动按钮。 (6)最后是动态生成多次点击按钮。 核心动态生成代码在通用代码里，我只需要调用此通用方法，然后调整各个 按钮的位置，角度，大小显示在屏幕上即可。 5.4.2 擦拭外护套来回按钮交互逻辑 在动态生成的按钮中，来回拖动按钮逻辑是第一个细化的内容，视频播放是 擦拭外护套来回三次，所以我设定的拖动按钮也是来回拖动三次，拖动的多了或 者少了都是不正确的，按钮的设定为：默认显示为按钮，当鼠标悬停到按钮上时 按钮变大，滑动条显示，并有声音提示，以类似于 Flash 序列帧的方式提示滑动 方向，完成交互后播放下一个视频。关键代码如下： /获取滑动条的大小值 value = Drag.GetComponent().value; 洛阳师范学院本科毕业论文 9 /当鼠标拖动小于初始设定的值时，对滑动条滑动的最大值和最小值限制 if (Drag.GetComponent().value ().value = StartNum; /如果大于最大值，那么就等于最大值 else if (Drag.GetComponent().value EndNum) Drag.GetComponent().value = EndNum; /如果等于 6 个就判断正确 if (Idex.Count = 6 Glove.idex.Idex+; jiance = !jiance; But_Thu.GetComponent().enabled = false; /渐隐渐出的效果 StartCoroutine(FadeEff.FadeLocationOut(des1, Pan, 1); 图 5-4-2 滑动按钮 5.4.3 切割电缆旋转按钮交互逻辑 旋转按钮是使用鼠标拖拽，然后形成一个圆，但是只能顺时针拖拽，不能逆 时针。设定只有旋转一圈才正确，多了或者少了都不对，如果操作错误的话，拖 动按钮返回原来位置，并提示错误声音，如果正确的话，就进行下一个知识点的 学习。 核心算法逻辑如下： 鼠标拖拽的时候计算物体的位置，通过累加角度计算物体转的圈数。 定义：圆心坐标 O=（0，0，0）； 物体的初始位置和圆心的方向 A=（x1,y1,z1）； 鼠标和圆心的方向 B=(x2,y2,z2)； 获取鼠标在世界坐标中的位置 C=（x3，y3,z3）； 初始向量 A=A-O；更新的向量 B=B-O； 如果 A!=B（判断有没有旋转）；如果 A 和 B 的叉乘的 Z 向量0（判断有没有 顺时针）； 最终旋转的角度+=COS（Dot（A，B）(A 和 B 的点乘)； 最终物体的位置=O+B*r（r 为圆的半径可自定义）； 如果最终旋转的角度= 圆周率 PI*2；那么就判定操作完成，进行下一个步骤； 否则逆时针旋转的话，就让物体的位置一直等于初始位置。 按钮例图: 图 5-4-3 旋转按钮 洛阳师范学院本科毕业论文 11 5.4.4 向左拖动按钮交互逻辑 该步骤中拖动按钮的生成方式类似于来回拖动按钮的生成方式，只是该环节 中的操作是将按钮从右边拖到左边为正确操作，进入下个学习环节，否则提示错 误声音，重新滑动进行交互。按钮例图： 图 5-4-4 向左拖动按钮 5.4.5 多次点击按钮交互逻辑 在本软件中，多次点击按钮是一个比较有意思的设计。当多次连续点击时， 滑动条会自动向上滑动，当滑动到某一值时判定正确，提示正确声音，进入下一 知识点的学习。如果停止点击的话，滑动条的值会慢慢衰减，直至回到原来位置， 然后需要重新连续点击。 图 5-4-5 多次点击按钮 5.5 三维场景交互逻辑 完成视频播放的学习后，就进入了一个选择工具的一个三维交互内容了，由 于时间的不充裕，我只是做了一个简单的介绍，点击某个工具，该工具会变红， 相应的下方也会出现它的文字介绍。例图： 图 5-4-6 选择工具 6 软件测试 6.1 软件测试步骤 本软件是电缆端头切割，根据语音提示操作，如果操作不正确就会仍然保持 在当前状态，操作正确则继续播放。 第一步,根据说明书要求从电缆端口擦拭电缆上的污垢，在电缆下方会出现 一个类似毛巾的图标，左键点击不放来回滑动三次擦拭干净。 第二步,量取需要的电缆尺寸，用记号笔做好切点标记，左键点击一次记号 笔图标按钮标示出需要的尺寸所在的位置。 第三步,根据提示左键点击一次刀具图标选择工具，然后根据提示先左键点 击刀具图标顺时针做圆周运动松开，再点击图标向左做直线运动，切开电缆外护 套。 第四步,根据提示点击钳子图标选取工具，左键连续点击图标，将百分比点 击到 100%，剥去电缆外护套，中间不能停顿，一旦停顿百分比就会缓慢下降。 最后,选取工具，将鼠标移至工具上，工具会变为红色，左键点击工具在右 下方提示栏中就会提示工具的名称。 6.2 测试中遇到的问题 在制作软件的过程中我遇到了一些问题，其中比较严重的问题有下面两个： (1)视频播放存储前，在编辑器模式 Hierarchy 实例化窗口内定义了一个视 频贴图，然后对这个贴图的视频轮流播放那几个视频剪辑，但是有一个重大的问 题就是在视频转换的时候，会出现短暂的黑屏，为了解决黑屏的问题只好做了 10 洛阳师范学院本科毕业论文 13 个贴图预先放置好进行直接播放，所有视频直接播放，然后到 0.5 秒后除了第一 个视频外，其他的视频全部暂停。 (2)在制作软件的时候我遇到的问题是交互逻辑完成后，视频容易跳帧，给 学习者一个卡顿的感觉，所以我在查阅了资料后在细节上做了两个处理： 1)初始化在视频播放时，我把所有的视频用 AE 视频剪辑编辑器剪切成前 0.5 秒是不变化的，也就是说前 0.5 秒静止的视频，初始化时所有的视频都播放，在 0.5 秒时，只播放所需要的视频，其他所有视频处于暂停状态，下面该播放哪一 个视频时那个视频由暂停状态直接转换为播放状态就可以了。核心代码在上述公 共代码里，用到播放哪个视频时调用这个公用的方法就可以了。 2)在 10 个视频贴图都放在视角内，到底观看哪一个这是个很严重的问题， 所有视频都播放的话，肯定很乱，在这里利用 NGUI 插件的视图层级效果 （Depth），这里的层级就和 PS 中的分层很像，如果所有图片都在同一个位置上 的话，图片属性的层级越高的话，就越优先显示它。在播放某个视频时只需要调 整这个图片的层级再把上一个图片的层级改为比较低的层级，这样的话就完美的 解决了视频跳转黑屏和卡顿的现象。 7 总结 这些软件流程控制是在 Uni