Thursday, May 17, 2012

The game Stick Portal

I want to share more of the ideas I've been exploring. First, let me start with this, an early version of a game I'm calling Stick Portal. Click on the image to play:
It's entirely written in Coffescript using HTML5 canvas. Just need a browser to play, works pretty well on mobile devices (add it to your home screen and it'll even go full screen and behave like a free app).

The idea is to create a simplified puzzle game with a level editor where kids could share levels they created. The current version has ten levels that are the tutorials to teach players how to play the game. I've just started on the level editor that will, eventually, allow people to create their own levels easily and share them with others.

The motivation for this came from seeing what Valve did with Portal 2. Portal 2 had a level editor called Hammer that was amazing but incredibly hard to use. Kids were using Hammer to create puzzles for each other that they could play in Portal 2 -- which is great exposure to CAD-like modeling tools and a nice spatial reasoning workout -- but it was really painful. Valve just launched a much easier-to-use editor for Portal 2 that is truly fantastic, highly recommend it.

Stick Portal is free to play, open source (MIT license), and the code is available on GitHub. The source might be useful to people working on similar games as it contains examples of ways to use the Box2Djs physics engine, handling touch and multi-touch (and accelerometer) on mobile devices, how to make your web page look like an app, plenty of examples of working with HTML5 Canvas, crazy things like a way to automatically resize the canvas when the browser window changes or a device rotates, and a lot of other goodies. Won't claim it's the most beautiful code ever, but it is well commented and was fun to write. I hope it is useful.

I plan to keep working on this and extend it to include an editor, but I've been sitting on this long enough so, in the spirit of launch early and often, I'm putting it out now. Please let me know what you think in the comments, and I'd love it if you'd drop me a note if your kids like the game or if the examples in the source turn out to be useful to you.

Update: A couple people have told me they have gotten stuck not being able to guess the controls in the tutorial. It's AWSD or arrow keys for movement and mouse button and mouse movement for the portal gun. On mobile, it's hold down your finger to run toward your finger and hold down above you to jump, tap to aim and fire the portal gun, and second finger (multi-touch) to move the portal gun without firing (like to maneuver a held box).

I also should have said more explicitly that one very cool thing is that the game doesn't use Flash, it's just HTML5. So, it works on all modern browsers without a plug-in, which is neat-o. Also interesting is that it is a fairly complicated HTML5 game running smoothly in the browser on PCs and mobile, almost looking like a native app, but not a native app.

Finally, let me add that I did this game mostly to learn about making games fun. That's a surprisingly hard thing to do. If you're interested in that topic too, nothing like trying to do it yourself, but I'd also recommend the books "A Theory of Fun Game Design" and "The Art of Game Design: A Book of Lenses". And, if you find Stick Portal fun or don't find it fun, please let me know!


Fighting Addict said...

This game is awesome :D but I must admit I was tempted to steal your idea and make boat loads of money on mobile, I think they would eat this game up GET ON IT or I or someone else will in a couple of weeks!

Fighting Addict said...

This game is awesome get it on mobile before someone else does!!!

Anonymous said...

Oh, man. I got to level 3 and could not figure this out until I started clicking on the mouse. And then I wondered, "what the hell are these halo's?". But found myself telelporting though it... awesome!

Anonymous said...

I like it!

Emmanuel Smith said...

When downloading the project, the box2d file appears to be incomplete.

Greg Linden said...

Thanks, everyone, glad you're enjoying it.

Fighting Addict, the game is MIT licensed, so you can do whatever you like with the source.

Emmanuel Smith, sorry about that, made a mistake on my Github push. I fixed it, should be all set now if you download again and want to use the version I committed. You can also get Box2djs directly if you like.

Adam said...

Looking forward to reading the code. I've been doing a lot of coffeescript lately, and a little bit of canvas programming.

Chris Jacob said...

Thank you for sharing this project! Finished all the levels. Tons of great code to inspire others. Can't wait to play around with a level editor. Bravo!

Anonymous said...

Seems like two-finger touch to handle the box with portal gun does not work. I can't move the box when playing on mobile

Greg Linden said...

Thanks, Anonymous, for the report. What device are you using? If you let me know, I can investigate.

The two finger touch is awkward. You need one finger on, then a second finger on will control the angle of the arm (and move a held box).

I tried two other control mechanisms for this, but this two finger touch was the favored in playtesting. In general, getting any kind of complicated control is hard on a mobile device, though, it was interesting to see how much of an issue that is when I was developing this game.

Anonymous said...

The control is much better on mobile if you make the stickman shoot only when user double tap (click), and single tap is to moving forward.