More Creative Flash AS3 Papervision 3D Games

Here are some really stylish and well done uses of Papervision 3D to make fun games. The people at Bloc recently launched Meta4orce, a unique interactive sci-fi TV show site with some great and numerous uses of papervision 3d.  My favorite is the tron like style and the tower defense game called shock to the system.

Shock to the system

Mako User Interface

Deadsphere Pt. I

and many more check them out at Iain Lobb.

Advertisements

AS3 Flash 3D Engine SWFZ Source Code Goes Open Source

Jono is giving SWFZ to science and the open source devices.

The SWFZ engine is one Flash 3D engine that took a different approach. It is a bit early in its technique used but the author at custom:media Jono has decided to float the source code out there in ghost mode (no active development but not dead). It is just ready to branch and others to run with it. He is floating the source but I think in 1-2 years this will be the preferred method if processors and multicore parallel usage is optimized. We shall see.

The implementation method and difference with SWFZ engine in Flash for 3d is that is is a pixel based renderer or scanline. It is based on a really fun game engine called Irrlicht which has been pretty active for the last few years but is a C++ DirectX and OpenGL engine. Since SWFZ has to run in Flash and it is a pixel renderer/scanline it has some limitations currently in Flash. Games and renders have to be fast to pull this off and Flash is limited by the software renderer but as computers get multiple processors and flash player gets better at this then this will be a viable option (it is the same thing that limits Canvas based renderers right now). One main problem with this is you can’t go too full screen the biggest sizes that perform well are smaller windows 320×240 etc. But if the processors can handle it it is actually more efficient when it removes overlap, extra triangle drawing and painters algorithm like problems dont’ pop up (triangle overlap when on same plane). This method draws pixel by pixel but fast enough flash engines like Papervision, Sandy3D and Away3D draw overlaps due to the drawing technique, back to front.

But SWFZ still manages to pull off some amazing feats such as these demos

Quake Demo

Terrain Demo

Yoshis Hip Hop Couzin

Jono has put some great classes into SWFZ engine such as bsp parsers, quake md2 parsers, animated mesh, and lots of great examples in porting C++ Irrlicht to AS3. This was a very early example of how AS3 was fun for programmers to port stuff from C or C++ into Flash. AS3 is just fun. Also be sure to check the site for more samples like an FPS game, some basic ai etc.

Jono has been working on 3d in Flash for a while and actually this message is what shows the difference betweeen this approach and other flash engines the way Papervision, Sandy and Away3D (pv3d derivative) make 3d in flash fast enough (Painter’s Algorithm and drawing skewed movieclips and textures.

Demos

More about the Engine Some Notes

The SWFZ engine.

Overview:

SWFZ engine is the result of four years of me messing with 3D in Flash.

I was a complete newbie to 3D, so a lot of learning has happened to get to here.

If you’re interested in 3D engines check out the resource links at the bottom of the page:

The Demo:

Model

  • .md2 format from ID’s Quake2.
  • Uses frame based animation
  • Textured with jpeg
  • No lighting, No Gouraud Shading, just plain texture

Skybox

  • Textures are just jpegs.

Boxes

  • Rendering – Textured Gouraud , Textured Gouraud with Alpha, Textured Gouraud with Quick Alpha, Gouraud Shaded, and the large box is just Textured.
  • Star Texture – Targa (.tga) file format.

AS3 classes

  • 171 classes and interfaces

Scene

  • No lighting
  • No collision detection

SWFZ engine technology:

The demo only shows a small part of the capabilities of the engine. In the coming weeks I will get www.custommedia.co.nz up and running and start to post more info then.

Currently implement stuff:

New file formats supported

  • .tga – Targa Image
  • .bmp – Bitmap Image
  • .3ds – 3D Studio Max
  • .bsp – Quake3 levels
  • .md2 – Quake2 models
  • .obj – Wavefront 3d object (static)
  • .zip – Read from a zip archive (all in Flash, no server side scripts)

3D Rendering

  • mipmaps
  • perspective correct texturing + affine texturing
  • Flat shading
  • Gouraud
  • Textured Gouraud
  • Textured Flat
  • Textured Two Layers
  • Gouraud Alpha
  • Textured Flat Alpha
  • Textured Gouraud Alpha

3D Scene

  • Billboards
  • Parent, Child scene nodes
  • OctTree
  • Skybox
  • Static Meshes
  • Animated Meshes
  • Basic collision detection
  • Scene node animators

If any code is useful to you maybe drop him a donation or what would be nice if this was all setup at google code and used to be integrated into other engines. Irrlicht ports are fun and there is a future in this method when processors catch up I think.

AS3 Flash Isometric Engine

Just got word of this great isometric engine similar to the Alternativa engine or zenbullets but with plans for open source. I checked out the demos and it looks well done and is pretty responsive. Once you get to heavy lighting it can draw a little slow (the cowboy becomes more John Wayne like with slow drawls) but this seems like a great base for an isometric AS3 engine.

The author, who is currently anonymous, describes it as:

The FFilmation Engine is an AS3 isometric programing engine, focused mainly on game development. The aim of the project is providing a robust development platform, where game designers can work on the game’s details and forget about the render engine. It is intended to be really usable from a “real production scenario” point of view.

Unfortunately there is no name associated with the project yet, I think it would be wise to let that be known. The author has some info on the level structure of files and 3 great demos.

Here are some features and plans for the engine:

  • Have a programming interface as small and easy as possible, no matter how complex the internal code is. From a software engineering point of view, the OO structure may not be as correct and clean as it could have been. It is not messy, but several decisions where made that improved performance and simplicity at the cost of breaking some “good OO programming” conventions.
  • Rendering performance is a major concern when designing all the algorythms. Some of them have been rewritten 4 o 5 times from scratch until one fastest enought was found. If it doesn’t perform well, it is not usable. We’ve all seen several impressive actionscript demos that look really cool and invite to be used in your next project. But then if the effect takes 90% of your CPU, you can’t build anything on top of that.
  • Graphic designers should be able to work on the application’s ( game or not ) environments without any programming skills, visually, and with almost immediate previews of what they are doing. Using the engine should be fun to some degree. If you have this terrific engine and adding a wall to your dungeon means you have to write 10 lines of OO gibberish, lazyness will eventually win you over. If art directors can draw and place the walls and lights an floors and enemies and see them appearing onscreen, you have more chances of reaching your deadline.
  • Flash has built-in drawing and animation tools. You should be able to take advantage of them !!

All this is important because in reality projects depend on limited resources. Resources are money and time, but also the enthusiasm of indie developers or single individuals doing stuff “for fun” in their bedrooms. Projects, specially the “for fun” ones, have more chances of completion if the production process is gratifying to some degree.

Here’s a list of highlited features:

  • One engine capable of handling several isometric scenes of different complexities.
  • Create scenes from human-readable XML definitions, allowing easy edition of the scene’s topology and contents
  • Graphic media can be split into several external resources and loaded when an scene needs them
  • Flat textures. Paint your grahics directly into flash. Walls, floors and celings are edited as 2D graphics and projected by the engine. Elements and animated characters can be animated via flash timeline, no need for complex programming.
  • Dynamic lighting, global lighting, real-time shadow projection. Multiple lights from multiple sources affecting the same objects.
  • Bump-mapped surfaces. Still somehow buggy and a serious performance killer, but already there.
  • An extendable material interface. MovieClip materials, autotiled materials, procedural materials.
  • Automatic zSorting of all surfaces and objects
  • Built-in collision detection. No need to program complex coordinate comparisions, simple listen to COLLISION events generated by the engine.
  • Basic AI API helpers such as “is character A visible from character B’s position ?”

I plan to make the engine open-source, but I’ll wait until I have a release “solid” and documented enough.

I am looking forward to more updates and to find out more about the author. We have some great engines underway in ’08 for AS3 and it looks to be a very fun year in that aspect.

Because it is an isometric engine is is not true 3d but sprite based animation. However with planes and objects other isometric 3d objects can be built such as walls, boxes, buildings, cubes, etc. I wonder if there are any toolkits being used or if this is all custom built?

Keep your eye on this space. It is very similar to the Alternative Engine.

Here are all the Demos:

And some docs on the architecture:

Check it out!

Degrafa for Flex Looking Pretty Sweet (AS3 and Commonizing Paths Graphics Pipeline for Silverlight and Flex)


Just recently through the holidays Degrafa has made some great strides as a very cool SVG pathing and designers toolkit for Flex. I have to say some recent Flex apps have really looked good like Picnik and Buzzword but this kit looks to clean up the lack of design and default style-itis that has plagued most common Flex Apps.

This so far looking like a pretty strong kit for bringing the designer pipeline into Flex to provide some really nice looking web styled apps. It has a direct crossover to Silverlight and Path objects that are largely just a series of data created in Expression or exported from Illustrator into XAML. The one benefit of Flex/Flash is it compiles to a very small SWF where with Silverlight you have to package the XAML in a zip and use the downloader object to extract it out. These XAML files and Paths can get massive as I am sure the ones for Degrafa will for Flex but the compile option is nice as it is compressed heavily.

All about Degrafa

Yes the launch includes shiny buttons…

Sphere Sample (right click for source)

Also, it appears it is a way to bridge the pathing and pipeline for flash or Silverlight. At one of the contributors blogs they mention this:

We have lot of interesting features planned for the coming releases. There is also a converter app that will be made available for converting the juicy Degrafa graphics to XAML.

Degrafa has gone live.

Developing…

AS3 HTML to Flash Conversion Library – htmlwrapper

Interesting library for html to flash front end. Basically this runs off the HTML in your page to draw the same in Flash. I am sure there are great pitfalls in this but when controlled this could be very key in a flash add-on to CMS or CMS content. Might be useful for many things.

Wrapper is a cross-browser compliant HTML/CSS rendering engine written in ActionScript that sits on top of your standards compliant HTML page. Wrapper eliminates cross-browser issues and makes integrating ActionScript and HTML/CSS projects possible without needing to compile.

Wrappers strives to answer the most common problems web designers face without forcing them to learn too many new things. Most web sites can be created in HTML or CSS, then when you need to extend Wrapper’s capabilities you can either use JSON to call functions within ActionScript or you can load compiled plug-ins. Wrapper also has built in methods within CSS to load custom fonts, display elements as any shape, and fill them with linear or radial gradient background colors. ActionScript’s event model is also implemented within Wrapper’s HTML. Wrapper’s best features are the ones that you get for free because of how it is set up. It’s like getting all the great features of the Flash Player without needing to deal with compiling and being able to create your content the same way any HTML page would be created. Wrapper is fully accessible to the search engines and integrates well with any back-end technology.

Wrapper is currently released as a fully functional open source beta for Flash Player 9. Wrapper is set up as a pre-compiled plug-in but can easily be integrated into any Flex or AIR applications or even as an ActionScript framework for creation of compiled projects.

Documentation can be found in the wiki and news about this project can be found at http://motionandcolor.com

Examples can be found in the downloads http://code.google.com/p/htmlwrapper/downloads/list

Source is for everything is in svn http://code.google.com/p/htmlwrapper/source

I checked it out and it looks pretty well done, most of the time HTML to Flash or vice versa has to be a semi-controlled environment in terms of the markup. This and FlashML which is only AS2 I am using a partially converted to AS3 are part of my rotation for HTML<–>Flash content challenges for research right now. Usually most CMS in Flash has content loaded into the flash and then an alternate (sometimes similar) representation, here this is trying to merge the two which has it’s challenges.

Try out a demo (view source)

EDIT: Title dyslexia


Flash App Photo Editor Picnik Integrated with Flickr

Picnik is an excellent application that makes believers out of RIA skeptics made with Flash/Flex.   Today Picnik is now integrated with Flickr bringing user friendly photoshop essentially to the masses

This is a pretty interesting market direction as more photo companies like photobucket and flickr add to the competition for photo editing. As flash based uploads, photo editors, word processors, presentation creators, conference systems, office apps, planning apps and many others all over the web does this mean the services model is really here and RIA is not just a fad?

The model of software is changing, again. The one competitive edge that web applications, and specifically RIA apps have over desktop is that many desktop apps are bloated, have legacy evolution that caused heavy, busy interfaces and absolutely no abstraction of the possible user level in many cases. Web applications are for a broad audience so these applications will see many benefits in making simplified versions of applications for lower skilled users, and then for advanced users more features.

The model is entirely different. They also have the ability to embed in sites like flickr, photobucket, social networks, office product offerings, small business servers, etc.  They could even compete on these sites.  The install base will not be millions of client computers but networks and clusters of users at online places and services.

This was a dream with ASP applications and software as a service.  The problem was before RIA some of the limits of the web were preventing web apps from overtaking and beating out the features of desktop apps. RIAs and the web, web services, user controlled  environments are changing the way software is used. is   We aren’t entirely there yet but RIAs are reviewing their schematics, late at night, and are slowly taking over the software world and changing the model.  Like a ninja is Picnik.

Regarding Picnik, I can’t say enough about the simplicity, clean design that they have pulled off here.  The website and application have an identical brand.  The application is extremely responsive and acts like html sites would when it comes to text and forms. The integration of services, webcam, all filters in flash, on and on.  They really have a great team and it seems like they are both a great product team but also have the right quality. The new market is extremely agile, the paradigm is shifting.

AS3 Papervision 2.0 Alpha (GreatWhite)

Only a year after release Papervision is getting a major update to 2.0.

Get it while it is hot from the SVN server on google code: http://papervision3d.googlecode.com/svn/trunk/branches/GreatWhite

Papervision3D, launched a year ago, really sparked the AS3 and flash/flex world and inspired every flash guru I know into working on this code. There have been some great tools made and some fwa’s won but it is only the beginning.

I am mostly looking forward to performance enhancements, ascollada integration, culling and Andy Zupko’s 2d bitmap effects on 3d.

New features:

  • Faster!
  • ShadeMaterials
  • Shaders
  • ASCollada (animation support)
  • Frustrum Culling
  • Multiple Viewports (3d editor anyone?)
  • Render to Scene
  • and more!

SVN server and branch:

We do indeed like to ride the racecars!