Whizzkids corner

rcBoats

2011-04-26T10:10:00.003+02:00

Our latest iPad game has been approved and is now for sale on the appstore!

rcBoats for iPad.

It's a fun little 2 player game where you can boat around in your own virtual pond.

Game idea, graphics, sound and programming all done by me :)

Don't forget to give it a (good) review if you pick it up ;)

Here's some screenshots:

Air for iPhone - loading external .swf files

2010-12-03T13:45:00.003+01:00

If you are creating apps for iPhone with Air, you might have the need to load external .swf files.
In my case, it was the need to be able to have downloadable content.
I can't really think of another reason why you would want to do this, normally using .swc files is the way to go.

Anyways..

When you want to load an .swf file from an Air for iPhone application, there's some things you need to know.

Your .swf file cannot contain ANY actionscript whatsoever. Symbols in your library must also NOT be exported for Actionscript.

Adobe's documentation states that the scripting will simply be ignored, but that isn't exactly accurate.

If your .swf file contains Actionscript, the entire load will be ignored.
Which means you won't receive an Event.COMPLETE or even an IOErrorEvent.IO_ERROR when you try to load the file.

So, with no symbols exported to actionscript, all you're left with is animation on the timeline.

But I wanted to use it like a kind of library, where you could neatly pack all your graphics and animations and sounds in 1 swf, load it, and use the assets in your main program.

I've created a basic class to help with this.
Download StageLibrary with example project (flashdevelop)

This also works for android, but you have to change the path of the swf file.
Convenient if you create apps for android and iPhone that use the same assets.. if you're only creating android apps, you don't have the .swf scripting barrier that Apple enforces and can use library symbols like you usually do.

To create a swf file that will work with this class, create a .fla file of 1 frame in size.
and place all the symbols you want to use on stage and give them an instance name.

If you want to create a soundclip, make a movieclip, keep frame 1 empty, and place your sound on frame 2, making sure to add enough frames for the duration of the audio. If you don't add the extra frames, you wont be able to detect when the sound stopped playing.

StageLibrary takes care of loading the swf and collecting all instance names and allows you to quickly 'grab' a clip from stage, to use somewhere else in your app. (You can simply addChild() a clip from the library to your own stage/displayobjectcontainers)
I've also added a function to easily play a sound clip, that also has a callback when the sound is finished.

You can't reuse an object though, you aren't creating new objects, you're just moving them from stage to your app.
You can put more than 1 instance of a symbol on stage though, just make sure you give them a unique instance name.

It is also possible to use more than 1 frame in your main movie, but this has the effect of killing all animation of your objects (except for subclips with animations)

Check out the example project. It should be self explanatory, I even commented the code!
If not, post your questions/remarks here and I'll see what I can do :)

Thanks to Renaun Erickson, Seb Lee-Delisle and Joe Chung.

Also check out Renaun's blog entry with another loading example which helped me figure out what was wrong here

And finally, for those of you who like to tinker some more:
I've found that you CAN create multiple copies of an object on stage by changing frames of your main animation.
get a symbol from stage, go to frame2, go to frame 1 again, now you can get that same symbol again, and now you have 2 yaay.
Unfortunately, it screws up the animation in your object, except for subclips. But it could be useful to know ;)

Happy coding!

Raceportal, our 2nd iPhone App

2010-10-22T10:57:00.003+02:00

Hey people,

Another quick note to let you know that our 2nd app "Raceportal" has been approved for the appstore and is now available to buy :)

Check it out here : http://itunes.apple.com/app/raceportal/id396109306?mt=8

My first Iphone App

2010-09-14T13:01:00.004+02:00

Just a quick note to tell you guys that my first Iphone app is now available for free on the itunes appstore.

click here to download

It's a webcomic reader for Dutch webcomic artists (some comics can be in English)

Artists can upload their comics on my website webcomicsnl.omg.bs and get their comics featured in the app :)

Hope you guys (those of you who have iphone/ipad's or ipod touches) enjoy it :)

Definefont error

2010-08-16T10:08:00.002+02:00

Changing the look and feel of a game I developed in FlashDevelop, I suddenly got the following error when trying to compile the project in FlashDevelop:


WARNING: end of tag DefineFont3 is @55343, should be @58327
Build halted with errors (swfmill)."

To make a long story short, this was caused by a textfield that didn't embed any characters. Thanks to Philippe for providing the answer.

So, If you get this error (the numbers after the @ will probably be different) check your movieclips for textarea's without embedded characters.

And to make this short story a little longer: (for those of you who are still reading ;)
My problem in finding this was that I used 1 font library, and had all my textarea's set to use that as the font...
But I still had 2 buttons, with the same font, but not using the font library.
So the error occured when I changed the font in the library.
Now the 2 buttons didn't share a font that other textarea's used, and had characters embedded for them.

And due to the fact that it wouldn't compile, I couldn't visually verify all textarea's to be the same at runtime.

Click here to see my thread about it on Flashdevelop.org.

Lightning strikes!

2010-07-11T23:45:00.002+02:00

I bought a Casio Exilim EX FH-100 camera a while ago because it could shoot video at highspeed.

Yesterday we had a pretty heavy thunderstorm here in the Netherlands, and it turns out that you can make some pretty nice video shots of lightning with the highspeed camera function. check it out : http://tinyurl.com/37gccks on youtube.

UPC Racing Game

2009-04-08T13:50:00.004+02:00

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

2008-11-19T17:42:00.007+01:00

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

2008-09-15T16:31:00.004+02:00

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

2008-07-22T21:40:00.002+02:00

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

2008-07-15T09:47:00.004+02:00

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

2008-06-19T17:18:00.002+02:00

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

2008-05-30T16:15:00.003+02:00

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

3 x 3 ledcube simulator

2008-05-22T00:52:00.006+02:00

A friend of mine is making a 3x3 ledcube (see video) and asked me to write a little routine to do a snake in a 3x3x3 matrix.

I came up with a quick 'n dirty random snake routine, which is kinda like the routine I used for my 3d cube demo

To see what it looks like, I've also thrown together a little 3x3 led emulator :)
3x3 ledcube snake

And you can check out the source if you want (nothing fancy) here

Render to Texture, or Texture baking in 3dStudio max for Papervision3d

2008-05-02T10:58:00.010+02:00

Here's a small tutorial on how to Bake a texture in 3d studio Max (2009) for use with papervision3d.

Show the result

First off, let me state that I am not particularly skilled in 3dMax, I'm more of a lightwave person myself, but since Lightwave cannot produce content I can use in Papervision, 3dMax it is :)

This tutorial shows you how to do Texture baking very basically. It doesn't go into Mental Ray or Vray. It's just to show you how its done, so you can use it as a starting point for more detailed experimentation :)

I'll sum up the steps I do to make objects, light them and render them to texture. I've tried to use Mental ray and Vray too, but today for some reason 3dMax only wishes to spit out completely white texture maps, while it displays them correctly in the render preview window.

We'll be exporting our scene as a .3ds file, because I've tried using Collada export (using http://www.feelingsoftware.com/ 's Collada exported. But as soon as I started baking textures, my scenes won't render correctly.

Step 1 - make your model

I've created 3 boxes and an omni light. In this Tutorial I haven't given them a material, this will be automatically done when we're baking the texture. You can do this manually as well if you wish.

Step 2 - Set the filetype to PNG
You can skip this step if your 3dMax already renders to PNG, or if you like using .TGA's and arent using Papervision3d :)

In my setup, 3dMax automatically renders all files as Targa (.tga), but I want to use PNG's which Papervision can read so we need to change this.

I use the following method.
1 - select only 1 object in the scene.
2 - open the "Render to Texture" dialog (press 0)
3 - under "Output" Delete any entries if present.
4 - ADD a "Diffuse map"
5 - click on the dots-button to the right of "File name and Type"
6 - Select a filename, and select PNG as a filetype.
7 - After the file dialog is closed, you'll see that the file extension is .png now.
8 - Delete the output entry again, 3dMax will now save .png's as default when you create new Output maps.

In my case, 3dMax only goes back to saving .tga's after the program has quit/crashed and has been restarted. So If you clear your scene, and render to texture again, the output should still be .png and you can skil this step.

If there's a setting somewhere where you can change this in 3dMax, please let me know :)

Step 3 - Render to Texture dialog

Select all your objects on stage and press the 0 key, or use the menu "Rendering - Render to Texture" to bring up the "Render to texture" Dialog.
Here you can select where your textures will be saved.
Because you selected all your objects, they should all appear in the "Objects to bake" tab. If the list is empty, you apparantly havent selected any objects.

Make sure "Use Automatic unwrap" is selected. You can also use manually created UV-mappings if you wish (Make sure to set it to the correct channel if you do), but this example has no UVmapping yet, so we'll leave this to Automatic.

Step 4 - Selecting which type of map
Make sure "All selected" is checked, because we want to make a map for every object in the scene.
Click on the ADD button, and select "Diffuse map"

Since we'll be exporting to .3ds, you need to know that 3dMax automatically renames texture filenames to a 8.3 filename type. So that means 8 characters for the filename, 3 for the extention.
This is a problem, because our baked textures arent limited to that specification and will happily render out to filenames that won't fit in this scheme.
Result : Your 3ds file will want to open box01Dif.png while your texture was rendered to box01DiffuseMap.png.

To fix this we do the following :
1 - Make sure your object names are smaller than 8 characters.
2 - In the "Selected Element Common Settings"-tab, clear the "DiffuseMap" from the 'Name' inputbox.

So your window should look like this:

Select the map size you want, we'll use 256x256 in this tutorial.

Step 5 - preparing the render
Select "Output into Source" and "Keep Source Materials"

This will replace the material of your objects when you bake the textures. We need this because we'll be exporting this scene, with the baked materials for Papervision.

Also select "Lighting" and "Shadows" in the "Selected Elements Unique setting" tab.
This will enable the texture to be rendered with, you guessed it, shadows and lighting :)

Step 6 - Render the texture
This is the easiest step.
Click on "Render" and wait for 3dMax to finish.

Step 7 - Export to a .3ds file.

All done in 3dMax, if you take a look at your Materials editor, you can see that the materials now contain texturemaps with lighting and shadows.
If you dont see your materials, select an object in your scene and click on the eyedropper button to get the material from the object.

Finished.
You can now load your .3ds file into your Papervision flash, make sure it knows where to find the texture images, and it should work.

I've included a small example, made with FlashDevelop.
Click here to download it

I've found an error/missing feature in the 3dsParser in papervision. Apparantly a "LOAD_COMPLETE" event was missing from the 3dsParser, so I've added that.

To do this, edit org.papervision3d.objects.parsers.Max3DS.as


and change the OnFileLoadComplete function to : 

 private function onFileLoadComplete(event:Event=null):void
  {
   var loader:URLLoader = event.target as URLLoader;
  
   parse(ByteArray(loader.data));
   // added by whizzkid
   var fileEvent:FileLoadEvent = new FileLoadEvent( FileLoadEvent.LOAD_COMPLETE, filename );
   this.dispatchEvent( fileEvent );

  }

And if you're not using FlashDevelop, manually add the following import as well:


import org.papervision3d.events.FileLoadEvent;

I've included this file in my example.

This is my first tutorial ever, so please let me know what you think about it, and if you find an error or have any suggestions, leave a message :)

Regards,
Martijn

Texturemapping in Silverlight 2beta1

2008-04-03T10:59:00.007+02:00

Click here if you want to see the example and skip my development log :)

A while ago I was asked the following: "Can you make a 360 degree panorama viewer in Silverlight?"
Naively I answered: "I think so, I have the sourcecode for a texturemap routine in Flash, and that should be reusable in Silverlight"

Sounded easy enough, but unfortunately I was wrong.

My colleague Rob Houweling helped me get started in Silverlight and helped me out when I got Stuck in C# and I set off to work in Silverlight 1.1a

Now Flash does not support texturemapping, but you can fake this with some clever routines. Seb Lee-Delisle explains how this works visually

I have Flash sourcecode that does just that. This code unfortunately uses 2 matrix calculations, Matrix.invert and a concatenate function which simply arent supported in Silverlight.
(Hmm, I also just discovered that there's a newer version of this class which does not use these calculations, and could have saved me a lot of work.. ahwell, live and learn.. Anyway, it still uses 2 matrices though)

After porting the code and adding my own invert functions, I discovered that the matrix transformations in Silverlight had a big bug. When using the exact same matrix that Flash uses, Silverlight didn't draw the transformation correctly, It seemed that matrix accuracy was completely incorrect. Using Javascript and silverlight, you apparantly don't have this problem. See Kit3d. But Javascript is a lot slower than c# so that was not an option.

Did you ever notice that several people started working on 3d engines in c#, got as far as flat-shading and then development halted? I think this is because of this lame Matrix-problem..:)

Anyway, we decided to wait 2 weeks until the release of Silverlight 2.0.
Now the matrix worked properly and I continued work on the texture mapper.
Unfortunately I couldn't get the function to work with 2 matrices. All the output was simply wrong. So I decided to try again and see if I could write the same code with only 1 matrix (inverting + concatenating 2 matrices also results in 1 matrix, so this should work)

I found some code that did exactly that, but the code was next to unreadable and had a weird coordinate space that was unusable for me so I simplified the heck out of it and modified it to suit my needs.
That worked!

I now had the correct output.

I could split up my texture in triangles, and plot them back to the screen, as long as I didn't rotate anything.
Which is not quite right.

This had to do with the way Silverlight draws out transformed bitmaps, it uses the topmost and leftmost pixel coordinate to start. Flash uses the first pixel you draw in your shape.

Luckily this was solveable by checking for this location and changing the texture's offset.

After this was done, creating a panorama viewer (a 3d cube with an observer in the middle) was quite easy.

Online Example
So Ladies and Gentlemen, without further ado I now present:

The (to our knowledge) first 3d texturemapper in Silverlight using C#

Panorama viewer in Silverlight 2.0

You need Silverlight 2beta1 get it here

I've also put up the sourcecode here.
(Mind you, the code is quite messy and not optimised.)

Please let me know what you think.

And to all 3d-engine coders out there, go on, add texturemapping!
(and fix my code, because its probably crap ;)

One problem still remains as you can see in the panorama viewer. Silverlight insists on anti-aliasing. This Cannot be switched off. So we're stuck with ugly white-ish lines around every triangle we draw.

I've tried fixing this by making the triangles overlap slightly, but havent pulled it off quite right, it distorts the rendered image, so I gave up that attempt.

Microsoft, please fix this, it's annoying.

Regards,

Martijn

3d Cube Space

2008-02-25T23:10:00.005+01:00

Here's my second Papervision3d routine.

This is actually the first time since school that I used linked lists. wow.
My first attempt had a garbage collection problem, in that it didn't garbage collect, so the memory usage just kept growing, eventhough Flashplayer should've kept it in check. Gotta dive deeper into that, cuz this stuff is fun :)

I've solved it by recycling the objects in my list, works fine and is probably not as memory-fragmenting as the 'correct way'...

It's probably been done before, you know, snake, but now in 3d- whee... But it has not yet been done by me, unil now. :P

Click to view

Oh yeah, I've made this using FlashDevelop, and I like it, so I'm gonna use it more in the future :)

Let me know what you think

Papervision test

2008-02-21T11:59:00.003+01:00

For some reason I'm really crap at finding documentation about stuff online.

So it took me a while to download Papervision3d, and get started, but as soon as I got the sources installed I was ready to go to mess around a bit, and finally make this little test.

Simple papervision scene navigation

You can navigate around the scene using the cursor keys, press shift and left-right for strafing, and if you press space you go up :)

Unfortunately, after I made this, I found out that the source I downloaded from the papervision site was the OLD version of papervision. V1.5 or something, while 2alpha was already out. But for some reason, not available on the papervision site itself.

Or.. i was just looking in the wrong spot?

Anyway, I had to download the new version from Ralph's blog

Haven't been able to mess with it yet though, hopefully soon :)

I've setup FlashDevelop at home now, which looks promising, but haven't gotten round to using it yet.

int bug

2008-02-07T10:37:00.000+01:00

I found a little bug in actionscript 2, which apparantly has been fixed in actionscript 3 but which I found funny enough to show you guys.

Trying to fix a bug in an older source, where I took part of a symbolname "Button037", and cut out the 035 part as a substring, which I then used to flip to some page in a pageflipper component.
After the pageflipper bugged out (trying to add 5 to "037" which ended up with "0375" instead of 37 ..duh, I know) I put an int() around the value I got from the symbol name.
(Never having looked at the manual entry for int() but beeing used to its function from ASP/vbscript, I didn't know it was deprecated and I should use Math.floor() instead ...lesson learned :)

Anywho.

Whats the bug you ask?
Well.. If you use int() to convert a string to a number, it doesn't always work correctly in actionscript 2.0 if you have leading zero's.

trace(int("037")); returns 31 for example
I plotted the values out in a graph to see if there was some kind of pattern to it, and there was. Click here to see it

Sourcecode for that is:


_root.lineStyle(1,0x000000);
for (intT=0; intT<400; intT++)
{
 trace(intT + " : " + int("0" + intT));
 _root.moveTo(intT,0);
 _root.lineTo(intT, int("0" + intT));
}

Anyway.. it's fixed in actionscript 3, and you shouldn't use int() anyway, but hey, it might come in handy to know this if you're still using int() in your code, and it doesnt work the way it should :)

Edit : My Collegue Hugo asked if Number() had the same bug. Apparantly it does, BUT. its not what I thought it was.

When you use Number() to convert a string to a number, you can use a leading zero to indicate you're using an OCTAL value just like 0x denotes a hexadecimal value.

So the bug actually isn't that int() works incorrectly, but that the manual doesn't say that you can use a leading 0 to indicate an octal value.
So why does it seem to be 'fixed' in as3.0? Well, you can use octal notation in as2.0, but this doesnt work anymore in as3.0.

Not sure why anyone would want to use octal notation, but to prove this, try this little example in as3.0 and as2.0


for (var intT=00; intT< 020; intT++)
{
trace(intT);
}

as2.0 will count to 15
as3.0 will count to 19

Water ripple source

2008-02-02T01:02:00.001+01:00

Here's the sourcecode for the water ripple effect.
Let me know what you think.

Download source

Have fun!

Comment mails

2008-01-31T11:35:00.000+01:00

I thought I had turned on the 'send me an email when someone comments' but I hadn't. Silly me.

(Not that a lot of people comment on my posts yet... hint hint. ;)

So, sorry pCreate, I didn't see your comment until now. But I will post the sourcecode for the water-ripple when I get home tonight :P

Particle Fun

2008-01-26T15:55:00.001+01:00

Using particles is fun, I've started working on my own Particle class for as2.0 (WHY as2.0 ? well, we have fidgety customers who still demand flashmovies in flash 8 or even flash 7 or 6 to be published by us :( )

Instead of the usual fireworks, sparks, explosions, clouds, etc, I've put together a small pseudo-game that was only meant for my collegues to show what other stuff you can do with particls. I've created a small game with it.

What it does :
- star particles, that move according to the relative position of the mouse compared to the middle of the screen. And that stretch to fake a motion-blur effect as they go faster.
- fake depth, slower stars are less bright.
- asteroid particles, which are the same as star-particles, but they dont rotate and stretch.
- missile - a plain particle with movement that gets shot out from the spaceship when you press the mousekey.
- spaceship - asteroid collision detection... hit an asteroid, and boom. your ship will explode in a fiery explosion... well it would have, if i had any graphics skills ;)

What it does NOT do:
- garbage collection. leave the movie on too long and it will just slow down your system :)
- the missile is just for show, it wont hit anything, and the movement is not correct. To have 'working' missiles you'd need to make the coordinates and speed in 'particle space' relative to the spaceship, take velocity into account etc... this is just a particle that moves like a rocket... as long as you dont turn away after you've fired :P
- no score or anything.
- 'tis just a particle demo.

Iso, Particle, easing and water

2007-12-15T00:36:00.001+01:00

I've wanted to do some AS3 stuff, never got round to do it yet so I finally set down and created this little thing.

Click to view

It shows 5000 little isometric bar-type thingies. and if you click and drag on them, they will simulate water ripples.
The bars ease to the ripple-data to make it all wobble around a bit smoother then by just using the ripple effect.

There's some bugs if you splash around too much at the top and bottom, but I couldn't be arsed to fix it. I'm coding this with my laptop actually on my lap, and its not the most convenient way to code thats for sure :)
Let me know what you think.

I got the water ripple routine from here

A Game with Balls

2007-11-21T00:58:00.001+01:00

For a new type of Prodent toothpaste, we've made a game where you walk around a club/disco trying to pick up girls or guys (yes, we're gay-friendly :)

Your breath smells, because you didn't brush your teeth, whenever you touch someone, they pass out from your death-breath and you lose a life. But when you pick up a tube of toothpaste, or a Menthol-ball (ahh.. 'a game with Balls' now I get it) then you can approach the guys or gals and 'score' but be careful, your fresh-breath only lasts a small amount of time.

Everytime you score, more characters come into the club, so the place just keeps on getting busier.

The characters in the game move around the club semi-randomly, with a very simple route-planning logic.

Basically, they pick a random direction and distance to walk to, then check if that trip is actually reachable (no obstacles in between), and if it is, walk to the new location.

I've used a bitmap to also guide the characters around the club, and made them follow this path roughly 'most of the time' while sometimes they pick a completely random destination. This way you don't get characters walking around the club in the same way all the time.
In this bitmap, I colored the pixels in a certain way, using the Blue value to tell the characters where they should move (or color 0 = not allowed to be here)

0x000011 means, move right
0x000022 means move down and right
0x000033 means move down
etc.

Usin this bitmap means that you dont have to draw a lot of obstacles and do collision detection on those to make sure the character only go where they're supposed to, and not walk through walls for example. Now I can just check for a pixelcolor, which is a lot faster.

To play the game, first, pick if you're a boy or a girl, then pick if you like boys or girls.

Move around using cursor keys, press space to pick up a tube of toothpaste or menthol ball.

Play the game : A game with balls

And let me know what you think :)

Mokpads sjoelen

2007-11-21T00:52:00.000+01:00

For Kanis&Gunnink (a big coffee brand in Holland) we made a shuffleboard-type game using basic physics. The game also shows the 2 spokespersons for this brand (known in Holland from the tv-commercials) who watch your game and give funny coments while you play.

The game controls are (I think) very intuitive. you pick up Mokpads (Coffee pads for big mugs) and throw them using the mouse.
This way, you don't have an abstract 'place the pad on the board, then aim, determine speed of throw, and throw' like you usually see in games.

The goal is to slide the pads into the little slots at the end.
There's also a special glowing Mokpad, which is heavier, and is more slippery. Also, you can use the talkcon/chalk can, to make the board smoother, so your Mokpads don't slow down so fast.

This game also lets you challenge a friend by E-mail, and after your friend played, you get the result back so you can put on you own little leage.

Oh and that hand you see in the game, thats mine, altered a bit to make less hairy and stuff :P

Play the game : Mokpads sjoelen

And let me know what you think :)

First!

2007-11-21T00:28:00.000+01:00

Hi and welcome to my flash-blog.

After attending Flash on the Beach 2007 in Brighton, I've met some new flash developer friends, who showed interest in what I made, and asked for my blog address, which I didn't have at the time..

I've been wanting to put some of my work online, maybe even write a tutorial or two, but I needed a website for that first and I never got 'round to making one.

Then, at Flash on the Beach, my new friends pointed out to me that I should just signup for a free blog somewhere and start putting stuff online, without having to write a whole new website for it first :)

So here we are.

I shall now make some posts about the last couple of games I made at work.
Artwork is usually not done by me, we have our own skilled artists at our company, I just do the coding bit :)