Impact – HTML5 Canvas & JavaScript Game Engine

Impact is, it claims, the “most awesomest way to create even more HTML 5 games” and at first glance, you’d be hard pressed to argue against that. The slick website demonstrating the engine shows a game created using the engine running on browsers both on desktops and on mobile. It also comes with its own dedicated level editor so people who are more design orientated are looked after as well.

The engine’s greatest strength is its well written and nicely presented documentation – with examples of each class in action. All this for just $99 is a steal – however there are free alternatives out there…

LimeJS HTML5 Game Framework

Available via Github, LimeJS is entirely free and open source – allowing you to build fast and (more importantly) native-experience games for multiple platforms. It has a decent community around it, however it does seem to suffer from the “too many cooks” issue and the documentation is poorly presented – offering little more than is absolutely necessary. As a free alternative, however, you’d be hard-pressed to find anything better suited for HTML5 game development.

JawsJS

More of an individual’s attempt to work with HTML5 canvas, JawsJS definitely has some legs. It has since been extended beyond the canvas and the developer promises plenty of updates in the following few months. Definitely one to watch.

GameQuery

Perhaps the one that interests me the most, GameQuery attempts to create a gaming engine based around the already fantastic jQuery framework. The developers are specifically promising that it will be easy, quick and stick to the jQuery philosophy. As an avid jQuery fan myself, this one has me excited. Supporting solid gaming features such as collision detection and animation and promising that beginners can develop basic 2D games – this could do for game development what jQuery did for carousels.

So far, so little. Google have announced that there will be an API to interact with but the extent of how much is offered is still unclear. Developers are able to sign up here to get in on the action ahead of the general public. Interestingly, there have already been a few services built for Google+ that are making some noise.

One of these ideas is GPlus.to This is essentially as tinyurl-a-like which provides you the ability to shorten your long, number-heavy Google+ name to something shorter, sweeter and all around more tweetable. Whilst pretty interesting, the service is still not able to access any of the Google+ API features and as such cannot really be classed as a Google+ app.

But what happens when Google+ opens itself up to developers? Google are one of the strongest evangelists for HTML5 and will certainly provide a fantastic collection of methods (as they have for pretty much all their big APIs – maps, translation & search) to take advantage of the new features that HTML5 and the latest browsers provide – I’d expect to see a lot of <canvas> from this point on. There is also the rumour that Google+ will be built around the OpenSocial API which means developers familiar with this should be able to just jump straight in.

Does this mean that the majority of developers will start moving away from Facebook and toward Google? Not quite. Facebook has always had a pretty bad rep for their development tools – not least the documentation. However, this has long since been recognised by Facebook and there has been some, frankly, fantastic work done under the umbrella term “Operation Developer Love“. Facebook is still not without its faults but in comparison to it a few years back, it is a pretty nice platform to build for. As a developer of several Facebook apps myself, I’m hoping that the two different platforms will see eye-to-eye in terms of integration, so its not a case of build 2 apps for 2 platforms.

Where I feel that Google+ could blow Facebook out of the water is in its (already successful) mobile apps. The problem with the Facebook apps for the iPhone/iPad is that it is a very stripped down version of the web service. Any custom tabs or applications are just not accessible. Google+ could turn this on its head and provide developers with the opportunity to make apps for the mobile version of Google+. How Apple would react to apps within apps, I’m not so sure but I would imagine that anyone with an Android device would be just peachy.

I guess at this point, until Google announces more about its developer tools, it’s a “watch this space” kind of deal. But its a very interesting space to watch, one that could literally be worth billions.

Now, 5 months later, I’ve learnt quite a bit on how to balance my professional, social and development life and here are a few tips/pointers for anyone wanting to do the same.

Prepare Your Code

“Strategy without tactics is the slowest route to victory. Tactics without strategy is the noise before defeat.” – Sun Tzu

A clean, organised codebase allows you to be able to jump in and out quickly. Remember as you develop, to comment any areas that are complex because if you want to be able to develop during your 30 minute lunch break, you don’t want to waste that time figuring out what functionLongNameDoesThis(); actually does.

Keeping your code modular, following an MVC framework, will allow you to work on only the areas you have time to work on, with the security of knowing that any changes you do won’t have a damaging effect on the entire project. This is especially important if you are planning on opening up your code to multiple people to work on or going open source.

On the topic of multiple contributors to a project; it helped me to have my code under the version control system, GIT. Combined with a CodebaseHQ account, this allowed me to push and pull the code from many different devices. Had I been working with a team on this project, we would have been able to work in small bursts on our own areas without the risk of overwriting each others work. For a free alternative to CodebaseHQ, try Github. Each of these systems comes with robust ticketing systems which allow you to list out tasks, bug reports and to-dos.

As I developed Little Devil, I realised that to be able and want to work on it in the evenings, I had to split out the larger jobs into many smaller tasks. This made the development process a lot less daunting, taking a large such as “Implement Powerups” and turning them into procedural, bite-size steps (ie – create class, add methods, do graphics…). This also helped in making the entire task feel more achievable in my few free hours in the evenings.

Use Your Commute

“Secret operations are essential in war; upon them the army relies to make its every move.” – Sun Tzu

As I mentioned before, I work in Central London however I live about 1 hour away on the tube, which gives me a good 2 hour period of my day where I am on my own, in my own little world (usually miserable looking with headphones shoved in my ears).

When I first started developing Little Devil, I used the commute time to watch video tutorials & podcasts. As I progressed in my knowledge and my project requirements changed, I spent the time typing out notes, jotting down ideas and doodling on pieces of paper.

The message here is that you can turn your daily commute into a productive few hours of your day. Use it to your advantage.

Find Your Zen

“Can you imagine what I would do if I could do all I can?” – Sun Tzu

I am a very distracted person. When I’m comfortable at home, this distraction increases ten-fold. Whenever I sit down to code, it takes me around an hour to be able to get into “the zone”. Once I hit this zone, my best coding comes out and I fly through tasks. The important and most difficult part of this is the lead up to “the zone”.

For me, my zen was created by putting headphones on (to the annoyance of my other half) and attempting to code for an hour. Find out whatever works for you, whether it is your favourite album, a quiet room or even surrounded by friends giving input. Once you get into the zone, you’ll see your task list get smaller, quicker.

Keep Up The Day Job

“Know your enemy and know yourself and you can fight a hundred battles without disaster.” – Sun Tzu

Probably the most important thing about balancing your personal and professional projects is to ensure that your main job is stable and that you are not getting too distracted by your fun, new project. Always remember which of the projects pays the bills and puts food on the table.

This is not just to make sure you don’t get fired. It is also to make sure that when you find yourself able to code you aren’t distracted about your main job, worried about clients or deadlines.

You need to make sure that when you get into the zone, nothing is going to drag you back down to the real world.

Stop Developing!

“He who knows when he can fight and when he cannot, will be victorious.” – Sun Tzu

The worst thing that can happen to a personal project is that you burn out. This will happen, no matter how interesting the project seems at the start. Once you compile, build or run the project and find 100+ bugs, you’ll want to just throw it away and start a new project.

To avoid this, make sure you aren’t running out of steam. Don’t code all the time and don’t fall into the trap of developing in every spare moment. Don’t feel guilty for forgetting about the project for a week or two and play the latest games or watch some junk TV.

Finally, make sure you are not forgetting your friends, family, peers and bosses. Eventually the project will be finished and these are the people that you’ll want to show off your hard work to.

Good Luck Out There

I hope these tips help you to finish your projects without turning your life into a nightmare of 24/7 coding.

If you enjoyed this post, why not subscribe to my feed or check me out on Twitter.

The Example

Lets say you are running a blog that will have podcasts as a content type every so often, but you don’t require a heavyweight plugin like PodPress – Custom Post Types are the perfect solution.

The Code

Take a look at the following code:
[box icon="code"]register_post_type(‘podcast’, array(
‘label’ => __(‘Podcasts’),
‘singular_label’ => __(‘Podcast’),
‘public’ => true,
‘show_ui’ => true,
‘hierarchical’ => false,
‘query_var’ => false,
‘supports’ => array(‘title’, ‘editor’, ‘author’)
));[/box]
Whack that straight in your theme’s functions.php file and voila – you’ll see the new Podcast custom post type right there listed underneath the Comments button. So what did this code do exactly?

The Parameters

As you can see, all we’re really doing is calling the new register_post_type() method and sending through some parameters:

• Label is pretty straight forward, what do you want the custom post type to be displayed.
• Singular label is also intuitive, what do you call ONE of your post types.
• Public is a meta argument to determine whether your post type will be accessible via search, menu’s etc… (more about this on wordpress docs)
• Show UI - set to true to show the custom post type on the back end. False can be set to allow extra content to determine how the custom post type is displayed in the back end.
• Hierarchical is a parameter to determine whether each custom post can have or be a parent of another.
• Supports allows you to determine what content creation fields are used when creating or editing a custom post:
  • ‘title’
  • ‘editor’ (content)
  • ‘author’
  • ‘thumbnail’ (featured image) (current theme must also support post-thumbnails)
  • ‘excerpt’
  • ‘trackbacks’
  • ‘custom-fields’
  • ‘comments’ (also will see comment count balloon on edit screen)
  • ‘revisions’ (will store revisions)
  • ‘page-attributes’ (template and menu order) (hierarchical must be true)

The Results

Shown below: the new “Podcasts” custom post type. Now start filling that bad boy with some content!

Set up is now quicker than ever, so give it a go on your local or dev servers. I would give it a few weeks before upgrading or deploying any live sites however, WordPress updates are notorious for their security leaks.

Check out the official WordPress TV introduction to the new features below!

What’s new?

Here are the promised features:

• New default theme including extended customization options (background color).
• Choose your admin name and password during installation.
• WordPress MU (multi site wordpress) interegration.
• Custom post types.
• Menu management built into the “appearance” tab.
• General back-end theme design.
• Bug fixes.

New Default Theme

Although 99% of people will probably switch this theme off, it’s a decent looking theme (although far from the best I’ve seen) with plenty of customization options.

Easier installation

The addition of allowing developers to define their admin username and password instead of being given a forgettable, randomly generated one is a blessing for anyone whos job involves setting up multiple sites a month. I can remember more than one occasion where I’ve had to go direct to the database to reset the password. This will be an understated but useful feature.

WordPress MU collaboration

With vanilla wordpress 3.0, bloggers will be able to roll out multiple blogs running off the same backend. Although this includes no groundbreaking features that haven’t been seen in WordPress MU, it is definately nice to have from the outset should a WordPress project scope change half way through development.

Custom post types

Although there are many plugins out there that have fixed this issue (my favourite being Pods CMS, highly recommended even after WP3.0 comes out), WordPress is going to get a lot easier from the outset to create a custom post type. Although you can do a lot with posts and pages, there are plenty of occasions where you may need a type of content on your site that can’t be categorized as either.

Menu Management

For any developer who has struggled to figure out the right combination of exludes and includes when using wp_list_pages(); this is going to be a stand out feature. Using a WYSIWYG approach to designing the menu, this will be endlessly useful and very nice when handing over to clients. Definatly a lot easier to teach a non technical person a drag and drop system than telling them to manage parameters in the wp_list_pages function.

General polish and a tidy up

Overall there seems to be a general tidy up to the codebase and graphics. Hoverovers seem crisp, pages are more responsive and we’re promised several pages worth of bug fixes ensuring there are no hangovers from the 2′s.

So, how can you prepare your site for the major update?

If you are a developer running a vanilla rollout of any of the later 2.x’s then there should be no issues for you as the core codebase behind WordPress remains the same. If you are a plugin developer the best way to approach the update is to get the latest beta/release candidate version and throwing it on there. Considering WP3.0 is only weeks away from launching, the base code will more than likely remain the same – which should give you a good idea of how well (or not as the case may be) your plugin will be supported. If you have any concerns over how well your site or plugin will work with 3, I’d recommend keeping an eye on the forums or the bug tracking site.