Air Hockey

airhockey  

Chrome Experiment

800×600 (WebGL)

Full size (WebGL)

O3D

This was my first 3D game, if you can call this one, more about this later. I worked on the Air hockey in game in “Master All Classics” on the Nintendo DS which was 2D. It turned out to be something very different from air hockey, the table was somewhat hexagonal due to legal issues and the controls were bad, which was solely my fault. Overall that game sucked.

When Google launched a new 3D plug-in “O3D”, now deprecated, I decided to try out something using it. I first thought of making Pong, but dropped the idea. I had used Box 2D physics engine in the DS game and the physics demo of O3D looked was really cool, so I decided to make a better Air Hockey game and redeem myself. I created a table and some silly art in 3D max. Later a 3D artist friend of mine Roshan created the amazing looking table and background with baked lighting. With these looks I decided to submit it to the Google O3D gallery and they accepted it, but our bad luck they shut down the project before it got hosted. I even made a facebook app, which doesn’t seem to work anymore, thanks to constant facebook api changes.

When WebGL was supported in browsers I decided to try out something. I looked up the new O3D WebGL implementation which I thought would be easier to port the game into, but they it didn’t look that convincing. Three.js looked like the engine of choice for many WebGL demos and the api was very simple too, I went ahead with it and porting the basic game took me 2 days.

Now some technical details, the game is basically 2D and works on the XY plane and uses Box2D physics engine. I think many games can be made using a 2D physics which has lesser impact on performance than a 3D physics engine. The code is in java script, you can download a full screen zipped version here. I haven’t done much work in java script and HTML so the quality of code isn’t really good, and this is not how a complete game should be written. I didn’t use the internal ray casting for moving the user mallet as there was significant drop in performance on the O3D (deprecated) version. It just checks for intersection of the mouse ray with the XY plane on which the table lies. I had some minor issues importing the 3D model from 3D max to Three.js, rest was smooth and I had to let go of the UI, maybe I will add UI in HTML on a later day and complete the game.

Firefox doesn’t allow cross-domain textures and if you want to test demos with textures in firefox on local machine it best to set security.fileuri.strict_origin_policy in about::config to false. Sometimes WebGL doesn’t work on some machine even on firefox 5, setting webgl.force-enabled to true helped.

Update:

Pantelis Kalogiros has modified the demo into a full game with menus and customizations for his kinectJS demo, this is truly a awesome work by him. Check it out here: http://kinect.childnodes.com/

Air hockey WebGL @ Mobile World Congress 2012 – Barcelona by Webinos, details here http://webinos.org/blog/2012/02/25/webinos-demo-series-6-air-hockey-webgl-gaming/

 

7 thoughts on “Air Hockey

  1. Только что играл.Очень красивая графика,и интересно играть.Нехватает только табла.

  2. Rinesh: As someone has already pointed out, if you move the mouse fast enough, the holder passes right through the puck without affecting it. I’m trying to build my own version of this game (with my own physics implementation), and have been trying to tackle such problems.

    Great work, nonetheless!

    1. I am using Box2D-javascript’s mouse joint to move the mallet around, also the bullet property for the puck is set, which is used for solve tunneling problems with fast moving objects. Also this is a older version of the Box2D engine. Nice to hear you are implementing physics on your own.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>