by
[Check out our Away 3D 4.0 update to this post — Stars and Clouds in Away 3D 4.0]
This is a tutorial based on the simple starfield I created during the loading screen for our recently released game, Rush Hour Plus. I created it in Flash with Away 3D Lite.
This can make a good effect for flying through stars in space, cool particles for action sequences, pixies in an enchanted forest, lotta different things if you put your mind to it!
Here’s the starfield used for the loading screen for Rush Hour Plus .
View the tutorial demo here: http://blog.sokay.net/stuff/starfield/
I wanted to give a little motion to the loading screen with adding too much weight to the filesize (only like 30KB) so I opted for creating this starfield with Away 3D Lite.
Download Away 3D Lite from their repository. Their site has an old version which doesn’t include the Sprite3D class. Get it latest version here:
https://github.com/away3d/away3dlite-core-fp10
And here is the source for the main chunk of it, the StarField class:
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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | public class StarField extends BasicTemplate { private var starCount:int = 200; private var stars:Vector.; private var starArt:BitmapData; // in this tutorial we'll create a bitmapData from scratch private var rotateSpeed:int = 1; private var rotateDirection:String = "none"; public function StarField() { mouseChildren = false; mouseEnabled = false; } override protected function onInit():void { trace("on init"); debug = false; // setting to false hides debug info in template class //create bitmapData for our material, 4x4 and white! (0xffffff) starArt = new BitmapData(4,4,false,0xFFFFFF); // create an Away3D Material with that bitmapData, this is the image used for our particles! //var starMaterial:BitmapMaterial = new BitmapMaterial(new starArt().bitmapData); // use this if you decide to import an asset var starMaterial:BitmapMaterial = new BitmapMaterial(starArt); // create a Vector array to the size of "starCount" stars = new Vector.(starCount , true); // start filling the Vector with Sprite3D objects! for (var i:int = 0; i < starCount; i++) { var star:Sprite3D = new Sprite3D(); star.material = starMaterial; star.width = 4; star.height = 4; star.alignmentType = AlignmentType.VIEWPOINT; // I forgot what this does... haha! look it up! star.x = -400 + (Math.random() * 800); star.y = -500 + (Math.random() * 800); star.z = -1000 + (Math.random() * (1000 + 800)); scene.addSprite(star); stars[i] = star; } // offset the stars a bit to make them look pretty like! //scene.rotationY = 0; // reverse direction //scene.rotationY = 180; // towards screen scene.rotationY = 160; // nice dynamic, over the shoulder angle scene.rotationX = 10; } // sets the rotation to look in a certain direction public function lookForward(): void { scene.rotationY = 180; scene.rotationX = 0; } public function lookBackward(): void { scene.rotationY = 0; scene.rotationX = 0; } public function lookLeft(): void { scene.rotationY = -90; scene.rotationX = 0; } public function lookRight(): void { scene.rotationY = 90; scene.rotationX = 0; } // set a rotation direction with the keys public function rotateLeft() : void { rotateDirection = "left"; } public function rotateRight() : void { rotateDirection = "right"; } public function rotateUp() : void { rotateDirection = "up"; } public function rotateDown() : void { rotateDirection = "down"; } public function rotateNone() : void { rotateDirection = "none"; } // this onPreRender function fires every frame, thanks to our nift Away3d template file! override protected function onPreRender():void { for (var i:int = 0; i < stars.length; i++) { var star:Sprite3D = stars[i]; star.z += 20; // stars move forward on Z-axis every frame if (star.z > 800) { star.z = -1000; // when stars move past limit of 800, set them back to -1000 so they loop forever! } } // handle rotations! if (rotateDirection == "left") { scene.rotationY += rotateSpeed; } else if (rotateDirection == "right") { scene.rotationY -= rotateSpeed; } if (rotateDirection == "up") { scene.rotationX += rotateSpeed; } else if (rotateDirection == "down") { scene.rotationX -= rotateSpeed; } } } |
The class uses the Away3D BasicTemplate class, which sets up the view and basic scene super quickly. I believe there’s also a FastTemplate class, but for some reason it doesn’t work with Sprite3Ds so watch out for that! And by default the BasicTemplate has a debug function built in, so you have to switch it off. The BasicTemplate is good for setting up something quick! But I’d rather setup something myself ideally.
It creates 200 Sprite3D objects, which use a white 4×4 square of BitmapData for its texture. Those are then scattered randomly in 3D space and on each frame it pushes them forward 20 units. I added in some keyboard controls so you can mess around with it (arrows and WASD).
Download the source here:
The source can be run from an FLA (CS4 format and AS3) or you can execute it as a Flex Actionscript Project (just make sure to include the lib folder as source, and swc folder).
I hope this helps!
Away3D is a huge improvement over Papervision. I still haven’t done any animated character demos with it but we’ll see if I ever get around to it!
——–
For code styling, I’m using the CodeColorer plugin. Very nifty!
