I would like to dive straight into the graphics and AI stuff, but thought a small primer on getting a nice working environment set up would be worth while in the long run.
There are many ways you can set up your project structure and many ways to host it.
I have chosen to host mine on Heroku via a Ruby On Rails project.
I am thinking of using Pusher to share data across devices at some stage, and the Rails application will allow us to do this.
Setting up the Rails app and running it on heroku is outside of the scope of this blog. There are many tutorials online on how to achieve this.
I have included the source code of the project I am working on in tandem with this blog, and will link to the tags where necessary.
Here is the tagged version of the codebase, relating to this blog post.
And here is the current codebase.
See here for an example of the end goal we are trying to achieve
So, now let's get to some coding.
Setting Up Grunt
To get Grunt set up, you will need to install nodeJS and the node package manager. Here are some guidelines.
These steps will mean you now have a package.json file in your source directory that specifies the node dependencies. This file will list our grunt plugins later on.
Now, our Gruntfile.js is where all the magic happens. This simply contains all of our tasks that will help us to get our code to run.
To run a grunt task, we simply run:
Tasks can depend on eachother as follows (Don't worry about what each task does right now, the fact is that they can depend on eachother):
grunt.registerTask('compile', ['haml', 'sass', 'coffee', 'requirejs']); grunt.registerTask('dist', ['compile', 'copy:assets']); grunt.registerTask('default', 'dist');
If you leave out the taskname, then grunt will run whatever task you have configured as the default. More on Grunt later.
Setting Up Bower
So, we want to use some nice JS plugins. There are so many out there that do great things, so why reinvent the wheel?
Bower to the rescue.
npm install -g bower
This will give you access to the command:
We just need to tell bower where to install our downloaded plugins.
We do this by placing a .bowerrc file in our project root, with the content:
Now, let's try it out and install jquery.
bower install --save-dev jquery
You can search bower for packages with:
bower search PACKAGENAME
We will use bower to install dependencies needed in our project such as box2d. The source will be included in later blog posts so you will actually not have to run these commands, but get used to the syntax.
Directory Structure And RequireJS
So, we are working inside our 2djssrc directory.
I find it saves a lot of needless typing and has really concise, readable syntax.
Tell node you want some packages:
npm install grunt-contrib-coffee --save-dev
npm install grunt-contrib-requirejs --save-dev
Now, enable these packages in your Gruntfile.js, by adding the following to the file:
bower install --dev
In this file we set up the paths to our dependencies. More on this here. Have a look at the source code again if you are unsure.
We then configure the task, as follows, passing it the entry point file "main" as follows:
The way the above works is that it looks for the file main.js in the "baseUrl" directory. This file, you write yourself, and it is the entry point into your application.
It will load all other required files using the following syntax:
Read the requireJS docs for more on this.
Common practice is that main.js will be the entry point into your application.
From there app.js will be called, which contains your application logic.
If you look at the source, you will see that our app, at the moment simply alerts a message to the screen. Ground breaking stuff!
This is not all grunt can do.
We can use it to copy over assets or any other files to other destinations in our project.
Furthermore we can run a watcher task that reloads our browser when a file changes. More on this later!
HAML/SASS And Serving Up Our App
Well, there are some libraries we need that we have to include manually.
I have manually included the requirejs library for now as I had some complications with referencing it from the html.
There is a directory in our source directory called lib. This contains any other libraries we need outside of the requirejs compilation.
We have to somehow serve up our app on a web page.
I like to use HAML to write my HTML, but it requires some setting up.
Again, grunt has a task for this: https://github.com/jhchen/grunt-haml2html
We create our index.haml file in our 2djssrc directory and use this plugin to compile it to public/game.html.
If you look in the index.haml file you will see that all it does is reference a file "requirejs" and also has a data-main attribute in the script tag which is used by requireJS.
This attribute must point to our fully compiled JS file from the previous grunt task.
Note that you must install the haml gem for this. It is already included in the Rails app Gemfile, so a simple bundle command will solve this.
One last thing is that I will also use the grunt SASS plugin to compile some SASS files down to CSS. The idea is basically the same as what we did for the coffeescript files. Take a look in the source to get a better understanding.
In theory, this is all we need to get going. If we view our compiled game.html (via the /game url in our rails app) page we will hopefully see the alert message showing up.
It seems like a lot of work to get all this set up, and yes, it is a very steep learning curve.
It will allow us to concentrate more on our application logic rather than where stuff should go.
Grunt will serve us as a great tool to automate a lot of things as we progress, so read up on it.
Hopefully, you got something from this tutorial, and it won't be long before we get into some of the good stuff.