tag:blogger.com,1999:blog-79686066596058663432024-03-09T18:45:15.472-08:00Adventures in Independent Game DevelopmentAnonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.comBlogger21125tag:blogger.com,1999:blog-7968606659605866343.post-70682944445535500402013-06-13T21:23:00.004-07:002013-06-14T09:23:18.054-07:00Making a game with Keita Takahashi at Funomena<div dir="ltr" style="text-align: left;" trbidi="on">
I can finally talk about the super exciting stuff that I've been working on in the past few months!<br />
<div>
<br /></div>
<div>
I have been helping Keita Takahashi's prototype his next big game!! Along the way we joined forces with Robin Hunicke and Martin Middleton of <a href="http://www.funomena.com/" target="_blank">Funomena</a>. Robin and Martin worked on Journey before they formed Funomena as an independent game studio. </div>
<div>
<br /></div>
<div>
So today Robin and Keita announced the game at <a href="http://horizon.venuspatrol.com/" target="_blank">Horizon</a> - the first year of indie press conference in parallel to E3. Here is the <a href="http://horizon.venuspatrol.com/games/funomena/" target="_blank">short Q&A</a> of the game at Horizon and here is the <a href="http://www.funomena.com/2013/06/new-faces/" target="_blank">blog post</a> at Funomena.</div>
<div>
<br /></div>
<div>
Now that I've gotten the basic info and links out of the way - I am so excited about this coming together!!!</div>
<div>
<br /></div>
<div>
This all started at the Babycastles Summit last year when the folks at Babycastles asked me to help out implementing one of Keita's ideas for the summit - <a href="http://mario%20ball%20with%20keita%20takahashi%20and%20kaho%20abe%21/" target="_blank">Marioball</a>. We kept in touch and one day he asked me whether I can help him prototype an idea and that's what we have been doing since then. (The full story in a later post maybe as we reveal more stuff about the game).</div>
<div>
<br /></div>
<div>
I just want to end this post saying this - Collaborate and do amazing stuff!! I used to sit in a room and try to make games on my own and I wasn't getting anywhere. As soon as I started collaborating with various people amazing things started to happen. And it has finally led to this.</div>
<div>
<br /></div>
<div>
A new adventure begins.</div>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.funomena.com/wp-content/uploads/2013/06/Yay.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="194" src="http://www.funomena.com/wp-content/uploads/2013/06/Yay.png" width="320" /></a></div>
<div>
<br /></div>
<div>
<div style="text-align: center;">
(Keita's concept art of the Mayor and his Deputies celebrating)</div>
</div>
<div>
<br /></div>
</div>
Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com2tag:blogger.com,1999:blog-7968606659605866343.post-38842725956731535202013-04-13T22:03:00.000-07:002013-04-13T22:10:44.817-07:00Update Omnibus<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Wow - Lots of things have happened in the past three months but I hadn't taken the time to update my blog. So here is a summary of all things big and small from the past few months.</span><br />
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><b>1. Quit my day job </b></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">I finally quit my day job in order to pursue independent game development full time! I had the following projects which I thought were good enough reason for me to quit. And also thanks to the financial support of my wife I can take some time off to figure out what I wanted to do with games (and also my US green card came in last year). So this has really just been all the right things coming together finally.</span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><b>2. Babycastles</b></span><br />
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">I have been helping the Babycastles folks with a few things. First I made them a new website - <a href="http://babycastles.com/">http://babycastles.com/</a>. This is a project which is important to me personally because I know I missed out knowing about Babycastles earlier because I couldn't find enough information about what they really were!</span></div>
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">I have also been helping them with smaller things like arranging a Global Game Jam venue at Silent Barn - <a href="https://www.facebook.com/events/299884826781559/">Silent Jam</a>! We put together a toolbox of game making tools which some people outside the Silent Barn venue found useful - <a href="https://docs.google.com/document/d/10doDd27Shk4I7dX8OSbUK5croQZLeQsOXufrECqP4LI">https://docs.google.com/document/d/10doDd27Shk4I7dX8OSbUK5croQZLeQsOXufrECqP4LI</a></span></div>
<div>
<br /></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">I have been attending the Babycastles meetings more regularly. It's all coming together as Babycastles moves to it's next phase of finding a more permanent space from where it can continue it's awesomeness. This is going to be an exciting year!</span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><b>3. OUYA Game Jam - Tossers with Ben Johnson</b></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><a href="https://twitter.com/GameDesignerBen">Ben Johnson</a> of Babycastles and I collaborated on creating a game for the OUYA game jam - <a href="http://www.youtube.com/watch?v=xdjhpgfvOJc">Tossers</a>. It's a 2v2 local multiplayer game that is a cross between Curling and Marbles where instead of a rock/marble you throw your teammate into a ring of marbles. So far it's been fun working on the game and playing it. So I think we will take it to completion some time in the next few months.</span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">The game didn't win anything in the OUYA contest but we showed it at the NY Gaming Meetup - The first OUYA game to be demo-ed there. By this time we added a powerup feature to add to the mayhem in the game and also added a puppy AI so that the game can be played 1v1 also with an AI teammate. People seemed to like the game play and we got some good feedback.</span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">The meetup and our demo were covered in Alley Watch :P - <a href="http://www.alleywatch.com/2013/03/new-york-february-gaming-meetup/">http://www.alleywatch.com/2013/03/new-york-february-gaming-meetup/</a></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><b>4. Ejecta WebGL talk at onGameStart NY</b></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">WebGL bindings on Ejecta allows you to port your WebGL apps/games to iOS. This has been a pure technology project as I want to keep a good mix of games and tech projects.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">The work I did has been merged into Ejecta main branch! - <a href="https://github.com/phoboslab/Ejecta">https://github.com/phoboslab/Ejecta</a>. A lot more interesting WebGL/three.js demos are now functional on iOS devices (Maybe a different post for this).</span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">I presented the work I did with adding WebGL bindings to Ejecta in the first edition of <a href="http://ongamestart.us/">onGameStart</a> happening in the US. Here are the <a href="https://docs.google.com/presentation/d/14tJkHcEEvHO3aVGbhaEcktZyrLoDEMl0I6-IMRFjND0/edit#slide=id.p">slides</a>. I hope the videos never come out because I wasn't too happy with my presentation :) I really needed to cut it short in few places and maybe just gone to the demos earlier.</span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">I met many of the HTML5 folks whom I had known only on Twitter. It was nice to meet them in person finally! </span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><b><br /></b></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><b>5. GDC</b></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">I attended my first ever GDC! More than the talks I spent most of the time hanging out with really interesting people and helping out Babycastles curate/setup what was a really great installation of relaxing games at SFMOMA. Here is a cool review of it - <a href="http://www.youtube.com/watch?v=wWLuEp4u5PE">http://www.youtube.com/watch?v=wWLuEp4u5PE</a></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">My highlight from the few sessions I attended was the Experimental Game Workshop. All the games in the lineup were amazing but <span style="line-height: 15.59375px;">the one game that blew me away in it's elegance was the Katamari-esque <a href="https://www.scrollkit.com/s/DBqqzHo/">Kachina</a>.</span></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><span style="line-height: 15.59375px;"><br /></span></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><span style="line-height: 15.59375px;">Of the parties the Wild Rumpus was by far the most enjoyable. It featured the amazingly fun party game by Keita Takahashi called <a href="http://www.edge-online.com/news/gdc-2013-keita-takahashi-presents-tenya-wanya-teens/">Tenya Wanya Teens</a> with it's own controller. We also arranged our own Babycastles party at the end of GDC and invited all our friends to it - It was a great way to end GDC.</span></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><span style="line-height: 15.59375px;"><br /></span></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><span style="line-height: 15.59375px;"><br /></span></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><span style="line-height: 15.59375px;"><br /></span></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><span style="line-height: 15.59375px;">There are more exciting things afoot - I can hopefully start talking about it in the next few months! This has been a very interesting journey and I really owe it to the amazing folks at Babycastles!! </span></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><span style="line-height: 15.59375px;"><br /></span></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><span style="line-height: 15.59375px;">Games are only getting more interesting as different kinds of people are getting into it and Babycastles has been an amazing force in progressing the scene in this regard. Hopefully I can help them keep doing their awesome work in the coming years and we can spread this mission to many more places in the world!</span></span></div>
</div>
Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com1tag:blogger.com,1999:blog-7968606659605866343.post-80569773997639277042012-11-29T21:17:00.001-08:002012-11-29T21:30:23.421-08:00EjectaGL : Quick Update - Basic texture support<div dir="ltr" style="text-align: left;" trbidi="on">
Quick Update - Basic texture support has been hacked into <a href="http://indie-indian.blogspot.com/2012/11/ejectagl-webgl-on-ios-with-ejecta.html" target="_blank">EjectaGL</a>.<br />
<br />
Here is a super quick (hence the bad lighting, bad finger smudges and bad everything - like all my videos) demo of port of <a href="http://learningwebgl.com/blog/?p=571" target="_blank">Lesson06</a> from learningwebgl.com.<br />
<br />
To make up for the absence of keyboard the zoom is controlled by tilting the device(which Ejecta nicely supports). Touching the screen toggles between the different filtering options.<br />
<br />
I have tried to show the effect of Mipmaps which is the main part of Lesson06 (Open in youtube for bigger size video to actually see the difference)<br />
<br />
If at all you want to give it a spin, be warned that I've pretty much stuck to implementing the APIs needed for the lessons for now. I just haven't gotten around to typing all the binding yet. Feel free to jump in and add some of them.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/sltMnIeXTUU?feature=player_embedded' frameborder='0'></iframe></div>
</div>
Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com5tag:blogger.com,1999:blog-7968606659605866343.post-44216253435154575012012-11-26T15:18:00.004-08:002013-04-13T20:37:05.924-07:00EjectaGL - WebGL on iOS with Ejecta!<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
Summary: </div>
<div style="text-align: left;">
I am starting a project EjectaGL which adds WebGL binding to the awesome <a href="http://phoboslab.org/log/2012/09/ejecta" target="_blank">Ejecta</a> project by <a href="http://phoboslab.org/" target="_blank">Dominic Szablewski</a>. EjectaGL extends the Ejecta framework to provide a WebGL implementation on vanilla JavascriptCore without any of the DOM overhead. EjectaGL provides a way to develop WebGL apps that can be shipped to the iOS app store(Not tested, but very possibly). It is far from being complete - So please contribute if you are interested! </div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: center;">
<a href="https://github.com/vikerman/EjectaGL" target="_blank">https://github.com/vikerman/EjectaGL </a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
EjectaGL is distributed in the same MIT license as Ejecta.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Longer story:</div>
<div class="separator" style="clear: both; text-align: left;">
I had worked on <a href="http://js13kgames.com/entries/voxel-shooter/" target="_blank">Voxel Flyer</a> for js13kgames - A WebGL based game in less than 13K compressed Javascript. I wanted to keep developing it but I sort of wished it would work on iOS too. A search for WebGL on iOS usually yields the <a href="http://learningthreejs.com/blog/2012/05/29/three-js-sportcar-on-ios/" target="_blank">jailbreak method</a> for enabling WebGL on iOS which is not very useful if you want to ship your WebGL app on the App Store. It feels like Apple might open up WebGL at any time but that never seems to happen. I always wanted to look into adding WebGL binding to AppMobi's directCanvas - but that never happened due to the complexity of the directCanvas code(and not to mention that the open source version has hardly seen the updates of their recent XDK).</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Meanwhile I saw that Dominic from Phobos Labs(on whose work directCanvas is actually based upon) released Ejecta, a newer version of his iOS library to provide a barebones fast implementation of Canvas and Audio without all the DOM overhead. This time I felt the code was much more friendlier and I could actually have a real shot at implementing WebGL on top of Ejecta. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So couple of days back I started reading my fist tutorial on Objective-C and started hacking Ejecta! The result is <a href="https://github.com/vikerman/EjectaGL" target="_blank">EjectaGL</a>. EjectaGL replaces the onscreen 2D canvas with a WebGL enabled canvas. At the current stage it's just a proof of concept and I am discovering and fixing issues as I am porting each lesson from <a href="http://learningwebgl.com/">http://learningwebgl.com/</a>. I tried porting Voxel Flyer to it and discovered that there is something wrong with the way uniforms are being passed in which I'm yet to finish debugging.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So basically it's in a very nacent stage but things are looking mostly doable. I can definitely use some help from people to add more bindings, port more examples and review my code for memory leaks(I'm sure there are few there given my newness to Obejctive-C) and other issues.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Check out the screenshot of Voxel Flyer running in the emulator with buggy lighting turned off at an astounding 9 frames/second. (You can run this demo by downloading the github source, creating an App/ folder and copying the contents of examples/VoxelFlyer to it)</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhKZhtQVdpEZRQ-tDzt_Y4AxUMsdzejgz0fMi_WG3JmGXrgYeVx-MVQCcLiaN_P8aOk8eYbI2Hmr2MZIReD1yAEQHh0qXd3QioV64fV6CkTioVg28cFCHtpFOF4HQIztTzCy-twfqAXEA/s1600/Screen+Shot+2012-11-26+at+5.33.24+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhKZhtQVdpEZRQ-tDzt_Y4AxUMsdzejgz0fMi_WG3JmGXrgYeVx-MVQCcLiaN_P8aOk8eYbI2Hmr2MZIReD1yAEQHh0qXd3QioV64fV6CkTioVg28cFCHtpFOF4HQIztTzCy-twfqAXEA/s400/Screen+Shot+2012-11-26+at+5.33.24+PM.png" width="400" /></a></div>
<br />
<div>
<br /></div>
<div>
As for some implementation details the one major caveat is the absence of Typed arrays in the current JavascriptCore that Ejecta uses(It might be coming some time <a href="https://jp.twitter.com/phoboslab/status/250964280520880128" target="_blank">later though</a>). I have tried to work around it by implementing a very primitive pseudo typed array in Objective-C. Basically you can instantiate a typed array but that's about it. I found that most WebGL code just create the typed Float32Array, Uint16Array just before binding to the buffer anyway and don' do much with the contents anyway. There could be issues with libraries like glMatrix that use typed arrays for fast matrix calculations. Currently I just replace the typed array with a regular array in my stripped down version of glMatrix. I see a workaround here of implementing glMatrix itself in Objective-C that doesn't have typed array in it's method interface but can use the internal representation of EjectaGL's typed array which can then be passed on to EjectaGL. A similar strategy can be adopted if we want to get libraries like three.js also running on EjectaGL(though that would be a big undertaking of it's own).</div>
<div>
<br /></div>
<div>
There are not lot of WebGL APIs implemented currently but I don't see any other major issues in doing that (other than the typed arrays). Also I am thinking of adding stuff like rendering offline to a 2D Canvas and using that a texture in WebGL (My Voxel Flyer originally had a mini map that was a 2D canvas on top of the WebGL canvas).</div>
<div>
<br /></div>
<div>
So for now I just wanted to quickly mention the project and get the ball rolling so that I can ask for help and also make sure there is no duplication of effort (I am pretty sure 100 different people were also thinking of a similar project).<br />
<br />
I think there are lot of applications for this project - It would be nice to get all those nice shader/demos working on the mobile device, possibly even the three.js ones. I also see a possibility of using all the cool WebGL shader effects available on Construct2 to be now fully exportable to the iOS target. </div>
<div>
<br /></div>
<div>
Drop me a line here or on twitter - <a href="https://twitter.com/vikerman" target="_blank">@vikerman</a><br />
<br />
<b>Update : </b>EjectaGL is now merged into Ejecta main! You can get it at https://github.com/phoboslab/Ejecta</div>
</div>
Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com8tag:blogger.com,1999:blog-7968606659605866343.post-38952407482012166622012-09-25T21:16:00.003-07:002012-09-28T09:05:57.135-07:00GameDoc: On the fly Javascript game modding for the mobile web<div dir="ltr" style="text-align: left;" trbidi="on">
I had a crazy idea and wanted to create a quick experiment to test it out. Mobile browsers are becoming good - Javascript and Canvas implementation are becoming faster. There are certain advantages to the mobile browsers as a game distribution platform - the most important of which is that it is open and not controlled by arbitrary rules set by Apple, Google or whomever (Classic example - <a href="http://phonestory.org/banned.html" target="_blank">Phone Story</a>). HTML5 games in general are picking up steam but game makers are ignoring the mobile browser.<br />
<br />
There are two factors why games on mobile browsers don't work well -<br />
<br />
<ol style="text-align: left;">
<li>Game developers ignore things like centering the screen on the game area, setting the right zoom level, allowing for touch input(or any alternate mechanism like accelerometer) when there is no keyboard</li>
<li>Browser makers don't provide a good way to do certain things - locking screen orientation, a working audio API etc.</li>
</ol>
<div>
1) is definitely solvable while 2) involves letting platform creators know about the issues faced by game developers (Some influential developers that are already trying to do that - <a href="http://www.phoboslab.org/log/javascript">http://www.phoboslab.org/log/javascript</a>). Maybe newer platforms like <a href="http://www.youtube.com/watch?v=PfhmZX8AG0M" target="_blank">Mozilla OS</a> will push the standards higher on the existing ones.</div>
<div>
<br /></div>
<div>
So the crazy idea is centered around the concept that HTML5 games being based on open standards should be modifiable by anyone (An idea floating around in <a href="http://commonspace.wordpress.com/2012/03/12/hackable-games/" target="_blank">Mozilla land</a>) - In this specific case modified to work well on mobile browsers. If a game developer didn't take care to make the game work well on mobile browsers, anyone should be able to fix it.</div>
<div>
<br /></div>
<div>
To prove this point I created a proof of concept - which I called "GameDoc". For the experiment I took the game <a href="http://emptyblack.com/">emptyblack.com</a>. I really liked the game when I played it on the desktop and I wanted to play it on my phone. The game seems to run ok as far as the graphics is concerned but it had the classic issues mentioned in 1). Since there is no keyboard input in the phone the game is unplayable.</div>
<div>
<br /></div>
<div>
GameDoc is a native mobile App that basically wraps a browser WebView. It loads the game from the original URL but it sets the required zoom level on the WebView to get a good view of the game area and locks the screen orientation to landscape. And here is the cool part - It fixes the absence of keyboard by injecting Javascript snippet into the page that adds on-screen controls. When these controla are pressed keyboard events are simulated using the <a href="http://stackoverflow.com/questions/596481/simulate-javascript-key-events" target="_blank">dispatchEvent mechanism</a>. I used the WebView wrapper route to be able to do this Javascript injection on the device (due to absence of browser extensions on the mobile).</div>
<div>
<br /></div>
<div>
So here is the video of how the converted game works. The video shows how the game is not playable in it's original form in the mobile Chrome browser and how the fixed version works with simulated onscreen controls. It's not perfect - Sometimes keyup/keydown events seem to get missed and I think it might be due to multitouch issues. As you can see I really threw this together rather quickly with horrible looking icons for the controls - But you get the idea.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/XMrX8IXCbsM?feature=player_embedded' frameborder='0'></iframe></div>
<div>
<br /></div>
<div>
The grand idea is that there can be a crowd sourced HTML5 game portal where people can add their own customization to the game controls or the game itself and the Gamedoc App(or whatever better name I come up with) would pull that extra information for the game and does the necessary modding.</div>
<div>
<br /></div>
<div>
Can I avoid the need to have a separate App that wraps the WebView and just use the native browser? Maybe I can do something at the server side but that might screw up with things that are tied to the original domain like cookies or the local store. Maybe I can just do the controls with some sort of IME trickery.</div>
<div>
<br /></div>
<div>
Anyway as I said it's a crazy experiment. At the least I hope to push HTML5 game developers to think more about the mobile web.</div>
<div>
<br /></div>
<div>
Let me know of your thoughts/comments.<br />
<br />
<b>Update: </b>Looks like IOS6 has better support for Audio opening up better game support! And the awesome folks who make Construct2 already support it - https://www.scirra.com/blog/98/the-web-as-the-platform</div>
</div>
Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com2tag:blogger.com,1999:blog-7968606659605866343.post-85838231802774630042012-09-18T15:41:00.001-07:002012-09-19T18:01:22.292-07:00js13kgames and Voxel Shooter<div dir="ltr" style="text-align: left;" trbidi="on">
I knew I had to take part in <a href="http://js13kgames.com/" target="_blank">js13kgames</a> - A competition to write Javascript games less than 13KB when zipped. I used HTML5 canvas for the <a href="http://indie-indian.blogspot.com/2012/01/global-game-jam-2012-universe-within.html" target="_blank">last</a> <a href="http://indie-indian.blogspot.com/2011/11/go-away-norman.html" target="_blank">two</a> of the last three game projects I worked on and was increasingly identifying myself as a HTML5 game programmer. However a visit back to India and the work on <a href="http://indie-indian.blogspot.com/2012/09/mario-ball-with-keita-takahashi-and.html" target="_blank">Mario Ball</a> had left very little time for me to actually work on my 13KB game.<br />
<div>
<br /></div>
<div>
At 13KB I had decided to have some sort of procedural generation for the elements of the game. I also wanted to explore the Web Audio API for the sound. However I was having a very hard time trying to come up with a concrete idea for the game. My very first idea was a weird fighting game where the player's form and powers were determined by a random combination of 3 elements - Rectangles, Circles and Bezier curves. The player and enemies basically looked like modern art pictures. I wasn't sure whether I was going too weird with this one. Some of the denizens of this unfinished game:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKxb6x6673l2wPbDRW_b8i7Fa9Dh7oGplzutSV4AX4C5mtHPVxL1hSrMZaB72jmFpnwMNWvyqAlO9aCBwmwA1Ed1ITTP4YBqXvBwjUAK5I9bM1Q-bTIWPhzg9gHtvyNaFvqxwsDw-rT7o/s1600/Screen+Shot+2012-09-19+at+8.57.21+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKxb6x6673l2wPbDRW_b8i7Fa9Dh7oGplzutSV4AX4C5mtHPVxL1hSrMZaB72jmFpnwMNWvyqAlO9aCBwmwA1Ed1ITTP4YBqXvBwjUAK5I9bM1Q-bTIWPhzg9gHtvyNaFvqxwsDw-rT7o/s200/Screen+Shot+2012-09-19+at+8.57.21+PM.png" width="200" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrRs_dtPNJQD1YhZ6lCP3pYiJak9p3dpF46dMqAjZZTDENwJ7yBdpUQG535U3WvXRZUovBzzSN0oF9Sc2QidwuJ7CpX7P9sGLePTZZ8Ble6lVByeSnYMLTAvo8t0lPC-mNqUDSmzV665E/s1600/Screen+Shot+2012-09-19+at+8.57.33+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrRs_dtPNJQD1YhZ6lCP3pYiJak9p3dpF46dMqAjZZTDENwJ7yBdpUQG535U3WvXRZUovBzzSN0oF9Sc2QidwuJ7CpX7P9sGLePTZZ8Ble6lVByeSnYMLTAvo8t0lPC-mNqUDSmzV665E/s200/Screen+Shot+2012-09-19+at+8.57.33+PM.png" width="193" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlKGR0EXF-7fvzGmI8MgPyvHKrR5SQ_SGxxpjGOtSWi4R6F4OBZSDCLrfUs-MtFhP-4Gq6g7rtgb_eRbjdzbTeo2TRx-a4c4Xo2jBMFM9v7gzEiiDnWCPO24wbIqLkTAgoHyRwR19q0o4/s1600/Screen+Shot+2012-09-19+at+8.57.57+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlKGR0EXF-7fvzGmI8MgPyvHKrR5SQ_SGxxpjGOtSWi4R6F4OBZSDCLrfUs-MtFhP-4Gq6g7rtgb_eRbjdzbTeo2TRx-a4c4Xo2jBMFM9v7gzEiiDnWCPO24wbIqLkTAgoHyRwR19q0o4/s200/Screen+Shot+2012-09-19+at+8.57.57+PM.png" width="178" /></a></div>
<br /></div>
<div>
<br /></div>
<div>
Then this entry came out on js13kgames - <a href="http://js13kgames.com/entries/johnny-smiter-13th-knight/" target="_blank">13th Knight</a>. It was a fully textured 3D world in WebGL in under 13KB! And it had awesome looking trees!! I wanted to make a WebGL game now. I always wanted to learn WebGL but hadn't looked closely into it it before. I had started looking at <a href="http://three.js/">three.js</a> for <a href="http://7dfps.org/" target="_blank">7dfps</a> but never got the time to do anything beyond a sphere moving on plane. This time around three.js wasn't going to be an option because no external libraries were allowed and three.js would not fit into 13KB (I later learnt somebody else had managed to get a subset of three.js working in their 13KB game - <a href="http://www.chandlerprall.com/2012/09/mindless-js13kgames/" target="_blank">Mindless</a>).</div>
<div>
<br /></div>
<div>
So not exactly knowing what I'm going to build I started with the WebGL lessons at <a href="http://learningwebgl.com/blog/?page_id=1217">http://learningwebgl.com/blog/?page_id=1217</a> for the basic template for a WebGL program. I played around with it till I was able to draw a flat colored cube with directional lighting. There were 5 days till the competition ended and I had to come up with something quick. Then it struck me - I will just redraw the cubes a lot of times to create a Voxel engine! (Being completely ignorant of the issues before starting a project is sometimes a good thing). I was missing a good flying game these days and I thought I will do a flying game where you shoot enemies on the ground - Voxel Shooter!!</div>
<div>
<br /></div>
<div>
I generated the terrain using some random combination of sin curves. I copied a small subset of the <a href="http://code.google.com/p/glmatrix/" target="_blank">glMatrix</a> library for the matrix operations. And I happily went about drawing cubes over and over again - One drawElements call per cube. I could reach up to 50 x 20 array of cubes before the rendering became too slow. I tried removing faces from the cubes that are hidden behind other cubes - A small increase in the frame rate but nothing great. I tried some cheating like increasing the size of each cube so that I can get away with a smaller number of cubes. Nope - the map was still too small. I banged my head trying to figure out a frustum culling method but it just involved too much Math to be figured out in a small amount of time. Also the far plane was going to be too near and field of view was going to be too narrow if I can display only 1000 cubes. I just had to figure out a way to improve performance first.</div>
<div>
<br /></div>
<div>
Then I came across this - <a href="http://www.youtube.com/watch?v=rfQ8rKGTVlg" target="_blank">Google I/O 2011 : WebGL Techniques and Performance</a>. I had basically made all the mistakes mentioned in the talk. First and foremost I was switching too much context for every vertex - Even the uniforms that were common to all vertices like lighting and camera and projection matrices. I got a substantial boost when I fixed this issue but still not going to allow the 256 x 256 map size I was aiming for. The next thing was to reduce the number of GL draw calls by combining many cubes into one giant mesh. This one I had some problem getting my head around because I hadn't understood the concept of attributes properly. Then I saw how I could augment the vertex data by putting its world position as an attribute and I could draw the entire terrain with a single drawArrays call - And BAM! Now everything was running smoothly at 19fps (yeah. Much better than 7 fps) for an entire map of 256 x 256.<br />
<br />
Everything from here on was mostly polishing. I worked a lot on the camera - I was using the LookAt matrix but couldn't figure out how to roll and I wanted the camera to roll on turning. After scourging the internet found a simple method to just pre-multiply the LookAt matrix with a roll matrix. I didn't like the way you could lose your bearing if you looked right up. So I added some clouds(All clouds drawn with a single GL draw call), filled the surrounding areas with water and added a wrap around if you strayed too far from the island. I added some cubes to represent the enemies (all drawn with a single call). I spent quite a bit of time overlaying a 2D canvas to represent the minimap so that you would knew where your enemies were. I tried adding bullets to shoot down the enemies with the basic physics handled right in the shader but that wouldn't work - I just had to give up on it. (Did you wonder why it was called Voxel Shooter but there is no shooting? :) I spent the whole night before the competition deadline at 7AM adding these things and then before I realized it was time to submit!<br />
<br />
I was very dejected that I didn't complete the game and I was too near to the deadline. You just flew around doing pretty much nothing. You couldn't even crash into anything. Staying awake for the whole night was a complete waste of my time. And then out of sheer desperation I thought I will just add a simple check for crashing into the terrain and that would be the game - Avoid crashing into anything. I was testing it and I kept going through the enemies. I thought I should add collision detection with the enemies as well. I added that and then I realized instead of treating crashing into enemies as a failure, that could be the whole point of the game!! I quickly added a score for picking up the red cube (no longer the enemy!) and increase the speed of the game every time you finished a batch of them. I submitted this new version and was smugly happy with my own crisis handling. Next time I should just give myself more time to avoid such things.<br />
<br />
The next day playing through the other <a href="http://js13kgames.com/entries/" target="_blank">entries</a> of the js13kgames and I liked <a href="http://js13kgames.com/entries/mindless/" target="_blank">many</a> <a href="http://js13kgames.com/entries/bomb-js/" target="_blank">of</a> <a href="http://js13kgames.com/entries/timber-terry/" target="_blank">them</a>. It was interesting to see the methods they used to keep the size down. The most amazing thing I learnt about was <a href="https://github.com/grumdrig/jsfxr" target="_blank">jsfxr</a> - A simple sound effects generator without having to store audio in huge audio files. I am definitely going to use this more in my upcoming projects and in the future versions of Voxel Shooter.<br />
<br />
Some people seemed to like Voxel Shooter and it was really cool that <a href="http://indiegames.com/">indiegames.com</a> picked it - <a href="http://indiegames.com/2012/09/browser_game_pick_voxel_shoote.html">http://indiegames.com/2012/09/browser_game_pick_voxel_shoote.html</a>. Even Cheezbruger picked it for their Lunch leisure - <a href="http://t.co/xO9drzmZ">http://t.co/xO9drzmZ</a>! Some were amazed it was done within 13KB but I should mention that my game was very simple - it just does the same thing a lot of times and I didn't spend any time trying to reduce the size.<br />
<br />
The initial reaction from people has given me encouragement to keep working on the game and I think I will make it into a full fledged game in the future. Lots of ideas flying in my mind now - Sounds, bigger worlds, flying enemies, improved shading, shadows, water, lava, gamepad support, multiplayer, levels, missions... But now I will automatically think of one more thing - How small can I keep the code and assets?<br />
<br />
And to end it all here is a video from my awesome friend Brian who scored 148 in Voxel Shooter! Can you beat that?!!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/Tzgs4tD6Gr8?feature=player_embedded' frameborder='0'></iframe></div>
<br />
<br /></div>
</div>
Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com0tag:blogger.com,1999:blog-7968606659605866343.post-38006397800536904362012-09-16T00:04:00.000-07:002012-09-18T13:30:52.445-07:00Mario Ball with Keita Takahashi and Kaho Abe!<div dir="ltr" style="text-align: left;" trbidi="on">
Something very unexpected happened. The Babycastles folks were running a <a href="http://babycastles.com/summit" target="_blank">Summit</a> at the Museum of Modern Art and Design(MAD) - It was centered around bringing <a href="http://kotaku.com/5930196/some-of-keita-takhashis-video-game-dreams-will-come-true-this-summer-and-you-can-play-them" target="_blank">Keita Takahashi's ideas</a> to reality along with other things like game (not just videogames but also about things like games in physical spaces) related talks and indie music bands.<br />
<br />
<div>
They wanted some help with the programming for one of their projects. For some inexplicable reason they thought of asking me and I jumped at the opportunity. I had always wanted to explore physical games/ alternate interfaces and wanted to do things similar to what <a href="http://kahoabe.net/" target="_blank">Kaho Abe</a> does. And now they told me I was actually going to work with her! Not to mention an opportunity to work with Keita Takahashi!!</div>
<div>
<br /></div>
<div>
I had an initial meeting with Keita and Kaho. The project, Mario Ball, was to build the <a href="http://www.emuparadise.me/Nintendo_Entertainment_System_ROMs/Mario_Bros._Classic_(Europe)/56186" target="_blank">original Mario brothers</a> - but instead of using a normal controller the ideas was to control it using a wooden maze representing the level and Mario actually controlled by a ball. I think Keita's original drawing explains this the best.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsGiKUriQ6qmFYQn8KiLq2fmi4b6JFV4h4kX6A04kUaEKukZshQhojERLhooeB-3xalhUY_38FBNt3BQbNWTd8ZDZwe6dodzjXLh8q_3jDRZJQoU2An5hDHZZnz6vI1n9L_a7ZQa_D_Fk/s1600/marioball-concept.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsGiKUriQ6qmFYQn8KiLq2fmi4b6JFV4h4kX6A04kUaEKukZshQhojERLhooeB-3xalhUY_38FBNt3BQbNWTd8ZDZwe6dodzjXLh8q_3jDRZJQoU2An5hDHZZnz6vI1n9L_a7ZQa_D_Fk/s400/marioball-concept.jpeg" width="400" /></a></div>
<br /></div>
<div>
Kaho had decided that we are going to use a magnetic ball for Mario and an array of <a href="https://www.sparkfun.com/products/8642" target="_blank">magnetic reed switches</a> underneath the controller surface to detect where the ball is an move the on screen Mario accordingly (It was decided not to use computer vision because that was already being used for another game). This is where I was going to help them - Actually build the game that processes the controller input to move Mario around in the game. It was also decided to build the controller as a big box so that it would require two people to work with each other to actually control Mario! We also decided that we would make Mario go up side down when the ball is actually moved up and it stays up there - something like a change in direction of gravity. I was concerned with the resolution of the magnetic reeds and asked Kaho to also add an accelerometer so that we can try and interpolate Mario's position when the ball was actually between two magnetic sensors and we had to guess which direction Mario was actually moving. Throughout the meeting I was mostly just thinking - Yay!! I am talking with Keita!!<br />
<br />
Kaho was going to build this insane setup with 90 magnetic reed switches connected to an Arduino through a set of multiplexers. The program running on the Arduino would detect the active magnetic switch and write that value to the serial port along with the 3 axis acceleration information from the accelerometer. So now we were ready to start building the controller and the game. The kicker - We had 6 days to build this whole thing!! (And not even 6 whole days. I had to go to my day job on all the days and work in the evenings. Kaho was handling the hardware for 2 other games)<br />
<br />
I think my experience with working with multi-tiered systems in my day job (At this small <a href="http://google.com/" target="_blank">startup</a>) helped here. We decided what the format of the controller output is going to be like so that we can initially work separately and in parallel and then put the controller and the game together when they were ready. I decided to build the game with a ball and magnetic switches that are actually simulated (Similar to mocks/stubs that we use to test in isolation without external dependency) so that I could iron out some of the issues I would face even before the actual controller was ready. In hindsight this got me to 50% of the actual solution - but that was good enough given the time crunch. The things I totally got wrong in my simulation were the area which each magnetic switch covered and the maximum speed the ball would actually be able to roll in the real world.<br />
<br />
So I went back and started to actually build the game. I didn't spend much time thinking about it but I decided to use <a href="http://processing.org/" target="_blank">Processing</a> because of its inbuilt ability to use the serial port to interface with the controller. This was a good and a bad idea but at the end of the day was probably the right decision. The good part was that it all worked out and even though I developed the whole thing on the Mac it perfectly ran on the Windows machine where we finally put it - including the serial port part. The bad things included Processing not really having an easy way to rotate and blend images at the same time (Really? I expected better) and some bugs when part of the rendered image going offscreen. The IDE itself was horrible at times and I had to actually delete one file at a time to find syntax errors. At the end of the day the positives probably overrode the negatives. But the next time around I would think a bit harder before using Processing for a game.<br />
<br />
I spent the first few days to actually get the assets of the original Mario brothers(Thanks Syed!) in and trying to mimic the looks of the original game as much as possible. I built the game in a way which is probably not recommended - I tried to get the graphics of the game done well before the actual logic/gameplay of the game. But I found that doing this motivated me much more than just dummy boxes and circles. Looking back I think this also helped out because I would have never been able to put in the effort to get the graphics right in the crazy days that were going to follow. I also spent the initial time building the framework in Processing to read in the world layout and character animation from <a href="http://www.mapeditor.org/" target="_blank">Tiled</a> TMX files. This also helped me out later when Keita wanted me to add extra characters into the game and I was able to do it with relative ease. As usual I wrote custom collision detection code instead of trying to figure out how to use Box2d with Processing. In my defense I didn't have time to ramp up on anything more complicated than the simple graphics APIs and this was the first time I was using Processing.<br />
<br />
We met halfway through the week - Both the hardware and software were lagging behind where they should have been at that point. Keita was amazing as always - He had built the frame for the controller and created an actual Mario Ball by pasting colored strips to create a Mario on the magnetic ball (Thanks Lauren for the photo!).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJSt9_7VBZQQgyLxDvwP7lh6lUY-BE0AyHihIit9adMO9zaOvHpzJOIS0FixgAvvVQsXHgy2Y-vaeM8bZk6BYvi3-8TPkAfPoz6Dy1A6cJBNfJXIrIyNXAszj_RGmdzKfBHqwrDgeo2_Y/s1600/marioball-photo.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJSt9_7VBZQQgyLxDvwP7lh6lUY-BE0AyHihIit9adMO9zaOvHpzJOIS0FixgAvvVQsXHgy2Y-vaeM8bZk6BYvi3-8TPkAfPoz6Dy1A6cJBNfJXIrIyNXAszj_RGmdzKfBHqwrDgeo2_Y/s320/marioball-photo.jpeg" width="240" /></a></div>
<br />
<br />
<br />
<br />
That night me and Kaho just worked through the whole night trying to finish as much as possible. We made really good progress but we still weren't ready to put things together. The whole time I wasn't stressing myself out and tried to stay as calm as possible. I also told myself that Babycastles always manages to pull off these things - So I had nothing to worry! (It was half true at the end :). So here is the picture of the amazing circuitry that Kaho put together that night. I think she called it a unicorn barf or something like that.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjCDfZhu7IVFurKdLVYVrb-TKqAND4goKqcXLOlddXYaHSvgF11osx18DLmuPK9W6pwNIWBAVBKTZzV49HRBBo4qfcho1-NhyXsM8tEHqp-GiRYmeFQGGssjPGLJ8vnBnnRm51REPulhM/s1600/IMG_20120823_223445.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjCDfZhu7IVFurKdLVYVrb-TKqAND4goKqcXLOlddXYaHSvgF11osx18DLmuPK9W6pwNIWBAVBKTZzV49HRBBo4qfcho1-NhyXsM8tEHqp-GiRYmeFQGGssjPGLJ8vnBnnRm51REPulhM/s400/IMG_20120823_223445.jpg" width="400" /></a></div>
<br />
<br />
The next day we had to shift to the MAD and this is where things started going wrong. We weren't allowed to stay late the day before we had to set the whole thing up! So on the opening day(Friday) we just had a few hours to get the whole thing ready. Kaho was also getting very busy dividing her time between all the projects she had to get working. This was a very tense day and unfortunately we weren't able to get Mario Ball ready that night.<br />
<br />
On Saturday we finally got the game and the controller talking with each other. It was a magical moment. I never thought we would ever get to this stage given the craziness that was the whole project :) It had few kinks including a bug in the Arduino code which made it print lots of useless values in between the actual useful ones. A few hours later and few critical bug fixes later we had something close to playable - There were some issues with Mario appearing to teleport when the ball moved too quickly - but the game was definitely playable. And so by Saturday afternoon Mario Ball was ready to go! We spent some time getting the actual hardware for it setup and the game was finally ready to be put up. <br />
<br />
I haven't talked much about Keita and probably mention here just a bit. He is a person of few but precise words and I would like to keep this section the same way. He is an amazing combination of a nice guy and a person who pushes you to the limit. He wasn't there to just have fun - But actually do something great. Good enough was not good enough - perfection was the only end point. In the end I didn't do everything that he asked for - but the game definitely ended up much better than if we had just aimed for something good enough. The couple of things I took out of this whole experience was to aim high and always keep improving.<br />
<br />
Even though we were almost a day late I was very happy to have Mario Ball running for more than half of the summit. I think most people had lots of fun playing the game. There were some who said it was too experimental - but I thought that was part of what we were trying to do. Kaho had done an amazing job with the hardware - It worked without anything breaking for most of the summit (It briefly broke down on Sunday evening - but it was just someone had yanked on the controller so hard that the USB cable connected to the Arduino had come off. The crazy wiring just kept working the whole while).<br />
<br />
So here it is - A picture of couple of people playing Mario Ball in the jungle themed arcade section of the Summit (The jungle theme was an amazing achievement of its own. Somebody needs to write about that). This should give an idea of the size of the controller and how it would take two people to use it. There are so many details in the controller I can't capture here. Keita added the fur like exterior and window handles(which reminded Keita of his Grandmother's house?) on the side so that you can easily hold and play.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQrw-UfPtTRSkcyKYHGBsVY-H0q83rmgl9Eife2iRCCJ0i3m74y9bWSBBaAL_H9wYnZQbAstgTDU_ukudRyXqLIQ5IvkahyphenhyphenkVC6VQTm1L7VvxQVwXR9BrU3k95PHoXj7wBtWrVsoxuBpI/s1600/IMG_20120825_230141.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQrw-UfPtTRSkcyKYHGBsVY-H0q83rmgl9Eife2iRCCJ0i3m74y9bWSBBaAL_H9wYnZQbAstgTDU_ukudRyXqLIQ5IvkahyphenhyphenkVC6VQTm1L7VvxQVwXR9BrU3k95PHoXj7wBtWrVsoxuBpI/s400/IMG_20120825_230141.jpg" width="400" /></a></div>
<br />
<br />
<br />
Here is a video of people playing it at the Summit. I am sort of happy that I was able to capture the experience of the two players actually co-ordinating with each other to play the game.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/0msNJkRxztY?feature=player_embedded' frameborder='0'></iframe></div>
<br />
I have no good words to end this post. Maybe that this is just the beginning. We will keep improving. You will see a better Mario Ball in the future!!<br />
<br /></div>
</div>
Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com0tag:blogger.com,1999:blog-7968606659605866343.post-86655731788077281542012-08-16T22:32:00.002-07:002012-08-16T22:32:36.157-07:00'Go away norman' goes to Paris!<div dir="ltr" style="text-align: left;" trbidi="on">
I have been wanting to post this for a long time but let me do so now before I completely miss it. The ever amazing folks at <a href="http://babycastles.com/" target="_blank">Babycastles</a> were putting up a whole exhibition of cat themed games called Meowton at <a href="http://www.gaite-lyrique.net/en/theme/joue-le-jeu-play-along-summer-2012" target="_blank">La Gaite Lyrique</a>'s Play Along. They basically put our game Go away norman into a cat mobile that they had built!(among other amazing installations). This show was open for a month for people to play.<br />
<br />
Seeing people play our game felt great by itself but this was something else! Thank you Syed and thank you Babycastles!!<br />
<br />
Here are some photos of the cat mobile with our game in it (Thanks to Lauren for these photos)<br />
<br />
Other photos from Play Along and Meowton can be seen here - <a href="https://www.facebook.com/media/set/?set=a.434311623269911.101273.108973242470419&type=3">https://www.facebook.com/media/set/?set=a.434311623269911.101273.108973242470419&type=3</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTSiARDTFEFEfRu4723lHkJpllxJGliTM-fJZHYS7JK3Sf7Txh8cAqb02TZpQ86CzGO6_Gqn7-xb1Qjq-TxrEZr7w5LEwAjOksbxiUTDZiJIL7_QNAb00bnmLNjTxL2OecIqH6-Y7qE20/s1600/DSC_9270.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTSiARDTFEFEfRu4723lHkJpllxJGliTM-fJZHYS7JK3Sf7Txh8cAqb02TZpQ86CzGO6_Gqn7-xb1Qjq-TxrEZr7w5LEwAjOksbxiUTDZiJIL7_QNAb00bnmLNjTxL2OecIqH6-Y7qE20/s320/DSC_9270.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNFRkmopoCSmjlbv5DJ8wYlTg4itkLyE4l4X9QlY3Tipg6t3yzKwDQSnMvwAvoJG1TIJntYL07saI9YJEpjrvpq0g2LKMvo2rSdn2PjzUphxo6gD0Elo0cFpHt-LyuqwNlRRYkuZYbH50/s1600/DSC_9273.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNFRkmopoCSmjlbv5DJ8wYlTg4itkLyE4l4X9QlY3Tipg6t3yzKwDQSnMvwAvoJG1TIJntYL07saI9YJEpjrvpq0g2LKMvo2rSdn2PjzUphxo6gD0Elo0cFpHt-LyuqwNlRRYkuZYbH50/s320/DSC_9273.jpg" width="212" /></a></div>
<br /></div>
Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com0tag:blogger.com,1999:blog-7968606659605866343.post-71877260557540289842012-05-12T11:23:00.001-07:002012-05-12T11:23:12.791-07:00Universe within launched on App Store for the iPad!<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
We released our Global Game Jam game "universe within" on Apple App Store for the iPad! (My first ever app on the App Store!!)</div>
<div>
<br /></div>
<div>
It's much better to play the game on the iPad making use of the accelerometer (than trying to til your Mac book). Also the screen resolution made it a natural fit for the iPad. A tweaked iPhone version may follow later.</div>
<div>
<br /></div>
<div>
You can find in on iTunes here - <a href="http://itunes.apple.com/us/app/universe-within/id523392835?ls=1&mt=8">http://itunes.apple.com/us/app/universe-within/id523392835?ls=1&mt=8</a> - or search for "universe within" from App Store on the iPad.</div>
<div>
<br /></div>
As I had mentioned <a href="http://indie-indian.blogspot.com/2011/12/porting-html5-canvas-game-to-mobile.html" target="_blank">before</a> I had played around with porting a HTML5 canvas based game onto iOS using AppMobi's open source <a href="http://www.appmobi.com/?q=node/167" target="_blank">DirectCanvas</a>. This time I went all the way and ported our game to the iPad and released it on the App Store. Also this time it was a slightly more complicated application using the accelerometer and touch for the menu but it was fairly straightforward to get the code working with DirectCanvas.<div>
<br /></div>
<div>
I haven't had the time to post any of the technical details of the porting process. Drop me a line if you are interested in knowing more about it.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKNRHwdIC_0Yn6H-wmFk2VnNXYsKB_tDI3VPYhbAdBQBhtTskU_VfJMJLAfrUZTXDx_RiFKokLe4vVXSR6VnLsuXMa8OBhW45rHxTZVU-xKQRwRSE5oV4ZryBVJb-kGMtzNQHUvyjmWRw/s1600/Screen+Shot+2012-05-12+at+2.19.23+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKNRHwdIC_0Yn6H-wmFk2VnNXYsKB_tDI3VPYhbAdBQBhtTskU_VfJMJLAfrUZTXDx_RiFKokLe4vVXSR6VnLsuXMa8OBhW45rHxTZVU-xKQRwRSE5oV4ZryBVJb-kGMtzNQHUvyjmWRw/s400/Screen+Shot+2012-05-12+at+2.19.23+PM.png" width="400" /></a></div>
<div>
<br /></div>
</div>Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com0tag:blogger.com,1999:blog-7968606659605866343.post-71949661557827165052012-03-23T12:15:00.001-07:002012-03-23T12:17:33.871-07:00the universe within... - released on the Chrome Web store!<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
<span style="font-family: inherit;">After polishing our Global game jam game a bit we have finally released it on the Chrome webstore!<br /></span></div>
<div style="text-align: left;">
<span style="font-family: inherit;">You can get it here at <a href="https://chrome.google.com/webstore/detail/cfahikbimaanioedfdlhhlmbhjogalii" style="background-color: rgba(255, 255, 255, 0.917969); color: #1155cc; text-align: -webkit-auto;" target="_blank">https://chrome.google.com/<wbr></wbr>webstore/detail/<wbr></wbr>cfahikbimaanioedfdlhhlmbhjogal<wbr></wbr>ii</a><span style="background-color: rgba(255, 255, 255, 0.917969); color: #222222; text-align: -webkit-auto;"> </span><span style="color: #222222;"><br /></span></span></div>
<div style="text-align: left;">
<span style="background-color: rgba(255, 255, 255, 0.917969); color: #222222; font-family: inherit; text-align: -webkit-auto;"><br /></span></div>
<div style="text-align: left;">
<span style="color: #222222; font-family: inherit;">If you are not using Chrome just check out the latest version of the game at <a href="http://www.universewithin.net/" target="_blank">http://www.universewithin.net</a> </span></div>
<div style="text-align: left;">
<span style="background-color: rgba(255, 255, 255, 0.917969); color: #222222; text-align: -webkit-auto;"><span style="font-family: Verdana, sans-serif;"><br /></span></span></div>
<div style="text-align: left;">
<span style="color: #222222; font-family: Verdana, sans-serif; font-size: x-small;"><br /></span></div>
</div>Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com1tag:blogger.com,1999:blog-7968606659605866343.post-68318845116590625812012-01-31T01:14:00.000-08:002012-01-31T16:30:09.670-08:00Global Game Jam 2012 : The Universe Within ...<div dir="ltr" style="text-align: left;" trbidi="on">
Wow! That was a crazy ride the past weekend. I had just enough time to recover from the <a href="http://indie-indian.blogspot.com/2011/11/go-away-norman.html" target="_blank">Babycastles game jam</a> few months back and it was already time for the <a href="http://globalgamejam.org/" target="_blank">Global Game Jam</a>. I was there just to have some fun and it turned out to be a whole lot of fun plus a few pleasant surprises.<br />
<div>
<br />
This is the game we made - <a href="http://withinuniversewithin.appspot.com/">withinuniversewithin.appspot.com</a> and this is the story of how we made it.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg93GKHYVfszdcnhg2H_hccgONtKlvEuLqJbpfyjj_iCc8HSDhckxNKtOC-EeWAheddm8LoBDS729YDxxGVhEzy4_MbY0cwwoJwX4HCVE7sexfPWWxrxq1_1WQcthyphenhyphenyLGwvlISba_TBvdE/s1600/Screenshot+(1).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="302" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg93GKHYVfszdcnhg2H_hccgONtKlvEuLqJbpfyjj_iCc8HSDhckxNKtOC-EeWAheddm8LoBDS729YDxxGVhEzy4_MbY0cwwoJwX4HCVE7sexfPWWxrxq1_1WQcthyphenhyphenyLGwvlISba_TBvdE/s320/Screenshot+(1).png" width="320" /></a></div>
<br />
<br /></div>
<div>
First and foremost, a game jam is not a competition. It's a place where people who are passionate about making games get together to stretch their minds - Part of it is by making your own game but the rest of it is watching others make games.</div>
<div>
<br />
Every game jam has a theme and the theme for this years global game jam was <a href="http://en.wikipedia.org/wiki/Ouroboros" target="_blank">Ouroboros</a>. The theme definitely provides good boundaries for people to stay within.<br />
<br />
<b>Forming Teams</b></div>
<div>
Forming teams in a game jam is a very awkward proposition for me, but I am amazed I have found the right teams both times I attended a game jam. The best tip here(as I first heard from <a href="https://twitter.com/#!/GameDesignerBen" target="_blank">Ben Johnson</a>) is to just go with your instincts and not think too much about it. Of course this time I decided to play it safe by sticking with people I know - GJ and Brian and that too works I guess (but the previous game jam which was my first, I went with my gut feel to team up with GJ and that worked out very well).</div>
<div>
<br />
<b>Coming up with the game idea (Friday 8PM - 11PM)</b><br />
This is the most difficult part. Most of the initial keynotes were about coming up with ideas and more importantly deciding on an idea as a team. In our case we jotted down the 3-4 overall themes and we talked about various loops we can explore which would portray the Ouroboros. Here are the ones I remember...<br />
<br />
1. Brian and GJ had already come up with the idea of <a href="http://www.youtube.com/watch?v=0fKBhvDjuy0" target="_blank">Powers 10</a> and idea of an image zooming into itself.<br />
2. We discussed about a game of trying to break out of a loop like <a href="http://www.molleindustria.org/everydaythesamedream/everydaythesamedream.html" target="_blank">Everyday the same dream</a><br />
3. We also thought about gameplay ideas where the first attempt at a level affects the next one (A good game in the NYU game jam which did use this effectively was - <a href="http://globalgamejam.org/2012/what-kills-me-makes-me-stronger" target="_blank">What kills me makes me stronger</a>)<br />
<br />
We had sort of settled down on the first idea because the idea of zooming seemed very intriguing. The Ouroboros was worked into it by thinking of a possibility that when we zoom into atoms it goes into another universe of its own - Thus looping infinitely. As GJ put it - sort of like <a href="http://www.youtube.com/watch?v=AJOVUF-HaDw" target="_blank">the last scene of MIB</a>.<br />
<br />
At this point we just had a theme but no concrete game play ideas. I was suggesting a maze exploration game that you navigate by zooming through the different places. And if you took a wrong turn you would end up in a level higher up. Or there could be a key at the atomic level that you would pick up and come to the universe level to unlock something - again navigating by zooming. This was when we were joined by Shawn and Jordan. Shawn sort of liked our idea but was suggesting an obstacle avoidance game play set as a side auto-scroller. Jordan was also not feeling the whole maze exploration thing. I was against a side auto-scroller because that sounded like our previous <a href="http://indie-indian.blogspot.com/2011/11/go-away-norman.html" target="_blank">game jam game</a>. This was the most tense part of our whole game jam experience :) There was sort of a deadlock for almost an hour as we tried to come up with the one grand idea.<br />
<br />
Finally in an exasperated effort to bring everything together I suggested making a collision avoidance game where there was zooming in place of side scrolling. That seemed to go well with everyone - at least well enough to start work on the game. They say that designing by committee is not the best strategy but in our case it worked out okay. A leader who can just be the decider is good but maybe not be absolutely necessary for the game jam. Whatever method you choose it's essential that you have everyone committed to the idea before starting on the actual game.<br />
<br />
So Shawn and GJ were going to be the artists, Brian the designer/level scripter and me and Jordan the programmers.<br />
<br />
Brian made the decision of going for the game jam diversifier of drawing all the art by hand and scanning them. I was sort of intimated by the idea to start with but at the end of the game jam it proved to be a great decision. Did we know that then? Nope. The only thing I can probably say here is that you really have to know your limits and push against it in the right manner. If not, you would probably learn it the hard way anyway and its a good lesson to take with you.<br />
<br />
Next we discussed about the tools. I told them that I already had experience working on the previous game jam using HTML5 canvas and we can just continue using that. I am not a big fan of game engines for a game jam because I believe you tend to be influenced by the tool rather than the other way around. The experience of the last game jam was definitely helpful(and the stupid mistakes I made like trying to code an entire collision detection system). Things like animation code could just be taken from the previous one and put into this one. My game jam code is probably evolving to be the best engine I can use, in a game jam. Jordan hadn't worked on Javascript before and I gave him a crash course on it. He knew C++ well and picked it up quite quickly.<br />
<br />
<b>Making the game : Day 1 (Saturday</b><b> 9AM - 11:59 PM)</b><br />
The main part in actually making the game is probably dividing up the tasks neatly and working independently without disturbing each other frequently. A main person to see the overall progress would probably be useful - And Brian and Shawn did that for our team.<br />
<br />
I was so relieved to have another programmer in the team and it made things so much easier than the last game jam. Jordan suggested we setup a SVN repository and we spent about 30 minutes setting one at code.google.com. This saved us a huge amount of time since we could work on features/bug fixes separately and merge code without much pain. Actually the SVN client on my Mac was wonky and wouldn't sync the levels folder - but even with that we saved a lot of time overall. Incidentally having a repository also provides a nice history of development of our game. When I get some time I am going to put together a video of how our game looked at every hour of the game jam (I should be able to write a script to do this...Hmmmm).<br />
<br />
We decided to just use circle based collision since that's the easiest thing to do and just had circles for our objects till we had some art to use. We just kept working on one feature at a time and commit it to the repository as soon as it worked.<br />
<br />
Brian worked with Shawn and GJ to figure out the various scenes while we were programming. Shawn and GJ themselves were working separately and didn't try to sync up too much with their styles - which probably gave the the game a unique feel to it (Half the levels are B/W while the other half is in color :) They were just producing amazing hand drawn art.<br />
<br />
Brian did some audio recording of real world traffic and people sounds for some of our levels. He was also ready to do some level designing but was blocked by our inability to get the level parsing and rendering code done. We could have probably planned it a little better - but I am not sure whether the time spent on planning would have been worth it.<br />
<br />
At the end of day one we had built the basics of the game and part of the art integrated into it. We had no sounds and the level parsing was just starting to work. There were lots of bugs including on where the size of the obstacles were too small.<br />
<br />
I went back home that night and was thinking of doing something cool with the input. I had heard of <a href="https://github.com/doug/depthjs" target="_blank">DepthJS</a> which would interface Kinect with Javascript in the browser and was trying to figure out whether we could add that to our game. In the end it turned out to be too difficult to setup. In sheer desperation I started looking for ways to integrate webcams with Javascript when I just happened to come across a site which mentioned how you could integrate the accelerometer to your Javascript web app. I was able to add the five lines of code which integrated accelerometer to the game. I was sort of disappointed that this wasn't cool enough but it turned out to be the best five lines of code I wrote for the game jam (explained later).<br />
<br />
Lesson: Good feature doesn't have to involve lots of code. Stepping back and thinking in between your coding about what neat things you can do can go a long way.<br />
<br />
On a different note take some time in between to go around and see what others are doing. After all that's why you are at the game jam and not in your basement coding.<br />
<br />
<b>Making the game : Day 2 (Sunday </b><b>9AM - 3:00 PM)</b><br />
We still had majority of the levels to design and the art to incorporate on day two. Jordan was doing amazing work taking over the levels part and doing all the nitty gritty stuff and working with Brian on getting it right. I was working on the animation and the levels transitions. Jordan implemented the really helpful feature of skipping levels by pressing "1" (It's still in the game if you want to try it out :). This helped us to skip levels and test out different levels. It also helped us demo the various levels to people without having to wait for them to go through all the levels. Brian did a great job with the level design - tweaking the difficulty of the levels so that they weren't too easy. This was something I wished we could have gotten to early since we spent too little time in our previous game jam too. Oh well - Maybe in the next game jam.<br />
<br />
The sounds got pulled in at some point again with the code I used for the previous game jam. We just did simple looping of sounds. The looping wasn't perfect but we just patched it quickly with some fading at the beginning and the end.<br />
<br />
Once the levels were looking acceptable we were taking it a bit easy and just made sure our core mechanics was working. There were some bugs that we just deemed not too important for the demo. We just didn't want to be scrambling in the last minute to fix things that completely broke the game. Or maybe we were just too tired. Either way we didn't want anything badly broken just before the demo.<br />
<br />
The last thing left was to name the game. Various names were thrown around - including "Our porous ouroboros", "Milky snake" (don't even ask) and "Soroboruo" (Sounded like "Sorry bro"). Finally we settled down on "the universe within...". It seemed to reflect the recurring universes within each level and the concept of one universe being inside another in an endless loop.<br />
<br />
<b>Showing the game and Surprizes!!</b><br />
Once the game was done we had to set it up to show it to other people. There was a panel of judges from the NYU Game Center who were going to select best games for few categories - like best visual, best audio and best gameplay and best overall game. This was just a gesture of encouragement to the participants. Our team didn't have any high hopes of winning any prizes. The array of games made were just amazing - My favorite was <a href="http://globalgamejam.org/2012/horse-beat-xtreme" target="_blank">Horse Beatoff EXTREME!</a> with simple yet unique beat based gameplay. And then something happened.<br />
<br />
People were drawn to the hand drawn art, enjoyed the levels, using the "1" cheat code was just what we needed for a demo and the mere fact that they now knew that Mac books had an accelerometer which could be used was thrilling to them. They got the idea of the recursive worlds and really liked the zoom feature but also the simple gameplay of avoiding things. Each one of us had contributed major parts to the game that people liked and without us realizing we had just ended up being a great team.<br />
<br />
<a href="http://gamecenter.nyu.edu/people" target="_blank">Frank Lantz</a> saw the game and he got it immediately. He said he liked the way the accelerometer fitted nicely in the game and didn't feel too gimmicky (Totally accidental. I was going for more gimmicks than that). This was when it hit us that we had something in our hands. Sure - there were bugs in the game but people were willing to look past it into our ideas. We didn't talk to people as much but we felt we had communicated (Did I just pick that up from the trailer of "Indie Game: The Movie"?).<br />
<br />
At the end, we were given the best overall game at the NYU game center!! That was definitely a great feeling but the best memories we will carry will be the time we spent building a game together along with so many other people.<br />
<br />
The next day we were featured in Kotaku - <a href="http://kotaku.com/5880467/this-72+hour-game-lets-you-fly-through-the-galaxy-and-into-one-mans-mind">http://kotaku.com/5880467/this-72+hour-game-lets-you-fly-through-the-galaxy-and-into-one-mans-mind</a>. We are totally honored that they decided to pick us to represent the global game jam. There were so many more amazing games made in the game jam - So definitely keep watching out for them at <a href="https://twitter.com/#!/globalgamejam">https://twitter.com/#!/globalgamejam</a>. Or go through the whole list at <a href="http://globalgamejam.org/games">http://globalgamejam.org/games</a><br />
<br />
<b>Conclusion</b></div>
<div>
In closing I just want to thank the folks of Global Game Jam, NYU Game Center and my team mates for an amazing experience! It was an exhausting weekend but I learnt so much about myself with regards to making games.<br />
<br />
I have rambled a lot but if you reading this and are still thinking of joining the next game jam - Just do it. It will be one of the best experiences you will have as an independent game developer.<br />
<br />
(Version 2: Fixed some errors. Might need one more pass to fix it completely.)</div>
</div>Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com2tag:blogger.com,1999:blog-7968606659605866343.post-4786204716756871422011-12-22T22:15:00.000-08:002011-12-22T22:22:37.358-08:00Porting our HTML5 canvas game to mobile devices using AppMobi's DirectCanvas<div dir="ltr" style="text-align: left;" trbidi="on">
So I had worked on <a href="http://misbehavincat.appspot.com/" target="_blank">"go away, norman"</a> as part of the <a href="http://indie-indian.blogspot.com/2011/11/go-away-norman.html">Babycastles game jam</a>. I wrote it in HTML5 directly using the Canvas and Audio APIs without using any of the game engines. But now I wanted it to run it as an App on Mobile devices - mainly iOS and Android. There are already frameworks like <a href="http://phonegap.com/" target="_blank">PhoneGap</a> which allow you to package HTML5 games as an App on mobile devices. These frameworks just wrap the WebView inside an App and provide extra APIs to access native device features(like accelerometer etc.). So it should be easy to port my game to the mobile device, right?<br />
<br />
Wrong - the problem is that the game uses HTML5 Canvas and the default implementation of Canvas in the iOS and Android browsers(and hence the WebView) is pretty bad. Even though the speed of Javascript has been improved in these mobile platforms the performance of Canvas has not improved by much.<br />
<br />
So how does one get their HTML5 Canvas game involving lot of drawing and fast action onto mobile devices?<br />
<br />
Enter <a href="https://github.com/appMobi/ios" target="_blank">DirectCanvas</a> from <a href="http://www.appmobi.com/" target="_blank">AppMobi</a>.<br />
<br />
DirectCanvas from AppMobi provides an HTML5 runtime environment with an OpenGL accelerated Canvas implementation(plus a better Audio implementation based on OpenAL and a native Box2D implementation for Physics simulation).<br />
<br />
The iOS implementation of DirectCanvas was recently open sourced by AppMobi(A big thanks to them!). So I downloaded the DirectCanvas source from github and after a week of hacking was able to get my game working on the iPad (Most of the time was spent on getting it to work in landscape mode and understanding the sandboxed Javascript context for DirectCanvas - More on this in the next post). DirectCanvas provides almost a drop in replacement for the HTML5 Canvas and Audio API. Also my game had regular HTML elements for the very basic UI I had implemented and Canvas for the game area. DirectCanvas allowed me to use the accelerated Canvas as well as a WebView for the regular HTML elements (with some caveats - Again in the next post)<br />
<br />
I ran the ported App on a first generation iPad running iOS 4.3. The performance boost was huge compared to the mobile browser!! The game was very responsive and played just like a game written as a native App. I don't have FPS numbers but the video at the end of this post should make the performance boost very clear.<br />
<br />
I am really excited about the future of DirectCanvas for indie game development not only because it works but because it is open source! (The Android implementation should also be going Open Source soon according to AppMobi) Any framework out there which allows you to develop cross platform and especially on mobile devices costs some non-trivial amount of fixed or recurring amount of money. I can probably afford it but it definitely cuts off some other people from developing cross-platform (Students, people in countries with unfavorable exchange rates etc.).<br />
<br />
More than the cost, open source means faster improvements to the framework. I can't wait to see what people will do with this. Here is my list<br />
<br />
<ul style="text-align: left;">
<li>Port all sorts of free HTML5 game engines to run on it and now you can automatically run them on the iOS (and soon on the Android)</li>
<li>Get <a href="http://processingjs.org/" target="_blank">Processing.js</a> running again on iOS using DirectCanvas and allow sketches to be published to the App Store without running into restrictions by Apple.</li>
<li>Add WebGL support to DirectCanvas and get <a href="https://github.com/mrdoob/three.js/" target="_blank">three.js</a> running on it - How about some HTML5 3D action on mobile devices ?!!</li>
</ul>
<br />
If anyone is interested in collaborating on the above projects drop me a line here or on twitter(<a href="http://twitter.com/#!/vikerman" target="_blank">@vikerman</a>).<br />
<br />
(And if you do have some money to spend and not so much time do checkout <a href="http://www.appmobi.com/?q=node/27" target="_blank">AppMobi's XDK</a> - It provides an easy way to develop your games using the ImpactJS game engine and build and publish it on different platforms without the hassles of going through the SDK for each platform)<br />
<br />
And now here is a badly recorded video that shows the performance boost I got on my iPad by using DirectCanvas. The video shows how the game was unplayable on mobile Safari (which is what I would have got with something like PhoneGap) but plays smoothly as an App powered by DirectCanvas.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/c3BfBKiqdfE?feature=player_embedded' frameborder='0'></iframe></div>
<br />
<br />
(I should have captured more time towards the end when the game was getting a bit faster to show that the performance and responsiveness does not drop - but I was having a difficult time playing the game and shooting it through the phone camera). I will try to upload a better one in the future - I just couldn't wait to share this with everyone!!<br />
<br /></div>Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com5tag:blogger.com,1999:blog-7968606659605866343.post-8066755896988689502011-11-06T09:20:00.000-08:002011-11-06T09:23:50.427-08:00Go away, norman at Babaycastles!<div dir="ltr" style="text-align: left;" trbidi="on">
The nice people at <a href="http://www.babycastles.com/" target="_blank">Babycastles</a> called us to setup "Go away, norman" as part of their closing party on Friday along with the winning games from the Parsons game jam. It was a pleasant surprise and I was totally kicked to show the game at Babycastles! (If you don't know what Babycastles parties are about here is an article from someone who can explain it much better - <a href="http://www.diedagain.com/a-laymans-take-on-babycastles">http://www.diedagain.com/a-laymans-take-on-babycastles</a>)<br />
<br />
We got one of the cabinets to setup our game and we hooked up my laptop to the monitor and one of the gamepad controller they had to my Mac. Made some last minute fixes to the code so that the game is centered on the screen and we were ready to go. Everything was looking ok when someone found a bug - if the mouse went off the screen on the right the game was essentially on a never ending loop and it could be easily reproduced. I had to go behind the cabinet and fix it in 'vi' to add the extra check in the javascript. There is a charm with working with these physical things and hacked up code. Makes you feel more like Steve Jobs and Wozniack hacking on their first computer.<br />
<br />
The party was a blast! There were performances by <a href="http://www.myspace.com/avalunaband" target="_blank">Ava Luna</a> followed by the legendary Wu Tang clan. It was such a great feeling to see people walk up to our game and play it. The best part was when people actually got excited as they were almost caught by norman. We have some ways to go before it becomes a proper game - but it was nice to see people enjoy for what it is currently.<br />
<br />
Thank You Babycastles.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXl0C9TrWP4w2Y9oqgSPjCk6NnzFe6Wu5yQB3-TSRaY38Ujgx2bbZFU7j-Ja0qbS4zmhjZlWen3yB6UDTSP68W7FgCsIiLSuHNfAJqk1rXqatOj6vz0xLwkZPAk678dpKOIW86FKKY1jI/s1600/IMG_20111104_162844.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXl0C9TrWP4w2Y9oqgSPjCk6NnzFe6Wu5yQB3-TSRaY38Ujgx2bbZFU7j-Ja0qbS4zmhjZlWen3yB6UDTSP68W7FgCsIiLSuHNfAJqk1rXqatOj6vz0xLwkZPAk678dpKOIW86FKKY1jI/s200/IMG_20111104_162844.jpg" width="200" /></a></div>
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq4QhQPl8NOOjy6FVXV5bmuMFAnAJNuRAbe4A3hNZEkyGNHLQOGmcSTVT7IXUT7uDBY7mjqKLK8Kgp2TXZdBEJ7J7GoH-RzP6_CywzDncVzHkpIuyHkpcoGuU9I0k00Ai9NNhT6jo_B7Q/s1600/IMG_20111104_163937.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq4QhQPl8NOOjy6FVXV5bmuMFAnAJNuRAbe4A3hNZEkyGNHLQOGmcSTVT7IXUT7uDBY7mjqKLK8Kgp2TXZdBEJ7J7GoH-RzP6_CywzDncVzHkpIuyHkpcoGuU9I0k00Ai9NNhT6jo_B7Q/s200/IMG_20111104_163937.jpg" width="150" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd8xAyXd5Ozy71SZ3qFP6HJEetmSL_0_Ve1GCcaWZCOIh2NysbcUAhPUcM-Y_RK_DDUrg7jk0iFtFQbf9BOlJzhldAn-30W844ql-l_UCHToKcPuzZnGqNBoIwQbts9RCnY6upILuEo50/s1600/IMG_20111104_180155.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd8xAyXd5Ozy71SZ3qFP6HJEetmSL_0_Ve1GCcaWZCOIh2NysbcUAhPUcM-Y_RK_DDUrg7jk0iFtFQbf9BOlJzhldAn-30W844ql-l_UCHToKcPuzZnGqNBoIwQbts9RCnY6upILuEo50/s200/IMG_20111104_180155.jpg" width="200" /></a></div>
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijLWdpjbupGLO1l6JTAoC_hWYaAtU0zdowBb-EDpeXPnO_gz8K4vDqwVla5moOY7pP5DbNAG6nEyp7bgTOxRm_iubQyDMocfK-DKr6LUhYcL8hlLTAOf2xgKBHVgbTRqeAo25Sha2jMk8/s1600/IMG_20111104_212428.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijLWdpjbupGLO1l6JTAoC_hWYaAtU0zdowBb-EDpeXPnO_gz8K4vDqwVla5moOY7pP5DbNAG6nEyp7bgTOxRm_iubQyDMocfK-DKr6LUhYcL8hlLTAOf2xgKBHVgbTRqeAo25Sha2jMk8/s200/IMG_20111104_212428.jpg" width="200" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYMpWALi_kx4V2XxndvDrsEgJOQKVwgnLS8Ngu-TQjzO50594DioXCWVBa34LRhOGZ7nKtvDbDtvbiuFsZ8d-t5kx6mQBgCDJKT5BKUOPelXwNBVSc9quz-KEMJiLXPY91DQsbWNaKSLw/s1600/IMG_20111104_231252.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYMpWALi_kx4V2XxndvDrsEgJOQKVwgnLS8Ngu-TQjzO50594DioXCWVBa34LRhOGZ7nKtvDbDtvbiuFsZ8d-t5kx6mQBgCDJKT5BKUOPelXwNBVSc9quz-KEMJiLXPY91DQsbWNaKSLw/s200/IMG_20111104_231252.jpg" width="200" /></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjedCEUzEqu3XJinogge5LCZEjHX6ps-GXsf49WP55G9GSAcrL6djOtKg1fqsXOtnZjp_waC-cOH9qFc7nTD8FivsbFci_TlCvU_OyUjwsyXKFKqkcGR6qpF3yaOuF4vCDERIHLpzvxG-s/s1600/IMG_20111105_000207.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjedCEUzEqu3XJinogge5LCZEjHX6ps-GXsf49WP55G9GSAcrL6djOtKg1fqsXOtnZjp_waC-cOH9qFc7nTD8FivsbFci_TlCvU_OyUjwsyXKFKqkcGR6qpF3yaOuF4vCDERIHLpzvxG-s/s200/IMG_20111105_000207.jpg" width="200" /></a><br />
<br />
<br />
<br /></div>Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com0tag:blogger.com,1999:blog-7968606659605866343.post-11910313741974615922011-11-03T08:10:00.000-07:002011-11-03T09:18:10.540-07:00go away, norman<div style="text-align: center;"><br /></div><div>Back from the dead. After two exciting years find myself in a different job and New York. A new start. Hopefully will not ignore my game creation itch this time.</div><div style="text-align: center;"><br /></div><div>It got rebooted thanks to the amazing folks at Babycastles and Parson school of design, who organized a game jam about a week ago.</div><div><br /></div><div>Teamed up with the amazing <a href="http://neonjelly.net/">geejay</a> who handled everything from art to sound to level design as I floundered to finish the game code in 48 hours. I knew writing code from scratch in a game jam was bad idea - but I didn't have time to prepare on anything else. So just Javascript and HTML5 canvas it was. Spent a stupid amount of time on the collision detection. If I did it again I would probably just figure out some engine with basic collision detection before the game jam. </div><div style="text-align: center;"><br /></div><div>The theme of the game jam was any tweet from <a href="http://twitter.com/#!/Horse_ebooks">@Horse_ebooks</a> and we picked "Solution to Cat behavior problems" and "It will catch up with you". So here it is our game - "go away, norman"</div><div><br /></div><div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI_3m8TJj6yv4mnMRvBi2BYpllCpVmnapKKmsuu53Os4E3W0aIYQuTFt0XdmEo6RcthT42SZBk-hwQgqAF96VhJtnVMz1huZ9UGtbqU7_HADGS6eugZ69SPhcEUbA0SGmkZJIC5WDcxF0/s400/301070_10150423491881407_628486406_9823173_1095037590_n.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5670804032887231298" style="display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; cursor: pointer; width: 400px; height: 243px; " /></div><div><br /></div><div>You can play it <a href="http://misbehavincat.appspot.com/">here</a>.</div><div><br /></div><div>We are continuing to work on it - Expect a more official release soon...</div><div><br /></div>Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com0tag:blogger.com,1999:blog-7968606659605866343.post-34759789969352319782010-01-17T12:26:00.000-08:002010-01-17T12:53:42.769-08:00Game Project updateBeen long since I updated this blog with any details. Work on my next game has been spotty over all, but it has picked up in the last few weeks. Hopefully I can maintain the momentum. I have been playing around with new ideas and been learning quite a bit in the process. I have also solidified broad ideas for the game. For now I can tell you it's going to be a narrative game with story telling - Something other casual games have shunned but has been my interests - And probably leaves an opening for something to be explored.<br /><br />Here is an updated screenshot from the work in progress (With clues on its internal name). Good to see it has come some ways from the last one but clearly I could use artists. For the next next game maybe...<br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiBCsa9U1jVQOsTcaEl60-qAq1ppwLT5cRj7jueJ9GvFo0kLgRymq_qxgjLD-3uQkGnHN1138NUUipCMIxovGyHxqwQB8bl4vs-7Tl012YEiPdnnQ2tdfs1jrYnQGqAbX_88YdGtcY1HQ/s1600-h/LastCowboy-Screenshot.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 299px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiBCsa9U1jVQOsTcaEl60-qAq1ppwLT5cRj7jueJ9GvFo0kLgRymq_qxgjLD-3uQkGnHN1138NUUipCMIxovGyHxqwQB8bl4vs-7Tl012YEiPdnnQ2tdfs1jrYnQGqAbX_88YdGtcY1HQ/s400/LastCowboy-Screenshot.jpg" alt="" id="BLOGGER_PHOTO_ID_5427808591614071010" border="0" /></a>Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com3tag:blogger.com,1999:blog-7968606659605866343.post-15787954091891691942009-09-02T10:04:00.000-07:002009-09-02T10:09:34.550-07:00My next projectBeen busy working on my next project. Just wanted to update with this post to see what people think about it.<br /><br />Can anyone guess what the game is going to be about?<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8eRT7W_DjGoMaOQuzat1uKLdDR7cvDYzVu_iY0ECA09ieSvwdCzFM2NcP693nouFQSwIJe4SWxvv1_8kwwRggBbFwwzXWmtoYzgk7y7-0Pmje5qnj3MVhUr9iG7DCCD1SvSe9HaCgSCM/s1600-h/Screenshot.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 230px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8eRT7W_DjGoMaOQuzat1uKLdDR7cvDYzVu_iY0ECA09ieSvwdCzFM2NcP693nouFQSwIJe4SWxvv1_8kwwRggBbFwwzXWmtoYzgk7y7-0Pmje5qnj3MVhUr9iG7DCCD1SvSe9HaCgSCM/s400/Screenshot.png" alt="" id="BLOGGER_PHOTO_ID_5376917578296436034" border="0" /></a>Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com1tag:blogger.com,1999:blog-7968606659605866343.post-44526727632982335192009-08-07T10:11:00.000-07:002009-08-17T12:38:26.943-07:00Please Save the Great Flea Circus!After two weeks in development I am happy to announce the release of my first game - "The Great Flea Circus". You can play it in a few nice places that host Silverlight games.<br /><br /><div><a href="http://gamejolt.com/online/games/action/the-great-flea-circus/592/">http://gamejolt.com/online/games/action/the-great-flea-circus/592/</a><br /><a href="http://www.mashooo.com/SilverlightGames/The_Great_Flea_Circus.aspx">http://www.mashooo.com/SilverlightGames/The_Great_Flea_Circus.aspx</a><a href="http://silverarcade.com/"></a></div><div><div><a href="http://www.silverlightclub.com/apps/PlayApp.aspx?AppId=114">http://www.SilverlightClub.com/apps/PlayApp.aspx?AppId=114</a><br /><a href="http://silverarcade.com/games/vikerman/the-great-flea-circus/">http://silverarcade.com/games/vikerman/the-great-flea-circus/</a></div><div><br /><br /></div><div><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://gamejolt.com/online/games/action/the-great-flea-circus/592/"><img id="BLOGGER_PHOTO_ID_5367278976483350370" style="DISPLAY: block; MARGIN: 0px auto 10px; WIDTH: 400px; CURSOR: pointer; HEIGHT: 300px; TEXT-ALIGN: center" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn_PvKPA8rtEp5TTIPfsW9y5Dhi3WxNtr8YsQlWvXEp1_c7C2X34NnbU8Smw1iXH7GON2gfPp3ed0gkegGJTStbH-2SN8auZXRT9ME1rPACdGouN0nXO278R19x0-2uOkDbP0yWjO0xaQ/s400/Screenshot.png" border="0" /></a><br />What's with the name "The Great Flea Circus"? Well, the game is a clone of Circus Atari and hence the circus part. The flea part came because the characters I initially drew looked like fleas. Hence I made the theme a Flea circus instead of a regular circus!<br /><br />The main purpose of this game was to test the feasibility of using Silverlight for game development - And I have concluded it is not only feasible it is absolutely the most productive way to develop a game given my .NET background.<br /><br />Also after my previous post I have decided to switch to using Microsoft Expression Blend for the game development. Particularly I have been using the Behaviors feature in Silverlight to separate game logic(code) and game design(in Blend). For example in the Blend design window I just attach the behavior <span style="FONT-STYLE: italic">Paddle </span><span style="font-size:+0;">to the paddle in the designer and <i>Jumper </i>to the two jumpers. </span></div><div><br /></div><div><span style="font-size:+0;">An interesting thing happened where behaviors were really useful - When I showed the game to my wife (A great play tester and critic !) she asked me why there is ball in the middle of the screen which doesn't interact with the Jumpers. So I added the <i>Bounce </i>behavior(which the two black blocks on the sides have) to the ball and viola!, the Jumpers now bounce off the ball in the middle. It turned out to be a nice twist to the gameplay and so I left it in. Also check out the cheesy animation I put on the Ferris wheel in the background through Blend.<br /></span><div><br /></div><div><span style="font-size:+0;">More on Silverlight, Blend and Behaviors in a later post. Now go and "Please Save the Great Flea Circus!! "</span></div></div></div>Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com5tag:blogger.com,1999:blog-7968606659605866343.post-31865024847007577372009-07-20T23:44:00.001-07:002009-07-21T21:03:00.209-07:00Loading SVG from a Silverlight Application<strong><span style="font-size:130%;">The problem:</span></strong><br />I want to use SVG files as the underlying graphics format for my Silverlight game.<br /><br />Why?<br /><br />First why do I want to use vector graphics for all my game graphics assets? Since vector graphics are resolution independent this allows me to create the content once and scale it to the required resolution depending on the target platform without any loss of quality(which is not the case with bitmap image formats like PNG). The same graphic asset can then be used today on the web, tomorrow on some lower resoluton mobile device and later on a full screen view on a HDTV.<br /><br />What is SVG? In short, <a href="http://en.wikipedia.org/wiki/Scalable_Vector_Graphics">SVG</a> is an open file format that describes a vector graphics image. There are free and excellent tools like <a href="http://www.inkscape.org/">Inkscape</a> that lets us create images in the SVG format.<br /><br />What is XAML? <a href="http://en.wikipedia.org/wiki/XAML">XAML</a> is the basic application markup language for Silverlight and is also very good at describing vector graphics. Then why don't I just use XAML for my vector graphics? The main reason is that I want to keep the original format of my game assets to be portable to other platforms. <br /><br />So thats the problem in short - I want to be able to create my game graphics in Inkscape as SVG and load it into my Silverlight Application.<br /><br /><span style="font-size:130%;"><strong>The solutions that didn't work</strong><br /></span>The solution path is obvious - Convert SVG to XAML which Silverlight understands and load it into the Silverlight application. Either I can do the conversion during build time or do it dynamically at runtime. The solution which can load at runtime would get extra bonus points.<br /><br />So I looked at various existing conversion tools for converting from SVG to XAML.<br /><br />Here is a list of the ones that I tried and rejected.<br /><br />1) Inkscape XAML exporter - The current version on Windows has known <a href="https://bugs.launchpad.net/inkscape/+bug/282421">bug</a> and crashes. Also it is difficult to integrate this with the build process.<br />2) The commercial ViwerSVG - Allows to dynamically load SVG into a WPF application(Silverlight also I would assume). I gave it a quick spin and not very happy with the conversions. And the price tag was too heavy.<br />3) Next I tried the excellent <a href="http://www.codeplex.com/XamlTune">XamlTune</a>. The conversions from SVG to XAML were great and it had a command line utility which I could use as part of the build process. I saw the <a href="http://labs.ucaya.com/xamltune/">live version of XamlTune</a> and was even more excited. The only problem was that the output from XamlTune works with WPF but is not exactly friendly towards the subset of XAML supported by Silverlight. I needed to find a better solution.<br /><br /><span style="font-size:130%;"><strong>THE REAL SOLUTION : SVG2XAML.XSL</strong><br /></span>Enter svg2xaml.xsl. This is a <a href="http://en.wikipedia.org/wiki/XSL_Transformations">XSL transform </a>written originally by one <a href="http://sanpaku72.blogspot.com/2007/09/having-fun-with-xaml-silverlight-and.html">Toine de Greef</a>. It basically provides the rules to convert a SVG file to a XAML file and it supports Silverlight XAML! As it turns out Inkscape uses this same XSL to actually do the XAML export So I got the XSL from Inkscape since I thought it would have some extra bug fixes to it.<br /><br />So now I could use a command line XSL processor like msxsl.exe and use SVG2XAML.xsl to convert SVG to XAML and it worked really well with the sample set of SVG files I had.<br /><br />Now only the bonus question remained. Can I use svg2xaml.xsl to dynamically load SVG into my silverlight application? I had seen the live version of XamlTune. It seems to be using server processing for converting SVG to XAML. But that seems to be a waste of server resources. If I wrote a silverlight game I would like to avoid using sever resources since it costs money for the server CPU and bandwidth.<br /><br />Can I do it entirely on the client side? As it turned out I can! Eventhough Silverlight itself doesn't support doing XSL Transforms it can call into javascript code which can do the XSL transform and return back the transformed XML.<br /><br /><span style="font-size:130%;"><strong>Using client-side Javascript to convert SVG to XAML</strong><br /></span>The following is the Javascript code I used to do the XSL transforms from SVG to XAML. The script loads svg2xaml.xsl which in turn refers to colors.xml. I made some extra fixes to svg2xaml which allowed me to succesfully convert few more SVG files succesfully - You can get the updated <a href="http://vikram.subramanian.googlepages.com/svg2xaml.xsl">svg2xaml.xsl </a>and <a href="http://vikram.subramanian.googlepages.com/colors.xml">colors.xml</a>.<br /><br />You can use the following Javascript code in the page that loads the silverlight control.<br /><br /><pre style="BORDER-BOTTOM: #999999 1px dashed; BORDER-LEFT: #999999 1px dashed; PADDING-BOTTOM: 5px; LINE-HEIGHT: 14px; BACKGROUND-COLOR: #eee; PADDING-LEFT: 5px; WIDTH: 100%; PADDING-RIGHT: 5px; FONT-FAMILY: Andale Mono, Lucida Console, Monaco, fixed, monospace; COLOR: #000000; FONT-SIZE: 12px; OVERFLOW: auto; BORDER-TOP: #999999 1px dashed; BORDER-RIGHT: #999999 1px dashed; PADDING-TOP: 5px"><code>function loadXMLDoc(xml, isFileName) {<br /><br /> var xmlDoc = null;<br /><br /> // code for IE<br /> if (window.ActiveXObject) {<br /> xmlDoc = new ActiveXObject("Microsoft.XMLDOM");<br /> xmlDoc.async = false;<br /><br /> if (isFileName) {<br /> xmlDoc.load(xml);<br /> }<br /> else {<br /> xmlDoc.loadXML(xml);<br /> }<br /> }<br /> // code for Mozilla, Firefox, Opera, etc.<br /> else if (document.implementation && document.implementation.createDocument) {<br /><br /> if (isFileName) {<br /> xmlDoc = document.implementation.createDocument("", "", null);<br /> xmlDoc.async = false;<br /> xmlDoc.load(xml);<br /> }<br /> else {<br /> parser = new DOMParser();<br /> xmlDoc = parser.parseFromString(xml, "text/xml");<br /> }<br /> }<br /> else {<br /> return null;<br /> }<br /><br /> return (xmlDoc);<br />}<br /><br />function svg2xaml(svgString) {<br /> var xml = loadXMLDoc(svgString, false);<br /> var xsl = loadXMLDoc("svg2xaml.xsl", true);<br /><br /> if ((xml != null) && (xsl != null)) {<br /><br /> // code for IE<br /> if (window.ActiveXObject) {<br /> result = xml.transformNode(xsl);<br /> return result;<br /> }<br /> // code for Mozilla, Firefox, Opera, etc.<br /> else {<br /> xsltProcessor = new XSLTProcessor();<br /> xsltProcessor.importStylesheet(xsl);<br /> resultDocument = xsltProcessor.transformToDocument(xml)<br /><br /> var serializer = new XMLSerializer();<br /> var xaml = serializer.serializeToString(resultDocument.documentElement);<br /><br /> return xaml;<br /> }<br /><br /> }<br /> else {<br /> return null;<br /> }<br />}<br /></code></pre><br /><br />Then you can call this javascript function from your silverlight code to convert the SVG file to XAML which can then be loaded in the silverlight application. The following code prompts the user to select a SVG file on the local computer's file system and converts into XAML by calling into the javascript code using HtmlPage.Window.Invoke. It then displays it so that it fits the current silverlight control dimensions. "mapCanvas" in the code below is the just the main Canvas object that displays the loaded SVG image.<br /><br /><pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 100%"><code>...<br />using System.IO;<br />using System.Windows.Browser;<br />using System.Xml;<br />using System.Windows.Markup;<br />...<br /><br /><br /> OpenFileDialog fileDialog = new OpenFileDialog();<br /> fileDialog.Filter = "Graphics files (*.svg)|*.svg";<br /><br /> if (fileDialog.ShowDialog() == true)<br /> {<br /> string svg = null;<br /> using (StreamReader reader = fileDialog.File.OpenText())<br /> {<br /> // Store file content in 'text' variable <br /> svg = reader.ReadToEnd();<br /> }<br /><br /> try<br /> {<br /> // Call the Javascript XSLT processor to convert SVG to XAML<br /> Object returnVal = HtmlPage.Window.Invoke("svg2xaml", svg);<br /> if (returnVal != null)<br /> {<br /> string xaml = (string)returnVal;<br /><br /> Canvas canvas = (Canvas)XamlReader.Load(xaml);<br /><br /> double scale = Math.Min(640.0 / canvas.ActualWidth, 480.0 / canvas.ActualHeight);<br /><br /> ScaleTransform scaleTransform = new ScaleTransform();<br /> scaleTransform.ScaleX = scaleTransform.ScaleY = scale;<br /> canvas.RenderTransform = scaleTransform;<br /> canvas.RenderTransformOrigin = new Point(0, 0);<br /><br /> canvas.SetValue(Canvas.LeftProperty, (mapCanvas.ActualWidth - (canvas.ActualWidth * scale)) / 2);<br /> canvas.SetValue(Canvas.TopProperty, (mapCanvas.ActualHeight - (canvas.ActualHeight * scale)) / 2);<br /><br /> mapCanvas.Children.Clear();<br /> mapCanvas.Children.Add(canvas);<br /> }<br /> }<br /> catch (Exception ex)<br /> {<br /> mapCanvas.Children.Clear();<br /> TextBlock text = new TextBlock();<br /> text.Text = ex.Message;<br /><br /> mapCanvas.Children.Add(text);<br /> }<br /> }<br /><br /></code></pre><br /><strong><span style="font-size:130%;">Demo:</span></strong><br />You want to see something cool? Here is the Live version of the silverlight application served via <a href="http://silverlight.live.com/">Silverlight streaming</a>. You can download the following test SVG files locally and then load them into the live application by clicking on "Load Graphics" and selecting the local SVG file (Wikipedia has tonnes of public SVG graphics).<br /><ul><li><a href="http://upload.wikimedia.org/wikipedia/en/e/e3/Firefox-logo.svg">Firefox-logo.svg</a></li><li><a href="http://upload.wikimedia.org/wikipedia/commons/4/4a/Inkscape.logo.svg">Inkscape.logo.svg</a></li><li><a href="http://upload.wikimedia.org/wikipedia/commons/a/a5/Map_of_USA_with_state_names.svg">Map_of_USA_with_state_names.svg<br /></a><br /></li></ul><br /><br /><devlive:slscontrol silverlightVersion="2.0" src="/104718/SVG2XAML/" installationMode="inline"></devlive:slscontrol><br /><br /><span style="font-size:130%;"><strong>Caveats</strong><br /></span>The XSL transform is not perfect. Some SVG files might error out during conversion. It works well for most SVG files created with Inkscape which stick to mostly Paths and use linear or radial gradients.<br /><br />Also, even though the above javascript code tries to be cross-browser it does not work very well outside IE and FireFox. IE works the best with this code. Even Firefox doesn't work completely because the XSL transform applied is slightly different than IE. The XSL transform behavior is so different in Opera that many of the sample SVGs above don't even work. Safari didn't even come to the transformation part of the javascript.<br /><br />Please consider this as a proof of concept. I will be posting updates to the SVG2XAML XSL and the Javascript code as I figure out how to fix these problems.<br /><br /><span style="font-size:130%;"><strong>Final Thoughts</strong><br /></span>So there we have it. The ability to load SVG graphic files from a Silverlight application and that too dynamically at runtime. What use is it to load the SVG file dynamically at runtime by doing conversions in the client side? Think Live Game Map Editors... </li>Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com0tag:blogger.com,1999:blog-7968606659605866343.post-726088335226243592009-07-09T18:53:00.000-07:002009-07-13T13:48:30.367-07:00Silverlight for games<strong><span style="font-size:130%;"><span style="font-size:180%;">Target set. Weapons chosen</span> </span></strong><br /><br /><strong>What sort of game do I want to build?</strong><br />Even though this blog is quite recent, I have been thinking about the kind of game I want to make for a long time. I asked myself - "What do I miss in games these days?". Then I knew what I wanted to build. A simple 2D adventure game with a deep plot line. A game simple enough that anyone can pick up and play. A game that packs entertainment in a nice little package so that you don't have to invest 40-80 hours to finish it.<br /><br />A game where the story is central and the graphics and game play are just elements that help in telling the story. A game which someone shouldn't feel bad for giving up a good book for (OK -I might be setting the standards too high here)<br /><br /><strong>Weapon of choice?</strong><br />Having decided what I wanted to build I started thinking of the tools I want to use to build the game.<br /><br />My initial choice was XNA and it was an obvious choice for games. I have been dabbling with it and was quite excited about being able to deliver games on the Xbox 360 through the Community Games channel. I had even figured out the toolset with <a href="http://www.getpaint.net/">Paint.NET </a>for pixel art and a custom Game Map Editor like the <a href="http://xnafantasy.wordpress.com/2009/01/31/xna-map-editor-v31-released/">Xna Map Editor </a>and even looked at <a href="http://silverlua.codeplex.com/">SilverLua</a> for game scripting.<br /><br />Then I started looking at <a href="http://en.wikipedia.org/wiki/Windows_Presentation_Foundation">WPF</a> for the Game Map Editor since it was much easier to get traditional UI as well as 2D graphics needed for the map editor(instead of hacking XNA with WnForms). This is when something clicked inside me. Suddenly <a href="http://silverlight.net/">Silverlight</a> which shares its API with WPF seemed to be a really compelling option.<br /><br /><strong><span style="font-size:130%;">Silverlight vs XNA</span></strong><br /><strong></strong><br /><strong>Advantages of XNA</strong><br />1. Ability to deliver the game on Xbox360(or the Zune). There is no other way to do this currently without XNA.<br /><br />2. XNA is built for games. Silverlight on the other hand is not. There might need to be some adjustments made and some performance/features sacrificed owing to this.<br /><strong></strong><br /><strong>Advantages of Silverlight</strong><br />1. With the little info available XNA community game sales, it seemed to be <a href="http://www.joystiq.com/2009/03/30/gamerbytes-study-shows-disappointing-sales-for-xna-community-gam/">not that exciting after all</a>. I felt more and more that PC was a bigger delivery platform especially given the nature of the game. I had better chances of delivering it to a more casual audience through the PC than the Xbox. For this Silverlight is much better suited than XNA since I don't have to worry about installation, runtime redistribution issues in Silverlight like I would have to do with XNA.<br /><br />2. As an added bonus I can <em>potentially</em> get the game delivered cross-platform to Mac and Linux if I used Silverlight (Even though I am not sure how open Mac and Linux users are to an Microsoft technology)<br /><br />3. In game UI can be greatly simplified by using the Silverlight controls but at the same time have the flexibility to "skin" the UI to make it look more exciting in a game environment<br /><br />4. Making the game experience more social by integrating with social networking sites(like Facebook connect) is much easier with Silverlight game delivered on the web. This opens an entirely new avenue to explore.<br /><br />5. Containing piracy on PC would be easier with Silverlight than XNA (Or so I hope. Theoretically it would be possible to get the Silverlight code and find a way to hack it and run it offline)<br /><br />6. Delivering the game solely through the web also opens interesting monetizing options.<br /><br />7. The Roadmap for Silverlight with Silverlight 3.0 and beyond like <a href="http://wildermuth.com/2009/03/18/Enabling_Out-of-Browser_Support_in_Silverlight_3">Out of Browser experience</a> and <a href="http://weblogs.asp.net/scottgu/archive/2008/11/16/update-on-silverlight-2-and-a-glimpse-of-silverlight-3.aspx">GPU accelerated graphics </a>is quite exciting.<br /><br /><strong>So there it is. I've decided to use Silverlight for my adventure game.</strong><br /><strong></strong><br />An intersting side effect of chosing Silverlight is that I started to increasingly consider Vector Graphics for my game instead of raster graphics since WPF/Silverlight 2D API is more vector graphics based. The main advantage in my mind is cleanly scalable graphics and resolution independant games (Consider playing a silverlight game full screen. Scaling pixel graphics would make it blocky or too fuzzy after filtering to avoid blockiness). I have looked at using the cool and free tool <a href="http://www.inkscape.org/">Inkscape</a> for SVG graphics that can be converted to XAML and used from Silverlight(More on this in a later post)<br /><strong></strong><br /><strong>Flash?</strong><br />People might ask me why I didn't consider Flash at this point. It has all the advantages of Silverlight as well as much wider adoption across machines and platforms. The main reason is I like the productivity I get on the .NET platform over ActionScript or whatever new environment I have to get used to.<br /><br />Also the installation of Silverlight on Windows takes less than 20 seconds and I don't think that should be a big barrier if the game turns out to be good after all. (I am not sure of the experience on the Mac and Linux but something I will be looking into).<br /><br />And again the <a href="http://silverlight.net/learn/mobile.aspx">roadmap</a>/<a href="http://wmpoweruser.com/?p=4628">rumors </a>on Silverlight on Mobile platforms(and <a href="http://stevesmithblog.com/blog/silverlight-3-on-xbox-360/">Xbox360</a>?) makes me think Silverlight might not be bad after all in the longer run.<br /><br /><strong>iPhone?</strong><br />Everyone wants to get their game onto the iPhone. It seems to be becoming the defacto mobile gaming platform that is open enough to be easily developed for. At this point I am going to concentrate my efforts on the broader PC base and probably revisit iPhone development at a much later time(once my game is successful?). For now I am just making sure I am not basing any of my game data directly dependant on Silverlight(like using XAML) so that it can be more easily ported to other platforms. Who knows? <a href="http://www.infoworld.com/d/developer-world/silverlight-iphone-next-not-quite-says-ballmer-035">Silverlight might be ported to iPhone even</a>.<br /><br />So that's it. I have decided on the game to be built and therefore the technology to use based on my target platform.<br /><br />This post has become much longer than I anticipated. Please feel free to post your comments here if you disagree(or agree) with me on any of the above things.<br /><br /><strong>Update(July 10th, 2009) : <a href="http://silverlight.net/getstarted/silverlight3/default.aspx">Silverlight 3 has been released</a></strong>Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com4tag:blogger.com,1999:blog-7968606659605866343.post-34360334651407419792009-07-07T12:41:00.000-07:002009-07-08T21:15:40.663-07:00Why get into Indie game development? (or Why Not)This is not the first question I asked myself when I thought of making games and I suspect it's the same with so many of you thinking of getting into it.<br /><br />But I think it's an important question to ask early. Again I haven't done anything at this point and so I am not trying to give advice or answer any questions. Just putting down my thoughts here.<br /><br />For me the "Why Not?" question is the easier one to list. It follows logic more. "Why?" is probably more emotional (This is turning out to be a recurring issue in my life - "Do I want to go back to India?"). And by putting them down it should be perfectly clear to anyone why you should *<strong>not* </strong>get into independent game development.<br /><br /><strong>Why Not?</strong><br />1. I already have a good paying job which takes a lot of my energy<br />2. The game market is saturated with too many games - high budget and independent<br />3. Because of 2) the money you can make in games is low and way less than what I currently make in my job<br />4. The chance of failure is lot more than success<br /><br /><strong>Why?</strong><br />1. Because I really want to make games (if not, just stop right here)<br />2. I am my own boss. I decide and control the outcome(at least I feel I do)<br />3. Satisfaction with work is high. Work is no longer a bad word (is that good for my personal life though?)<br />4. Applying creative ideas at levels unprecedented in my current job<br /><br />At this point my friends might tell me - "You should join a start up". Some of them are in one and they seem to get 3), 4) and some of 2).<br /><br />But I guess it all finally boils down to 1) - Why do you want to make games? This is where things cannot be put down on paper. At this point I am probably comparing myself to an artist who likes the art. But then there is this extra thorn in my subconcious - I am not even sure I am good at the art.<br /><br />I am not sure of any of these things and it is this uncertainity which leads me to treat it like an adventure. And I could just stop it all one day and go back to my cozy life - Forget I even went on an adventure. Which is where I hope this writing will help me - Not to put down some memories but to remind myself that there is no turning back now...Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com4tag:blogger.com,1999:blog-7968606659605866343.post-82329014003775090072009-07-05T23:13:00.000-07:002009-07-06T01:08:17.129-07:00Why this blogI am setting up this blog so that I can chronicle and share out my experiences in trying to become an independent game developer.<br /><br />Right here is step 1.<br /><br />The other purpose of this blog is to share out information on specific <span id="SPELLING_ERROR_0" class="blsp-spelling-corrected">technologies</span>/ideas that I have been playing with in creating my games - Aggregation of information I found on the web or things about which I haven't found enough information on the web where I would like to fill the gaps in.<br /><br />Also my hope is that this blog would be a place where I would announce progress and completion of my games and the lessons I learnt on the way.<br /><br />And finally the name of my blog <strong>"indie-<span id="SPELLING_ERROR_1" class="blsp-spelling-error">indian</span>"</strong> - Is to probably just identify myself with the sub-minority group that I am in - The Indian independent game developer. Maybe there will be some posts on this, trying to reach out and connect with others in this group. Maybe if I become successful I can get more people into this group...Anonymoushttp://www.blogger.com/profile/15599894556739103705noreply@blogger.com6