Better Than It Needs To Be

The strength of Illyriad’s character art is that it isn’t as good as it needs to be. It’s deliberately much better than it needs to be.

It’s the Abba theory. Abba, the theory goes, may be at heart mere Pop music, but it has stood the test of time and is still well loved, because it is much better than it needs to be. Abba may be inconsequential Pop, but it’s so wonderfully crafted that decades later the songs can still delight.

The character art for Illyriad has been broadly praised, and many of the individual portraits have a quality that brings a smile to the face. The key to this, I think, is that we didn’t set out to make the characters good enough, appropriate, acceptable. We set out to make them brilliant, and then poured love into them. It’s easy to say, but hard to do – and requires a much greater focus on the details. Look, for example, at this close-up of our male Dwarf – at his pauldron and the buckle on his breast-plate:

No-one ever needs to see the character this close up. Players will see this piece of armor at between 10% and 30% of this size. We never said to ourselves “do we need to show scratches and chips on his armor? do we need that much subtlety in the texture on the metal?” We just put the detail in without questioning it, because we were determined to make the portrait brilliant. But having lavished love on each inch of a character, the overall effect, when you stand back and look at him or her from a distance, is that the quality shines through.

HTML5 Canvas: Animation Loop – Only work when you have to

Animating HTML5 Canvas be it 2d or WebGl can put a strain on the end user’s browser.

Trying to draw more animation frames than the browser can handle can lock it up or cause it to terminate your script. Also if the user is viewing a different tab or is in another window; burning the user’s CPU on animation they don’t even see is just squandering their resources.

Luckily, much like debouncing and throttling for user input and ajax calls, there is something we can do. HTML5 provides a neat solution for animation.  The requestAnimationFrame function allows you to put in a call-back which gets executed when the browser is ready to draw another frame. This allows the browser to throttle the animation based on the current CPU load and whether the canvas is on screen or not, resulting in a far better performance and a much lower resource usage.

However, some older browsers don’t support requestAnimationFrame, but we can use the following code to detect if they do, and if they don’t, run though some earlier implementations and finally a fall-back method to ensure we can still use the function:

[code lang=”javascript” title=”Setting up timing function”]
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (function () {
return window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function ( callback,element) {
window.setTimeout(callback, 1000 / 60); // Fallback timeout
};
})();
}
[/code]

To use this function we need to create an animation loop. Also if we separate our animated elements from our static elements (e.g. background) into different canvases, we only need to redraw the static elements when they change which is far less frequently.

For this we create two functions renderStatic and renderAnim; which are outside the scope of this article, but there are plenty of canvas examples to draw on. When the static elements require redrawing we just set the requiresRedraw variable to true.

Putting this altogether we end up with a animation loop looking similar to the following:

[code lang=”javascript” title=”Setting up animation callback”]
var isAnimating = false; // Is animation on or off?
var animateRunning = false; // Are we in the animation loop?
var requiresRedraw = true; // Do the static elements need to be redrawn?

function StartAnimating() { // Start animating/drawing
isAnimating = true;
if (!animateRunning) Draw(); // Only draw if we are not already drawing
}
function StopAnimating() { // Stop animating/drawing
isAnimating = false;
}

function Draw() {
if (isAnimating) { // Only draw if we are drawing
animateRunning = true;
try {
if (requiresRedraw) {
requiresRedraw = false;
renderStatic(); // function defined elsewhere
// which draws static elements
}
renderAnim(); // function defined elsewhere
// which draws animated elements
} catch (e) {
if (window.console && window.console.log)
window.console.log(e); // for debugging
}
requestAnimationFrame(Draw);
animateRunning = false;
}
}
[/code]

To start the drawing we can use StartAnimating() and to stop we can use StopAnimating()

Following this pattern should help you improve the performance of your HTML5 canvas app – while also reducing the load on your user’s computer. A double benefit!

How To: Installing WordPress for IIS7

So you fancy doing some blogging? How do you install WordPress for II7 and above? This should show you how to install WordPress in Internet Information Services 7.

First, fire up the Web Platform Installer as this is the easiest way to start. Choose the Applications tab and click “Add” next to WordPress:

Choosing WordPress in the Web Platform Installer
Choose WordPress in the Web Platform Installer

The click “Install”. If you are asked whether to install any extra needed components (e.g. PHP, MySQL etc.) – confirm this.

Choose to install MySQL locally

At the next screen choose to install MySQL locally; unless you are going to run it across multiple servers or have an install of MySQL you can use elsewhere.

Confirm install, with required components (e.g. PHP)

Confirm the install at the next screen. The little crosses threw me a bit, ticks might have been better…

Choose admin password for MySQL

At the next screen you need to create an Admin password for MySQL. Remember what you enter as this password as you will need it later – click continue.

Wait for install to complete

The install of all the various components, and any service packs etc. can take a little while so be patient…

You may have to restart a couple times

You may be asked to restart a couple times, depending on what bits needed to be installed. After a reboot, if the installation doesn’t continue straight away – just fire up the Web Platform Installer again and it will continue.

You may receive installation errors

If you receive any installation errors; check the logs, however this is likely to be from restarting at inappropriate times. Just reselect WordPress to install – your list of extra extensions should be shorter – and hopefully the install will now complete without errors.

Choose IIS website setup details (click for larger)

At the next screen you choose how your new WordPress site will be accessed from the internet (click to see larger version):

  • Website: Either Choose a “New Website” if you want it to go from the root of a domain or subdomain; or choose an existing site if you want it off a subdriectory.
  • ‘WordPress’ application name: Use / if you are creating a new website and want it in the root, else choose the subdirectory you want it accessed from the Internet at.
  • Web Site Name: This is the both the Application pool and the name of the Site in IIS Manager, unless you are creating a subdirectory – when it is just the name of the App Pool.
  • Physical path: This is the actual physical directory on disk where your WordPress files will be held.
  • IP Address: Unless you want WordPress to only respond on a particular IP address – just leave this as “All Unassigned”
  • Host Name: This is the actual domain that WordPress will respond to, so set it to the subdomain or domain you want to use e.g. blog.yoursite.com or www.myblog.com etc.

After filling in the details you want to use, click continue.

Enter the database login credentials you provided earlier (click for larger)

At the next screen you need to use the database password you entered earlier for the Database Administrator Password. Scrolling further down:

Enter details for a new user WordPress will use (click for larger)

Choose a database User Name and password for the install to create. Note: this is not the user name you will be using, but the user WordPress will use to connect to the database. If you installed the database locally, put localhost in for the Database Server.

Scrolling further down:

Add some strengthening phrases (click for larger)

Enter a database name to use, this could be the name of the blog or the website name you used earlier. Next you need to enter a set of Unique Key phrases. These are to strengthen the encryption for passwords and authentication. Go wild, you don’t need to remember these.

Click continue:

Installation complete, click launch WordPress

You’ve now installed WordPress and just need to do a final configuration step, so click the “Launch WordPress” link on this page.

Configure WordPress and setup new user (click for larger)

Now you just need to fill in a few more details on you new WordPress website.

  • Site Title: This is the title of you blog “My blog” or whatever you want it to be known as.
  • Username: This is the Username you will use to actually login to your WordPress site.
  • Password: Choose a password
  • Your E-mail: And enter your email address

Click install WordPress…

Congratulations! You should now how WordPress successfully installed and ready to use. Just log in at the next screen providing the login credentials you just supplied:

JavaScript: Don’t spam your server, Debounce and Throttle

If you make server call-backs or update the browser GUI based on user interaction you can end up doing far more updates than necessary…

In fact on one occasion, during Illyriad-beta testing, we started tripping our server’s dynamic IP request rate throttling and banning our own IP address – D’oh!

Common situations where over responding to events are mousemove, keypress, resize and scroll; but there are a whole host of situations where this applies.

We update our pages dynamically via ajax, based on user clicks around the user interface. In this situation if the user makes several page navigation requests in quick succession – the only important one to be made is the last, as for all the previous ones the data will be thrown away. So why make the requests in the first place? It’s just unnecessary server load.

Equally, if a user is moving an mouse around a map and you are updating UI coordinates for every pixel change the mouse makes, it potentially a huge number of DOM updates far beyond the perception of a user; for no real benefit, but it will cause a degradation in performance.

Initially, we controlled the situation using complex setups of setTimeout clearTimeout and setInterval. However, as the various places we made use of this became more varied, with different sets of needs, the code became more and more complex and difficult to maintain.

Luckily, it was around this time we discovered Ben Alman’s jQuery plugins debounce and throttle; which are extremely powerful – yet simple to use of and cover a whole host of permutations.

Throttling

Using his  jQuery $.throttle, you can pass a delay and function to $.throttle to get a new function, that when called repetitively, executes the original function no more than once every delay milliseconds.

Throttling can be especially useful for rate limiting execution of handlers on events like resize and scroll. Check out the example for jQuery throttling.

Debouncing

Using his jQuery $.debounce, you can pass a delay and function to $.debounce to get a new function, that when called repetitively, executes the original function just once per “bunch” of calls, effectively coalescing multiple sequential calls into a single execution at either the beginning or end.

Debouncing can be especially useful for rate limiting execution of handlers on events that will trigger AJAX requests. Check out the example for jQuery debouncing.

In fact its well worth checking out all Ben Alman’s jQuery Projects as they are full of little wonders, that you soon are sure how you did without them!