avatar
Today is 星期四
2010 年 09 月 09 日

2009 年 04 月 27 日

as3版flash 游戏的结构设计(一)

by fireyang — Categories: actionscript — 标签:, , 1 条评论

最近关注flash游戏设计,发现了这个系列的文章,觉得还可以,适合新手学习和参考。

所以把它翻译过来(不是原原本本,根据意思做了很大变化),希望入门有帮助,我也在入门,呵呵

欢迎转载,请注明出处(包括译者和作者)

原文:Designing the structure of a Flash game – AS3 version

作者层级写过: Designing the structure of a Flash game ,这篇文章是针对在flash里的动作里直接写到,现在这个as3版本,者采用了class(类)的形式。更有面向对象的感觉,原来就感觉是面向过程的。

刚开始使用类来代替,如果你不熟悉面向对象,就感觉很不直观;但是如果你熟悉后,你完全将这个用作你以后开发游戏的模板。

在这个游戏中,我们使用了4个屏幕切换(后面简称:切屏):splash(开始屏),info(如何玩),game itself(游戏本身)和game over(游戏结束)……并且你还可以根据需求非常简单的添加其他屏。

首先给游戏做一个规划:

as3dia

在图片中你能看到游戏的4屏,并且指出了每个按钮的屏幕切换方向。如,在splash(开始)屏你可以跳转到info(介绍)屏,但是你不能直接跳转到game over(游戏结束)屏。

主函数the_game(因此文件命名为the_game.as),把其他对象和类被列在库中,根据红色的顺序进行引用。

查看链接列(元件的链接属性,常识,不多作解释),非常清楚的显示出其他需要的四个as文件:game_over.as,how_to_play.as,splash.as和the_game_itself.as。

让我们看看详细的实现(blog主题原因,代码呈现有点问题):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
package {
	import flash.display.Sprite;
	public class the_game extends Sprite {
		public var splash_screen:splash;
		public var play_screen:the_game_itself;
		public var game_over_screen:game_over;
		public var how_to_play_screen:how_to_play;
		public function the_game() {
			show_splash();
		}
		public function show_splash() {
			splash_screen = new splash(this);
			if (how_to_play_screen) {
				removeChild(how_to_play_screen);
				how_to_play_screen = null;
			}
			addChild(splash_screen);
		}
		public function show_how_to_play() {
			how_to_play_screen = new how_to_play(this);
			removeChild(splash_screen);
			splash_screen = null;
			addChild(how_to_play_screen);
		}
		public function show_game_over() {
			game_over_screen = new game_over(this);
			removeChild(play_screen);
			play_screen = null;
			addChild(game_over_screen);

		}
		public function play_the_game() {
			play_screen = new the_game_itself(this);
			if (splash_screen) {
				removeChild(splash_screen);
				splash_screen = null;
			}
			if (how_to_play_screen) {
				removeChild(how_to_play_screen);
				how_to_play_screen = null;
			}
			if (game_over_screen) {
				removeChild(game_over_screen);
				game_over_screen = null;
			}
			addChild(play_screen);
		}
	}
}

详细步骤说明:

行4-7: 使用相应的类声明游戏切屏的对象。

行8-10:这是主要函数,simply调用一个显示splash屏的函数。

行11: 这样一个函数: show_splash。

行12: 函数的核心:我将为第4行声明的splash_screen变量new一个对象。注意这里的参数:我要求它记住是哪个类调用了它,在这里this其实就是the_game类。

行13: 检查场景上是否已经有how_to_play_screen屏。这里有可能是从info屏切换到splash屏的。

行14: 如果是,我需要在场景上移除这一屏……

行15: 设置变量为null,这个非常重要因为removeChild只是在场景上移除sprite,而内存中依然存在的。

行17: 最后,我将splash屏放置到场景上。

其他剩下的也都是相同的操作,分配变量、添加并移除相应的sprite,直到结束为止。

现在让我们看看splash.as中splash类的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package {
	import flash.display.Sprite;
	import flash.display.SimpleButton;
	import flash.events.MouseEvent;
	public class splash extends Sprite {
		public var main_class:the_game;
		public function splash(passed_class:the_game) {
			main_class = passed_class;
			play_button.addEventListener(MouseEvent.CLICK, on_play_button_clicked);
			how_to_button.addEventListener(MouseEvent.CLICK, on_how_to_button_clicked);
		}
		public function on_play_button_clicked(event:MouseEvent) {
			main_class.play_the_game();
		}
		public function on_how_to_button_clicked(event:MouseEvent) {
			main_class.show_how_to_play();
		}
	}
}

行6:声明the_game类型的变量main_class(主类)

行7:主要函数,查看the_game类型的参数passed_class:这函数的传递可以在the_game.as的第12行可以找到

行8: 记住调用的此类的原始类

行8-9:附加两个按钮的监听,当玩家按”play”或”how to play”按钮时触发。

行12:当玩家点击play按钮时,函数被执行

行13: 这个文件的核心:我在主类中调用play_the_game()函数。我们能知道主类哪里来,就需要感谢main_class变量了。

这里的函数执行就和前面show_splash的解释一样,添加和移除相应的sprite并调用其他的类。

其他类也和这个是类似的,所以不做过多注释。

how_to_play.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package {
	import flash.display.Sprite;
	import flash.display.SimpleButton;
	import flash.events.MouseEvent;
	public class how_to_play extends Sprite {
		public var main_class:the_game;
		public function how_to_play(passed_class:the_game) {
			main_class = passed_class;
			play_button.addEventListener(MouseEvent.CLICK, on_play_button_clicked);
			back_button.addEventListener(MouseEvent.CLICK, on_back_button_clicked);
		}
		public function on_play_button_clicked(event:MouseEvent) {
			main_class.play_the_game();
		}
		public function on_back_button_clicked(event:MouseEvent) {
			main_class.show_splash();
		}
	}
}

the_game_itself.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package {
	import flash.display.Sprite;
	import flash.display.SimpleButton;
	import flash.events.MouseEvent;
	public class the_game_itself extends Sprite {
		public var main_class:the_game;
		public function the_game_itself(passed_class:the_game) {
			main_class = passed_class;
			die_button.addEventListener(MouseEvent.CLICK, on_die_button_clicked);
		}
		public function on_die_button_clicked(event:MouseEvent) {
			main_class.show_game_over();
		}
	}
}

game_over.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package {
	import flash.display.Sprite;
	import flash.display.SimpleButton;
	import flash.events.MouseEvent;
	public class the_game_itself extends Sprite {
		public var main_class:the_game;
		public function the_game_itself(passed_class:the_game) {
			main_class = passed_class;
			die_button.addEventListener(MouseEvent.CLICK, on_die_button_clicked);
		}
		public function on_die_button_clicked(event:MouseEvent) {
			main_class.show_game_over();
		}
	}
}

最后你将看到:

下载源代码 .

这是第一篇,有空继续第2篇。

1 条评论 »

  1. cnai 说:

    看起来还有点意思。但是如果是更深入点的结构就好了!

发表评论

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

© 2010 fireyang’blog All rights reserved - Wallow theme by TwoBeers Crew - Powered by WordPress - Have fun!浙ICP备07033342号