Duel Demo 2

Posted on by
Reply

Since #ggo12 I’ve moved my game’s repo to a new location so that the old version and contest fork stay intact while we work on new features and content.

Screen shot of our characters on the new test map

In the latest version, the gameplay remains the same, but we’ve added new content and features that will help us produce the kind of experience that combines old-school gaming with kungfu cinema story telling and modern web technology.

Some of the updates include:

  • New 2D map system with depth and height for floors and walls
  • Layer and Z sorting to keep everybody where they belong
  • Characters can climb steps and walls and fall from elevated planes
  • Narrative scenes using the game engine’s camera and sprites
  • Maps and scenes use JSON data and images that can be setup and exported from Adobe Flash timeline

 Play the new demo

Duel of the Devs

Posted on by
Reply

I recently participated in the GitHub Game Off competition. I’ve been doing some JavaScript game development in my spare time, and this was the perfect chance to share as well as focus those efforts into a single release.

The game demo, titled “Duel of the Devs”, is an HTML5 web based game that runs in modern browsers on desktops and mobile devices. All rendering is done using a single canvas element. This is important because I want to be able to use WebGL in the future, or explore other platform and graphic options that do not rely on the DOM.

In the game, you play a fighting monk who must defeat a ninja and his shadow clones. The real ninja runs around cloning himself. His clones will turn to a puff of smoke if hit once, or if the original is defeated. The ninja can take a few hits before going down which ends the game. There are some credits to wrap up the experience.

I have to thank my love Sun for the awesome character design and animation. You can read more about what we used and download the full source code here.

Enjoy!

Faking Fusion on OS X

Posted on by
Reply

CoreStorage Logical Volumes Backed by Multiple Physical Volumes

Here are some articles that helped me setup a DIY Fusion Drive, like the ones shipped in Apple’s latest desktop Macs, in an older Mac Mini. You’ll need a Mac with an SSD and HDD. I put together this setup using a Mid 2011 Mac Mini and an SSD and Data Double Kit from OWC. The HDD I used is the one that my mini shipped with.

The short story is, the Core Storage diskutil commands as well as any hardware mods you make are not supported by Apple. (Try this at your own risk!) You’ll need to wipe all the data on both drives to create the logical volume. While I’ve found this setup very stable for the past three months that I’ve been using it, I haven’t exceeded the capacity of the SSD, so I don’t know what kind of performance penalties you run into when a Fussion drive gets closer to full.

Example DIY FusionDrive setup with test results
http://jollyjinx.tumblr.com/post/34638496292/fusion-drive-on-older-macs-yes-since-apple-has

DIY FusionDrive writeup
http://www.petralli.net/2012/10/analyzing-apples-fusion-drive-in-an-attempt-to-retrofit-an-existing-macs-with-an-ssd-and-a-traditional-hard-disk/

The Commands:

Create the logical disk. Use the list commend to find the Logical Volume Group (LVG-UUID). Finally create the volume using all available space.

diskutil coreStorage create CoreStore disk1 disk2
diskutil coreStorage list
diskutil cs createVolume {LVG-UUID} jhfs+ "CoreStore" 100%

JSHint for Sublime Text 2

Posted on by
2

The other day I setup a quick build system for Lux Ahoy based on jQuery’s Makefile. One of the nifty bonuses was the JavaScript syntax checker JSHint. It gives tons on tips on how to clean up your code, and can even detect potential errors. If you want to try it out, just head to jshint.com with some code ready to paste and get Linting!

To get the most out of a syntax checker I want it built into my text editor and maybe even run every time I save a JavaScript file. Enter JSHint for Sublime Text 2 and Sublime Package Control. JSHint for Sublime will output all of the linty goodness in Sublime Text’s console. All the instructions are there and if you haven’t added any packages to Sublime you’ll quickly get addicted. I’ve also installed SublimeLinter which highlights code inline. That should annoy me into cleaning up my code, or drive me to write everything in CoffeeScript!

After a couple of hours SublimeLinter turns out to be the perfect companion with fewer white space errors than JSHint for Sublime. Are those from jslint or an older version of jshint? Keep your columns Douglas Crockford!

Lux Ahoy

Posted on by
Reply

Lux Ahoy: HTML5 Game
FWA Site of the Day – April 23, 2012

I recently helped my buddies Luxurious Animals launch a new HTML5 game demo called “Lux Ahoy”. The game, currently in beta, is a 2D physics-based action/shooter where two pirate ships take turns firing cannon balls at each other until one of the ships sink. What really sets this title apart is the stunning artwork as well as the play achieved through the design of each level. All the credit for creativity, design and game development goes to Lux and their fantastic team.

I was brought on just before launch to work on optimization and compatibility with mobile devices – iPad and iPhone being the primary focus. The game uses a combination of HTML5 Canvas and CSS to achieve layered animation. While some might choose to do everything in canvas or vice versa, Lux found a happy balance between both. As a late comer to the project, this is something I had to contend with. The majority of what I did to improve graphics performance was to ensure that DOM elements being animated with CSS were being treated as accelerated render layers in WebKit. Accelerated compositing had a big impact on all of the UI transitions as well as some in-game elements. I owe the techniques I used to Matt Seeley, an engineer at Netflix, and the talk he gave in January at the HTML5 Dev Conf.

While I left the HTML5 Canvas code alone for the most part, it’s worth mentioning that the game uses Grant Skinner’s EaselJS and SoundJS as well as other parts of his upcoming CreateJS framework. Most of my effort there was on SoundJS and making sure that HTML5 Audio would play on Safari. We also had to support background music on iOS where we’re limited to playback on only one audio channel which must be triggered by a user initiated event (on click).

I’d still love to take a stab at speeding up the canvas rendering or even porting the game’s sprite animations to accelerated rendering with CSS3. The canvas animation performance is acceptable as long as you’re running a recent version of iOS. I don’t recall hearing that Apple added accelerated canvas rendering to WebKit in iOS, but something is certainly better in iOS 5.1 than say 4.3.

I also helped with a few other details that I consider specialties of mine: social network widgets and Google Analytics tracking. We’re still watching and waiting for more results so please head over to luxahoy.com on your desktop or smart phone and let me know what you think!

Read the blog entry at luxanimals.com