QTE教育模式设计

LUOYANG NORMAL UNIVERSITY 2015届本科毕业设计基于Unity3D的切剥电缆仿真 院（系）名称专 业 名 称学生姓名学号指导教师黄绍龙完 成 时 间2015.5基于Unity3D的切剥电缆仿真数学科学学院 信息与计算科学 学号：指导教师：黄绍龙摘要：本文模仿游戏的Quick Time Events交互模式，运用Unity制作出虚拟仿真的具有互动性和趣味性的切剥电缆的视频教学软件，学习者通过人机交互能更好的自学到切剥电缆线的方法与步骤，有助于记忆且运用切剥电缆的方法。关键词：Unity3D；交互；按钮；电缆1 引言由于多媒体技术以及科技的飞速发展，各种各样的仿真技术被大量的运用。人们已经不满足二维动画视频的视觉体验，三维仿真应运而生。三维仿真不仅能够带来视觉上的冲击，还有一种模拟现实的功能，使操作者有一种身临其境的感觉，是一个十分具有发展前景的虚拟现实模式。Unity3D是由UnityTechnologies开发的一个玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画的类型互动内容的多平台的综合型游戏开发工具，是一个全面整合的专业游戏引擎。Unity是利用交互的图形化开发环境为首要方式的软件，其编辑器运行在Windows和MacOSX下，可发布游戏至Windows、Mac、Wii、iPhone、Windowsphone8和Android平台，也可以利用Unitywebplayer插件发布网页游戏，支持Mac和Windows的网页浏览。它的网页播放器也被Macwidgets所支持。1QTE是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 3DMax3D Studio Max，常简称为3ds Max或MAX，是Autodesk传媒娱乐部开发的基于PC系统的全功能的三维计算机图形软件，3ds Max运行在Win32和Win64平台上，广泛应用于广告、影视、工业设计、建筑设计、三维动画、多媒体制作、游戏、辅助教学以及工程可视化等领域。在2007年7月，3ds Max发布了第十版。在Windows NT出现以前，工业级的计算机图形学制作被SGI图形工作站所垄断。3D Studio Max + Windows NT组合的出现一下子降低了CG制作的门槛，首选开始运用在电脑游戏中的动画制作，后更进一步开始参与影视片的特效制作。在Discreet 3Ds max 7后，正式更名为Autodesk 3ds Max，最新版本是3Ds max 2014。22.2.2 C#C#是C+衍生出来的面向对象的编程语言，是微软发布的一种面向对象的于NETFramework之上的高级程序设计语言，并定于在微软职业开发者论坛（PDC）上登台亮相。C#是微软公司研究员AndersHejlsberg的最新成果，看起来与Java有着惊人的相似，但是微软公司NETwindows网络框架的主角。32.2.3 AEAdobe After Effects简称“AE”，是Adobe公司推出的一款图形视频处理软件，适用于从事设计和视频特技的机构，包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室，属于层类型后期软件。42.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方法，以便于通过属性来控制对成员变量的读写，放置对成员变量的非法赋值。核心代码如下：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 & Glove.idex.Idex = b) GameObject Slider_shipin =Instantiate(Resources.Load(name) as GameObject; Slider_shipin.transform.parent = UIRoot.transform; Slider_shipin.name = 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 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;/当鼠标拖动小于初始设定的值时，对滑动条滑动的最大值和最小值限制if (Drag.GetComponent().value StartNum)/滑动块就等于开始值。Drag.GetComponent().value = StartNum;/如果大于最大值，那么就等于最大值else if (Drag.GetComponent().value EndNum)Drag.GetComponent().value = EndNum;/如果等于6个就判断正确if (Idex.Count = 6 & jiance = false)/操作完成后，返回的结果Glove.PlaySound(this.transform, Audio/正确提示1);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 旋转按钮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个贴图预先放置好进行直接播放，所有视频直接播放，然后到0.5秒后除了第一个视频外，其他的视频全部暂停。(2)在制作软件的时候我遇到的问题是交互逻辑完成后，视频容易跳帧，给学习者一个卡顿的感觉，所以我在查阅了资料后在细节上做了两个处理：1)初始化在视频播放时，我把所有的视频用AE视频剪辑编辑器剪切成前0.5秒是不变化的，也就是说前0.5秒静止的视频，初始化时所有的视频都播放，在0.5秒时，只播放所需要的视频，其他所有视频处于暂停状态，下面该播放哪一个视频时那个视频由暂停状态直接转换为播放状态就可以了。核心代码在上述公共代码里，用到播放哪个视频时调用这个公用的方法就可以了。2)在10个视频贴图都放在视角内，到底观看哪一个这是个很严重的问题，所有视频都播放的话，肯定很乱，在这里利用NGUI插件的视图层级效果（Depth），这里的层级就和PS中的分层很像，如果所有图片都在同一个位置上的话，图片属性的层级越高的话，就越优先显示它。在播放某个视频时只需要调整这个图片的层级再把上一个图片的层级改为比较低的层级，这样的话就完美的解决了视频跳转黑屏和卡顿的现象。7 总结这些软件流程控制是在Unity与QTE的结合下实现，而且能够很好、很方便的运用到软件当中去中，使学习者更快更容易的学会并掌握操作步骤。每一个步骤都是一个小的互动操作，是学习者在人机互动中学习，更有吸引力与趣味性。在视频播放教学中只有正确操作才能使教学继续，学习者也能更熟练的掌握切割电缆的方法。还有很多上文没有提到的应用，有待继续的学习和灵活应用。参考文献1 宣雨松. Unity3D 游戏开发M.北京：人民邮电出版社，2016.2 朱江. 中文版3ds Max 2014技术大全M.北京：人民邮电出版社，2014.3 美Karli Watson Christian Nagel . C#入门经典M.清华大写出版社，2016.4 彭超.After EffectCS4完全学习手册M.北京：人民邮电出版社，2016.5 吴亚峰，于复兴.Unity3D 游戏开发技术详解与典型案例M.北京：人民邮电出版社，2012.The Simulation of Stripping Cable Based on Unity3D College of Mathematics Science No：Tutor：HUANG Shao-longAbstract: This paper is mainly about the Quick Time Events interaction mode of imitation game.The virtual simulation made by the Unity is a video teaching software about cable cutting which is interactive and interesting.The learners can use it to have a better knowledge of the methods and procedures of stripping cable all by themselves.It can conduce to remember and use the methods to strip cable. Key Words：Unity3D; button; interaction; cable