Flash摄像头游戏课件的设计与实现Webjx核心提示:Flash摄像头游戏课件能够实现很多传统Flash课件难以实现的效果,特别是对操作技能的培养。我们开发的《水果乐园》课件提供给一些小学,进行了英语学习实践,效果还不错。【摘要】摄像头游戏是随着技术的进步产生出来的一种新的游戏形式,它摆脱了鼠标与键盘的限制,给游戏者以全新的互动体验。Flash8提供的位图处理功能为Flash摄像头游戏的实现提供了可能。将摄像头游戏技术引入到Flash课件的开发,可以充分发挥其互动性和趣味性,与传统Flash课件相比,具有其不可替代的优势。该文提出设计Flash摄像头游戏课件的基本原则,并以《水果乐园》课件为例,详细介绍了开发的过程和主要实现方法,为摄像头游戏类课件制作提供了参考。【关键词】Flash;摄像头游戏;课件西南大学计算机与信息科学一、引言摄像头游戏是随着摄像头的普及和图形图像技术的不断发展而出现的。它摆脱了鼠标键盘的限制,给游戏者带来全新的游戏体验,能够实现许多传统游戏无法实现的游戏效果。它通过摄像头将玩家投影到游戏中,由玩家自己做动作与游戏进行交互。画面中登场的敌人或道具都将对玩家的动作即刻做出反应,让玩家体验到前所未有的新鲜感。Flash课件是用Flash的形式表现教学内容一种课件形式。Flash课件充分利用了Flash的直观性、互动性以及娱乐性,能够有效的调动学生的学习积极性,激发学生的学习乐趣,在当前的教学过程中发挥着越来越大的作用。Flash摄像头游戏课件整合了摄像头游戏和Flash课件的优点,充分体现了“寓教于乐”的教学思想。它带给学生全新的游戏感受,能够极大的激发学生的学习兴趣。它能够激发学生的多种感观刺激,建立强烈的真实感,通过游戏过程中学生与游戏的互动,还能够促进学生手、耳、眼以及肢体的相互协调,达到较好的教学效果。二、Flash摄像头游戏课件的设计原则Flash摄像头游戏课件具有较好参与性、体验性,能够有效增强学习效果,提高学习效率,特别适合于学生动作类技能的训练。在设计的过程中,应遵循如下原则,体现其独特的优势。(1)教学性原则这是所有课件,应用于教学的最基本的要求,该类课件也不例外,在设计的过程中,必须针对一定的教学目标,遵循认知过程的一般规律,组织教学内容和教学活动。紧密围绕“以学生学习为中心”的设计思路。(2)易用性原则摄像头游戏课件的交互,计算机对于学习者的动作回应,都是建立在动作检测,捕捉学习者动作影像的基础上。设计过程中应考虑让学习者的操作尽量简便,易于上手使用。做好课件使用的帮助或者使用手册。(3)科学性原则课件的内容,不能有科学性的错误,这也是设计中基本要求,必须对课件所有呈示的内容,进行严格仔细的审查,保证学生看到的所有知识点,都必须科学、准确,一般由课件开发小组中学科专家把好关。(4)艺术性原则如果一个课件的展示不但取得良好的教学效果,而日‘使人赏心悦目,使人获得美的享受,则说课件具有较高的艺术性。这样的课件是好的内容与美的形式的统一,美的形式能激发学生的兴趣,史好地表现内容。其表现有:展示的对象结构对称,色彩柔和,搭配合理,有审美性。(5)体验性原则摄像头游戏课件因其交互的多维化,全方位,检测学习者动作,使得学习者的沉浸感很强,要求学习者的个人形象和课件环境融合的过程中,能让学习能有身临其境的感觉,所以课件在设计的过程中,注意课件环境,界面的元素,声音的效果,都必然能激发学习者的投入感。该原则是摄像头游戏课件设计过程中最重要的原则,也是整个课件制作的关键,成败所在。三、Flash摄像头游戏课件的设计与实现在儿童英语教学中,引入Flash摄像头游戏课件,使得儿童摆脱键盘和鼠标的单一化的交互方式,而进行身体动作与计算机的交互,增强儿童学习的体验感,能较好的辅助英语的学习。以下是设计与开发的“水果乐园”课件的实现步骤和主要功能代码。1.摄像头图像的捕获使用Camera类实现对摄像头图像的捕获。Camera.get()方法返回对用于捕获视频的Camera对象的引用。当SWF文件尝试访问Camera.get()返回的摄像头时,FlashPlayer显示“拒绝”对话框,用户可从中选择是允许还是拒绝对摄像头的访问,如图1所示。setMode()方法将摄像头的捕获模式设置为最符合指定要求的本机模式。//新建一个Camera对象,实例名为my_cam,并设置对象属性。varmy_cam:Camera=Camera.get();my_cam.setMode(160,120,30,true);2.摄像头图像的显示1)显示图像若要实际开始捕获视频,必须将Camera对象附加到Video对象。attachVideo(source:Object):Void指定将在舞台上的Video对象的边界内显示的视频流(source)。//新建一个Video对象,将Camera对象附加到Video上。varmy_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使用FlashPlayer矢量呈现器在目标图像上绘制源图像。使用Matrix、ColorTransform、BlendMode对象以及目标Rectangle对象来控制呈现的执行方式。或者也可以指定缩放时是否应对位图进行平滑处理。这只适用于当源对象是BitmapData对象时的情况。importFlash.display.BitmapData;//创建BitmapData对象Varsnapshot:BitmapData=newBitmapData(output_vid._width,output_vid._height);//从my_video获取当前图像now.draw(my_video);4.运动检测的实现该部分是整个摄像头游戏实现的核心。主要利用了Flash8的位图处理功能,即BitmapData类。1)基本思路我们可以使用getPixel(x,y)获取前一张图片上每个像素点的像素值,然后对比后一张图片中的每一点的像素值,当像素的亮度差值变化达到一定程度时,认为该点发生了运动变化。通过这种方式,得到前后两张图片的负片效果图。//阀值tolerance=10;//获取当前图像now某一点的RGB值nc=now.getPixel(x,y);//红色通道nr=nc16&0xff;//绿色通道ng=nc8&0xff;//蓝色通道nb=nc&0xff;//计算该点亮度值nl=Math.sqrt(nr*nr+ng*ng+nb*nb)//获取前一快照before同一点的RGB值bc=before.getPixel(x,y);//红色通道br=bc16&0xff;//绿色通道bg=bc8&0xff;//蓝色通道bb=bc&0xff;//计算该点亮度值bl=Math.sqrt(br*br+bg*bg+bb*bb);//计算亮度值的变化d=Math.round(Math.abs(bl-nl));if(dtolerance){//该点发生了变化}但是这种方法存在计算效率问题。按图像大小为180*160像素,每秒30帧计算,每计算一副图片需要的计算次数为180*160*30。图像的像素越大,需要的计算次数就越多。采用隔点检测的方法可以在一定程度上缓解计算压力,即每隔n个像素检测一次,这样电脑的计算次数减少为原来的1/n。2)改进思路Flash8提供的图像混合模式可以解决上面遇到的效率问题。Flash8提供了11种图像混合模式。每一种混合模式可以得到不同的混合效果。Different混合模式是基于两张图片之间的亮度差值进行计算,从而得到图片的负片效果。利用该模式,便可以得到移动像素的检测图像。//将前一张快照before的图像绘制到当前快照now上,使用different混合模式now.draw(before,newMatrix(),null,difference);图像中黑色表示没有发生移动,其他颜色表示发生了移动。由于Flash8提供的混合模式是采用C++编码实现的,因此运行效率要比ActionScript编码更加高效。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.getNextHighestDepth());//将摄像头获取的图像显示在影片剪辑内bitmap_mc.attachBitmap(now,1);3)检测图像的动态显示要实现检测图像的动态显示,必须不断的更新当前图像now和历史图像before,并进行混合处理。可以把检测图像的功能写成方法snapshot(),每隔100毫秒调用一次。伪代码如下:functionsnapshot(){//获取当前图像//获取检测图像//将检测图像绘制到//将检测图像中RGB超过阀值0xFF111111的部分替换成绿色//显示检测图像//本次检测完成之后,当前图像便成为了历史图像。为下一次检测做好准备。preBitmap=nowBitmap.clone();}在该方法中,关键在于每次检测完成之后当前图像和历史图像的更新。6.检测特定区域内的运动状态经过上面几步操作,已经得到了检测图像。检测图像是对整幅图像的运动情况的反映。在游戏中,经常需要检测的是某一特定区域的运动状态。1)检测某点的运动状态因为已经到了检测图像,所以在检测某一点运动状态时,只需要判断检测图像上该点的RGB值是否大于阀值。伪代码如下:pix=myBitmap.getPixel(x,y);i