Touch My Pixel Blog http://blog.touchmypixel.com Games + Web Tue, 02 Mar 2010 00:28:21 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Away3DLite haXe + Morphing http://blog.touchmypixel.com/2010/02/away3dlite-haxe-morphing/ http://blog.touchmypixel.com/2010/02/away3dlite-haxe-morphing/#comments Mon, 22 Feb 2010 08:21:15 +0000 tarwin http://blog.touchmypixel.com/?p=241 I recently started on a 3D Flash job and was chuffed to find that Cauê Waneck has been porting Away3DLite to haXe. Anyway, suffice to say I was super-happy that I didn't have to do any AS3.

What's there currently is a direct port of the Away3dLite library, but in haXe. It makes a big use of the AS3 (FP10) native Vector (Vectora<Float>) so it's quite fast, but not directly portable to platforms other than Flash 10 yet. As far as I can tell performance is the same as, or similar to the FP10 AS3 release, but Cauê has assured me that he's having fun optimizing it.

Away3DLite is missing some functionality that is in the full version, things that I need for my current project, including the Morpher and AnimatedBitmapMovieMaterial classes. The first I've ported myself and the second has been ported by Cauê (thanks mate!).

So, here's a demonstration of Morphing working: Morph Test and here's another: Mouth Morph Test.

And the Morpher.hx class.

I had a lot of trouble getting it working to start with but it's pretty easy once you get the ideas down. The main problem I had was the fact that neither the Collada object, nor the Object3D you get from it when doing .parseGeometry() has any vertices, so I got nothing when I passed it to the Morpher. What I'd missed is that I need to get one of the children from the Object3D that I get from the Collada .parseGeometry(). This is because, as Bartek Drozdz points out, "a Collada file represents a scene, not a single 3d object".

The next thing to know is that you should wait for the ParserEvent.PARSE_SUCCESS events dispatched from your Collada objects. When these are done you can use .getChildAt(0) on your .parseGeometry(colladaData) object to get a Mesh which you can then parse to your Morpher. In my example I have:

PLAIN TEXT
Actionscript:
  1. m0 = cast c0.parseGeometry(daeData1); // used to restet Morpher to original state
  2. m1 = cast c1.parseGeometry(daeData1); // the model that I scene.addChild(m1) to
  3. m2 = cast c2.parseGeometry(daeData2); // the model to Morph to

As you should notice I'm using the same daeData for both m0 and m1. I make my new Morpher passing it m1, then on each enterFrame:

PLAIN TEXT
Actionscript:
  1. mp.start();
  2. mp.mix(cast m2.getChildAt(0), (1 + Math.sin(Lib.getTimer() / 150)) / 3);
  3. mp.mix(cast m2.getChildAt(0), (1 + Math.cos(Lib.getTimer() / 250)) / 3);
  4. mp.finish(cast m0.getChildAt(0));

Hope that helps someone else, I was stuck for days :(

Tarwin
Yay my first post in months!

]]> http://blog.touchmypixel.com/2010/02/away3dlite-haxe-morphing/feed/ 0 Getting smooth verticle scrolling with flash http://blog.touchmypixel.com/2010/02/getting-smooth-verticle-scrolling-with-flash/ http://blog.touchmypixel.com/2010/02/getting-smooth-verticle-scrolling-with-flash/#comments Wed, 03 Feb 2010 02:11:05 +0000 tonyp http://blog.touchmypixel.com/?p=226 We are working on a top down racing game, where the background scrolls vertically. This soulds like something flash should be able to do - no sweat! I've run into two issues:

1 - massive screen tearing - as the whole screen is scrolling vertically

2 - fluctuations in the processing time of frames, causes non-smooth motion (i think)

Here is a simple test of black balls falling down the screen. You should see tearing on the circles, rending issues (the bottom of the circle is cropped off sometimes) and jumpy verticle motion. I've tested on various computers+systems & it seems the issues running from worst to best are as follows:

VIEW TEST - maximise the window for most shocking results

WORST
mac osx
windows 7
windows xp x64
windows vista
windows xp
BEST

To me it doesnt make much difference between firefox, ie, chrome. Most tests were run on QuadCore 2.5ghz comps. Except windows XP, which is P4 3.0, and macbook 2.4. - funnily the slowest comp (p4) ran the best.

It is quite common knowlege that flash doesnt perform any doublebuffering or v-sync, to fix screen tearing. UnitZeroOne has a great article on this. Luckily flashPlayer 10 has a new WMODE - DIRECT, which seems to fix the issue a fair bit.  According to adobe it: "The direct WMODE will use your video card to paint pixels to the screen as fast as possible while freeing up your CPU to work on other tasks"

This seems to have a few issues with rendering (for us thus far) But it is a LOT smoother. It seems that it shouldnt have too much of a speed decrease (like transparent/opaque) either, after looking at some tests

Circle test in:

Window

Transparent

Opaque

Direct

GPU

The final issue:

AS you can see, the motion is still not totally smooth in DIRECT mode. It seems that flash has issues with updating the frames at a constant interval, which is noticable when i want a constant scroll. I dont know if there will ever be any way to get around this.

any ideas?

download test source

Cheers! Tony

UPDATE:

I've made a new version which moves the balls based on time, rather than frames. It basically moves 300pixels/second. ~ the same speed as before. It doesnt seem to make too much differnce - sometimes you get large jumps as the time lapses, and then the balls need to catch up - so not a great fix, but interesting.

Window - Time based

Direct - Time based

download v2 test source (only haxe version is time based)

]]> http://blog.touchmypixel.com/2010/02/getting-smooth-verticle-scrolling-with-flash/feed/ 20 .net magazine (UK) Caching Animation in Flash/AS3 http://blog.touchmypixel.com/2009/12/net-magazine-caching-animation-in-flashas3/ http://blog.touchmypixel.com/2009/12/net-magazine-caching-animation-in-flashas3/#comments Wed, 23 Dec 2009 07:45:11 +0000 tonyp http://blog.touchmypixel.com/?p=221 For the upcomming article that Tarwin wrote for .NET magazine on Caching Animations in Flash here is a quick rundown & downloadable example.

The code is split into two classes:

AnimationCache

This is a very simple singleton class used to cache the rendered frames of any animation (MovieClip) that you want. All you need to do is call .cacheAnimation(identifier)  with the library identifier of your movieClip to store its frames in memory.

Animation

An animation displays the cached frames. You can retrieve instances from the AnimationCache via the getAnimation method. This will save memory, as each instance of the animation (if you have many jellyfish for example) will be referencing the same bitmap data. You can also create a new Animation(identifier), to create and cache a new animation from the library.

The animation class has similar functionality to MovieClip - play(), stop(), gotoAndPlay, etc.

To define the region that is cached (the first frame might be small, while frame 10 might be HUGE for example), you can define a 'bounds' clip. This is a child clip on the first frame of the MovieClip to be cached. It can also be used to crop an animation.

There are a few extra little features that we have in there that were used in scarygirl, you can find them out yourself ;P

Note: we have removed the queued caching system that we used in scarygirl, to simplify the code. If you are caching a lot of animations, you will need to look at ways to asyncronously cache frames. hint: think timeouts ;P

DOWNLOAD EXAMPLE HERE

cheers Tony

]]> http://blog.touchmypixel.com/2009/12/net-magazine-caching-animation-in-flashas3/feed/ 3 Box2D ContactPoint Filtering http://blog.touchmypixel.com/2009/12/box2d-contactpoint-filtering/ http://blog.touchmypixel.com/2009/12/box2d-contactpoint-filtering/#comments Mon, 14 Dec 2009 13:08:46 +0000 tonyp http://blog.touchmypixel.com/?p=210 I've just had the pleasure of spending 3 days rebuilding and battling with a box2d game i'm adding some features to, to realize that the main issue was that i didnt understand corretly how the box2d ContactListeners work.

When you create a custom Contact Listner, you extend b2ContactListener. this then recieved events Add, Persist, and Remove. these functions are called and a b2ContactPoint is sent as an argument. You are advised to store contact information and act on it AFTER the simulation step is completed. I foolishly thought that i could simply store the b2ContactPoint objects. WRONG!

you cannot store the b2ContactPoint sent to the b2Contactlistener functions. I've modified this page on the box2d site to stress this point. You must copy the contact information and store it in your own custom object as box2d reuses its b2ContactPoint object (storing it in a static var i believe). Not knowing this has cost me a lot of pain as my collisions were alwas *half* working, so i hope you can avoid it.

Contact Manager Class

To act on the collision events i wanted to store them in a useful way than simply in an array. It is useful to group them by their Bodies. I can get a list of collisions like:

PLAIN TEXT
Actionscript:
  1. contactManager.getContactPoints(ContactManager.TYPE_ADD, myBody1, myBody2);
  2. // returns an Array of ContactPoint objects

PLAIN TEXT
Actionscript:
  1. contactManager.getContacts(ContactManager.TYPE_ADD, myRigidBody);
  2. // returns a Dictionary with colliding bodies as the keys and Arrays holding
  3. // the custom ContactPoint objects as values. Very useful to get all bodies
  4. // colliding with a single object, such as your player.

If you set userData on the b2Bodies it can use useful to check this to see the type of the body (type of enemy for example) and call differnt code on your player to react to collisions.

PLAIN TEXT
Actionscript:
  1. package com.touchmypixel.box2D
  2. {
  3.     import Box2D.Collision.b2ContactPoint;
  4.     import Box2D.Dynamics.b2Body;
  5.     import Box2D.Dynamics.b2ContactListener;
  6.     import flash.utils.Dictionary;
  7.  
  8.     public class ContactManager extends b2ContactListener
  9.     {
  10.         public static const TYPE_ADD:String = "ADD";
  11.         public static const TYPE_PERSIST:String = "PERSIST";
  12.         public static const TYPE_REMOVE:String = "REMOVE";
  13.        
  14.         public var contactAdd:Dictionary = new Dictionary();
  15.         public var contactPersist:Dictionary = new Dictionary();
  16.         public var contactRemove:Dictionary = new Dictionary();
  17.        
  18.         public function ContactManager()
  19.         {
  20.             clear();
  21.         }
  22.        
  23.         override public function Add(point:b2ContactPoint):void
  24.         {
  25.             registerContact(contactAdd, point);
  26.         }
  27.        
  28.         override public function Persist(point:b2ContactPoint):void
  29.         {
  30.             registerContact(contactPersist, point);
  31.         }
  32.        
  33.         override public function Remove(point:b2ContactPoint):void
  34.         {
  35.             registerContact(contactRemove,point);
  36.         }
  37.        
  38.         public function registerContact(dic:Dictionary, point:b2ContactPoint)
  39.         {
  40.             var b1:b2Body = point.shape1.GetBody();
  41.             var b2:b2Body = point.shape2.GetBody();
  42.             if (dic[b1] == null) dic[b1] = new Dictionary();
  43.             if (dic[b2] == null) dic[b2] = new Dictionary();
  44.             if (dic[b1][b2] == null) dic[b1][b2] = [];
  45.             if (dic[b2][b1] == null) dic[b2][b1] = [];
  46.            
  47.             var cp:ContactPoint = new ContactPoint(b1, b2, point.shape1, point.shape2);
  48.             dic[b1][b2].push(cp);
  49.             dic[b2][b1].push(cp);
  50.         }
  51.        
  52.         public function getContacts(type:String, body1:b2Body) :D ictionary
  53.         {
  54.             var dic;
  55.             switch(type)
  56.             {
  57.                 case TYPE_ADD: dic = contactAdd; break;
  58.                 case TYPE_PERSIST: dic = contactPersist; break;
  59.                 case TYPE_REMOVE: dic = contactRemove; break;
  60.             }
  61.             return dic[body1] != null ? dic[body1] : new Dictionary();
  62.         }
  63.        
  64.         public function getContactPoints(type:String, b1:b2Body, b2:b2Body):Array
  65.         {
  66.             var contacts = getContacts(type, b1);
  67.             return contacts[b2] != null ? contacts[b2] : [];
  68.         }
  69.        
  70.         public function clear()
  71.         {
  72.             contactAdd = new Dictionary();
  73.             contactPersist = new Dictionary();
  74.             contactRemove = new Dictionary();
  75.         }
  76.     }
  77. }

You will need to make a custom ContactPoint class. I've only stored shape and body information, but you can store position, etc. - remember to use .Copy() on b2Vec's as to copy the value however.

PLAIN TEXT
Actionscript:
  1. package com.touchmypixel.box2D
  2. {
  3.     import Box2D.Collision.Shapes.b2Shape;
  4.     import Box2D.Dynamics.b2Body;
  5.  
  6.     public class ContactPoint
  7.     {
  8.         public var body1:b2Body;
  9.         public var body2:b2Body;
  10.         public var shape1:b2Shape;
  11.         public var shape2:b2Shape;
  12.        
  13.         public function ContactPoint(body1:b2Body, body2:b2Body, shape1:b2Shape, s2:b2Shape)
  14.         {
  15.             this.body1 = body1;
  16.             this.body2 = body2;
  17.             this.shape1 = shape1;
  18.             this.shape2 = shape2;
  19.         }
  20.     }
  21. }

It would be good to put the ContactPoint objects in a pool - to save instantiation.

cheers!
tonypee

]]> http://blog.touchmypixel.com/2009/12/box2d-contactpoint-filtering/feed/ 1 haXe MouseWheel on Mac OS X http://blog.touchmypixel.com/2009/11/haxe-mousewheel-on-mac-os-x/ http://blog.touchmypixel.com/2009/11/haxe-mousewheel-on-mac-os-x/#comments Thu, 26 Nov 2009 03:11:46 +0000 tonyp http://blog.touchmypixel.com/?p=202 So, mouse scroll wheel events still dont work [edit] In browser [/edit] on osx! its hard to believe, but true. Luckily i found a great SWFObject plugin + as3 class from PixelBreaker in his blogpost :

AS3.0 MouseWheel on Mac OS X

It didnt take too long to port the code across to haxe in order to add the finishing touch to our latest haxe/flash website City on a Hill.
NOTE: You should run the test through a server (eg. apache) to avoid annoying security issues.

Download the Source and Demo here

cheers,

Tony

]]> http://blog.touchmypixel.com/2009/11/haxe-mousewheel-on-mac-os-x/feed/ 2 Multiplayer Games in Flash http://blog.touchmypixel.com/2009/11/multiplayer-games-in-flash/ http://blog.touchmypixel.com/2009/11/multiplayer-games-in-flash/#comments Fri, 06 Nov 2009 04:53:01 +0000 tonyp http://blog.touchmypixel.com/?p=185 gorillaz

I've been having a little play with creating multiplayer games in flash. Its kinda like that basic game - Gorilla, or was that Bannanas? hmm... not as chunky gfx yet tho ;P

It sounds pretty easy at first - but is getting a little complicated - even with my small test. The haxe mailinglist has been helpful in getting me started with some good advice.

One approach is to use an authoritative server - where the server runs a simulation of the game. Clients then connect & post their user input to the server. The server will make changes to the simulation and then post back updates to the client(s) about what has changed/is relevant to the user. This is a solid way to ensure that each client is getting the same experience. A major downside to this approach is the greater server load associated with running a game simulation. Especially if the game is planned to run a physics simulation (eg box2d), then the processing would be far too great - especially if a game only supports 2 players, and therefore the number of simulations/players will be extreme.  A great upside of using haxe is that the game logic required to run the simulation on the clientside, can easily be compiled to the serverside target (neko, c++) to run the server. This will prove a MASSIVE bonus for creating authoritative multiplayer flash games.

The approach i've taken is to only run updates on the client side. There are 3 different systems running in the test:

Rotating a cannon

The keypress event is sent to the server with the new roataion, this new roataion is broadcast to all clients (including yourself) then the rotation is applied. This means that you should experience similar latency to the opposition. Which isnt great - but it is very simple. As it is linked to the 'cannon' update loop - events are fired to the server at the tick rate (60fps) which isnt great either - a 'rate' should be capped for updates.

Creating CannonBalls

The event to create a CannonBall is send to the server. This is so that the server can increment a 'count' of cannonballs. It is important the each client can identify each cannonball - for later destruction. This is the only authoritative part of the simulation. Each cannonball is also 'owned' by a certain player - meaning that that players simulation controls its motion. This is fine for the simple test, but i can see that if cannonballs 'owned' by one player needed to interact with balls owned by the other, then problems could arise.

Updating CannonBalls

So, each client updates the motion of 'its' balls, and boardcasts this to the other clients (via the server). This means that you have smooth motion of your own objects.

In a turn based game (what i'm looking at making) this switching of 'ownership' of the simulated objects should work reasonably well - the non dominant client will have a more latent, jittery simulation (as inaccuracies are fixed). Another option would be to run one of the clients as the 'dominant' or 'server' client all of the time. This would be similar to how quake runs when you run it on a local network (atleast how use used to run quakeworld - hah memories).

So now i'm loking at ways to reduce/account for latency - as i think that over the internet the test would run a little jumpy.

Running the test

compile the hxml file (install haxe/neko from www.haxe.org)

run the server.bat

open 2 instances of the bin/Gorillaz.swf

Download the game test

cheers Tony

]]> http://blog.touchmypixel.com/2009/11/multiplayer-games-in-flash/feed/ 5 Scarygirl – awards http://blog.touchmypixel.com/2009/10/scarygirl-awards/ http://blog.touchmypixel.com/2009/10/scarygirl-awards/#comments Tue, 06 Oct 2009 05:17:30 +0000 tarwin http://blog.touchmypixel.com/?p=164 Since Scarygirl's release we've had a lot of feedback, both good and bad, from the Internet at large. Happily it seems to make more people smile than it does rip their hair out and has been nominated for multiple awards, even winning a few of them! Here's a quick run-down. [Just a quick note, the Scaryigrl game not just our work - so kudos to everyone else who worked on it including Nathan and Suren!]

Nominations and awards

Scarygirl was nominated in four separate categories in the GDAA Game Developer Awards 2009 including Best downloadable title, Best Audio, Best Graphics and Best Game.

The first one, and probably the biggest in terms of being nominated, is the AFI award for "Screen Content Innovation". This was a new award this year and war announced earlier than the main awards for general film. The other people nominated included two produced by ABC TV and another by the Channel 9 Network, so we were in good company. Alas in the end we were beaten by the Gallipoli interactive; I guess you just can't fight war. Congratulations to them though as they created quite an amazing peace [sic].

Scarygirl also got nominated for "best of online games" by a UK/Ireland TV station called E4 (Scarygirl review). We didn't win that one either but people seemed to enjoy it at least and we were up against such amazing games as Mirror's Edge 2D and Closure.

The UK seems to love Scarygirl. Channel 5's Gadget Show put it in the top 5 browser games!

Scarygirl's first award was an FWA (Flash Website Award) on the 7th August. This might not seem like such an amazing thing to the general public but to Tony and myself this was one of the most exciting as we'd been looking at the site for years wondering when something we did got up there.

We also won the "Desktop Create: Digital Media" award. Yay! [Ed: Pics coming soon]

The 2009 HOW Interactive Competition just gave the Scarygirl game a merit award, thanks guys, and it's currently sitting as a finalist it got a bronze award in the 2009 London International Awards in the games category!

It's currently sitting as a finalist in the Games category of the 2010 SXSW Web Awards - here's hoping!

Scarygirl just won the Communication Arts Interactive Annual 16: Entertainment award.

Honourable mentions

Adobe featured Scarygirl on their Adobe Developer Connection as an inspiration Flash game. We got featured along-side our friend's game Bunni - so congradulations!

.net Magazine, a UK based web and design magazine, featured the Scarygirl game along with an interview with Nathan, Sophie and ourselves. In it they call Scarygirl "the best Flash game ever" - thanks! We also wrote a tutorial for the magazine explaining how to use bitmap caching to speed up animations. The same month Scarygirl was also featured in the Australian Desktop magazine.

As well as awards, and "we nearly got it" awards, there's been a whole lot of media coverage. Being in print is great to show your grandma, "Hey, Gran, see we do real stuff" so we were very happy to have a review in The Age Greenguide as well as in the Sydney Morning Herald. There was even an interview on one of The Age's blogs. There was also a lot of different

Online's been a little bit of a different story. With great responses to previews we got onto places such as TIGSource and IndieGames (thanks guys) we were super happy when we released it and managed to get it onto JayIsGames - only problem is that people just seemed to hate it there! This spurned us on to make the game even better with easier controls (especially under water). We even got featured on Gamasutra (thrice) and so did the music/sound designer Luke, even on their best game pick list! Kotaku (both AU and US) seemed to like us too with a headline "Go Play Scarygirl".

Gamertell put Scarygirl in the best 101 free games, calling it "one of the coolest games of 2010".

There are also a whole lot of other places (too numerous to mention / find) that mentioned the work so just a big shout out to all those people I forgot to thank for the promotion!

And the rest ...

It's pretty awesome, people are talking about it everywhere it seems. I'll post more links to articles as I see them.

guttersnipenews review - Top of the list of the reviewers favourite games.  A list that includes such greats as Samorost, The Path and Little Wheel.

If you're German (or live in Germany I guess), then you can vote for Scarygirl on the MTV Game Awards. Not sure what the "working class hero" award means, but we're up there will a very well deserving crowd I must say!

- Tarwin

]]> http://blog.touchmypixel.com/2009/10/scarygirl-awards/feed/ 2 Particles from haxe on the iPhone Simulator http://blog.touchmypixel.com/2009/07/particles-from-haxe-on-the-iphone-simulator/ http://blog.touchmypixel.com/2009/07/particles-from-haxe-on-the-iphone-simulator/#comments Wed, 29 Jul 2009 16:53:24 +0000 tonyp http://blog.touchmypixel.com/?p=160 Its exciting to see that the haxe C++ target is coming together, Hugh Sanderson who's the brains of the operation must be going grey early with all of the attention he's been getting on the lists. Today I've been looking at getting testing the iphone target, and due to my lack of skills in most things related to it, working on a mac, compiling on a mac, hating a mac, apologizing to the mac once it started doing its job, xcode, c++, etc, etc. Its taken me quite a while to have the penny drop, but in short IT WORKS!

sorry for the terrible video quality, its my old ericsson phone (maybe i should get an iPhone!??)

]]> http://blog.touchmypixel.com/2009/07/particles-from-haxe-on-the-iphone-simulator/feed/ 6 haxe’s 2.04th birthday! http://blog.touchmypixel.com/2009/07/haxes-204th-birthday/ http://blog.touchmypixel.com/2009/07/haxes-204th-birthday/#comments Sun, 26 Jul 2009 23:35:34 +0000 tonyp http://blog.touchmypixel.com/?p=153 Finally we've got the 2.04 realease of haxe! Its pretty momentus, as i've been waiting for it for about 2 months!

One big thing:  the compiler now officially supports the C++ platform. This includes Linux, Mac, Windows, iPhoneos, iPhonesim support. According to Hugh, there will probably be a few teething issues, but as of now i'd better get out of bed and see what we can make!

Here's what Nicolas has to say about 2.04

The full list of 2.04 changes

Cheers,

Tony

]]> http://blog.touchmypixel.com/2009/07/haxes-204th-birthday/feed/ 0 Deadsun: In development http://blog.touchmypixel.com/2009/07/deadsun-in-development/ http://blog.touchmypixel.com/2009/07/deadsun-in-development/#comments Wed, 22 Jul 2009 09:57:19 +0000 tonyp http://blog.touchmypixel.com/?p=148 We might start throwing up some tests of games we're working on. I hope it will be good to get some feedback - but keep in mind, this IS in development, so go easy ;P

So - whats deadsun? Thats the codename (hah how mysterious!) for my latest game, Tarwin is working on a few other things. It will hopefully be release on the iphone too (hence the format).

The sun is dead, and post apocolyptic radiation is pouring out of the sky. You need to gather it to your cities to power them. In this test, you can play with the mechanic of collecting energy from the black-holes which expel it. There will be more advanced levels to come, which involve protecting the cities, tba.

Use Keys 1-8 to flick between the levels.

NOTE: please view this on its own page (not with all other blog posts) as it probably will run slow otherwise - we are working on fixing this weakness of our blog.

UPDATE - I HAVE TAKEN THIS TEST DOWN UNTIL WE DEVELOP THE GAME.

]]> http://blog.touchmypixel.com/2009/07/deadsun-in-development/feed/ 12