. .
CREATE OR DIE Special Downloads Shop webinale

Schauplatz

  • «
  • »

Artikel

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

April 2009

Flash AS3, Box2D und PV3D

Akronyme, die sich blendend verstehen

(Link zum Artikel: http://www.createordie.de/cod/artikel/2261)

Physikalisch korrekte Zustände in Flash ab- oder nachzubilden ist in diesen Tagen dank einem reichhaltigen Angebot an Physic Engines nicht weiter schwierig. Nicht ganz so zahlreich, dennoch gut bestückt, ist das Angebot an 3D-Engines, die man mit Flash verwenden kann. Zuletzt hatte ich mich noch damit beschäftigt, ordentlich schleimige 2D-Aggregatzustände flüssig in Flash nachzubilden. Das Ganze seinerzeit unter Verwendung der angenehm performanten Motor2 Phyics-Engine von Michael Baczynski. Dem fügen wir heute eine weitere Dimension hinzu und schauen mal, ob wir auch in 3D etwas effektvoll Flüssiges in physikalisch korrekte Bahnen leiten können.

Text: Frank Reitberger

Die physikalische Grundlage

Als Basis dient uns dieses Mal Box2DFlashAS3, welche auf Erin Cattos wohlbekannter C++-Physics-Bibliothek Box2D basiert. Ein wohl sehr bekanntes Beispiel für den Einsatz der Box2D-Engine ist das 2D-Spiel/-Puzzle „Crayon Physics Deluxe". Um es noch einmal zu betonen, welche Engine an dieser Stelle ihre Verwendung findet, z. B. die WOW-Engine oder aber JiglibFlash, ist ganz dem persönlichen Gusto überlassen. Zu jeder der o. g. Engines gibt es eine Vielzahl an Beispielen und Tutorials, sodass der Einstieg meist kinderleicht ist und sich das gewünschte Ergebnis meist mit jeder der Engines erzielen lässt.

Hallo Welt

Um jetzt aber nicht bloß Theorie zu knüppeln, soll nicht länger um den heißen Brei herumgeredet und sogleich die physikalischen Rahmenbedingungen für unsere kleine Spielerei geschaffen werden.

  1. package {
  2. import Box2D.Collision.Shapes.b2CircleDef
  3. import Box2D.Collision.Shapes.b2PolygonDef;
  4. import Box2D.Collision.b2AABB;
  5. import Box2D.Common.Math.b2Vec2;
  6. import Box2D.Dynamics.b2Body;
  7. import Box2D.Dynamics.b2BodyDef;
  8. import Box2D.Dynamics.b2World;
  9. import org.papervision3d.core.math.Matrix3D;
  10. import org.papervision3d.core.math.Number3D;
  11. import org.papervision3d.lights.PointLight3D;
  12. import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
  13. import org.papervision3d.objects.DisplayObject3D;
  14. import org.papervision3d.objects.primitives.Sphere;
  15. import org.papervision3d.view.BasicView;
  16. import flash.display.Bitmap;
  17. import flash.events.Event;
  18. import flash.filters.BevelFilter;
  19. public class Box2DPhysics extends BasicView {
  20. [Embed(source ="../library/squaredSphere.gif")] private var SphereImg:Class;
  21. [Embed(source = "../library/squares.jpg")] private var CanvasImg:Class; [Embed(source = "../library/squareTiles.png")] private var squareImg:Class;
  22. private var world :b2World;
  23. private var mainBody :b2Body;
  24. private var radians :Array = new Array();
  25. private var w :Number = 647;
  26. private var h :Number = 500;
  27. private var wScale :Number = 30;
  28. private var rndX :Number = .02;
  29. private var rndY :Number = .05;
  30. private var sx :Number = 0;
  31. private var sy :Number = 0;
  32. private var gx :Number = 0;
  33. private var gy :Number = 0;
  34. private var iterations :int = 2;
  35. private var timeStep :Number = 1.0 / 30.0;
  36. private var waves1 :phongWave;
  37. private var waves2 :phongWave;
  38. private var waves3 :phongWave;
  39. private static const FORWARD :Number3D =
  40. new Number3D( 0, 0, 1 );
  41. private var light :PointLight3D =
  42. new PointLight3D();
  43. public function Box2DPhysics (){ launch(); }
  44. public function launch():void {
  45. stage.quality = "LOW";
  46. setupPV3D ();
  47. setupWorld();
  48. setupFloor();
  49. setupCeiling();
  50. setupWalls();
  51. setupShapes();
  52. }
  53. ///////////////////////////////////
  54. // setup: 3d.engine
  55. ///////////////////////////////////
  56. private function setupPV3D():void {
  57. camera.y = 0;
  58. camera.z = -1500;
  59. camera.zoom = 210;
  60. }
  61. ///////////////////////////////////
  62. // setup: physic(s).world
  63. ///////////////////////////////////
  64. private function setupWorld():void {
  65. var worldBounds:b2AABB = new b2AABB();
  66. worldBounds.lowerBound = new b2Vec2( 0, 0 );
  67. worldBounds.upperBound = new b2Vec2(
  68. w/wScale, h/wScale);
  69. var gravity:b2Vec2 = new b2Vec2(0.0, 0.0);
  70. var sleep:Boolean = true;
  71. world = new b2World(worldBounds,gravity,sleep);
  72. }
  73. ///////////////////////////////////
  74. // setup: floor
  75. ///////////////////////////////////
  76. private function setupFloor():void {
  77. var floorShapeDef:b2PolygonDef = new b2PolygonDef();
  78. var floorBodyDef:b2BodyDef = new b2BodyDef();
  79. var floor:b2Body;
  80. floorShapeDef.SetAsBox( (w+40)/wScale/2,
  81. 100/wScale);
  82. floorBodyDef.position = new b2Vec2(w/wScale/2,
  83. (h+50)/wScale);
  84. floor = world.CreateBody(floorBodyDef);
  85. floor.CreateShape(floorShapeDef);
  86. floor.SetMassFromShapes();
  87. }
  88. ///////////////////////////////////
  89. // setup: ceiling
  90. ///////////////////////////////////
  91. private function setupCeiling():void {
  92. var ceilingShapeDef:b2PolygonDef =
  93. new b2PolygonDef();
  94. var ceilingBodyDef:b2BodyDef = new b2BodyDef();
  95. var ceiling:b2Body;
  96. ceilingShapeDef.SetAsBox((w+40)/wScale/2,
  97. 100/wScale);
  98. ceilingBodyDef.position = new b2Vec2(
  99. w/wScale /2,
  100. -65/wScale);
  101. ceiling = world.CreateBody(ceilingBodyDef);
  102. ceiling.CreateShape(ceilingShapeDef);
  103. }
  104. ////////////////////////////////////
  105. // setup: wall(s)
  106. ///////////////////////////////////
  107. private function setupWalls():void {
  108. var wallShapeDef:b2PolygonDef =
  109. new b2PolygonDef();
  110. var wallBodyDef:b2BodyDef = new b2BodyDef();
  111. var wall:b2Body;
  112. wallShapeDef.SetAsBox(100/wScale,
  113. (h+40)/wScale/2);
  114. wallBodyDef.position = new b2Vec2(-25/wScale,
  115. h/wScale /2);
  116. wall = world.CreateBody(wallBodyDef);
  117. wall.CreateShape(wallShapeDef);
  118. wallBodyDef.position = new b2Vec2(
  119. (w+65) /wScale,
  120. h/wScale /2);
  121. wall = world.CreateBody(wallBodyDef);
  122. wall.CreateShape(wallShapeDef);
  123. }
  124. ///////////////////////////////////
  125. // initialize: physic.shape(s)
  126. ///////////////////////////////////
  127. private function setupShapes():void {
  128. for (var i:int = 0; i < 3; i++) {
  129. //radius for physics circle and sphere
  130. var radius:Number = 40 + Math.random() * 30;
  131. var bodyDef:b2BodyDef = new b2BodyDef();
  132. //random position
  133. bodyDef.position = new b2Vec2( Math.random() * w /wScale, Math.random() * h/1.2/wScale);
  134. var body:b2Body = world.CreateBody(bodyDef);
  135. var shapeDef:b2CircleDef = new b2CircleDef();
  136. shapeDef.radius = radius/wScale;
  137. shapeDef.density = .5;
  138. shapeDef.friction = .5;
  139. shapeDef.restitution = .9;
  140. body.CreateShape(shapeDef);
  141. body.SetMassFromShapes();
  142. var flatShadeMaterial:FlatShadeMaterial =
  143. new FlatShadeMaterial( light, 0xFF | Math.random() * 255 << 24 | Math.random() * 255 << 8 | Math.random() * 255 );
  144. var sphere:Sphere =
  145. new Sphere( flatShadeMaterial, radius, 8, 8 );
  146. this.radians.push( radius );
  147. sphere.name = "Sphere" + i;
  148. scene.addChild(sphere);
  149. body.m_userData = sphere;
  150. mainBody = body;
  151. }
  152. mainBody.m_userData.x = 350;
  153. mainBody.m_userData.y = 300;
  154. addBmpMaterial();
  155. }
  156. ///////////////////////////////////
  157. // add: bitmap.material
  158. ///////////////////////////////////
  159. private function addBmpMaterial ():void {
  160. var img:Bitmap = new SphereImg();
  161. var bMat:BitmapMaterial = new BitmapMaterial(
  162. img.bitmapData );
  163. for(
  164. var bb:b2Body=world.m_bodyList;bb;bb=bb.m_next)
  165. {
  166. if ( bb.m_userData is DisplayObject3D) {
  167. bb.m_userData.material = bMat;
  168. }
  169. }
  170. light.z = -1500;
  171. }
  172. }
  173. }

Wer hier aufmerksam mitgebastelt hat, der dürfte bemerkt haben, dass sich hier bereits das 3D-Setup (Papervision3D) bewältigen lässt. Die eigentlich wichtige Verknüpfung zwischen Physics- und 3D-Engine liegt in der Zeile body.m_userData = sphere. Hiermit wird sozusagen dem einzelnen 2D-Containerobjekt der Physics-Engine der 3D-Körper "Sphere" samt 3D-Eigenschaften zugeordnet. Für unser vorliegendes Beispiel ebenfalls relevant ist die Festlegung eines Hauptobjekts "mainBody = body", das wir als initialen Bewegungsantrieb zum späteren Animieren benötigen.

 

Kommentare
Gravatar Freddixx 07.12.2009
um 17:11 Uhr Hallo,
eines der wenigen Tutorials, die zeigen, wie man in einer 3D-Flash-Umgebung 2D-Physik verwenden kann.

Allerdings für Beginner so gut wie wertlos, weil: mangelhaft dokumentiert.

Vielleicht sollte hier doch mal etwas Zeit für das Kommentieren der einzelnen Codeblöcke aufgewandt werden. Dann wird auch verständlich, was du eigentlich vorhast.

lg, Fred #zitieren
Neuer Kommentar
  • Gute Kommentare werden belohnt.
  •   (optional)
  •   (Kommentar abonnieren/Gravatar - wird nicht veröffentlicht)
  •    Benachrichtige mich bei nachfolgenden Kommentaren per E-Mail
  • -+
Tags
Werbung