Stage3d plus flash player 10 backwards compatibility
So while there are hundreds of cutting edge tech demos, sites and games being produced with flash player 11′s stage3d, it’s not always practical to develop for a player version before it’s reached a mature penetration rate. Given that flash player 11 was only released a few months ago it’ll probably be another few months before we see the 90% mark being hit. http://riastats.com/ puts it at about 63% at the time of writing this post.
That aside, it’s still quite tempting to disregard the above and set the minimum player version to 11, but we all know the client just isn’t going to let this fly. The obvious option is to create an swf for each target player containing the 3d engine code, then have your main application swf load the appropriate 3d engine swf. It’s a bit of a drag, as it’ll increase your work load, but it’ll get the job done.
a basic example of this can be viewed at:
http://labs.peteshand.net/stage3d_fp10fallback/
source can be downloaded from:
http://labs.peteshand.net/stage3d_fp10fallback/stage3d_fp10fallback.zip
Flash 11 Platform Game Prototype
you can view an early prototype for a platform game I’m building with flash 11, away3d and box2d below.
You can view the game in action here (Warming: there is no pre-loader).
I’ve been surprised at the speed in which I’ve been able to put this together and because everything is xml driven once the initial level, characters and game objects have been implemented content generation is going to be a breeze. You can view the xml here.
As stated above this is an early prototype, so there are plenty of things missing, for example the hero will probably stop walking when he isn’t moving 
and I’m sure most of what you see will change anyway, but just thought I’d share my progress.
Performance vs filesize vs fidelity
Performance, file-size and visual/audio fidelity is something every designer and developer should consider when creating content for the web. I can remember when I first started using flash it was all about doing as many cool and complicated on-screen concoctions as possible, regardless if the frame rate slowed to a crawl. However as I and the platform as a whole has matured I’ve found myself considering and weighing up the above to get the most out of every experience I fashion.
This post looks at a recent project of mine, which at face value appears quite simple, however behind the scenes there were a number of hurdles that needed to be overcome before the finish line.
you can view the final advertisement here (turn the sound on!)
So the basic idea was to have hundreds of coffee beans sitting in the leader-board banner at the top of the screen and an Espresso cup sitting in an MPU banner bottom right. When the user interacts with either banner the beans would begin to fall down, get ground up and coffee would pour into the espresso cup. Once this animation finished the user would be prompted to pick their favorite type of coffee, which would then transition the MPU banner to the users selection. Sounds easy enough right… Well yes… and no. The main problem with this campaign is that it was for McDonalds, they expects the finest visual aesthetics however we have very limited file-size and processing power to play with.
I first concentrated on creating a realistic looking bean. Seeing as the geometry involved is quite simple I decided to go ahead and make a 3d model of half a coffee bean. Then simply used Away3D to load it into flash.
Now rendering one 3D bean is all fine and dandy, however when you get up into the hundreds things start to slow down… like really slow down! can’t wait for the new upcoming low-level 3D API Mole Hill. Anyways for the time being the solution to this is pretty straight forward, all I did was load the model once and then take a Bitmapdata snapshot every 5 degrees when required, then each bean display object simply pulls and displays the relevant Bitmapdata snapshot.
The next challenge was to decide how these beans were going to animate. I wanted to make it as realistic as possible. The obvious choice would be to utilize one of the many as3 physic engines out there. I decided to go with box2d, however ran into problems almost immediately. The first issue was of course performance, as soon as I added more than say 40 to 50 objects everything really started to slow down (and I’m on a pretty fast computer). The second issue was that it was adding about 300kb to the file-size.
So how can I get rid of these performance and file-size issues while still keeping the resulting animation… Simple, get rid of the engine in the final swf. I created a new fla that setup a physic scene and recorded the position and rotation of each bean every frame (see above). This swf ran slow as hell (about 1-2 frames per second) however this didn’t matter as long as all the information was being captured. I then filtered the data, compressed it into a ByteArray and saved it as a data file ready to be embedded in the final swf.
This allowed me to simply embed this data file in the final swf, uncompress the data and animate all the beans without actually publishing with a physics engine. This approach resulted in a saving of 266kbs and a swf that played back easily at the target frame-rate.
Final Leaderboard by itself (should be 728×90 pixels, but i had to scale it down to fit in this post)
I will post a second part to this post covering the MPU.
Stay tuned.
First Person Interaction For Flash Please!
Update: This feature has now been added to flash 11.2. you can read more about it here: http://www.bytearray.org/?p=3755
———————————————————————————————————-
———————————————————————————————————-
While creating 3d environments within flash you are currently limited in the way you get user mouse input. In your traditional first person shooters moving the mouse will turn the view left and right, up and down. The problem you face within flash is that once the mouse hits the edge of the movie or if it is in full-screen mode, the side of the screen there is no way to receive mouse input as the mouseX and mouseY values to longer change, even if the user is still moving the mouse.
The first two videos below show methods which are achievable with the current functionality, the last video shows what would be possible if we had access to raw mouseOffset values.
AbsoluteDrag shows the view turning via the absolute location of the mouse. The problem with this method is that as soon as the cursor hits the side of the flash movie input stops.
AbsoluteClickAndDrag only turns the view when the user clicks and drags the mouse. This method continues to turn the view after the cursor has left the stage as long as the mouse button remains held down, however stops as soon as the cursor hits the side of the screen, it’s also not ideal for the user to always have to click and drag to turn as you would usually use the left mouse button as an action input (eg fire your gun).
RelativeDrag is my suggestion to this problem. With this extra functionality you could turn the view based on the raw mouse offset values, this way it doesn’t matter if the mouse is outside the flash movie or is even hard up against the side of the screen, the view will continue to turn. In the above example video this was achieved by opening a socket to a small c based program which broadcasts the mouse x and y offsets, however obviously you don’t want the user to have to download an extra program every time you use this kind of interaction.
Possible solutions:
1. Two new mouse properties: mouseOffsetX and mosueOffsetY, which would give you the displacement of the raw mouse data in the X and Y. These properties would output the raw offsets regardless of if the mouse was against one side of the screen or outside the stage.
2. Another option would be to make the mouseX and mouseY properties read/write. I realize there are potential security issues surrounding this approach as I am sure malicious sites would steal the users cursor, however if this was only available in full-screen mode or the user was prompted with a message similar to the microphone access message this approach could work.
The flash player team must be extremely busy with other issues, however this would be a really helpful addition to the player that would really open up the possibilities for 3d gaming environments.
If you think this added functionality a good idea and would like to support the request please visit the below url and cast your vote.
http://bugs.adobe.com/jira/browse/FP-4523
Cheers
Read More
Recent Comments