Impactjs a JavaScript Game Engine

Hi all,

My new adventure is development of HTML5 and Javascript games.

After reading a lot about HTML5 and Javascript games I understood that the best thing would be to use a game engine framework.

The question is which one would be the best choice? With the proliferation of Javascript game engines this is not an easy task. So I started with CraftyJS. I think this is a good choice for someone that is starting with game development but, I felt that it lacks a few things. So I kept with my research and testing and I opt for ImpactJS. Even though it is not free, I felt it was better for me. Why did I choose it:

  • Good support
  • Lot of open source games
  • Includes a game level editor
  • Includes a publishing tool for iOS App Store with native-like performance
  • Books with source code
  • Well maintained and updated
  • Good community

And for these reason it was my choice for future game development. I will keep posting whenever I have news on this.

Tip of the week – run html pages from Github

Did you know you could easily run an HTML page from Github?

The solution is rawgithub !

Just go to the file you would like to run and click on raw button. This will show the page but served as text/plain and not text/html.

So that you run the file as text/html on the url just delete the dot from rawgithub.

Before:

https://raw.github.com/nmoliveira/requirejs-demo/master/blog.html

After:

https://rawgithub.com/nmoliveira/requirejs-demo/master/blog.html

Very nice to share code or show some demos, but, beware, this is not for production! This is not an alternative to hosting services!

Check Can I use rawgithub.com on a production website?

RequireJS Optimizer

The next chapter after Get into RequireJS

This time I will explain how you can optimize your project code when you are using RequireJS.

RequireJS has an optimization tool that does the following

  • Combines related scripts together into build layers and minifies them.
  • Optimizes CSS by inlining CSS files referenced by @import and removing comments.

With the optimizer, you can optimize just a single file, or you can optimize all the CSS and JS files in your project by using a build profile.

Requirements

There are different ways and different tools to do this, but my preference will go to run using Node.

So, if you don’t have node installed on your machine, go to node page and install it. Then, you need to download the optimizer from here.

Place the optimizer in the up folder of your project. Now, you need to create a build file with the all necessary configuration.

For my demo in the Get into RequireJs it looks like this:


({
  appDir: "../",
  baseUrl: "scripts",
  dir: "../../requirejs-demo-build",
  paths: {
    jquery: 'lib/jquery'
  },
  modules: [
    {
      name: "app/blog"
    },
    {
      name: "app/dataservice"
    },
    {
      name: "app/presenter"
    }
  ]
})

Note: Your output folder should always be different from the development folder!

Put your config file in the scripts folder (or you could put it anywhere, but be aware that all the paths are relative to the config file!)

And finally, to run the build, run this command from inside the scripts directory:


node ../../r.js -o app.build.js

The output should be something like this:


Optimizing (standard.keepLines) CSS file: c:/wamp/www/requirejs-demo-build/css/style.css

Tracing dependencies for: app/blog

Tracing dependencies for: app/dataservice

Tracing dependencies for: app/presenter
Uglifying file: c:/wamp/www/requirejs-demo-build/scripts/app/blog.js
Uglifying file: c:/wamp/www/requirejs-demo-build/scripts/app/dataservice.js
Uglifying file: c:/wamp/www/requirejs-demo-build/scripts/app/presenter.js
Uglifying file: c:/wamp/www/requirejs-demo-build/scripts/app.build.js
Uglifying file: c:/wamp/www/requirejs-demo-build/scripts/app.js
Uglifying file: c:/wamp/www/requirejs-demo-build/scripts/lib/jquery.js
Uglifying file: c:/wamp/www/requirejs-demo-build/scripts/lib/require.js

css/style.css
----------------
css/style.css

scripts/app/blog.js
----------------
scripts/lib/jquery.js
scripts/app/dataservice.js
scripts/app/presenter.js
scripts/app/blog.js

scripts/app/dataservice.js
----------------
scripts/lib/jquery.js
scripts/app/dataservice.js

scripts/app/presenter.js
----------------
scripts/lib/jquery.js
scripts/app/presenter.js

No if you open the output folder, you will see that your javascript code is now minified!

Get into RequireJS

Intro

Hi all, welcome to Get Into RequireJS! If you have good skills on javascript and already knows about the Revealing Module Pattern, get ready because, I will go cut to the chase!

What is RequireJS?

RequireJS is a module loader. Its functionality is to load modules and take care of dependencies for you. When you define a module, you will identify its dependencies and RequireJS will load those dependencies in runtime and just when they are needed!

How to add RequireJS to the project?

RequireJs assumes that you have a specifc directory structure in your project. Of course you can override this settings, but for the demonstration I will follow the default structure, which is the following:

project-directory/

  • project.html
  • scripts/

Under the scripts folder, you will have all the javascript for your project. I always suggest to have the third party libraries separated from your files, so, in my demo I have the following structure:

project-directory/

  • blog.html
  • scripts/
    • app/
    • lib/
    • main.js

Where my code goes to app folder and third party goes to the lib folder.

In the html page you will just include the RequireJS:


<script data-main="scripts/main" src="scripts/lib/require.js"></script>

The data-main attribute, indicates to RequireJS, that once it is loaded, it will have to load the scripts/main.js file. There are other ways to do this, but this one, without any configuration, is definitely the simplest one. Note that I did not refer main.js but only main, this is because RequireJS expects to load only javascript files, so you can omit the extension when you refer your modules.

On the main.js, normally I have some RequireJS configuration and the first call to my application API:


// requirejs configuration

// Define baseUrl (the base folder for the js files)

// Define path to jQuery

requirejs.config({

  baseUrl: 'scripts',

  paths: {

    jquery: 'lib/jquery'

  }

});

// Start the main app logic.

requirejs(['app/blog'],

  function (blog) {

    blog.start();

  });

In the code to start the application, I am saying to RequireJS that I need the module blog and then I can call my function that starts the application. We will just see how that works.

How to define a module?

The structure of a RequireJs module, follows the Module Pattern

In my demo I have the following module (file app/blog.js):


define(['app/dataservice', 'app/presenter'], function(dataservice, presenter){

  var start = function(){

    dataservice.getPosts(presenter.renderPosts);

  };

  return {

    start: start

  }

})

The code indicates that the module blog, depends on dataservice and presenter modules. On the start function, I am calling getPosts on dataservice module and I am passing the renderPosts on the presenter module as callback (not the best way, but for demo purpose is fine).

Picking one of the dependencies modules, for instance the dataservice, it is very similar as it also follows the same structure:


define(['jquery'],function($){

  var getPosts = function(callback){

  $.get('data/posts.json',callback)

  };

  return {

    getPosts: getPosts

  }

})

Final notes

There are a lot of configuration that you can do, different ways to load modules but, this was a cut to the chase, just to show how easy is to use RequireJS. If you thought it was interesting and want to start using it, I suggest to take a look at the documentation first.

You can download my complete demo in Github.

preview

jQuery Custom Events

jQuery custom events are a great feature to deal with complex situations or non trivial situations.
You can create a custom event that reacts to a particular situation that is not defined with jQuery.

You can attach a custom event just like this:


$('#someElement').on('myCustomEvent', handlerForCustomEvent)

and trigger it like this:


$('#someElement').trigger('myCustomEvent');

Note: You can also attach custom events to non DOM elements, like an object of any class for exemple.

You can see a demo of these feature in this jsFiddle.

Ajax requests on jsFiddle

Did you know that you could create XHR requests on jsFiddle? If you didn’t know,  just keep reading..

To improve user experience jsFiddle has created the echo features. One of its features is to provide to developers the possibility to create XHR requests. It is very simple to use:


  &amp;lt;div class='wrapper'&amp;gt;
  &amp;lt;p&amp;gt;JSON will be received in 3 seconds&amp;lt;/p&amp;gt;
  &amp;lt;div id='post'&amp;gt;&amp;lt;/div&amp;gt;
  &amp;lt;/div&amp;gt;

This is my HTML, a simple div with id=post will be appended with the response from the request.

To make a request, I have used jQuery and it looks like this:


// My request

$.ajax({
  type: &amp;quot;POST&amp;quot;,
  url: '/echo/json/',
  dataType: &amp;quot;json&amp;quot;,
  data:{
    json: JSON.stringify({
      text: 'Response from server',
    }),
    delay: 3
  },
  }).done(function(response) {
    show_response(response);
});

// append data from response to my div
show_response = function(obj, result) {
    $('#post').append(obj.text);
};

My request is just a simple jQuery ajax() call. There are some things that we have to provide.

The data has to be a POST call.  The url points to   ‘/echo/json/’ because I’ve chosen json to represent my data, but there is other types available (including XML).  The ‘json’ object that you define on the request, will be the object that you’ll get on the response. The optional ‘delay’ parameter, it’s a time in seconds after which data should be returned.

And this is pretty much it! Simple and very useful if you, like me, use jsFiddle to share code samples, help anyone or just quick testings!

You can see the live example here.

Javascript pre-compiled templates with Handlebars.js

Handlebars is a template engine based on mustache.  The code blocks are delimited by {{ .. }}

Here’s an example of a Handlebars.js template:

<script id="todos-template" type="text/x-handlebars-template">
  {{#each todos}}
    <div class='todo-item'>
    <p>Title: {{ this.title }} </p>
    </div>
  {{/each}}
</script>

Rendering a template is a two stage process: Compile and Execute.

1 – To compile we should do this:


var source = $("#todos-template").html();
var template = Handlebars.compile(source);

2 – To execute we do this:


var context = {
  todos:[
    {title: "Task 1"},
    {title: "Task 2"}
  ]
}

var html = template(context);

See live demo

The process of compiling the template is in fact, converting the template from string, to javascript function, that we call later with our data. The compilation is the most expensive in terms of performance. So if you want performance, make sure you compile each template once and, cache the template functions and, reuse whenever you need.

So, now is where things get interesting. One of the most important features of Handlebars.js, is the support for pre-compiled templates. Pre-compiled templates, as the name states, are templates previously compiled instead being compiled in run time.

So this means, that we can get rid of the most expansive part of the template process!

Handlebars includes support for pre-compiling file-based templates. It is possible to have a script that finds all your templates (in separated files), compiles them and put them in one single file!

To achieve the compilation as a build step, we need to have installed node.js and npm.

After installing both, we need to install also the Handlebars npm package like this:

$ npm install handlebars -g

The -g flag installs the package globally, so it can be used in any project.

And now, we are ready to start using the precompiler. On the console you can do:


$ handlebars <input> -f <output>

The compiler will insert templates in Handlebars.templates. If, for example, you had an input file todos.handlebars, the compiler would insert it at Handlebars.templates.todos.
In my previous example and having a folder called “templates” with all my Handlebars.js templates, I would compile them like this:


$ handlebars templates/ -f templates.js

Handlebars then, would create a single file with the combined templates under templates folder in a templates.js file that we need to include in our page.

Back to my example, now, instead of having:


var source = $("#todos-template").html();
var template = Handlebars.compile(source);

I can have just:

var template =  Handlebars.templates.todos;

The main idea to retain is that skipping the compilation at run time, we are avoiding the most expensive step of template rendering in terms of performance!

Check on my github the code for a simple example using precompiled Handlebar.js templates and Backbone.js

List of references:
http://handlebarsjs.com/