【摘要】摄像头游戏是随着技术的进步产生出来的一种新的游戏形式，它摆脱了鼠标与键盘的限制，给游戏者以全新的互动体验。Flash 8提供的位图处理功能为Flash摄像头游戏的实现提供了可能。将摄像头游戏技术引入到Flash课件的开发，可以充分发挥其互动性和趣味性，与传统Flash课件相比，具有其不可替代的优势。该文提出设计Flash摄像头游戏课件的基本原则，并以《水果乐园》课件为例，详细介绍了开发的过程和主要实现方法，为摄像头游戏类课件制作提供了参考。
　　【关键词】Flash；摄像头游戏；课件  西南大学计算机与信息科学
　　【中图分类号】G434【文献标识码】B【论文编号】1009—8097 (2008) 01—0107—05
　　
　　一、引言
　　
　　摄像头游戏是随着摄像头的普及和图形图像技术的不断发展而出现的。它摆脱了鼠标键盘的限制，给游戏者带来全新的游戏体验，能够实现许多传统游戏无法实现的游戏效果。它通过摄像头将玩家投影到游戏中，由玩家自己做动作与游戏进行交互。画面中登场的敌人或道具都将对玩家的动作即刻做出反应，让玩家体验到前所未有的新鲜感。
　　Flash课件是用Flash的形式表现教学内容一种课件形式。Flash课件充分利用了Flash的直观性、互动性以及娱乐性，能够有效的调动学生的学习积极性，激发学生的学习乐趣，在当前的教学过程中发挥着越来越大的作用。Flash摄像头游戏课件整合了摄像头游戏和Flash课件的优点，充分体现了“寓教于乐”的教学思想。它带给学生全新的游戏感受，能够极大的激发学生的学习兴趣。它能够激发学生的多种感观刺激，建立强烈的真实感，通过游戏过程中学生与游戏的互动，还能够促进学生手、耳、眼以及肢体的相互协调，达到较好的教学效果。
　　
　　二、Flash摄像头游戏课件的设计原则
　　
　　Flash摄像头游戏课件具有较好参与性、体验性，能够有效增强学习效果，提高学习效率，特别适合于学生动作类技能的训练。在设计的过程中，应遵循如下原则，体现其独特的优势。
　　（1）教学性原则
　　这是所有课件，应用于教学的最基本的要求，该类课件也不例外，在设计的过程中，必须针对一定的教学目标，遵循认知过程的一般规律，组织教学内容和教学活动。紧密围绕“以学生学习为中心”的设计思路。
　　（2）易用性原则
　　摄像头游戏课件的交互，计算机对于学习者的动作回应，都是建立在动作检测，捕捉学习者动作影像的基础上。设计过程中应考虑让学习者的操作尽量简便，易于上手使用。做好课件使用的帮助或者使用手册。
　　（3）科学性原则
　　课件的内容，不能有科学性的错误，这也是设计中基本要求，必须对课件所有呈示的内容，进行严格仔细的审查，保证学生看到的所有知识点，都必须科学、准确，一般由课件开发小组中学科专家把好关。
　　（4）艺术性原则
　　如果一个课件的展示不但取得良好的教学效果，而日‘使人赏心悦目，使人获得美的享受，则说课件具有较高的艺术性。这样的课件是好的内容与美的形式的统一，美的形式能激发学生的兴趣，史好地表现内容。其表现有:展示的对象结构对称，色彩柔和，搭配合理，有审美性。
　　（5）体验性原则
　　摄像头游戏课件因其交互的多维化，全方位，检测学习者动作，使得学习者的沉浸感很强，要求学习者的个人形象和课件环境融合的过程中，能让学习能有身临其境的感觉，所以课件在设计的过程中，注意课件环境，界面的元素，声音的效果，都必然能激发学习者的投入感。该原则是摄像头游戏课件设计过程中最重要的原则，也是整个课件制作的关键，成败所在。
　　
　　三、Flash摄像头游戏课件的设计与实现
　　
　　在儿童英语教学中，引入Flash摄像头游戏课件，使得儿童摆脱键盘和鼠标的单一化的交互方式，而进行身体动作与计算机的交互，增强儿童学习的体验感，能较好的辅助英语的学习。以下是设计与开发的“水果乐园”课件的实现步骤和主要功能代码。
　　1.摄像头图像的捕获
　　使用Camera类实现对摄像头图像的捕获。Camera.get()方法返回对用于捕获视频的 Camera 对象的引用。当 SWF 文件尝试访问 Camera.get() 返回的摄像头时，Flash Player 显示“拒绝”对话框，用户可从中选择是允许还是拒绝对摄像头的访问，如图1所示。
　　

setMode()方法将摄像头的捕获模式设置为最符合指定要求的本机模式。
　　//新建一个Camera对象，实例名为my_cam，并设置对象属性。
　　var my_cam:Camera = Camera.get();
　　my_cam.setMode(160,120,30,true);
　　2.摄像头图像的显示
　　1)显示图像
　　若要实际开始捕获视频，必须将 Camera 对象附加到 Video 对象。attachVideo(source:Object) : Void指定将在舞台上的 Video 对象的边界内显示的视频流 (source)。
　　//新建一个Video对象，将Camera对象附加到Video上。
　　var my_video:Video;
　　my_video.attachVideo(my_cam);
　　2)水平翻转图像
　　由于摄像头中看到的图像与游戏者本人的方向相反。为了方便游戏者操作游戏，在加载图像时应该把图像左右翻转。这一操作非常重要，将直接影响游戏者的游戏体验。
　　Video._rotation 属性可以实现对Video图像的旋转，但是无法实现左右翻转的效果。
　　Video._xscale 属性指示从 Video 对象注册点开始应用的 Video 对象的水平缩放比例 。当x轴的水平缩放比例为-100时，则可以实现对Video对象的水平翻转。默认注册点为 (0，0)。缩放本地坐标系统将影响 _x 和 _y 属性设置，这些设置是以整像素定义的。由于翻转时是以左上角主测点为中心，因此在水平翻转之后，Video对象的坐标虽然未发生改变，但是整体位置向左平移了Video. _width个像素。因此翻转之后我们需要设置Video的新坐标为Video._x = Video._x+Video._width。
　　3.获取图像信息
　　要对获取的图像进行分析，必须将从摄像头获取的图像信息提取出来。在Flash8中， Bitmap对象存储了图像中各点的RGB通道信息以及Alpha通道信息，可以使用new方法建立一个Bitmap对象。然后使用draw（）方法提取某一时刻video对象中的像素信息。
　　draw(source:Object,[matrix:Matrix],[colorTransform.:ColorTransform], [blendMode:Object], [clipRect:Rectangle], [smooth:Boolean]) : Void使用 Flash Player 矢量呈现器在目标图像上绘制源图像。使用 Matrix、ColorTransform、BlendMode 对象以及目标 Rectangle 对象来控制呈现的执行方式。或者也可以指定缩放时是否应对位图进行平滑处理。这只适用于当源对象是 BitmapData 对象时的情况。
　　import Flash.display.BitmapData;
　　
　　//创建BitmapData对象
　　Var snapshot:BitmapData=new
　　BitmapData(output_vid._width，output_vid._height);
　　//从my_video获取当前图像
　　now.draw(my_video);
　　4.运动检测的实现
　　该部分是整个摄像头游戏实现的核心。主要利用了Flash 8的位图处理功能，即BitmapData类。
　　1)基本思路
　　我们可以使用getPixel(x，y)获取前一张图片上每个像素点的像素值，然后对比后一张图片中的每一点的像素值，当像素的亮度差值变化达到一定程度时，认为该点发生了运动变化。通过这种方式，得到前后两张图片的负片效果图。
　　//阀值
　　tolerance=10;
　　//获取当前图像now某一点的RGB值
　　nc=now.getPixel(x，y);
　　//红色通道
　　nr=nc>>16&0xff;
　　//绿色通道
　　ng=nc>>8&0xff;
　　//蓝色通道
　　nb=nc&0xff;
　　//计算该点亮度值
　　nl=Math.sqrt(nr*nr + ng*ng + nb*nb)
　　//获取前一快照before同一点的RGB值
　　bc=before.getPixel(x，y);

//红色通道
　　br=bc>>16&0xff;
　　//绿色通道
　　bg=bc>>8&0xff;
　　//蓝色通道
　　bb=bc&0xff;
　　//计算该点亮度值
　　bl=Math.sqrt(br*br + bg*bg + bb*bb);
　　//计算亮度值的变化
　　d=Math.round(Math.abs(bl-nl));
　　if(d>tolerance)
　　{
　　//该点发生了变化
　　}
　　但是这种方法存在计算效率问题。按图像大小为180*160像素，每秒30帧计算，每计算一副图片需要的计算次数为180*160*30。图像的像素越大，需要的计算次数就越多。采用隔点检测的方法可以在一定程度上缓解计算压力，即每隔n个像素检测一次，这样电脑的计算次数减少为原来的1/n。
　　2)改进思路
　　Flash8提供的图像混合模式可以解决上面遇到的效率问题。Flash8提供了11种图像混合模式。每一种混合模式可以得到不同的混合效果。Different 混合模式是基于两张图片之间的亮度差值进行计算，从而得到图片的负片效果。利用该模式，便可以得到移动像素的检测图像。
　　//将前一张快照before的图像绘制到当前快照now上，使用different混合模式
　　now.draw(before， new Matrix()， null， "difference");
　　图像中黑色表示没有发生移动，其他颜色表示发生了移动。由于Flash8提供的混合模式是采用C++编码实现的，因此运行效率要比Action Script编码更加高效。
　　5.动态显示检测图像
　　1)处理检测图像
　　通过以上两种方式得到的图像中色彩范围较广，这增加了统计上面的困难。通过使用 threshold() 方法，可以隔离和替换图像中的颜色范围，并对图像像素执行其它逻辑操作。threshold（）函数根据指定的阈值测试图像中的像素值，并将通过测试的像素设置为新的颜色值。这样，便得到了清晰醒目的检测图像。
　　//将大于阀值0xFF111111的像素替换为绿色。
　　myBitmap.threshold(myBitmap， myBitmap.rectangle， myBitmap.rectangle.topLeft， ">"， 0xFF111111， 0xFF00FF00， 0x00FFFFFF， false);
　　2)检测图像的显示
　　Bitmap对象无法直接在舞台上显示，必须附着在MovieClip上面才能显示。因此可以使用MovieClip类的attachBitmap()方法，将获取的图像信息显示出来。
　　//创建一个影片剪辑来显示当前图像
　　this.createEmptyMovieClip(“当前”，this.getNextHighest Depth());
　　//将摄像头获取的图像显示在影片剪辑内
　　bitmap_mc.attachBitmap(now，1);
　　3)检测图像的动态显示
　　要实现检测图像的动态显示，必须不断的更新当前图像now和历史图像before，并进行混合处理。可以把检测图像的功能写成方法snapshot()，每隔100毫秒调用一次。
　　伪代码如下：
　　function snapshot() {
　　//获取当前图像
　　//获取检测图像
　　//将检测图像绘制到
　　//将检测图像中RGB超过阀值0xFF111111的部分替换成绿色
　　//显示检测图像
　　//本次检测完成之后，当前图像便成为了历史图像。为下一次检测做好准备。
　　preBitmap = nowBitmap.clone();
　　 }
　　在该方法中，关键在于每次检测完成之后当前图像和历史图像的更新。
　　6.检测特定区域内的运动状态
　　经过上面几步操作，已经得到了检测图像。检测图像是对整幅图像的运动情况的反映。在游戏中，经常需要检测的是某一特定区域的运动状态。
　　1)检测某点的运动状态
　　因为已经到了检测图像，所以在检测某一点运动状态时，只需要判断检测图像上该点的RGB值是否大于阀值。
　　伪代码如下：
　　pix = myBitmap.getPixel(x， y);

if (pix大于阀值) {
　　 //该点发生了运动
　　 }
　　2)检测某区域的运动状态
　　由于灯光因素、摄像头图像噪点等干扰因素的存在，每次只检测一个点容易造成检测结果的不稳定。因此，大多采用区域检测的方式。即在检测某点运动状态时，检测的不仅仅是这个点，而是以该点开始的n*n个像素的区域（n的取值根据实际情况确定，在检测点数量较多时，n的值不宜取太大。）。如果检测区域内的像素点变化数量超过一定阀值，如60％，则认为该区域发生了运动。
　　需要注意的一点是，由于看到的图像是经过水平翻转的，但原有的图像内部坐标系并没有发生变化，因此，检测时的取点位置也要水平翻转。
　　//以(rectx，recty)为顶点的rectw*recth的矩形区域的运动情况
　　function ismove(a， rectx， recty， rectw， recth) {
　　 var i， j;
　　 var sum = 0;
　　 var pix;
　　 for (i=1; i<=rectw; i++) {
　　 for (j=1; j<=recth; j++) {
　　//图像水平翻转后取点位置相对变化
　　 pix = a.getPixel(160-i-rectx， j+recty);
　　 if (pix>132361) {
　　 sum++;
　　 }
　　 }
　　 }
　　 //trace("sum="+sum);
　　 if (sum>(recth*rectw/2)) {
　　 return (sum);
　　 //该区域发生了运动
　　 } else {
　　 return 0;
　　 }
　　}
　　
　　在该方法中，检测图像、检测区域顶点坐标、检测区域大小都为作为变量输入。采用这种方法，提高了程序的重用性，还可以实现对运动物体的检测。
　　3)检测点的设置
　　所谓检测点，实际是一个影片剪辑。在进行区域检测时，以该影片剪辑的坐标（x，y）确定检测区域的坐标位置。检测点可以是一个不可见的辅助点，也可以是舞台中运动的物体。当把运动物体做为检测点时，随着物体的移动，检测区域也随之移动，因此可以实现对运动物体的检测。检测点的作用：一是可以起到辅助点的作用，简化了检测区域定位的繁琐工作，使定位操作可视化。二是实现了代码的重用，起到了简化程序的作用。
　　7.实现摄像头运动检测的控制接口
　　游戏中检测点接口的作用就是返回舞台中被触碰的检测点编号。在接口函数中，调用了以上几个功能函数。返回值为检测点编号。
　　function istouch() {
　　 var max:Number = 0;
　　 var min:Number;
　　 var num:Number;
　　 for (var i = 1; i<=9; i++) {
　　 //检测第i个检测点是否被触碰
　　 min = ismove(myBitmap, this["point"+i]._x-xpoint, this["point"+i]._y-ypoint, 10, 10);
　　 //每次只能激发一个点，选择9个点中移动最显著的一个
　　 if (max　　 max = min;
　　 num = i;
　　 }
　　 }
　　 if (num) {
　　 //返回被触碰的点的序号
　　 return (num);
　　 } else {
　　 //一个检测点也没碰到！;
　　 return 0;
　　 }
　　}
　　8.游戏交互功能的实现
　　游戏功能交互的实现方法和其他Flash游戏大体类似。在此游戏中，主要包括3大功能模块：子弹系统，气球系统 和主控制系统。其主界面如图2所示。
　　
　　
　　1)子弹系统的实现
　　该部分主要是实现子弹的运动。游戏中有9个检测点，每个检测点都可以发射子弹。各位置发射的子弹运动方向是不同的。第i个检测点的子弹方向为rot=i*20，初始位置在界面底部中央。

this._x = this._x-30*Math.cos(rot*Math.PI/180);
　　this._y = this._y-30*Math.sin(rot*Math.PI/180);
　　当子弹出界时，要使用this.unloadMovie()方法将该子弹实例销毁，释放内存。
　　2)气球系统的实现
　　该部分主要是实现气球的碰撞检测，判断气球是否被子弹击中需使用hitTest()函数。该函数有两种用法：
　　用法 1：根据 shapeFlag 设置，将 x 和 y 坐标与指定实例的形状或边框进行比较。如果 shapeFlag 设置为 true，则只计算在舞台上的实例实际占据的区域，并且如果 x 和 y 在任意一点重叠，则返回 true 值。
　　用法 2：计算 target 和指定实例的边框，如果它们在任意一点上重叠或交叉，则返回 true。
　　3)主控制系统的实现
　　主控制系统是实现互动功能的核心部分。主要工作就是把游戏中所有的功能模块集成起来，对各功能模块进行调度和显示。一方面，主控制系统要接收从摄像头功能接口传递的信息；一方面根据接收的信息执行相应的功能代码。
　　
　　四、结束语
　　
　　Flash摄像头游戏课件能够实现很多传统Flash课件难以实现的效果，特别是对操作技能的培养。我们开发的《水果乐园》课件提供给一些小学，进行了英语学习实践,效果还不错。但是，对于Flash摄像头游戏课件应用于学生高级思维策略的训练，还没有进行深入的研究，特别是角色扮演型、问题探究型等学习模式等实施，有待进一步的的探索和实践。

Flash角色绘画技巧:绘制人物头像 Flash技巧:PNG非透明区域为mask

评论 (0) All