如何用ActionScript3.0代码实现位图的导入与分割

摘要：actionscript3.0 可以有效的提高以Flash Player 为目标的Flash游戏开发的效率。文章详细阐述了如何应用ActionScript 3.0 位图处理代码来实现位图的导入及分割，为Flash游戏开发者构建游戏元素提供了便捷而有效的方法。

关键词：ActionScript3.0；位图；导入；分割

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2013）36-8416-03

ActionScript是一种基于Flash、Flex等多种开发环境、面向对象编程的脚本语言。随着ActionScript 3.0 （以下简称AS3）的出现，使脚本语言的发展上升到一个新的高度。AS3为游戏开发者带来的高效、可靠且具有逻辑性的开发过程，是ActionScript1.0 和2.0无法相比的，因而Flash 与AS3已成为游戏开发者非常重要的开发中小型游戏的实用工具。

强大的AS3支持我们直接访问位图数据从而编辑图像，使用这些功能，就可以在诸如滑动拼接、拼图等游戏中将图像导入并切割成需要使用的小块。

1 位图简介

位图（Bitmap）[1]，又称光栅图，一般用于照片品质的图像处理，是由许多像小方块一样的像素组成的图形。简单说，位图就是以无数的色彩点组成的图案，只要有足够多的不同色彩的像素，就可以制作出色彩丰富的图象，逼真地表现自然界的景象。虽说位图比较消耗内存资源，并在放大许多倍时效果会失真，但其对计算机资源消耗小，如果对Flas的真实感要求很高时，使用位图是最好的选择。

2 位图的导入

在使用位图前，必须要先导入它。虽然可以使用Flash命令将位图直接导入在库中，然后再通过类名来访问它，但使用AS3代码来导入外部位图，更加快捷有效。

2.1 导入并显示位图的方法[2]

1） 首先创建一个URLRequest变量，表示外部图像文件的位置。

2） 创建一个图像Loader对象，该对象是一个特殊的Sprite类，它从外部源获取数据。使用时必须搭配一个URLReques，用来处理网络文件访问。

3） 使用load（）方法将Loader对象和URLRequest实例配对，告诉Loader对象装入URLRequest所代表的图像文件。

4） 使用addChild（）方法将Loader对象添加到场景中。

2.2 代码实现

private function loadBitmap（bitmapFile：String）：void //导入图像函数

{//创建URLRequest变量，表示外部图像文件的位置

var tplj：URLRequest = new URLRequest（bitmapFile）；

var tpzr：Loader=new Loader（）； //创建一个图像Loader对象

tpzr.load（tplj）； //使用load（）方法告诉Loader对象装入URLRequest所代表的图像文件

addChild（tpzr）； //将Loader对象添加到场景中}

效果如图1所示，图片导入后其行为和普通的显示对象并无二致。使用上述代码，该图像被放置在屏幕的左上方，我们也可以设置它的x和y坐标值，将它放置在屏幕中央或者任何我们希望的位置上。

图1 用AS3代码实现位图的导入

3 图片的分割

3.1 设计思路

通常导入位图，不只是为了单纯的在场景中去显示它，而是用它来构建诸如滑动拼接、拼图等游戏，因而需要更进一步深入位图数据，将位图切分成很多小块，以便在游戏中使用。AS3中的Bitmap类对象代表了位图。而位图的所有的像素信息，存储在Bitmap对象的bitmapData属性持有的BitmapData对象中[1]。我们首先创建一个Bitmap对象接收导入的位图，再将其按分割的块数把相应区域的像素拷贝到一个个小Bitmap对象上，并生成相应的Sprit对象，最后在场景中按对应位置显示拷贝后的小图片Sprit对象[3]。

3.2 代码实现

1） 导入位图，但并不显示，因为最终我们要显示的是分割后的小图片。只需要将上述最后一句代码addChild（tpzr）去掉。

2） 在Loader对象上使用事件侦听器PLETE来判断位图何时导入完成，并将位图后期的处理代码都放入对应的事件响应函数fengetp中。即：

tpzr.contentLoaderInfo.addEventListener（PLETE，fengetp）；

3） 当图像导入完成后，fengetp函数被调用。

4） fengetp函数的编写

①它首先创建一个新的Bitmap对象，并从event.target.loader.content（即原始Loader对象的content）中得到位图数据。

private function fengetp（event：Event）：void{

var tp：Bitmap = Bitmap（event.target.loader.content）；

②由Bitmap对象的width和height属性得到位图的宽度和高度。根据位图的分辨率确定图像要分割的块数，即有几行几列的小图块。假设位图的像素是400×300像素，则拼图分为3行4列，那么整个位图的宽度除以列数4就得到了每个小块的宽度，同样用整个位图的高度除以行数3就得到了每个小块的高度。

var oneWidth = tp.width /4；

var oneHeight = tp.height / 3；

③利用双重循环遍历所有的3行4列来创建每个拼图小块。创建小块需要首先构造新的Bitmap对象，并为其指定之前计算出来的宽度和高度，然后使用copyPixels函数，将原始位图中的对应部分复制到新创建位图的bitmapData属性中。copyPixels函数有3个参数：复制的图像，复制图像的矩形区域，目标图像的起始点。

④创建显示在舞台上的Sprite对象，将拼图小块设为它的子对象。

⑤设置拼图的小块的位置。相邻小块之间设置5个像素的间隔，同时让其显示在舞台的中间位置，效果如图2所示。

图2 用AS3代码实现位图的分割，被切分成12片

具体代码如下：

for （var i：uint=0； i

{//通过行、列双重循环遍历所有小块

for （var j：uint=0； j

{//创建新的小块

var xiaotp：Bitmap = new Bitmap（new BitmapData（oneWidth，oneHeight））；

//对新建小块复制图像

xiaotp.bitmapData.copyPixels（cs，

new Rectangle（j*oneWidth，i*oneHeight，oneWidth，oneHeight），new Point（0，0））；

//创建新的Sprite，小块位图数据赋给它。

var xiaotpjl：Sprite = new Sprite（）；

xiaotpjl.addChild（xiaotp）；

//添加到舞台

addChild（xiaotpjl）；

//设置拼图的小块的位置，假设场景为默认大小550*400

xiaotpjl.x = j*（oneWidth+5） + （550-400-3*5）/2；

xiaotpjl.y = i*（oneHeight+5） +（400-300-2*5）/2；

}}

4 结束语

位图是用Flash开发独立或基于网页的电脑游戏以及便携式设备（智能手机及PSP）上运行的非PC版本的游戏中最常用到的元素之一。利用Flash AS3的位图处理代码能够直接访问位图数据从而编辑图像。文章详细阐述了如何应用AS3代码实现位图导入和分割，为Flash游戏开发者构建滑动拼接、拼图等游戏中的游戏元素提供了便捷而有效的方法。

参考文献：

[1] 孙颖.Flash Action 3殿堂之路[M]. 北京：电子工业出版社，2007.

[2] Todd Perkins.Flash ActionScript3.0实训课堂[M].张猛，译.北京：人民邮电出版社， 2008：62-94.

[3] Gary Rosenzweig.ActionScrip 3.0游戏编程[M]. 胡蓉，张东宁，朱栗华，译.2版.北京：人民邮电出版社，2013：164-165.