AS3 Creative Papervision 3D Flash Games

Recently on the papervision lists there have been some really creative uses of pv3d in games. I will highlight two here:

The Bowling Buddies game is made by the very creative Playfish.com company (more on the release at their blog). They have some great facebook/social network games combined with flash. With bowling buddies they created a game similar to Wii bowling (even with customize characters) and the best part is how they have scaled down versions. You can play in 2D, 3D and at different levels of quality to make it accessible to everyone. I think that will probably be needed with 3d flash games (Shockwave Director has LOD (Level of Detail) that helps with scaling down to slower machines but you have to do that yourself with the state of 3d engines in flash so far).

Bowling buddies and most playfish games are Facebook/Social Network based. You might say, why? (especially if you aren’t in the US where facebook is the biggest social network). But even Activision’s CEO calls facebook a threat to online gaming as we know it, this is because of the community aspect and the ability to play with friends and multiplayer games easily. Rather than setting up your own player find mechanism, facebook has it built in and all the viral aspects you need to garner more fans. So those into facebook and gaming are possibly ahead, but also it will be extremely competitive.

[ try bowling buddies ]

Airship is a really creative game that has been impressive to watch grow over the last weeks. It is now textured and performs pretty well. The best part is the Airship model and the fans. Very neat and I hope this one is seen through to a launched game. It is a bit like a RTS/Strategy overhead game that would be very cool to play multiplayer with Red5 server as well (just need the TIME!).

[ try airship demo ]

The best part is you can see after a year+ of release papervision and the other 3d engines are really changing the way gaming is done online. What was once a Java or Shockwave only capability, flash now has with evolving 3d engines, and there are playable fun games to prove it that are commercial ready.

Get your game on!

Advertisements

TweenMax Bezier Tweening Released for AS2 and AS3 by Jack at GreenSock – And List of Animation Kits

TweenMax (Speed Test) has been released that adds a main feature missing from GreenSock’s offerings in tween animation libraries and kits over Tweener. That is the bezier curve tween. Tweener is very popular for use in PV3d and AS3 due to the bezier curve and Zeh’s great example that is really the base of a possible 3d editor. TweenMax now adds this and bezier tween capability for the GreenSock animation libraries.

Tweener and TweenLite have become the micro animation kits as well as micro kits you can make with Go base kits. TweenLite, TweenFilterLite and TweenMax divided up into different kits allows it to be embedded for banners or small assets easier if you don’t need the filters or other advanced tweens (this comes into play heavily with large games and asset collections when the compiled SWF each need the library). Tweener packs all features into one kit for simplicity. GreenSock kits are divided up for need. The comparison together is about the same but for basic tweens TweenLite is only 2k.

Performance is one area that the kits from GreenSock have really shined and since the addition of the speed tests and benchmarks it has become a great focus on showing how the open source kits are much better than bloated included animation calls in Flash and Flex defaults. I think all the kits have niches that they fit and Tweener and TweenLite are just very simple to use which adds alot to an animation kit success.

List of Animation Kits for AS3 (some for AS2 as well)

If you are using the Flex of Flash default animation classes, I am sorry…

AS3 Nascar Game By mr. doob – AS3 Flash Library Mashup

I have been one upped by mr. doob! I did a little nascar like RC pro am like prototype in march ’07 when the pv3d kit showed up on my screen and I was hooked like most suceptible flashers who have longed for 3d in flash! Only my version is like Nintendo64 and his is like xbox360 with updated effects and physics kits and some doob magic. All these are based off of, of course the original race car driver in Papervision and its creator Carlos Ulloa (Adobe should be paying this man).

To the feature! This is a sweet game by mr. doob, called burn and brag for Nascar.

Now I don’t’ particularly like Nascar all that much but who doesn’t like to peel out to some fiddlin’? I mainly do Nascar stuff because it is highly marketable and like the only answer most ad agencies have for getting the southern us markets it seems, that and c-o-u-n-t-r-y mu-si-c (must be said at a slower rate).

But I digress, this is a perfect mix of advertisment, game play, fun and experience. It is fast, simple, and playable. Exactly the simplicity and smoothness needed of gameplay and playback.  Great ad work but it also gives something fun to do and best of all it is built in AS3 flash with a plethora of libraries from the flash as3 community.

The game platform is emerging fantastically in the AS3 market. mrdoob used these kits to build this:

It would be cool to see a post on how he did the replays with tweener – I imagine just a series of points collected with car state (current position state) and then just play them back with a call back or time delay. You’d have to capture alot for smooth playback without laggy movements.  I am working on multiplayer games with this same issue for a current project.

Game on! The question is when will this be SOTD or SOTM at thefwa.com?

AS3 Real-Time Raytracing

Forrest Briggs throwing down with a real-time raytracer in AS3. Also a C++ OpenGL version sample on the page.

Real-time pixel manipulation in flash is getting faster, but is still probably going to have to be faked in AS3, maybe AS4 will provide us per pixel speeds that Andre Michelle has been harping on since flash 8.5. Native operations can be much faster in that area. AIF might look to change some of that but that is Flash 10.

Here is the code for the as3 raytracer. Read more at laserpirate.

package
{
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.Event;
import flash.utils.getTimer;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFormat;

public class RayTracer extends Sprite
{
private var t:Number;
private var dt:Number = .01;
private var frameTimeTxt:TextField;

public static const BUFFER_WIDTH:int = 160;
public static const BUFFER_HEIGHT:int = 120;
public static const BUFFER_SCALEDDOWN:int = 320 / BUFFER_WIDTH;

public static const HALF_BUFFER_WIDTH:int = BUFFER_WIDTH / 2;
public static const HALF_BUFFER_HEIGHT:int = BUFFER_HEIGHT / 2;

private var outputBitmapData:BitmapData;
private var outputBitmap:Bitmap;

public var FOV:Number = 20;

public var sphereCenterX:Array = [0, 0, 0, 0];
public var sphereCenterY:Array = [0, -.2, .4, 100.5];
public var sphereCenterZ:Array = [4, 4, 4, 10];
public var sphereRadius:Array = [.35, .35, .25, 100];
public var sphereR:Array = [255, 0, 0, 20];
public var sphereG:Array = [0, 150, 0, 20];
public var sphereB:Array = [0, 0, 255, 20];
public var sphereReflects:Array = [false, false, false, true];
public var sphereReflectiveness:Array = [0,0,0,.3];
public var sphere2dX:Array = new Array(sphereCenterX.length);
public var sphere2dY:Array = new Array(sphereCenterX.length);
public var sphere2dR:Array = new Array(sphereCenterX.length);

public var numSpheres = sphereCenterX.length;

var skyR:int = 20;
var skyG:int = 20;
var skyB:int = 20;
var skyColor:int = (skyR< <16) + (skyG<<8) + skyB; var ambientIllumination:Number = .1; var canvas:BlankClip; var theta:Number = 0; var mouseIsDown:Boolean = false; var mouseDownTheta:Number = 0; var mouseDownX:Number = 0; public function RayTracer() { outputBitmapData = new BitmapData(BUFFER_WIDTH, BUFFER_HEIGHT, false); outputBitmap = new Bitmap(outputBitmapData); addChild(outputBitmap); //outputBitmap.smoothing = true; outputBitmap.width= 320; outputBitmap.height = 240; canvas = new BlankClip; addChild(canvas); canvas.buttonMode = true; canvas.useHandCursor = true; frameTimeTxt = new TextField(); frameTimeTxt.defaultTextFormat = new TextFormat("Arial"); frameTimeTxt.x = 8; frameTimeTxt.y = 8; frameTimeTxt.width = 640; frameTimeTxt.textColor = 0xFFFFFF; frameTimeTxt.selectable = false; addChild(frameTimeTxt); t = 0; addEventListener(Event.ENTER_FRAME, update, false, 0, true); canvas.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); canvas.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } public function mouseDownHandler(e:*):void { mouseIsDown = true; mouseDownX = stage.mouseX; mouseDownTheta = theta; } public function mouseUpHandler(e:*):void { mouseIsDown = false; } public function update(e:*) { // start frame timer and update global time var timer:Number = getTimer(); t += dt; // handle mouse rotation if( mouseIsDown ) theta = mouseDownTheta - .0015 * (stage.mouseX - mouseDownX); theta += dt; // do some funky animation sphereCenterX[0] = .5*Math.sin(theta*5); sphereCenterZ[0] =1 + .5*Math.cos(theta*5); sphereCenterX[1] = .5*Math.sin(theta*5 + 2 * Math.PI / 3); sphereCenterZ[1] = 1 + .5*Math.cos(theta*5 + 2 * Math.PI / 3); sphereCenterX[2] = .5*Math.sin(theta*5 + 4 * Math.PI / 3); sphereCenterZ[2] = 1 + .5*Math.cos(theta*5 + 4 * Math.PI / 3); // reused variables var x:int; var y:int; var i:int; var j:int; var r:int; var g:int; var b:int; var dx:Number; var dy:Number; var rayDirX:Number; var rayDirY:Number; var rayDirZ:Number; var rayDirMag:Number; var reflectRayDirX:Number; var reflectRayDirY:Number; var reflectRayDirZ:Number; var intersectionX:Number; var intersectionY:Number; var intersectionZ:Number; var reflectIntersectionX:Number; var reflectIntersectionY:Number; var reflectIntersectionZ:Number; var rayToSphereCenterX:Number; var rayToSphereCenterY:Number; var rayToSphereCenterZ:Number; var lengthRTSC2:Number; var closestApproach:Number; var halfCord2:Number; var dist:Number; var normalX:Number; var normalY:Number; var normalZ:Number; var normalMag:Number; var illumination:Number; var reflectIllumination:Number; var reflectR:Number; var reflectG:Number; var reflectB:Number; // setup light dir var lightDirX:Number = .3; var lightDirY:Number = -1; var lightDirZ:Number = -.5; var lightDirMag:Number = 1/Math.sqrt(lightDirX*lightDirX +lightDirY*lightDirY +lightDirZ*lightDirZ); lightDirX *= lightDirMag; lightDirY *= lightDirMag; lightDirZ *= lightDirMag; // vars used to in intersection tests var closestIntersectionDist:Number; var closestSphereIndex:int; var reflectClosestSphereIndex:int; // compute screen space bounding circles //canvas.graphics.clear(); //canvas.graphics.lineStyle(1, 0xFF0000, .25); for(i = 0; i < numSpheres; ++i) { sphere2dX[i] = (BUFFER_WIDTH / 2 + FOV * sphereCenterX[i] / sphereCenterZ[i]); sphere2dY[i] = (BUFFER_HEIGHT /2 + FOV * sphereCenterY[i] / sphereCenterZ[i]); sphere2dR[i] = (3 * FOV * sphereRadius[i] / sphereCenterZ[i]); //canvas.graphics.drawCircle(sphere2dX[i]*BUFFER_SCALEDDOWN, sphere2dY[i]*BUFFER_SCALEDDOWN, sphere2dR[i]*BUFFER_SCALEDDOWN); sphere2dR[i] *= sphere2dR[i]; // store the squared value } // write to each pixel outputBitmapData.lock(); for(y = 0; y < BUFFER_HEIGHT; ++y) { for(x = 0; x < BUFFER_WIDTH; ++x) { // compute ray direction rayDirX = x - HALF_BUFFER_WIDTH; rayDirY = y - HALF_BUFFER_HEIGHT; rayDirZ = FOV; rayDirMag = 1/Math.sqrt(rayDirX * rayDirX + rayDirY * rayDirY +rayDirZ * rayDirZ); rayDirX *= rayDirMag; rayDirY *= rayDirMag; rayDirZ *= rayDirMag; /// trace the primary ray /// closestIntersectionDist = Number.POSITIVE_INFINITY; closestSphereIndex = -1 for(i = 0; i < numSpheres; ++i) { // check against screen space bounding circle dx = x - sphere2dX[i]; dy = y - sphere2dY[i]; if( dx * dx + dy * dy > sphere2dR[i] ) continue;

// begin actual ray tracing if its inside the bounding circle

lengthRTSC2 = sphereCenterX[i] * sphereCenterX[i] +
sphereCenterY[i] * sphereCenterY[i] +
sphereCenterZ[i] * sphereCenterZ[i];

closestApproach = sphereCenterX[i] * rayDirX +
sphereCenterY[i] * rayDirY +
sphereCenterZ[i] * rayDirZ;

if( closestApproach < 0 ) // intersection behind the origin continue; halfCord2 = sphereRadius[i] * sphereRadius[i] - lengthRTSC2 + (closestApproach * closestApproach); if( halfCord2 < 0 ) // ray misses the sphere continue; // ray hits the sphere dist = closestApproach - Math.sqrt(halfCord2); if( dist < closestIntersectionDist ) { closestIntersectionDist = dist; closestSphereIndex=i; } } /// end of trace primary ray /// // primary ray doesn't hit anything if( closestSphereIndex == - 1) { outputBitmapData.setPixel(x, y, skyColor); } else // primary ray hits a sphere.. calculate shading, shadow and reflection { // location of ray-sphere intersection intersectionX = rayDirX * closestIntersectionDist; intersectionY = rayDirY * closestIntersectionDist; intersectionZ = rayDirZ * closestIntersectionDist; // sphere normal at intersection point normalX = intersectionX - sphereCenterX[closestSphereIndex]; normalY = intersectionY - sphereCenterY[closestSphereIndex]; normalZ = intersectionZ - sphereCenterZ[closestSphereIndex]; normalX /= sphereRadius[closestSphereIndex]; // could be multiply by precacluated 1/rad normalY /= sphereRadius[closestSphereIndex]; normalZ /= sphereRadius[closestSphereIndex]; // diffuse illumination coef illumination = normalX * lightDirX + normalY * lightDirY + normalZ * lightDirZ; if( illumination < ambientIllumination ) illumination = ambientIllumination; /// trace a shadow ray /// var isInShadow:Boolean = false; for(j = 0; j < numSpheres; ++j) { if( j == closestSphereIndex ) continue; rayToSphereCenterX = sphereCenterX[j] - intersectionX; rayToSphereCenterY = sphereCenterY[j] - intersectionY; rayToSphereCenterZ = sphereCenterZ[j] - intersectionZ; lengthRTSC2 = rayToSphereCenterX * rayToSphereCenterX + rayToSphereCenterY * rayToSphereCenterY + rayToSphereCenterZ * rayToSphereCenterZ; closestApproach = rayToSphereCenterX * lightDirX + rayToSphereCenterY * lightDirY + rayToSphereCenterZ * lightDirZ; if( closestApproach < 0 ) // intersection behind the origin continue; halfCord2 = sphereRadius[j] * sphereRadius[j] - lengthRTSC2 + (closestApproach * closestApproach); if( halfCord2 < 0 ) // ray misses the sphere continue; isInShadow = true; break; } /// end of shadow ray /// if( isInShadow ) illumination *= .5; /// trace reflected ray /// if( sphereReflects[closestSphereIndex] ) { // calculate reflected ray direction var reflectCoef:Number = 2 * (rayDirX * normalX + rayDirY * normalY + rayDirZ * normalZ); reflectRayDirX = rayDirX - normalX * reflectCoef; reflectRayDirY = rayDirY - normalY * reflectCoef; reflectRayDirZ = rayDirZ - normalZ * reflectCoef; closestIntersectionDist = Number.POSITIVE_INFINITY; reflectClosestSphereIndex = -1 for(j = 0; j < numSpheres; ++j) { if( j == closestSphereIndex ) continue; rayToSphereCenterX = sphereCenterX[j] - intersectionX; rayToSphereCenterY = sphereCenterY[j] - intersectionY; rayToSphereCenterZ = sphereCenterZ[j] - intersectionZ; lengthRTSC2 = rayToSphereCenterX * rayToSphereCenterX + rayToSphereCenterY * rayToSphereCenterY + rayToSphereCenterZ * rayToSphereCenterZ; closestApproach = rayToSphereCenterX * reflectRayDirX + rayToSphereCenterY * reflectRayDirY + rayToSphereCenterZ * reflectRayDirZ; if( closestApproach < 0 ) // intersection behind the origin continue; halfCord2 = sphereRadius[j] * sphereRadius[j] - lengthRTSC2 + (closestApproach * closestApproach); if( halfCord2 < 0 ) // ray misses the sphere continue; // ray hits the sphere dist = closestApproach - Math.sqrt(halfCord2); if( dist < closestIntersectionDist ) { closestIntersectionDist = dist; reflectClosestSphereIndex=j; } } // end loop through spheres for reflect ray if( reflectClosestSphereIndex == - 1) // reflected ray misses { r = sphereR[closestSphereIndex] * illumination; g = sphereG[closestSphereIndex] * illumination; b = sphereB[closestSphereIndex] * illumination; } else { //trace("ref hit"); // location of ray-sphere intersection reflectIntersectionX = reflectRayDirX * closestIntersectionDist + intersectionX; reflectIntersectionY = reflectRayDirY * closestIntersectionDist + intersectionY; reflectIntersectionZ = reflectRayDirZ * closestIntersectionDist + intersectionZ; // sphere normal at intersection point normalX = reflectIntersectionX - sphereCenterX[reflectClosestSphereIndex]; normalY = reflectIntersectionY - sphereCenterY[reflectClosestSphereIndex]; normalZ = reflectIntersectionZ - sphereCenterZ[reflectClosestSphereIndex]; normalX /= sphereRadius[reflectClosestSphereIndex]; // could be multiply by precacluated 1/rad normalY /= sphereRadius[reflectClosestSphereIndex]; normalZ /= sphereRadius[reflectClosestSphereIndex]; // diffuse illumination coef reflectIllumination = normalX * lightDirX + normalY * lightDirY + normalZ * lightDirZ; if( reflectIllumination < ambientIllumination ) reflectIllumination = ambientIllumination; r = sphereR[closestSphereIndex] * illumination + .5 * sphereR[reflectClosestSphereIndex] * reflectIllumination; g = sphereG[closestSphereIndex] * illumination + .5 * sphereG[reflectClosestSphereIndex] * reflectIllumination; b = sphereB[closestSphereIndex] * illumination + .5 * sphereB[reflectClosestSphereIndex] * reflectIllumination; if( r > 255 ) r = 255;
if( g > 255 ) g = 255;
if( b > 255 ) b = 255;

} // end if reflected ray hits

} /// end if reflects
else // primary ray doesn’t reflect
{
r = sphereR[closestSphereIndex] * illumination;
g = sphereG[closestSphereIndex] * illumination;
b = sphereB[closestSphereIndex] * illumination;
}

outputBitmapData.setPixel(x, y, (r<<16) + (g<<8) + b); } // end if primary ray hit } // end x loop } // end y loop outputBitmapData.unlock(); // compute FPS var fps:Number = 1.0/((getTimer() - timer) / 1000.0); frameTimeTxt.text = "Drag to rotate. FPS: " + int(fps); } } }[/sourcecode]

AS3 Animation Base Library Go Performance Tests

Moses has posted some nicely presented info on Go performance.

So far it looks almost neck and neck with TweenLite in drop dead sprints for fastest performing exhaustive tween kung fu-ing.

Although these are not really for competition it is to mainly show patterns for design for purposes that you need. Where this is a more apples to apples comparison (Go vs TweenLite) as the other kits have other overhead such as filters, utilities, even pathing for AnimationPackage and Tweener. TweenLite solved this by separating out into TweenFilterLite and just making TweenLite for animation (and keeping file size extremely small, virtual machine advantages). There is just no excuse for the F9 Tween class though, what the…

It is one thing to build, another to share, another to present information in a very consumable way and then another to make that whole presentation look really good. Moses, like polygonal labs, throws down some nice demos and information posts.

Go was late to the AS3 Animation kit game after pwning with FuseKit in the AS2 age (especially the creative agency love), I think it was the right time as it was released the TweenLite and TweenBencher performance testing utilities put a focus on performance to see just how many more cycles we could get out of AS3 from an animation kit. When building your own animation kits or contributing to one, these observations from various aims helps in the code design.

I still use Tweener in most production work, and TweenLite when I need really small assets if there are going to be many of them. But, I have started to use Go in a kit I am building that I hope to share more in the future, and used it in a small game. But by the speed of the tests and my own experiments it is pretty clear to see that both TweenLite and Go would be excellent base layers to animation kit architecture and Tweener is a bit more on top of that with the filters and bezier tools that it is really a more complete package with less work to do as your animation gets more complex (colors, saturation, bezier, etc). But if you were looking to build your own animation kit or for micro assets a base like Go or a base kit like TweenLite is the way to go). Some notes from Moses’s tests show that performance and sync are also what starts to fall apart as performance critical mass is reached. Go and Tweener held sync the best.

Side notes:

The TweenLite system was highly performative on all three measures. That system also features a very small filesize footprint, making it a clear choice for banners or other filesize-restrictive projects.

Go & Tweener were the only systems here that synced their animations – others ran out of sync to different degrees which yields less visually favorable results. Actually, it looks kind of neat in the tests! But you don’t want out-of-sync animation in your real-life projects. This effect can be clearly seen using the open-source TweenBencher utility, included in the Go package.

AS3 2D Physics Engine Motor Physics Released (Motor2)

Great news! Polygonal Labs has released the long awaited Motor Physics engine. It is now called Motor2.

UPDATE: Now hosted at Google code

Project hosted at code.google.com/p/motor2
License: New BSD License

After the port of Box2DFlashAS3 appeared the fate of Motor Physics engine was unknown. But with time and just before the stroke of midnight on the final hour of 2007 Michael Baczynski released Motor2 2D physics engine on the world.

This now gives us, count them, FOUR AS3 Physics engines that were released in 2007 in order of release.

Be sure to check the demos of Motor Physics:

To get the source head on over to the blog and in the post it is in the first para.

Currently you can get the source for the preview here.

Polygonal always has such great information and demo write ups the source link gets lost in there. Hopefully this will be at Google code soon or a public SVN. The code looks great and there are optimizations in there but even those are elegant.

With 3 excellent flash as3 3d engines (papervision3d, away3d, sandy), 4 physics engines, lots of great utilities like FZip or ASZip, AlivePDF, Red5, haXe etc etc. 2008 is looking like it will be a great year for performance, optimization and gaming/app platforms on the web like never before seen. I am most looking forward to the coming gaming market for flash, lots of possibilities. With the added competition from Silverlight, much innovation will happen here.

It is great that Motor2, which has a great author and dedicated to performance has joined the physics engine scene, not only that posting on new years eve. Thanks to all that make the flash platform possible of creating excellent new fun and useful tools.

UPDATE: Now hosted at Google code

Project hosted at code.google.com/p/motor2
License: New BSD License

New AS3 2D Physics Engine Box2DFlashAS3 Based on Box2D for C++

Another great new 2D physics engine for AS3 has been released called Box2dFlashAS3 that is based on the excellent kit Box2D for C++. It has been a busy year for physics engines in AS3. FOAM was released this month, APE, the highly anticipated Motor Physics from polygonal labs and plenty more still I am sure.

The Box2dFlashAS3 version has some great demos available on the site that show, use the arrow keys to move to the different demos highlighted here.

  1. bridge
  2. ragdolls
  3. compound shapes
  4. rube goldberg / domino / tank tracks etc
  5. stacked boxes
  6. slider crank / piston
  7. pulleys
  8. gears

Box2DFlashAS3 is an open source port of Erin Catto’s powerful c++ physics library Box2D. Cycle through the demos to see some of the features.

Full source code for the engine and examples can be downloaded from the project’s sourceforge page found Here.

This kit is nice because it mimics Box2D for the crossover and ability of developers to use it in C++ and Flash AS3 moreso than other kits. It looks good and performs well except for a memory or FPS pause I get intermittently.  The demos are already inspiring many uses of the features highlighted for games and effects.