Tag: chrome

GM Cerberus: Behind Illyriad’s Art

Billetmaking

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

302f295fAnother 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.

Illyriad: HTML5 WebGL Preview

We’ve done a bit of bloging about the “now”, but what about the future?

Well here at Illyriad we’ve been experimenting with WebGL and I can tell you we are impressed with how its shaping up.

Here’s a little taster of what we’ve been trying:

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

Its slightly shaky – but that’s my mouse movement not any lag from WebGL. Looks like I might never be a brain surgeon… haha

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:

  1. A far background: canvasFar
  2. A near background for a touch of Parallax scrolling: canvasNear
  3. A layer for player characters and other objects: canvasSprites
  4. 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!

(Fix) Memory Leaks: Ajax page replacement

Resolving memory issues with HTML replacement and Ajax

In Illyriad we do very large numbers of ajax requests using jQuery over a players session. Some of these are pure data requests, but many of them are navigational HTML page replacements.

A simple replacement seems to leak memory in various browsers:

[code lang=”js”]
$(‘#ElementToReplaceContents’).html(htmlToReplaceWith);
[/code]

Even calling the jQuery function .empty() before the replacement doesn’t seem to help in all cases. To fix this we have created a clean up function which is a common or garden “overkill” variety which seems to do the trick. Usage below:

[code lang=”js”]
function ChangeLocationSucess(data, textStatus, XHR) {
if (XHR.status == 200) {
var div = $(‘#ElementToReplaceContents’);
DoUnload(); // More on this further down
div.RemoveChildrenFromDom(); // Clean up call
div.html(data); // HTML replacement
}
…
[/code]

Clearing the memory from the existing HTML is done with the clean up code below:

[code lang=”js” title=”Added: RemoveChildrenFromDom jQuery plugin”]
(function( $ ){
$.fn.RemoveChildrenFromDom = function (i) {
if (!this) return;
this.find(‘input[type="submit"]’).unbind(); // Unwire submit buttons
this.children()
.empty() // jQuery empty of children
.each(function (index, domEle) {
try { domEle.innerHTML = ""; } catch (e) {} // HTML child element clear
});
this.empty(); // jQuery Empty
try { this.get().innerHTML = ""; } catch (e) {} // HTML element clear
};
})( jQuery );
[/code]

Some pages have extra resources cached and extra elements with wired up events. For these we have introduced a DoUnload function which also gets called before the replacement. This runs through the list of on page clean up functions and calls them one by one:

[code lang=”js” title=”Extra clean up system”]
var unloadFuncs = [];
function DoUnload() {
while (unloadFuncs.length > 0) {
var f = unloadFuncs.pop();
f();
f = null;
}
}
[/code]

We create these unload functions on the page that has any extra clean up to do by using the following code; which adds clean up functions to the unloadFuncs array above. This code looks like the code below:

[code lang=”js” title=”On page clean up registration”]
var unload = function() {
OnPageCachedResources.clear(); // Clear array of cached resources
OnPageCachedResources = null;
$("#OnPageElementWithWiredUpEvents")
.unbind()
.undelegate(); // Remove attached events
}
unloadFuncs.push(unload);
[/code]

Obviously this varies from page to page and most of our pages don’t need it – at which point the DoUnload function just returns with out doing work.

This coupled with the Fix for IE and JQuery 1.4 Ajax deal with most of the regular unexpected leaks.

(As an aside: When replacing HTML with Ajax, do not wire up events using onclick=”” etc in the HTML or this will also leak. Use event binding from script – a third party library like jQuery, Prototype or Dojo will make this very straight forward)