[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!

Long, long ago, I posted about my old TraceManager class for supreme debugging, but it was flawed! Hans from ObjectPainters was kind enough to comment with a link to a similar project he had put together. His did not have as much sophistication in its data tracing, but it did have a “FunctionWrapper.” His FuncitonWrapper could modify existing functions in run-time (so you don’t have to) allowing his tracing capabilities to be applied to any function without requiring the programmer to modify actual class files.

Hans was right about the usefulness of a function wrapper, but I didn’t feel like getting into it . . . until now. A couple days ago I brought up my old TraceManager and decided it was time to revamp it.

//Wrap class
traceManager.wrapClass(testClass , “testClass”)
//Run class function
var diff:Number = testClass.Subtract(6 , 3 , “trace:Infinity”)

The testClass.Subtract() function above was not capable of producing sophisticated trace data until the traceManager.wrapClass modified it and every other function in the testClass class.

I’ve taken Hans’ proposal one step further, by creating a ClassWrapper (using the undocumented ASSetPropFlags) that will automatically apply tracing capabilities to all functions within a given class instance. Finally, I feel the TraceManager to be a tool that all actionscripters could use in any project:

TraceManager.zip

I’ve added those 2 new functions, modified formatting a bit, and made a few other slight adjustments. If you used the previous version you probably will barely notice the differences outside of the 2 new wrapper functions. For a review on the basic ideas check out the original post. Now I give you an example of a trace out and will explain use of the new wrappers. Continue Reading…

I’ve been seeing a lot of cool 3d Flash stuff here and there, mostly on development blogs or forums. When I tell people that Flash can do 3d stuff, I get an impression which is a mixture of shock and disbelief. After checking out an informative PaperVision 3d video tutorial on gotoandlearn.com, I was less intimidated and ready to jump into it. Been looking for an excuse to brush up on my 3d skillz.

cubocc
CUBOCC face demo

Anyway, I saw this demo at http://cubo.cc/ today and it kind of shocked me. Apparently it’s a bit viral already, spreading around the net as it should. Some awesome coding, brilliant texturing and a simple design goes a long way, doesn’t it? The future of Google Adsense? Unfortunately, most likely! haha

But wait… that’s not all!

Continue Reading…

Update: The Liberty Engine: Running Clean

I’ve been all damn talk for too long. Ladies and gentlemen, I give you, the Liberty Engine Demo!

Liberty Engine demo 1

CONTROLS:

-Click the scrolling play button (or press space) to pause the animation.

-“In” and “Out” values determine number of seconds into the animation that the loop will begin and end.

-“Rate” determines the speed at which time will pass (seconds per second).

-“Duration” is the duration of the loop. If modified, it will automatically change the “Out” value.

-All forces in the system are set to enact at the 10 second mark and all calculations end at the 30 second mark.

Aside from the animation controls, this is not an interactive demo. Interactivity will probably be in the next one, but this demonstrates all of the engine principles. You’ll notice a slight lag period just as the swf loads. That’s because it is calculating all of the physics for the entire animation during the first frame. It saves all of that data and then replays it based on the passage of time. That’s why you can scroll back and forth or play at different rates (super slow-motion or fast-forward). The animation is actually set to 40fps, but I guarantee your browser can’t keep up with that speed. Fortunately, because the engine is time based rather than frame based, dropped frames do not effect the rate of movement. Oh, and by the way this is in AS2. I’ll translate it to AS3 later.

I haven’t mentioned the Liberty Engine up here very much, but it’s been a project of mine for over a year now. The concept behind the Liberty Engine is to create a physics engine that ANYONE can use; to liberate the thousands of young game developers without the programming or mathematical know-how to build the kind of games they dream of and provide it for public use free of charge. I hope, with a powerful and easy-to-use engine like this one, to foster a serious indie gaming movement at the grassroots level.

Continue Reading…

(See TraceManager (AS2) Update)

Finally I put some code up here:
“TraceManager.as”
“TraceManager Test.fla”

This is an AS file I put together for some big engine work. When your jamming together a lot of code and a big library of functions, it becomes difficult to keep track of what’s working and what’s breaking. For me, constantly turning traces on and off and having to figure out the meaning of traces that I wrote weeks (or even months) ago gets old fast.

Lately, my physics work has me running more functions than you can shake a stick at; functions within functions within functions, nesting like you wouldn’t believe. This leads to the most hideously complex tracing, almost nullifying the reason you trace data to begin with. So I put together this TraceManager to end such problems once and for all:

_________________________________________
Time(seconds): Depth: Function:
—————————————–
0
________________+0____function1 (test1){
0
________________+1________function2 (test1 1){
0
________________+2____________function3 (test1 1 2){
0
________________-2____________} function3—RESULT( test1 1 2 3 )
0
________________-1________} function2—RESULT( test1 1 2 3 )
0
________________-0____}function1—RESULT( test1 1 2 3 )

-This trace is from the example fla. It runs like so: function1 takes a string (“test1″) and adds a ” 1″ to it, then passes the result to function2; function2 adds a ” 2″ and passes the result to function3; function3 adds a ” 3″ to the string and returns it. Each function returns its own result to its parent function until all functions are complete.

Continue Reading…

I just checked out this impressive port of the Doom engine to Flash. It even loads up the original external .wad map files!

Check it out!

Doom in Flash

It might not be the first Flash port, but it’s definitely the first that resembles the original in speed and resolution. I could totally imagine playing some deathmatch in this thing. Can’t wait till something like that is available.

It’s also worth nothing that this was not created using Flash. It was developed on Linux using open-source/free Flex tools.

This reminds of back in 2001 or so when I saw a demo for a Quake 3 looking engine in Shockwave running incredibly fluidly. I recall it being a Q3 port of some sort because it was created by the same company that ported Q3 to Dreamcast, Raster Productions. I’m assuming it was some kind of port because they removed the demo after a short while, I believe because of legal matters.