Game Build - Live Reloading and Executable Building for HTML5 Games

[cheapdevotion]

Hey All,

This is my first post here. While I am not new to web development, HTML5 games are pretty new to me. In an attempt to bring some of the same workflow from my web apps over to HTML5 games, I have started work on a new tool.

 

Game Build is a node.js based tool that gives you a development server with live reloading, production builds, and executable builds for your HTML5 games. The tool is still in very early development, but it is already very usable and has some big features planned.

 

The current feature list:

• Automatic merging, compressing, and minifying of JavaScript and CSS files.
• Automatic creation of desktop executables (Win, Mac, and Linux) using node-webkit.
• Built-in development server with live reloading of html, javascript, and css files - so there is no need for tools like XAMPP.

 

And here are a few things I am working on:

 

• Rewrite the tool to be it's own command line application.
• Add support for Coffee and TypeScript files
• Add build targets for iOS and Android using PhoneGap

 

 

Here is a link to the GitHub Repo:

https://github.com/CheapDevotion/game-build

 

Like I said earlier, I am new to HTML5 game development, and would love to hear feedback on how I can improve the overall workflow. I haven't had a chance to write unit tests, or even test the product itself very thoroughly, but will fix bugs as soon as they pop up. If you have any questions, feel free to reply to this post.

 

Thanks!

[rich]

I've so got to play with this later today

 

How does the live reload work? Does it just check for changes to local files and then refresh the page, or does it pull just that one new script in again? (how about for assets?)

[cheapdevotion]

Right now, the live reload uses an implementation of the LiveReload protocol.

 

From the website:

 

LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.

Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.

 

 

Right now, this doesn't mean a whole lot (Although it does speed up development a bit), but the idea is to allow the user to write CoffeeScript or TypeScript, and see those changes instantly. I am going to spend the day adding support for those formats, so hopefully I will be pushing an update tonight.

 

Like I said before, I don't know much about the game development workflow for HTML5 games, so if you can think of any improvements to the system, I am all ears.

[ironfroggy]

I would love to see this as actual Grunt tasks that I can incorporate into my existing setups, rather than the template it seems to exist as now.

 

You've basically built exactly what I wanted, in the node-webkit builds. Bravo!

[cheapdevotion]

I would love to see this as actual Grunt tasks that I can incorporate into my existing setups, rather than the template it seems to exist as now.

 

Thanks for the feedback. It's funny that you mention that. I am currently rewriting GameBuild to be a standalone cli application, and once it's complete, I am going to break specific features out into grunt tasks so it can be used in other workflows. Keep the requests coming. I want to build something that can help every developer in one way or the other.

[Mike]

Since node.js is pretty cool by itself I'll definitely check this out once it's more finished.

[mathaeus]

Automatic creation of desktop executables (Win, Mac, and Linux) using node-webkit.

 

This is so cool!

 

I'm just wondering, if you're not wasting your time recreating something, that pretty much exists already? Livereload, minification, coffee... You can do all of this using Grunt and if you want it all in one, you can use a Yeoman. If I understand well what you're going to create, I think this would be much more suited to be a(n epic) Yeoman's generator.

[cheapdevotion]

Hey guys,

I am finally getting a chance to dust this project off and make it what I really want it to be. The Grunt tasks a going to stay for the most part, but mostly as a convenient development server. The idea behind this tool was not so much for development, but to make the process of building a little more smooth. For true multi-platform build support, a generator or Grunt task on it's own won't really cut it.

 

Here is what works:

gamebuild new <game name>  #this creates a new project based on a template that sets up your folders correctly.gamebuild start  #starts the grunt task (development server, live reload, etc)

Here is what is coming:

gamebuild add <mac, windows, linux, android, ios, blackberry, winphone>  #adds the platform as a build targetgamebuild run <mac, windows, linux, android, ios, blackberry, winphone> #run the application, using an emulator if needed.gamebuild build  #builds app for target platforms (node-webkit for desktop, cordova for mobile)

I am also thinking about incorporating some kind of package manger for common game engines.

gamebuild install phaser#latest

but I am not sure if this is something that is wanted/needed. What other features would users consider important? Am I missing any core functionality? 

[leolrrj]

Man!!! I think this is perfect! I've already spent lot of time trying to setup everything... if I had this tool I ccould saved this time