天地会半月刊8.15-8.31

内容来源：9RIA.com 天地会-译林军 内容编辑：Pilihou 9RIA.com 半月刊 以下内容均来自 9RIA.com 天地会，由天地会译林军倾情奉献，请勿用于任何商业用途，转载请注明出处 如何进行 object 以及 Array（数组）的深复制 ........................................................................................................................... 1 切割 Box2D 对象之四——添加纹理 ............................................................................................................................................ 2 怎样通过 flash 模板安装 Facebook 专页 .................................................................................................................................... 11 为 LabelItemRenderer 增加多行文本支持 .................................................................................................................................. 11 Flex 移动项目里的内嵌字体 ....................................................................................................................................................... 15 使用 Box2D 制作 AS3 游戏——2.1a 版本——Hello World Box2D ......................................................................................... 18 教你加载外部 SWFs 的资源 ....................................................................................................................................................... 24 新的 Flex 移动组件：Mobile Flex DropDownList ..................................................................................................................... 25 如何进行 object 以及 Array（数组）的深复制 原文地址：http://cookbooks.adobe.com/post_How_to_create_deep_copies_of_objects_and_arrays-19261.html 译文地址：http://bbs.9ria.com/thread-90200-1-3.html 译者：killsoon 发布时间：2011-8-15 问题： 深复制是克隆一个数组或者 object 很有效的方法，深复制以后的对象中的新元素只是原始数据元素的备份，并无 内在联系。两个对象的状态是完全一致的，但是元素存放的是不同的引用，指向不同的对象。 解决： 把你想要深复制的的数组或者 object 写进字节数组中，然后重置 position 的位置（把 position 置为 0），最后重新从 字节数组中读取出来。 详细解释： 这里是一个简单的工具类，封装了一个通过深复制实现的 clone 方法： package { import flash.utils.ByteArray; public class DeepCopyUtil { public static function clone (source : Object) : * { var array : ByteArray = new ByteArray (); array.writeObject (source); array.position = 0; 内容来源：9RIA.com 天地会-译林军 内容编辑：Pilihou return array.readObject (); } } } 更多的细节，包括源代码以及潜在的用途，请点击一下连接： http://userflex.wordpress.com/2011/08/11/create-deep-copy/ 切割 Box2D 对象之四——添加纹理 原文地址： http://www.emanueleferonato.com/2011/08/05/slicing-splitting-and-cutting-objects-with-box2d-part-4-using-real-graphics/ 译文地址：http://bbs.9ria.com/thread-95402-1-2.html 译者：ladeng6666 发布时间：2011-8-20 本系列教程的第四部分由 Antoan Angelov 完成，他不仅实现了在 Box2D 对象中映射各种位图的功能，同时还提升 了代码的效率和鲁棒性。 最终结果如下： 试着用鼠标切割对象。 下面的代码以及做了非常全面的注解，我就不再赘述了： package { import flash.display.*; import Box2D.Dynamics.*; import Box2D.Dynamics.Joints.*; import Box2D.Collision.*; import Box2D.Collision.Shapes.*; import Box2D.Common.Math.*; import flash.events.Event; import flash.events.KeyboardEvent; import flash.events.MouseEvent; import flash.geom.Matrix; public class main extends MovieClip { /* Box2D 刚体切割,Antoan Angelov 制作. 内容来源：9RIA.com 天地会-译林军 内容编辑：Pilihou */ var world:b2World; var tempBox:b2Body; var stageW:Number=stage.stageWidth,stageH:Number=stage.stageHeight; var cont:Sprite = new Sprite(); var begX:Number,begY:Number,endX:Number,endY:Number; var polyShape:b2PolygonShape; var enterPointsVec:Vector. = new Vector.(); var mouseReleased:Boolean=false; var objectsCont:Sprite = new Sprite(); var laserCont:Sprite = new Sprite(); var numEnterPoints:int=0,i:int; var boxDef:b2PolygonShape; var fixtureDef:b2FixtureDef,bodyDef:b2BodyDef,body:b2Body; var woodTexture:BitmapData,rockTexture:BitmapData; public function main() { // 首先用 BitmapData 对象创建纹理 var tempSpr:Sprite; tempSpr = new texture1(); woodTexture=new BitmapData(tempSpr.width,tempSpr.height); woodTexture.draw(tempSpr); tempSpr = new texture2(); rockTexture=new BitmapData(tempSpr.width,tempSpr.height); rockTexture.draw(tempSpr); //设置 Box2D 世界 world=new b2World(new b2Vec2(0,10),true); // 创建一个静态的刚体作为地面，然后创建对应的 sprite 对象. bodyDef = new b2BodyDef(); bodyDef.type=b2Body.b2_staticBody; fixtureDef = new b2FixtureDef(); fixtureDef.density=5; fixtureDef.friction=1; fixtureDef.restitution=0; boxDef = new b2PolygonShape(); boxDef.SetAsBox((stageW)/30, 10/30); bodyDef.position.Set((0.5*stageW)/30, stageH/30); fixtureDef.shape=boxDef; tempBox=world.CreateBody(bodyDef); tempBox.CreateFixture(fixtureDef); 内容来源：9RIA.com 天地会-译林军 内容编辑：Pilihou tempSpr = new Sprite(); tempSpr.graphics.lineStyle(2, 0x00FF00); tempSpr.graphics.beginFill(0x00FF00, 0.3); tempSpr.graphics.drawRect(-0.5*stageW, (stageH-10), 2*stageW, 20); tempSpr.graphics.endFill(); addChild(tempSpr); //初始化被切割的刚体对象 fixtureDef.density=5; fixtureDef.friction=0.2; fixtureDef.restitution=0; createBody((230)/30, 50/30, [new b2Vec2(-100/30, -75/30), new b2Vec2(100/30, -75/30), new b2Vec2(100/30, 75/30), new b2Vec2(-100/30, 75/30)], woodTexture); createBody((stageW-230)/30, 50/30, [new b2Vec2(3.0795984417042894, 1.275611441216966), new b2Vec2(1.2756114412169661, 3.0795984417042894), new b2Vec2(-1.275611441216966, 3.0795984417042894), new b2Vec2(-3.0795984417042894, 1.2756114412169663), new b2Vec2(-3.0795984417042894, -1.2756114412169657), new b2Vec2(-1.2756114412169677, -3.0795984417042885), new b2Vec2(1.2756114412169666, -3.079598441704289), new b2Vec2(3.0795984417042885, -1.275611441216968)], rockTexture); //为什么要创建这个 enterPointsVec 变量？你可以在 intersection()方法的注解中找到答案 enterPointsVec=new Vector.(numEnterPoints); this.addChild(cont); cont.addChild(objectsCont); cont.addChild(laserCont); stage.addEventListener(MouseEvent.MOUSE_DOWN, mDown); addEventListener(Event.ENTER_FRAME, update); } private function createBody(xPos:Number, yPos:Number, verticesArr:Array, texture:BitmapData) { var vec:Vector.=Vector.(verticesArr); bodyDef = new b2BodyDef(); bodyDef.type=b2Body.b2_dynamicBody; boxDef = new b2PolygonShape(); boxDef.SetAsVector(vec); bodyDef.position.Set(xPos, yPos); //用 userData 类存储每个刚体的 ID、vertices 和 texture bodyDef.userData=new userData(numEnterPoints,vec,texture); objectsCont.addChild(bodyDef.userData); fixtureDef.shape=boxDef; tempBox=world.CreateBody(bodyDef); tempBox.CreateFixture(fixtureDef); tempBox.SetBullet(true); numEnterPoints++; 内容来源：9RIA.com 天地会-译林军 内容编辑：Pilihou } private function mDown(e:MouseEvent) { begX=mouseX; begY=mouseY; stage.addEventListener(MouseEvent.MOUSE_UP, mUp); stage.addEventListener(MouseEvent.MOUSE_MOVE, mMove); } private function mMove(e:MouseEvent) { laserCont.graphics.clear(); laserCont.graphics.lineStyle(2); laserCont.graphics.moveTo(begX, begY); laserCont.graphics.lineTo(mouseX, mouseY); } private function mUp(e:MouseEvent) { mouseReleased=true; stage.removeEventListener(MouseEvent.MOUSE_UP, mUp); stage.removeEventListener(MouseEvent.MOUSE_MOVE, mMove); } public function update(e:Event):void { if (mouseReleased) { // 使用 world.RayCast()方法 (这个方法我用了两次，为什么呢？你可以在 inersection()方法中找到答案)获得你所绘制的线条与所有刚体之间的交点. endX=mouseX; endY=mouseY; var p1:b2Vec2=new b2Vec2(begX/30,begY/30); var p2:b2Vec2=new b2Vec2(endX/30,endY/30); world.RayCast(intersection, p1, p2); world.RayCast(intersection, p2, p1); enterPointsVec=new Vector.(numEnterPoints); mouseReleased=false; } world.Step(1/24, 90, 90); world.ClearForces(); var p:b2Body,spr:Sprite; 内容来源：9RIA.com 天地会-译林军 内容编辑：Pilihou //将所有刚体对应的 Sprite 对象同步到每个刚体上. for (p = world.GetBodyList(); p; p = p.GetNext()) { spr=p.GetUserData(); if (spr) { spr.x=p.GetPosition().x*30; spr.y=p.GetPosition().y*30; spr.rotation=p.GetAngle()*180/Math.PI; } } } private function intersection(fixture:b2Fixture, point:b2Vec2, normal:b2Vec2, fraction:Number):Number { var spr:Sprite=fixture.GetBody().GetUserData(); // 整个成想后总我只创建了一个全局 vector 变量：enterPointsVec，为什么我一定要让你知 道这一点呢？ //OK，问题在于 world.RayCast()方法只在检测到给定的线条穿过刚体时才会调用这个函数。 //线条与刚体之间必须有 2 个交点才可以说明刚体被切割，所以我需要再次调用 world.RayCast()方法，不过这次是由 B 到 A——BA 进入刚体的点刚好是 AB 离开刚体的点。 // 由于这个原因，我用一个名为 enterPointsVec 的 Vector 变量存储这个点(AB 进入刚体的 点)。然后如果发现 BA 也进入了刚体，则调用 splitObj()函数！ // 我需要每个刚体都有唯一的 ID，来知道它所对应的 enter point，我将这个信息存储到刚 体的 userData 中去了。 if (spr is userData) { var userD:userData=spr as userData; if (enterPointsVec[userD.id]) { //如果刚体已经有了一个交互点，那么现在就有了两个交互点，因此先要 将它切割成两块——这就是 splitObjt()的工作了。 // 但是在调用 splitObj()方法之前，首先要绘制两个焦点——蓝色表示起 点，红色表示终点。 laserCont.graphics.lineStyle(4, 0x0000FF); laserCont.graphics.drawCircle(enterPointsVec[userD.id].x*30, enterPointsVec[userD.id].y*30, 7); laserCont.graphics.lineStyle(4, 0xFF0000); laserCont.graphics.drawCircle(point.x*30, point.y*30, 7); splitObj(fixture.GetBody(), enterPointsVec[userD.id], point.Copy()); } else { enterPointsVec[userD.id]=point; } } 内容来源：9RIA.com 天地会-译林军 内容编辑：Pilihou return 1; } private function splitObj(sliceBody:b2Body, A:b2Vec2, B:b2Vec2):void { var origFixture:b2Fixture=sliceBody.GetFixtureList(); var poly:b2PolygonShape=origFixture.GetShape() as b2PolygonShape; var verticesVec:Vector.=poly.GetVertices(),numVertices:int=poly.GetVertexCount(); var shape1Vertices:Vector. = new Vector.(), shape2Vertices:Vector. = new Vector.(); var origUserData:userData=sliceBody.GetUserData(),origUserDataId:int=origUserData.id,d:Number; // 首先，销毁原始的刚体，然后将其对应的 Sprite 对象从 childList 中移除 world.DestroyBody(sliceBody); objectsCont.removeChild(origUserData); // world.RayCast()方法返回的 point 是一个世界坐标，所以我使用 b2Body.GetLocalPoint()方 法将其转换为本地坐标 A=sliceBody.GetLocalPoint(A); B=sliceBody.GetLocalPoint(B); //使用 shape1Vertices 和 shape2Vertices 存储切割后生成的两个图形 //因为这两个图形都包含顶点 A 和 B，将它们添加到图形中 shape1Vertices.push(A, B); shape2Vertices.push(A, B); //声明原始刚体的所有顶点 //用 det()(det 即 determinant)方法来判断给定的点在 AB 两个点分别在哪一边。这个方法需要 的参数是 3 个 points //-如果返回值>0，则给定点与 AB 成顺时针顺序(即给定点在 AB 的下方) //-如果返回值=0，则给定点与 AB 在同一条直线上 //-如果返回值<0，则给定点与 AB 成逆时针顺序(即给定点在 AB 的上方) for (i=0; i0) { shape1Vertices.push(verticesVec[i]); } else { shape2Vertices.push(verticesVec[i]); } } //为了得到连个图形，需要让顶点呈顺时针排列. //我自定义了方法 arrangeClockwise()(参数是以 vector 变量)重新将图形的顶点排列呈顺时针 并返回包含这些顶点的 vector shape1Vertices=arrangeClockwise(shape1Vertices); shape2Vertices=arrangeClockwise(shape2Vertices); 内容来源：9RIA.com 天地会-译林军 内容编辑：Pilihou //设置两个新图形的属性 bodyDef = new b2BodyDef(); bodyDef.type=b2Body.b2_dynamicBody; bodyDef.position.SetV(sliceBody.GetPosition()); fixtureDef = new b2FixtureDef(); fixtureDef.density=origFixture.GetDensity(); fixtureDef.friction=origFixture.GetFriction(); fixtureDef.restitution=origFixture.GetRestitution(); //创建第一个图形 polyShape = new b2PolygonShape(); polyShape.SetAsVector(shape1Vertices); fixtureDef.shape=polyShape; bodyDef.userData=new userData(origUserDataId,shape1Vertices,origUserData.texture); objectsCont.addChild(bodyDef.userData); enterPointsVec[origUserDataId]=null; body=world.CreateBody(bodyDef); body.SetAngle(sliceBody.GetAngle()); body.CreateFixture(fixtureDef); body.SetBullet(true); //创建第二个图形 polyShape = new b2PolygonShape(); polyShape.SetAsVector(shape2Vertices); fixtureDef.shape=polyShape; bodyDef.userData=new userData(numEnterPoints,shape2Vertices,origUserData.texture); objectsCont.addChild(bodyDef.userData); enterPointsVec.push(null); numEnterPoints++; body=world.CreateBody(bodyDef); body.SetAngle(sliceBody.GetAngle()); body.CreateFixture(fixtureDef); body.SetBullet(true); } private function arrangeClockwise(vec:Vector.):Vector. { // 算法很简单 // 首先，将所有的 points 安装它们的 x 坐标由小到大排列 // 其次，用最左边和最右边的两个点(即 C 点和 D 点)创建一个 tempVec，用来存储重新排 序后的顶点 // 再次，声明每一个顶点，利用前面提过的 det()方法，从 CD 上方的顶点开始添加每个顶 内容来源：9RIA.com 天地会-译林军 内容编辑：Pilihou 点，随后添加 CD 下方的顶点 // 就这些! var n:int=vec.length,d:Number,i1:int=1,i2:int=n-1; var tempVec:Vector.=new Vector.(n),C:b2Vec2,D:b2Vec2; vec.sort(comp1); tempVec[0]=vec[0]; C=vec[0]; D=vec[n-1]; for (i=1; ib.x) { return 1; } else if (a.x, texture:BitmapData) { this.id = id; this.textu