browser – Illyriad – Beneath the Misted Land

Player Spotlight: Kumomoto

Kumo Congrats to Kumomoto for being this month’s Player Spotlight! Let’s get to the questions!

So, you were a very early-stage Illyriad player. What’s been the biggest change over the years?

I am the oldest playing member of Illy. Biggest change? My lord! Illy has had generations of change! What is a better question is what hasn’t changed in Illy over that time? And the answer is the newbie-friendly nature of the game…

H?’s first war was against an alliance named White which stood for ganking newbies… We espoused an opposite attitude and went to war over it. We won. And then Starry started Toothless?, which was the first training alliance (training alliances are alliances where newbies can join and noone will attack them and they learn. And, most importantly, all the other alliances respect these players and stay away from them). This model took off and now there are lots of great training alliances in game. And all the major alliances have espoused the newbie protection ethos we started and, imo, the game is very different from others because of it.

Surely you have a good war story. Tell us one. Or two.

Stay tuned to GC… I tell them periodically!

Has it been challenging to keep foes guessing, or do you always rely on similar battle tactics each time you get in a scrap?

At H?, we have constantly modified our tactics based upon current game usage, game mechanics, and our strategies and tactics. We’ve won 7 and lost one (albeit the largest one! ugh!)…

In the last war (and largest war in the history of Illy), there were 42 attempted sieges on my two accounts’ cities. Not one was captured or razed. (A lot were exodused though!). Shows that when you are outnumbered 10:1 you can still “swamp fox” in Illy! Many millions of enemy troops lost their lives in those attempts…

Do you sometimes wish you could start over in Illy? If you did, would you want to know what you know now or would you want to know nothing… you know?

If I started over, I’d wish I wasn’t such an arrogant ass to a lot of people I actually respect… I regret some of the things I said and would take them back.

Who is your favorite player? Why?

Tough one! I probably have to say two people: Starry and ScottFitz. Starry for having the vision (and the huge effort she put in) to create the template for training alliances in Illy. And ScottFitz for being one of the leaders of a major alliance with the most integrity I have seen in online gaming ever…

Who is your nemesis? Why?

I don’t really have a nemesis today! Diablito was a good one at one time… Because he was all for ganking newbies and totally did not stand for what we did!

What is your greatest achievement in Illy?

I don’t have one. H?, on the other hand, under KillerPoodle and other Directors’ tutelage, greatest achievement, is fostering this culture of being receptive to new players. I think it is utterly unique in online games. Haven’t seen it elsewhere and we are really proud of starting it…

How would you like to top that achievement?

Not sure we can!

Thanks again to Kumo!

GM Rikoo

Player Spotlight: Martilicious

This month’s Player Spotlight focuses on Martilicious. She’s been a ~~real headache~~ wonderful player for a while now, despite her obsession with crushing sugar-based snacks.

How long have you been playing?

I founded my first city on Friday 2nd May 2014. So I’ve been here for over a year and STILL haven’t completed all research or built my first city the way I want it, because the things I need to build keep changing.

I know you came with the LoU crew… so how has Illy compared to that game now that you have played for a while?

I have played LOU, Evony and some space type game (I lasted about a week). Compared to all other games, Illy is the most complex, with so many layers. Just when I think I understand it, something else crops up…

Surely you hit players in PvP in LoU, so why don’t you kill everyone in Illy?

*Gasp* I never killed anyone. Ever. I am a peaceful crafter. Fact. Anyone who says differently will get a visit from my siege army. If I had one, obviously.

If you could add anything — and I mean ANYTHING — to Illy, what would you add?

I will take that as a promise that anything I mention here WILL be added, thanks! I’d love to see the ability to cancel trade unit movement, larger groups of simien wolves and a surprised smiley :O . Giving me control of the hammer would be AWESOME, I would not abuse that at all, definitely not.

Give me a good Illy memory.

The welcome I received on first joining always stands out. Despite not receiving a welcome message and mail from Kodabear (hard to believe, I know) I muddled through with a lot of help, and still am. One day soon (TM) I may not need to ask questions…. I also remember joining my alliance and enjoy every day in Alliance Chat – the work that goes into an alliance is amazing. The yoga classes are pretty cool too.

Give me a bad Illy memory.

I almost cried the day I killed 69 skinners. And the day I hit the 12 day research thinking it was 12 hours. And all those times I sent the cotters on a 16 day journey to harvest minerals.

If you can honestly predict how long you will play, in freakily-accurate numbers, tell me the date and time.
I will throw this one back at the Dev team and the Illy community…. I will play for as long as I am engaged and having fun. So keep on adding new stuff, play nice, keep me interested and I’ll be here.

Who is your in-game nemesis?

I looked up nemesis, and one definition is ‘a downfall caused by an inescapable agent.’ I have 2 candidates (details on my profile folks!) hrandjt and System.

Who is your RL nemesis?

Another definition: ‘something that a person cannot conquer, achieve, etc’. At the moment, that makes my nemesis Candy Crush Level 956.

Thanks to Marti for all of her ~~horrible jokes and smells~~ wonderful sense of humor and unique way of looking at things!

See you next time!

Illyriad’s 5th birthday introduces sweeping changes

HAPPY BIRTHDAY TO ILLYRIAD!

It’s a bit of a shocker, but it’s Illyriad‘s five year anniversary.

While the server booted up for the first time on the 21st of February 2010, players didn’t get access until the 22nd; so that’s the official start date for this grand journey.

In that time we’ve seen many, many changes to the game.

For those who weren’t around at the beginning, here’s a sample of what you missed from the early days! We started off with a “world tree” theme around the borders, with all the content placed inside large scrolls.

The town map was a very different beast:

The world map was randomly generated (rather than hand-drawn) in those days, so there were no rivers, no seas or lakes, no sprawling forests or mountain ranges and no regions; just a mish-mash of different squares. The world map, with Chat version 1 visible is seen below. Note the awesome way the arctic area blends with the rest of the map. Subtle, huh?

POP-QUIZ FACTOIDS:

During these five years, you have:

Undertaken some 62 million trade missions and traded 4 trillion Gold (4 thousand billion)!
Performed 21 million harvesting missions and nearly 12 million quests
Gone on 125 million military missions and nearly 40 thousand sieges for a total of 1.6 billion casualties
Sent 104 million ingame mails and spoken 334 million words in chat. That’s the equivalent of the entire works of Shakespeare 377 times over, or the equivalent of 425 Bibles – in chat alone. I won’t speak to the relative quality of the text 😉
287,000 players have been through the gates, settling 350,000 towns across 1,300 alliances
You have collectively played 22,364,898.12 hours of Illyriad
That’s 931,870.75 days or 2,553 years!

During this 5-year period we have had just under 6 hours of unscheduled downtime, and 15 hours of downtime in total (including patches and server moves).

We’ve often stated that we are applying lessons learned from our work on Age of Ascent to Illyriad. Some things you’ve seen, some you’ve not – a lot of have been slightly abstract and based around infrastructure and capabilities. They have all made the game better and helped it to run smoother.

However, today we’d like to share something even more concrete; and hopefully a little more exciting than the existing benefits that AoA development has provided to Illyriad, such as progression graphs and private chat (even if TC thinks graphs are exciting).

Please bear in mind this is early days and there is a lot more to come and improvements to be made. We are not yet at an beta stage and taking bug reports, but…

Illyriad needs a lick of paint:

More interactivity:

Different perspectives, showing where units are travelling to:

A grand strategic view of the whole world:

[See larger version]
Where the tactical map, strategic map and regional map are the same thing, and all full screen:

[See larger version]
Where coastline and rivers look more realistic, and where the map can be viewed from different rotational angles to better see the lay of the land:

[See larger version]
And where moving around the map is fast, and touch enabled, pinch to zoom ready, and where the data is pulled from across the entire world – all visible at once.

Exciting times ahead, for sure, but let’s look at all of the massive changes we put in for this anniversary:

Infantry and crafting: https://forum.illyriad.co.uk/22feb15-7-day-warning-infantry-crafting_topic6166.html

Smoothing out research times: https://forum.illyriad.co.uk/22feb15-trade-hides-research-exodus_topic6167.html

Building changes 1: https://forum.illyriad.co.uk/22feb15-changes-to-building-effects_topic6169.html

Build changes 2: https://forum.illyriad.co.uk/22feb15-build-time-changes_topic6170.html

Council meeting lore story: https://forum.illyriad.co.uk/the-meeting_topic6173.html

UIv4 Preview: https://forum.illyriad.co.uk/22feb15-uiv4-preview_topic6174.html

More than 10 cities!: https://forum.illyriad.co.uk/23feb15-beyond-10-cities_topic6175.html

API and XML: https://forum.illyriad.co.uk/23feb15-api-xml-notifications_topic6176.html

New medal options: https://forum.illyriad.co.uk/23feb15-new-medals-options_topic6178_post85155.html

Google Wallet dies: https://forum.illyriad.co.uk/24feb15-google-wallet-retirement_topic6181.html

Referral and tutorial changes: https://forum.illyriad.co.uk/24feb15-tutorial-referral-programme-changes_topic6183.html

In-game mail XML feed: https://forum.illyriad.co.uk/24feb15-xml-feed-for-ingame-mail_topic6182.html

Account sitter limit changes: https://forum.illyriad.co.uk/24feb15-account-sitting-90day-limit_topic6184.html

Faction units!: https://forum.illyriad.co.uk/25feb15-faction-unit-release_topic6186.html

Notifications tweaks: https://forum.illyriad.co.uk/25feb15-more-detail-in-notifications_topic6188.html

Removing SOV: https://forum.illyriad.co.uk/03mar15-removing-sovereignty_topic6207.html

Stay tuned, and thanks for joining us on this journey!

Player Spotlight: Mohit

Another nomination from the community, this month we get to know Mohit! We received SO many nominations for him, probably breaking all previous records. Learn more about the Player Spotlight program at our website and nominate players by sending an email to community@illyriad.co.uk. The player who gets the nomination can choose between a t-shirt from our shop or from 1200 Prestige! So, to the interview!

So, tell us a little bit about yourself.

Hello, My name is Mohit and I am glad to be given an opportunity to be in the Spotlight. I really appreciate the efforts of all those who voted for me, thank you all!

What brought you to Illyriad and how long have you been playing?

One day I was looking for an online strategy game, and then I found this. It has been a nice experience to play the game since then. I have been playing Illy for more than 2 years now and hope to play it till I finish the game (like Urp! did!)

Have you played many other online games or been active in other online communities?

Well to be honest I have played many, many other games where I play maximum for a week and then leave the game. So I have not been as active in any other online community, nothing else gives that Illy-like feel! 😉

Any hidden talents or interesting hobbies outside of gaming?

Oh yes ! Well, I don’t know if that is to be discussed here! But I like to go out with friends, enjoy the moment of laughter with them but most of my time is taken by gaming, work or sleep.

What keeps you playing Illyriad?

As many have said, I also feel the same: it’s the Community. It keeps you glued to the game. General chat can do wonders for you if you are having an off day. Then I have the amazing members in my alliance who make me feel like being in their shoes and doing things like they do ( not talking about you Hoover 😛 lol! ) That is an amazing factor if you realize they have become a family in another world, even if you don’t want to achieve something in the game you want to come online to meet them or chat with them. I love that aspect of the game. I believe through this game that I have made friends all over the world, with whom I may or may not meet in my real life but will be sharing a beer or coffee with them online here in Illy.

What’s your favorite aspect of the game?

The community is of course one of my favorite aspect of the game. I also love the fact that this game continues to bring something new to the table every now and then. True, this process has slowed down, but heh, this is the favorite and most awaited aspect of the game: something new and awesome from the developer team !

What’s your proudest achievement in game so far?

Being in the spotlight is the proudest of them all, for the very simple reason is that many people voted for it. It was truly an amazing surprise and I want to send thanks to you guys again! 🙂 The second-best moment was when I was given an opportunity to share in leading Bane. It was an honor and really made me feel proud.

What are you most looking forward to for the future of Illyriad?

First I would like to thank the devs for creating a vision of what we can expect, without it I couldn’t answer this question. I am looking forward to the new schools of magic and hope that it gives a new dimension to the game. Then I am waiting for the use of all the extra t3 resources (advanced herbs, anatomies and rare gems) that do not have any use at the moment, and I wonder how their use will affect the game. The Live Factions are always a thing that intrigues me. They could give alliances and their diplomatic work a new dimension and hopefully will make quests more interesting.

What area of the game do you think needs the most improvement?

In my view, the defense mechanism needs some improvement. The game supports the attackers too much. Then I would love to see a draft option in the mailing system. Next, an option to make our own chat room would be great! Many times two group of people tend to love or fight each other so much that other people tend not to interfere. Having an option to create a chat room for them would spare GC from the assault and those who want to be part of the chat could be invited in it.

What advice would you give a new player in Illyriad?

Play as you wish! This is a sandbox game. You can be anything you like! Just make sure you make friends on the way to the top — and not enemies. And, of course, in case you guys need anything there are awesome people in GC waiting to help you guys! (Rillbot is 24×7 available 😛 ) At the end of this I just want to thank you all, and I feel lucky to be part of such a great community.

Thanks to Mohit for accepting the nomination and for taking the time to answer our questions!

GM Cerberus: Behind Illyriad’s Art

We’ve always loved the artwork inside of Illyriad and now, Age of Ascent, the upcoming MMO shooter we’ve been working on. So, who makes all of those pretty pictures, graphics and icons that you see while playing? It’s GM Cerberus, that’s who. We wanted to let him talk about himself so that you, the player, can get to know this superbly creative individual who pops into chat once in a while.

What got you started in art?

I’ve loved creating art from a very young age, I was fortunate enough to be raised by a family of artists; my mother being a singer/writer and my grandmother being a painter. They helped and encouraged me to cultivate my talents. What really got me into art, though, was video games. I loved drawing Samus from Metroid and Mega Man bosses as a kid, and I would occasionally get in trouble in grade school for doodling when I should have been working on school work.

What is it like making art for the specifics of a video game? How is it different than other projects?

It has been a learning experience from the get-go. There are a lot of technical aspects when creating digital art that you don’t have to account for in physical media. Not everyone who views the work I create is viewing it at the same settings I am, for example, there are different resolutions and browsers to take into account. Heck, some people’s monitors aren’t even correctly color calibrated. One of the biggest things, however, is that i’m creating artwork not just for form but for function. Everything I create has a purpose in some game mechanic, and seeing it all in place and functional in-game brings on a sense of self-satisfaction unrivaled by any other project I’ve ever undertaken.

Do you have an estimate of how many pieces of art you’ve made for Illyriad? How about for Age of Ascent so far?

I’ve done upwards of 250-300 “large” pieces that players can view in the tech tree in Illyriad and hundreds of other miscellaneous graphics and doodads that I can’t even begin to put a number on. It would be difficult to put a number on Age of Ascent as well, but I’d be safe in saying it’s over 100 pieces. These numbers can be misleading however, as I’m including something as small as a scout unit or afterburner icon.

Do you have a preference of working on fantasy or sci-fi stuff?

I’m really torn on this, so much that I feel like two different artists when I’m working on the styles. With my fantasy work I feel more at liberty to have them look hand illustrated where with science fiction I feel the need for precision and almost have the work be Trompe l’oeil. With Illyriad most of my work is done using a form of vector illustration and some freehand with a tablet, and on Age of Ascent it’s a lot of photo-manipulation illustration and a bit of drafting. I can’t claim favorites honestly, I’m fortunate enough to have the freedom to explore so many different styles that I love them all.

What is your process like? Do you sketch? Work on paper or all digital?

My process is very traditional in the sense that I start with a very basic sketch to act as a skeleton for the piece, and work up from there. My vector illustrations, for example: I begin by getting a very basic sketch, sometimes I refer to photos I take and chop up to insure I get my angles and proportions correctly, and then I create the dark contour lines. After the contour is complete I move to coloration and then shading to give the piece depth and light. For work with Illyriad and Age of Ascent I don’t really touch paper, everything can be done digitally and it’s very convenient to not have to scan in sketches or attempt to translate what I created on paper to digital media.

How do you create so many pieces of art while still maintaining your sanity?

Who said anything about me being sane? I very much doubt my sanity and it spirals downward daily. Seriously though, as I said before I am fortunate enough to have the privilege of being able to work on a myriad different styles. If I get burnt out on making logos for corporations in Age of Ascent I can switch over to creating freehand military units, isometric machines, blueprints, or vector illustrations. Variety is what keeps me sane, and I have lots of it.

Thanks to Cerberus for taking the time to talk with the blog. Now, get back to work! Those drawings won’t draw themselves!

Player Spotlight: Rill

Another nomination from the community, this month we get to know Rill as our Player Spotlight. A big thank you to those who sent in nominations. Learn more about the Player Spotlight program at our website and nominate players by sending an email to community@illyriad.co.uk. The player who gets the nomination can choose between a t-shirt from our shop or from 1200 Prestige! This time we received a ton of nominations, but the most came in for Rill, a player who is one of the most well-known and helpful players in Illy! /cheer

What brought you to Illyriad and how long have you been playing?

I searched for a long time for Illy before I found it. I perused many lists of MMOs and MMORTs, trying many that I don’t even remember any more. Finally in June 2011 I came across the announcement of Illy’s official launch. I made a new e-mail address, expecting to encounter yet another Evony clone and was pleasantly surprised to discover Illyriad in all its friendly, deep, complex, carefully crafted glory. And so I’ve stuck for almost three years now.

Ryelle, by the way, would like me to mention that she is rather offended that this article is not being written about her. I explained that she hasn’t had an active account in Illyriad for some time and therefore would not qualify for the player spotlight, but she replied that she is merely waiting to restart in the Broken Lands and wishes everyone to know that she thinks of them fondly.

Have you played many other online games or been active in other online communities?

I have been active on specialty bulletin boards and forums since the days of listservs. My first online game was an Evony clone, which I reached in around 2009 by way of an advertisement on the Los Angeles Times website. I had no idea such things existed. How I wish I’d found Illyriad then! But perhaps I appreciate Illy all the more for first having played something a bit different.

I still experiment with other MMOs from time to time — I’m particularly attracted to city-building MMORTs that have resource allocation as a substantial component. Perhaps my background in finance and investment is an influence here, as I mentally estimate the payback period and ROI (return on investment) of upgrading a clay pit vs. a lumberyard or calculating the most beneficial tax rate. (But I am not obsessive at all!)

Any hidden talents or interesting hobbies outside of gaming?

I love pretty much every creative activity involving fiber, from knitting to crocheting to embroidery, quilting and so on. I get very excited about the combination of fiber and color and have been known to hyperventilate in yarn or fabric stores. I am also interested in the history of textile production, both home production and industrial production, and the role that textile production has in broader history.

What keeps you playing Illyriad?

My alliance. The people of Crows Nest (nCrow) have a special place in my heart. They put up with me on days when I’m at my worst and more incredibly are mostly still willing to speak to me the next day. Behind the members of my immediate alliance, I would say there are many, many people in Illyriad who are special to me and whom I love to see every day — or as often as they drop by. And more than people in general, the new players who are discovering Illy for the first time. Probably one of my favorite things in the whole world is to watch new players dig in to the world of Illyriad, experience for the first time the wonder that I experienced.

I would say secondarily to the people of Illy, what keeps me in Illy is the promise of the game. I believe in the vision the developers have laid out for Illyriad and enjoy watching it come to fruition.

What’s your favorite aspect of the game?

Other than the people, and especially new players (by far the best part of Illy), my favorite part of the game is that it’s a sandbox. The game is not defined for us — we define the game within basic game mechanics. And we don’t even all have to be playing the same game! Illy is a big, broad, deep, complex game, and it has room for everyone.

What’s your proudest achievement in game so far?

What I’m proudest of is the everyday stuff. Hopefully encouraging someone when they are down, listening when someone needs to talk. Being a part of the community.

What are you most looking forward to for the future of Illyriad?

I am looking forward to the release of the Broken Lands. I never got the opportunity to be a newb among other newbs in Illy — by the time I got here, many people were fairly well established. I would love to experience an Illy where every morsel of wood, every pebble of stone, every ingot of iron, is weighed carefully. I am also looking forward to the release of the story arc. I love the faction lore and look forward to it coming to life and being shaped by players. (Including of course the inevitable downfall of the puppet of the Council of Illyria, the self-styled King of Illyria, Sigurd. Hail the Undying Flame!)

What area of the game do you think needs the most improvement?

I think what’s most important right now is consistent progress. The developers have identified quite a number of priorities, all important, many of them delightful to some or all players, and I think what is important is that they continue to make incremental improvements. Players have been very patient, and consistent progress, even if slow, is really necessary to restore confidence and enthusiasm.

What advice would you give a new player in Illyriad?

I would say that Illyriad is your game as much as it is anyone’s. You will get a lot of advice, some of it conflicting, from established players (me included). We will tell you how Illyriad “should” be played. And some of that is from our own experience of having tried other ways and failed abysmally! So it’s worth listening to established players. But don’t let that prevent you from playing your game in your way. Write your own story. Remake the world in your image. That’s what a sandbox is for.

Oh, and for the sake of all that’s holy: Upgrade your storehouse!

Illyriad: HTML5 WebGL Preview 2

We thought we’d up the game on the last demo and show a bit of lighting and animation.

A high level flour mill from Illyriad seemed an obvious choice!

Again this is purely HTML5 using the WebGL canvas and JavaScript; no plugins were used. We use mrdoob’s excellent Three.js library:

[youtube=https://www.youtube.com/watch?v=0bZmt3yQzmE]

We’ve included the full browser window in this recording to show that it is in fact running in a Chrome browser window. While it happily runs at 1080p, we’ve had to record at a much lower resolution as the screen capture utility slows everything down… Alas.

HTML5 Canvas: Creating a screenshot from multiple canvases in JavaScript

Programmatically creating screenshots from JavaScript of your canvas element is fairly straightforward; but how do you do it when your game or scene is composed of multiple overlaid canvases?

This example makes use of the canvas caching and it links into the animation loop for starting and stopping – your mileage may vary.

For simplicity, lets say we have 4 canvas elements in use, all of the same size (500×500) used in the following order:

A far background: canvasFar
A near background for a touch of Parallax scrolling: canvasNear
A layer for player characters and other objects: canvasSprites
A layer for special effects: canvasEffects

[code lang=”javascript”]
function TakeScreenshot() {
StopAnimating(); // Stop the animation loop

var bufferScreenshot = CreateCanvasCached("Screenshot");
bufferScreenshot.height = 500; bufferScreenshot.width = 500;
var contextScreenshot = bufferScreenshot.getContext("2d");
// Draw the layers in order
contextScreenshot.drawImage(
document.getElementById("canvasFar"), 0, 0, 500, 500);
contextScreenshot.drawImage(
document.getElementById("canvasNear"), 0, 0, 500, 500);
contextScreenshot.drawImage(
document.getElementById("canvasSprites"), 0, 0, 500, 500);
contextScreenshot.drawImage(
document.getElementById("canvasEffects"), 0, 0, 500, 500);

// Save to a data URL as a jpeg quality 9
var imgUrl = bufferScreenshot.toDataURL("image/jpeg", .9);

StartAnimating(); // Restart the animation loop
return imgUrl;
}
[/code]

Now calling TakeScreenshot() will return a data URL that contains the image – with this you can:

Set the src of an image element or css background
Open it in a new window to display it as an image (unfortunately you can’t set the content-disposition or filename of a data URL for automatic download)
Send it to your sever to base64 decode and create an image file which you can then to popup a download or embed in a page which can then be shared, tweeted, posted to Google+ or Facebook.
Use it as source image for more canvas fun or a WebGl texture

UPDATE: There is a toBlob() method on Canvas that allows the saving of generated files on the client-side which is coming in Chrome 14, hopefully other browsers will follow suit.

This should all work fine. However if you are using images from different domains or a multiple sub-domains – either by using a CDN or for paralleling requests across domain names you will receive a:

SECURITY_ERR: DOM Exception 18

This is a security protection to ensure your code isn’t grabbing images it shouldn’t be, and sending them back to your server. I’ll post about how to work with this in a future post.

(Fix) Memory Leaks: Animating HTML5 Canvas

If you create canvas elements dynamically either for off-screen composition or sprite manipulation, when this is in an animation loop running hundreds of times a second it can start to leak memory.

I’m not entirely sure why this is; but it’s quite widespread in many browsers including Webkit. Perhaps the animation causes the browser to register as continually active which prevents the garbage collector from running – as it will clean it up if you stop the animation and change DOM elements e.g. from an Ajax update. But that’s just wild speculation…

What we are interested in is how to fix it, and also achieve some performance gains from not continuously creating DOM elements.

The trick is to create a function which caches these canvas elements and reuses them. The easiest way is to have a create canvas function that handles all this for you. To keep a handle on the different canvases in use in Illyriad, we use a named canvas element to ensure the correct one is returned. You can call them whatever is relevant:

[code lang=”javascript” title=”Create cached canvas”]
var CachedCanvases = new Object(); // Canvas element cache

function CreateCanvasCached(name) {
if (!CachedCanvases[name]) {
var canvas = document.createElement(‘canvas’);
CachedCanvases[name] = canvas;
return canvas;
}
return CachedCanvases[name];
};
[/code]

Using this is very simple, whenever you create a canvas dynamically that is just used for composition just (i.e. you won’t attach it to the DOM) use the cache function:

[code lang=”javascript”]
var SpriteCompositionCanvas = CreateCanvasCached("sprite");
SpriteCompositionCanvas.width = 64; SpriteCompositionCanvas.height = 64;
var SpriteCompositionContext = SpriteCompositionCanvas.getContext("2d");
…
[/code]

I’ll do another post on some of the wonderful composition operations you can do using canvas; when this technique will become very important.

If you are updating your page using Ajax and programmatically adding and removing the display of canvas elements you will want to clear the canvas cache when you change page by adding a cache clean up to your ajax page unload function.

[code lang=”javascript”]
function CleanupCachedCanvasses() {
var delList = new Array();
for (name in CachedCanvases) {
delList.push(name);
}
for (i = 0; i < delList.length; i++) {
delete CachedCanvases[delList[i]];
}
delete delList;
}
[/code]

Now you should be good to go!

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;
}

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!