[教程] 我的 ActionScript 3.0 game programming university 学习笔记

greenidea

既然想学好as3, 我就给自己点压力，我要写学习笔记，别拦我！
郑重声明，我只是大略看完黑羽那本书的，甚至还有两章没看的超级初学者，而且没有编过代码！
所以我写这个的目的并不是为了给别人做教程，而是为了深刻学习和方便大家交流，以及希望高手多多指点啦~

我随时都会更正, 请高手随便跟贴指正,并相互交流!



[ 本帖最后由 greenidea 于 2008-3-22 20:21 编辑 ]

greenidea

先介绍下文章内容，有个整体的印象！
1. 使用flash和ActionScript3.0
2. ActionScript 游戏元素
/*下面是一些游戏实例*/
3. Basic Game Framework: A Matching Game
4. Brain Games: Memory and Deduction
5. Game Animation: Shooting and Bouncing Games
6. Picture Puzzles: Sliding and Jigsaw
7. Direction and Movement: Space Rocks
8. Casual Games: Match Three
9. Word Games: Hangman and Word Search
10. Questions and Answers: Trivia and Quiz Games
11. Action Games: Platform Games
12. Game Worlds: Driving and Exploration Game
Index

greenidea

1. 使用flash和ActionScript3.0

跳过！  基础很多了,看黑羽大哥的书多详细啊!

greenidea

2. ActionScript 游戏元素

书中应该会介绍几乎每个游戏编程都会用到的东东,我想是这样的啊!

(1) 是创建视觉对象

大概包括使用影片剪辑,就是MC啦~, 制作按钮, 画形状(shapes), 写文本,创建链接文本, 设置Sprite组, 设置Sprite深度

当你在库中创建了MC,那么你想把它放到场景中来, 那么会有两种方法实现

第一个方法是拖动mc到场景中并且在属性面板中给他个名字, 比如说命名为myClipInstance, 然后你就可以通过MC的属性控制它了,比如说控制他的坐标位置,我们可以这样写:

myClipInstance.x = 300;
myClipInstance.y = 200;

第二种方法就是纯粹的AS代码了, 但首先你必须设置一下库中MC的linkage properties, as3不能使用表示符了, 库中的mc都会绑定到指定的类中, 我们在class那块填写类名 Mascot, 然后我们可以在场景中使用as程序创建副本,并使用addChild函数使其加到显示列表中,让他显示出来!代码如下:

var myMovieClip:Mascot = new Mascot();
addChild(myMovieClip);

因为我们没有设定其他的属性,所以他将会出现在场景中的坐标(0,0)位置, 我们可以通过x,y属性设定它的坐标, 并且也可以设定它的旋转角度

var myMovieClip:Mascot = new Mascot();
myMovieClip.x = 275;
myMovieClip.y = 150;
myMovieClip.rotation = 10;
addChild(myMovieClip);

尽管我们为了一个MC作了大量的工作,但是AS会非常容易的创建这个MC的很多副本,下面的代码将创建Mascot的10个副本, 并且每隔50像素横向排列着, 同时也把MC缩小了50%

for(var i=0;i<10;i++) {
var mascot:Mascot = new Mascot();
mascot.x = 50*i+50;
mascot.y = 300;
mascot.scaleX = .5;
mascot.scaleY = .5;
addChild(mascot);
}

使用影片剪辑的知识在这本书里就到此为止了! 松口气, 哈哈, 写笔记真爽, 至少比看的印象深刻10倍噢!

[ 本帖最后由 greenidea 于 2008-3-22 21:05 编辑 ]

wizim

支持，要做好持之以恒的准备哦。

greenidea

好的 , 我好好学,准备编游戏玩!

fluensh

呵，我要是看不下书就看你笔记了

fxzjw

好东西啊

greenidea

对MC使用部分，自己照着练习，做了个UsingMovieClips.fla

greenidea

Making Buttons 制作按钮开始

你既可以使用来自库中的MC也可以使用button symbols去创建按钮， 如果你想让MC成为按钮，那么你只需要加上监听listener, 这样做可以使MC接受鼠标事件等。

首先要从库中调用MC到场景中来
var myMovieClip:Mascot = new Mascot();
myMovieClip.x = 100;
myMovieClip.y = 150;
addChild(myMovieClip);

随后我们可以用 addEventListener 函数来控制事件的触发， 这个函数有很多事件类型，当出发这些事件触发的时候就会执行后边的函数

myMovieClip.addEventListener(MouseEvent.CLICK, clickMascot);

然后我们写函数clickMascot 让他执行一些命令，此书只是实现一个简单的trace功能， 当然啦，你做游戏的时候，可以根据你的需要编写这个函数。

function clickMascot(event:MouseEvent) {
trace(“You clicked the mascot!”);
}

还有如果你想让MC像个真正的按钮的话， 需要设置他的buttonMode为真，这样当鼠标经过MC的时候就会出现小手了。

myMovieClip.buttonMode = true;

MC和button symbols不同的是，后者有四个特别的关键帧，地球人都知道！

你可以使用和MC同样的方法去监听button symbols

myButton.addEventListener(MouseEvent.CLICK, clickLibraryButton);
function clickLibraryButton(event:MouseEvent) {
trace(“You clicked the Library button!”);
}

看会儿迷失，就睡觉了，明天继续哈，hoho!

[ 本帖最后由 greenidea 于 2008-3-23 17:28 编辑 ]

webflag

支持一下!

greenidea

MC制作的按钮练习

greenidea

Drawing Shapes
并不是所有的视觉对象都是从库中调用出来的，你也可以用ActionScript 3.0 去画线或者图形之类的。

每个display object 都有 graphics layer, 如果我们画一个线段，首先我们需要设定他的样式， 开始坐标和结束坐标。

this.graphics.lineStyle(2,0x000000);
this.graphics.moveTo(100,200);
this.graphics.lineTo(150,250);

上面代码的意思就是画一条从 （100，200）开始到（150，250），宽度为2像素的黑色直线

可以用curveTo去画曲线

this.graphics.lineStyle(12,0x000000);
this.graphics.moveTo(100,200);
this.graphics.lineTo(150,250);
this.graphics.curveTo(200,300,250,250);
this.graphics.lineTo(300,200);

上边代码的意思是从100,200到150,250直线,然后到250,250的曲线,然后到300,200的直线，curveTo 的 200,300是控制弧度的

你可以画长方形 this.graphics.drawRect(50,50,300,250);
50，50是长方形左上点的坐标， 300， 250分别是宽和高！

你可以画带圆角的长方形 this.graphics.drawRoundRect(40,40,320,270,25,25);
25，25控制圆角的

你也可以画圆 this.graphics.drawCircle(150,100,20);
150,100是圆心的坐标，20是半径

画椭圆 this.graphics.drawEllipse(180,150,40,70);
尝试着把后边的40，70设定相等，就会变成圆，然后你就会理解这两个参数的是啥意思了

想填充颜色, 就用beginFill
this.graphics.beginFill(0x333333);
this.graphics.drawCircle(250,100,20);

[ 本帖最后由 greenidea 于 2008-3-23 12:56 编辑 ]

greenidea

Drawing Text
如何在场景中建立Text
var myText:TextField = new TextField();
myText.text = “Check it out!”;
addChild(myText);

控制下text的位置
myText.x = 50;
myText.y = 50;

控制下text的宽度还有高度
myText.width = 200;
myText.height = 30;

这个时候你视觉上看不到TextField的高度和宽度的，所以我们采用设定border可见的方法，这样就可以看到TextField的边缘
myText.border = true;

但这个时候你发现这段输出的文件是可以用鼠标选择的，那么如何让它不可选呢，我们也有相应的属性处理
myText.selectable = false;

在进一步，我们想对文本的样式进行处理，包括字大小，颜色之类的
我们不能直接去控制myText, 但是我们可以通过定义TextFormat来实现
var myFormat:TextFormat = new TextFormat();
myFormat.font = “Arial”;
myFormat.size = 24;
myFormat.bold = true;
上边这些行代码我们可以简单的写在一句上
var myFormat:TextFormat = new TextFormat(“Arial”, 24, 0x000000, true);
书中说 TextFormat 有13个参数，但是如果我们不设定的话，我们就可以skip， 呵呵！

现在 我们有用了TextFormat object , 我们有两种方法使用它，一种是在  TextField 上使用 setTextFormat
另一种方法是使用defaultTextFormat
myText.defaultTextFormat = myFormat;

两种方法的区别是？ help~ help~ 知道了我在更新这块

Creating Linked Text
如何建立文本连接呢？我们可以使用属性htmlText去写HTML, 而不是通过属性text是输入纯粹的文本，所以我们可以这样写的

var myWebLink:TextField = new TextField();
myWebLink.htmlText = "Visit <A HREF='http://www.greenidea.net'>greenidea.net</A>!";
addChild(myWebLink);

代码很简单啦，连我这个初学者都能看懂，hoho!

运行上边的代码后，你会发现虽然链接有了，但是有超级链接的文本并没有什么特别，这可不是很好的用户体验啊... 所以我们会想办法让他变成别的颜色或者带上下划线
我们可以使用styleSheet属性来完成这个任务：
var myStyleSheet:StyleSheet = new StyleSheet();
myStyleSheet.setStyle("A",{textDecoration: "underline", color: "#0000FF"});
var myWebLink:TextField = new TextField();
myWebLink.styleSheet = myStyleSheet;
myWebLink.htmlText = "Visit <A HREF='http://www.greenidea.net'>greenidea.net</A>!";
addChild(myWebLink);

创建个样式styleSheet，然后把这个样式赋予myWebLink这个TextField.
myStyleSheet.setStyle("A",{textDecoration: "underline", color: "#0000FF"});
这句就好比html中的css, 是控制超级链接的样式的
然后通过 myWebLink.styleSheet = myStyleSheet; 把这个样式赋予myWebLink这个TextField.

我们可以不做超链接，也可以像button和mc那样，加上监听，like this:

var myLink:TextField = new TextField();
myLink.y = 150;
myLink.htmlText = "Click <A HREF='event:testing'>here</A>";
addChild(myLink);

addEventListener(TextEvent.LINK, textLinkClick);
function textLinkClick(event:TextEvent) {
trace(event.text);
}

[ 本帖最后由 greenidea 于 2008-3-23 17:30 编辑 ]

greenidea

Creating Sprite Groups

到了这块，遇到了Sprite, 对于初学的我来说，对这个印象不是很深了，只知道是个容器，于是翻开黑羽大哥的书，看了下，哦，原来我们可以把它看成是去了时间轴的MovieClip, MovieClip成了Sprite的子类，如果我们不需要时间轴的帮助的时候只需要使用Sprite就可以了，毕竟比MovieClip轻量级，节省资源吧，也应该是打破了as2中 MovieClip万能的观念， 呵呵！

好的，那就继续这本书的内容吧，创建Sprite组，既然说是组，就会创建很多Sprite, 既然Sprite是容器，当然是装东西了，呵呵！

我们现在创建第一个容器Sprite1, 在这个容器里面装载个矩形， code like this:

var sprite1:Sprite = new Sprite();
sprite1.graphics.lineStyle(2,0x000000);
sprite1.graphics.beginFill(0xCCCCCC);
sprite1.graphics.drawRect(0,0,200,200);
addChild(sprite1);

我们控制下Sprite1的位置

sprite1.x = 50;
sprite1.y = 50;

同样，我们也创建第二个

var sprite2:Sprite = new Sprite();
sprite2.graphics.lineStyle(2,0x000000);
sprite2.graphics.beginFill(0xCCCCCC);
sprite2.graphics.drawRect(0,0,200,200);
sprite2.x = 300;
sprite2.y = 50;
addChild(sprite2);

接着我们创建第3个，这一次我们不是把sprite3通过addChild方法放到stage上，而是把它放到sprite1上，请看代码：

var sprite3:Sprite = new Sprite();
sprite3.graphics.lineStyle(2,0x000000);
sprite3.graphics.beginFill(0x333333);
sprite3.graphics.drawCircle(0,0,25);
sprite3.x = 100;
sprite3.y = 100;
sprite1.addChild(sprite3);

注意的是，sprite3的坐标是相对stage的吗？不是，他是相对于他的容器sprite1的，如果你不信这点的话，你可以把sprite3放到sprite2上看看他的位置情况... 我们可以看到sprite3会相对sprite2显示了。

那么何必手动代码去控制sprite3是在哪个容器上呢，让我们监听sprite1和sprite2吧，当鼠标点击sprite1的时候，sprite3会成为sprite1的子容器，当点sprite2的时候，sprite3会成为sprite2的子容器，看来很灵活，也挺好玩的，呵呵！

sprite1.addEventListener(MouseEvent.CLICK, clickSprite);
sprite2.addEventListener(MouseEvent.CLICK, clickSprite);
function clickSprite(event:MouseEvent) {
event.currentTarget.addChild(sprite3);
}

在游戏开发中，我们一直会创建sprite groups的，然后把游戏元素放到这些sprite上...

[ 本帖最后由 greenidea 于 2008-3-23 22:53 编辑 ]