UPC Racing Game

Just a quick post today.

We've just finished working on a racing game in flash for UPC, a big Cable internet company in Holland.

Technically the game is a nice mix of optimization and user (designer) friendliness.

My Collegue Martin Strieder was responsible for all the artwork, and I did the all the programming.

It's Actionscript 2 code (Due to time restrictions and my relative noob-ness in As3)

The game prerenders all frames to bitmaps for the scenery at runtime during the 'loader' you see after clicking "start". So the artwork in the FLA file are just vectors, no bitmaps, and are easy to modify in the timeline. (which is good for re-use of gfx building blocks)
This gave us a BIG performance boost during the game.

The opponents have a simple AI to keep the speed up and only do basic avoidance of eachother and the player (if they're behind you)

Since this is a pretty cpu intensive game, I've also added a framerate watcher, which will turn down the renderquality of flash a notch when it detects a low framerate.

On my develop and testcomputer (which is a lot slower) this meant that I could keep playing the game at 30 fps.

Click here to play the game

Let me know what you think :)

Opensocial Flash Example

UPDATE 6/18/2009 Hyves does no longer accept parameters in its opensocial xml-url's so the trick I describe below, won't work anymore.


One of our clients wanted a flash widget to be embedded by OpenSocial.
Try as I might, but I couldn't find a website that gave just a simple example of embedding a flash movie on your page/blog, without trying to communicate with it.

So I've searched around a bit more and got the code out of some existing widgets and I'm placing it here to maybe help some other people, who are also trying to look for a simple tutorial :)


In short, to make a widget for OpenSocial, you need to have an XML file that contains xml and javascript that actually loads and places the widget on the blog/community page you desire.

I've put up an example XML file Here

Example, Adding it to IGoogle

• In your Igoogle homepage, click on 'add stuff'
  
• then enter the url to your xmll file there.
  For example : http://tinustekent.whizzkid.nu/files/widget.xml
  

If you want to pass through parameters to your widget, you will need to make a script on your webserver which will put the needed parameters into the xml in the flashvars.
Note for Hyves users, Hyves expects the url to end with .xml
So it will fail when you put parameters in your url, but this is easily fixed if you just add &mode=.xml to your url.
The "mode" name doesnt matter, Hyves only checks the entire url-string to see if it ends with ".xml" :)


The xml for this widget (which is a little commercial for my comic site, plug plug):

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
<ModulePrefs title="Square and Circle" title_url="" description="Square and Circle" author="Martijn Croezen" author_email="sacwidget@whizzkid.nu" author_link="http://tinustekent.whizzkid.nu" height="190" width="160" scaling="false" scrolling="false" screenshot="" thumbnail="">
<Require feature="dynamic-height" /> 
</ModulePrefs>
<Content type="html">
<![CDATA[ 

<div id="wdiv__MODULE" style="width:190;height:160">Loading...</div>
<script type="text/javascript">
 function SetWidgetContent(div, content) {
      div.innerHTML = content;
    } 
     window.onload = function(evt) {
            var content = '<embed src="http://tinustekent.whizzkid.nu/files/widget.swf" width="190" height="160" quality="high" bgcolor="ffffff" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="" type="application/x-shockwave-flash">';
            var div = GetDiv();
            if (true)
            {
              SetWidgetContent(div, content);
            }
           _IG_AdjustIFrameHeight();
    }
 
 function SetWidgetContent(div, content) {
      div.innerHTML = content;
    }


function GetDiv() {
        return document.getElementById("wdiv__MODULE");
    }
 
</script>


  ]]> 
  </Content>
  </Module>
 

We're digital too

For those of you who can read Dutch, the tutorial Rob and I wrote for Webdesigner Magazine has now been posted online on their website.

Click here to see it.

We're in print

Our panocube component is now featured in the dutch Webdesigner magazine (although, it might appear in english too, keep me posted if you find it ;)


Rob has a picture up on how it looks :)

Check it out

Get the magazine if you want the full tutorial!

360 degree Panorama tutorial

I've been asked how I made the pictures for the PanoCube, so I've thrown together a short tutorial.

For the example image in the panocube demo I used a tripod and a normal digital camera on which I could lock the exposure time.

This is important because ground and air, or if you’re inside, the walls and windows/lights, differ quite a lot there.

If your camera automatically adjusts the exposure, the stitcher tool will have a hard time understanding this. (Autostitch doesn't handle this too well, autopanopro is more powerful in this respect, but if you can use the same exposure for every picture, you'll get better results)

Take pictures, rotating the camera a little after each one, make sure you have about 1/3 or 1/4 overlap with the previous picture. It takes me about 30 pictures to make 1 rotation.

When you’ve done a 360 degree turn, tilt the camera up a little (again 1/3 or 1/4 overlap), make pictures all around and repeat until you’re pointing all the way up.
Go back to the very first position and repeat that again, but this time tilting the camera down every round.

After you’re done, stitch them together with autostitch (free http://www.cs.ubc.ca/~mbrown/autostitch/autostitch.html ) or autopano pro (better than autostitch, but not free http://www.autopano.net/) this will save the file as pano.jpg.
Be sure to set the rendering options (resolution etc) before you load the pictures, because autostitch will start rendering immediately)

When the stitcher has finished, you’re got yourself a nice 360 degree panorama image. (Autostitch doesn't ask for a filename to render to, it will just create 'pano.jpg' in the same folder as where your original pictures are)
You can use this picture as-is in most panorama viewers (like PTViewer) but for our Silverlight Panocube, we need cubic projection images.

Don’t worry too much if you’ve got ‘holes’ in your picture right now, they’re hard to fix in this format.

As said, we need to convert it to a cubic projection format. I did this using Bixorama, you can download a trial here http://www.outerspace-software.com/bixorama.html

In bixorama, import the pano.jpg file as a ‘latitude longtitude’ file.
Press f6, or ‘view – single files’ and you should see the 6 sides of the cube.
Export these as ‘single files’ and you’re done.
The exported files are easier to fix if you have holes because now there’s no spherical distortion.

You can use these images in the example provided in the panocube post.

Have fun, and let me know what you think.
I'd love to see some examples of what you guys are doing with PanoCube :)

Panoramacube for Silverlight 2beta2

Rob and I have cleaned up the Panorama viewer code and made it into a Silverlight Component which can now be easily used in your projects.


The antialias lines have been removed using overlapping, which I've wanted to do for my first version, but hadn't gotten it right quite yet.

After seeing that Florian Krüsch pulled it off in his texture triangle control, I decided to give it another try myself and it worked!

Also added are camera and zoom functions so you can control the panorama from c#

Go to the project page on Codeplex

View the example if you have Silverlight 2beta2 installed.

Have fun!

Involuntary language change in FlashDevelop

This is more of a reminder for myself, but can be useful if you're a non-english developer who uses FlashDevelop :)

Due to some networking updates, I had to update my FlexSdk3 to the nightly build.
After installing however, the compiler errormessages I got in FlashDevelop suddenly where partially Dutch instead of English.

It was quite a horrible combination and so I needed to change it back to English badly, but unfortunately could find no documentation about it.

After asking on Adobe forums the answer was provided:

Change the jvm.config file and alter the line java.args line to this:

java.args=-Xmx384m -Dsun.io.useCanonCaches=false -Duser.language=en -Duser.country=US