m

Latest posts.

Pipewalk – Puzzle Game using Javascript and Canvas

I’ve been tinkering with the fabulous ImpactJS game engine lately, and having an absolute blast. The man behind it, Dominic Szablewski, is a great guy, and he’s done a terrific job with Impact. My latest creation with it is Pipewalk, a puzzle/board game where you attempt to supply green ooze to a board full of pipes by rotating them until they are all connected. Its actually a take on a common linux game called Netwalk. It uses canvas, so it’ll only work if you’re using a browser which supports it. Other than Impact, I also used jQuery/jQuery UI and the excellent Absolution jQuery UI theme by Michael Vanderheeren, as well as Uniform for styling form elements.

Link: http://www.sevrd.com/code/pipewalk/

Hqx Image Scaling Algorithm in Javascript

The friendly and talented chap behind Impact JS, Dominic Szablewski, has implemented the lovely hqx scaling algorithm in javascript. It uses a temporary canvas to render the source image and scale it up without pixelation or blur by modifying each pixel of the graphic. The processed canvas can then be drawn on to other canvas instances using drawImage or even rendered to a URI for use in displaying the image using an img tag. The code is freely available on github. Cheers, Dominic!

Source: PhobosLab.com

Snippet: jQuery Syntax Highlighter

Snippet is a jQuery Syntax Highlighter plugin which allows you to apply syntax highlighting to blocks of code. It currently supports 15 languages, including C/C++/C#, PHP, CSS, Javascript, Ruby, Python, Perl and more, and ships with 39 color schemes. The plugin itself looks to be lightweight and easy to use. The next time you find yourself needing syntax highlighting, this would be an excellent way to go.

Source: Snippet :: jQuery Syntax Highlighter

Cardinal Quest: A 4DRL Javascript Game

I recently participated in 4DRL, an event where developers attempt to crete a working, playable roguelike in only four days. I teamed up with a fellow programmer, Ido Yehieli, and together we created a game called Cardinal Quest, a somewhat arcadey Gauntlet or Golden Axe inspired game made using onlt HTML, Javascript, and CSS. We made heavy use of HTML5 features, such as the canvas and audio tags, so you’ll need a modern browser to play it. Works best in Firefox and Chrome. It was an intense, fun experience trying to develop a working game on such a deadline, and it teaches you a lot about editing, refining your scope, and how and when to cut corners.

Click here to play Cardinal Quest.

So You Want to Make A Game?

So…  you want to make a game? Great! Whether it’s the next (insert current popular game here)-killer, or simply something to entertain your cousin, game development can be a fun and hugely rewarding activity. As someone who has been a hobby level game developer for quite some time, I find that there are some simple guidelines that really help to ensure that you’ll not only end up with a great game, but also that aid in keeping you on track, seeing an idea through to completion and weeding out the good ideas from the, well, not so good ideas. This is by no means a definitive or complete list, and I am by no means a professional nor accomplished game developer (IANAPGD, I just invented a new acronym!), but these are some principles I have picked up over the years which I strive to adhere to.

1. Get It In Writing

Got an idea for a game? Great! Thats the first step. Write it down! No- not just in a chat room or on your blog, get out those archaic devices they used in the before time; pen and paper. Personally, I find that ‘unplugging’ from your computer or game console for a little while and writing down your ideas can be tremendously helpful. Without any other distractions (Ooh, piece of mail! Ooh, piece of RSS! Ooh, piece of inane Facebook status update!), you’ll have a true conduit from your brain to the world. You’ll be able to get all of the bits and pieces of your idea recorded in a stream of consciousness manner. The facets and minutiae of your concept don’t get lost in the ether. Having an initial design recorded can help tremendously in all phases of game development.

2. Prototype

Once you’ve settled on an idea and you’re ready to start development, your very first goal should be to create a playable prototype as quickly as possible. It doesn’t need to be (and probably shouldn’t be) pretty or otherwise visually delightful. What you want is a functioning demo of your basic game idea, distilled to its most basic form. Having a prototype allows you to determine if your game-to-be is even going to be fun, and it also gives you a glimpse into what features or design elements you might need, or conversely, need to cut, as well as what sorts of technical challenges you’ll ultimately be facing in the long run. As a rule of thumb, if it takes more than a couple days to get a playable prototype, consider it a red flag. Thats not to say your project is doomed, or that its a bad idea, but it almost always mean you’ll be facing the added difficulty of being faced with a fairly complex and time consuming undertaking.

3. Iteration

Burdening yourself with the task of implementing umpteen features and game elements is only going to put a damper on your motivation and ultimately lower your chances at finishing your project. Think of your game as a collection of building blocks. Try and get the basic game play developed, working and fairly solid first. Then you add on the next element, aiming to get it as functional and solid as presently possible before moving on to the next. This keeps you from ending up with a mess of half implemented features, and perhaps more importantly, it will help you to determine which features may not be necessary or fun, and perhaps even reveal new elements which you had not previously considered or imagined. Be careful of that last part, though. You don’t want to fall victim to scope creep.

4. Play Your Game, or, Test, Test, Test!

In all likelihood, you’ll be at least “kinda sorta” playing your game fairly consistently, checking for crashes or bugs. On top of this, though, make sure to make time for playing your game on a regular basis during development. It can be pretty easy to get tunnel vision when you’re in the coding trenches, which will make it difficult to spot potential problems or boring/frustrating/unnecessary features before they become much more difficult to remove or revise. This one seems pretty obvious, but it bears pointing out. Make sure you’re seeing the forest, and not just the trees.

5. Feedback

This step can be the most exciting and rewarding point, or the most difficult and anxious point, depending on your personality. Before your game is finished, get someone else (or better, a number of people) to play it and provide their feedback. The earlier and more often you do this, the better off you’ll be. Getting a fresh perspective on your game is important and helpful for a number of reasons. Firstly, you’re able to find out if other people with tastes differing from your own find the game enjoyable. If they don’t, you’ll (hopefully) be able to find out why. While you won’t and shouldn’t make changes as a result of each and every piece of feedback you receive, the collective opinions can reveal the strengths and weaknesses of your concept. Additionally, people who don’t know the in’s and out’s of your program are likely to use it in ways you have not, helping to reveal bugs or other issues that you might not encounter any other way. Finding and correcting problems with your code early is always going to be easier.

So there you have it. A partial list of guidelines and principles that will help you create your game and get the most enjoyment out of it. Now, good luck, and start developing!

Simplified Use of jQuery UI Dialogs with dialogWrapper

I love JQuery. I also love JQuery UI. Well, I mostly love UI. It’s kind of a love hate relationship. At the end of the day though, I always know i’ll be cuddling up to it for my web ui needs. In my opinion, one of the greatest pieces of the UI package is the Dialog. The only thing that tarnishes an otherwise beautiful gem is the fact that it’s a bit of a hassle to actually get a dialog set up and working. Adding simple confirmation boxes, or worse, using a plethora of dynamic dialogs is a bit more painful than it should be. Enter dialogWrapper. It basically adds a set of one shot functions for creating normal dialogs, alert style boxes, and yes, even confirm’s with a single call. Check it out.

Source: dialogWrapper- Simplified use of jQuery UI Dialogs « Most Things Web.

Ubuntu 10.10 Maverick Meerkat Nautilus Theme Issue

So today I decided to upgrade to the current beta of Ubuntu 10.10, codenamed ‘Maverick Meerkat’. After an hour or two of package downloads and installs, I was up and running with no major problems; save for one. I noticed that when I opened Nautilus, my default file browser, it did not appear to be using my GTK theme settings, instead looking like it was using stock styling and controls. After a bit of googling I found the (very simple) solution:

Remove or rename the ~/.gconf/apps/nautilus folder. Then, kill the nautilus process (pkill nautilus worked for me). After that, opening a file browser displays my proper theme as expected.

Solar PHP Documentation Mirror

So, for a while now I’ve been tinkering with a fantastic PHP web application framework called Solar. Rather than hammer out several paragraphs extolling it’s virtues (and I could), here’s a brief summary from the site:

Solar is a PHP 5 framework for web application development. It is fully name-spaced and uses enterprise application design patterns, with built-in support for localization and configuration at all levels.

I’ve been using Solar in my current pet project for a little while, and I decided that I’d like to have local copies of both the manual and API documentation for those times when I just want to unplug and hunker down. After getting these generated, I figured, What the hell? I’ll post them up online to act as mirrors for the documentation found on the official site. So without further adieu:

Solar PHP Framework Manual (current as of August 19th, 2010)

Solar PHP Framework API Reference (current as of August 19th, 2010, version 1.1.1)

As an aside, also be sure to check out the Solar Wiki which is also linked to from the main site.

Shadow animation jQuery-plugin

Edwin Martin of bitstorm.org brings us an impressive JQuery plugin which extends the javascript api du jour’s animation capabilities to include manipulation of the CSS3 box shadow property. Make sure to check out the demos in the link; the ‘click me’ example in particular is quite a gem!

Source: Shadow animation jQuery-plugin.

jsdo.it – share JavaScript, HTML5 and CSS

jsdo.it, a hot new web service by KAYAC inc. is a collaborative, community based code playground where users create code snippets using Javascript, HTML5 and CSS. These creations can then be ranked, forked and commented on by other users of the site. Stats found throughout the site give readers a listing of the hottest posts for the day as well as overall, and also the most highly ranked authors. I’ve already managed to find some extremely cool bits, such as this trippy swirl demo and this impressive particle display.

Source: jsdo.it – share JavaScript, HTML5 and CSS.