柯南的部落格

这几天都有几个朋友都有问我的那个找茬DEMO(相关帖子:大家来找茬设计思路与源码)如果要添加新的找茬图,要如何加.....看来我的代码写得不好,没人看得懂.......我在这里就写个简单的教程,介绍一下如何添加新图吧...首先下载一个找茬的资源包;

游戏图片资源原文件下载(6.37MB)

下载完解压以后,有四个文件,分别是gameData.as pic01_07.fla Music.fla 以及 图片元件.fla

首先我们必须先用PhotoShop或者其它作图软件,制作找茬的原图,制作找茬的图必须遵循以下的原则:

1.每张小图的尺寸都为371*300.
2.图片的不同数必须在5个或5个以上.
3.所有的不同处所在的矩形不能有相交,因为在玩家的眼里,两个不同处相交的话,他都会认为那是一个不同而已.
4.修改所有的不同处以后,先记录下所有不同处的大小与位置,在游戏中,全部统一不同处为一个矩形,所以就算你左右两张图片不同的地方是一个圆形的区域,我们在记录时也要记录这个圆形所占的矩形区域.
5.把修改后的图片,上下拼接起来,拼接后的图片尺寸为371*600,最后保存为PNG格式.

当按照上面的原则修改完图片并保存为PNG文件以后,我们使用FlashCS3以上版本打开资源文件里的Pic01_07.fla, 然后按菜单栏的 "文件"->"导入"->"导入到库",选择刚做完的图,按"打开"就把刚做完的图片导入到库里了.

图1

如图1所示,我导入了一张名为hello.png的图片,接着我们在hello.png上点击右键的"链接",打开链接属性面板,在"为ActionScript导出"前打勾,系统会自动帮在"在第一帧导出"打勾,然后在类那里,我们自已取一个类名,如"Kitty",基类保持默认不变,仍为"flash.display.BitmapData" ,如图2,设置完成点确定,会弹出一个警告(图3),无视点确定就行

图2

图3

 然后我们打开gameData.as文件.
在className数组里添加一个我们刚新加图片命的类名kitty.添加后的数组为:

然后在arr07数组的下面,再多添加一个数组.这是一个二维数组.第二维的每一个数组就代表一个不同处,格式为[x,y,width,height],也就是刚才在作图原则中提到的第四点所记录下来的那些数据.例如:

private var arrKitty:Array = [[67,69,76,2],[129,129,23,33],[53,70,29,48],[275,155,40,20],[281,223,37,26],[97,48,20,18],[86,184,17,14],[196,156,75,53]];

最后就是把类名与新添加的数组添加到构造函数中的pos关联数组中,

pos ={ pic01:arr01,pic02:arr02,pic03:arr03,pic04:arr04,pic05:arr05,pic06:arr06,pic07:arr07,Kitty:arrKitty};

 以下是添加新图后完整的gameData.as代码

package{
    public class gameData{
        public function gameData(){
            pos ={ pic01:arr01,pic02:arr02,pic03:arr03,pic04:arr04,pic05:arr05,pic06:arr06,pic07:arr07,Kitty:arrKitty};
            }
        public var className:Array = ["pic01","pic02","pic03","pic04","pic05","pic06","pic07","Kitty"];
        private var arr01:Array = [[31,145,55,48],[90,76,55,79],[77,0,55,79],[258,187,48,96],[292,87,51,99],[121,206,13,61],[158,177,63,52],[278,36,30,35]];
        private var arr02:Array = [[23,212,21,47],[139,132,51,37],[279,198,92,102],[262,143,62,33],[238,1,121,53],[154,242,91,19],[203,182,25,25],[97,137,34,57]];
        private var arr03:Array = [[159,198,18,46],[36,272,88,12],[16,58,41,22],[222,203,20,26],[0,218,35,43],[237,4,14,15],[270,38,55,45],[283,265,88,35]];
        private var arr04:Array = [[205,42,87,76],[264,185,107,115],[157,224,43,20],[26,142,38,40],[118,237,26,30],[0,24,148,45],[145,180,15,17],[169,146,31,22]];
        private var arr05:Array = [[95,150,65,21],[196,177,27,25],[218,63,40,54],[247,282,11,15],[309,203,22,19],[142,228,42,41],[298,152,11,14],[115,72,39,45]];
        private var arr06:Array = [[32,64,43,49],[92,44,28,30],[0,254,41,46],[43,178,33,105],[273,275,8,25],[160,41,12,25],[94,146,26,23],[177,217,16,15]];
        private var arr07:Array = [[67,80,76,22],[129,129,23,33],[23,70,29,88],[275,155,40,20],[281,223,37,26],[97,48,20,18],[86,184,17,14],[196,56,175,53]];
        private var arrKitty:Array = [[67,69,76,2],[129,129,23,33],[53,70,29,48],[275,155,40,20],[281,223,37,26],[97,48,20,18],[86,184,17,14],[196,156,75,53]];
       
        public var pos:Object;
    }
}

最后我们再回到Pic01_07.fla,在菜单栏中的"文件"->"导出"->"导出影片",命名为picture.swf,点击保存就可以了.然后把picture.swf覆盖到我们FindX游戏目录下的picture文件夹下的相同文件就可以了.

其实大家可能会想gameData.as里的数据也给编译到了picture.swf里面去了吗?细心的朋友可能就会发现,我在pic01_07.fla文件的第一帧里我写了一句代码:

var g:gameData = new gameData();

里面的import gameData;因为pic01_07.fla与gameData.as是在同一目录下,所以这一句其实是可以不写的,我多写了一句,也没删了.

FLASH在编译的时候,为了节省空间,所以他不会把完全没有调用到的类编译到SWF文件里面去,所以如果没有
var g:gameData = new gameData();这一句的话,gameData.as是不会给编译进SWF文件里的,所以我就随便声明了一下变量,(证明我路过,提高知名度..= =!),告诉FLASH,gameData.as我是用过的,你必须把它编译进去..至此我们就可以添加新的图片到游戏里面去了.

如果你想修改背景音乐,可以打开Music.fla,在库列表里的ne.mp3上点击右键的"属性",打开属性面板

图4

点击"导入",选择新的声音文件,然后确定以后.再导出为SWF影片,并命名为Music.swf,然后覆盖到游戏目录里的Source文件夹下的同名文件就可以了.

最后图片文件.fla是游戏界面的一些图片,你也可以根据自己的需要修改图片,注意每一张图片在右键的"链接"里都有对应的类名,不要搞错了就行了.最后导出为item.swf文件,并覆盖到游戏目录下的Source文件夹下的同名文件就可以了.

至此,游戏的人机界面设计方面的就已经完成了..希望哪位朋友能帮我这个很囧的界面做个好看一点的.

评论Feed: http://www.conanlwl.net/Feed/Comment/164.aspx
引用链接: http://www.conanlwl.net/TrackBack/Save/164.aspx