Revising the Character Art

When we came to revise the character art for Illyriad, it seemed clear that the first batch of characters should be warrior-kings and warrior-queens.

This calls to mind King Arthur (who in his prime, most people imagine as thirty-something), Genghis Khan (whose power was at its peak when he was in his fifties) and Alexander the Great (at his greatest in his late twenties). History and fantasy fiction are both full of warrior-kings who are thirty-something-ish, physically fit, with huge charisma.

But warrior-queens? Ah, now that was a problem. History is not full of strong, female warrior-rulers, and most that do crop up are contentious or little-known. Meanwhile, fantasy fiction tends to present a rather different view of female characters.

I saw the new Conan movie last night. It was full of capable male characters, aged anywhere from 15 to 50, many of them ugly, and all allowed to develop their own way of being cool. The key female characters, meanwhile, were indeterminately young, and implausibly good looking. This kind of predictable view of females in fantasy (maid, mother or crone – mostly maid, and generally only she is allowed to be kick-ass) was a challenge for us.

My first instinct was to say “b******s to that – we’ll have our females in Illyriad as real ass-kicking females would be – unsympathetic, beefy, no prettier nor uglier than the average – lets make them real”. But of course, we’re doing this for our players, not for ourselves, and a lot of people like the athletic warrior-maid ideal.

We considered both extremes. We considered a compromise. But then we settled on the solution of exploring both ends of the spectrum.

We wanted one character who was the sort of woman who would really want to go to war and crack skulls. As we evolved the mood board, we realised that a lot of the images we liked were Baba Yaga – so, our female Orc was born.

And of course we had to have one athletic-warrior-supermodel type, and she swiftly became the Elf.

The character I personally liked the most, was the Human. She’s probably over 40 (though, hey, this is fantasy, so she’s well-preserved for her 40s, and uses cosmetics), she’s good looking without it being obvious, and she has made sure that she’s well armored (close up you can even see that the red under-armor is heavy-duty brigandine, not some sort of soft quilt). And she has the gravitas, the authority, that you’d expect from someone who rules her own fiefdom. She’s a female ruler whom I can immediately believe in.

I was pretty happy with the results. Until I put the image together for this blog piece. Look at the picture. Face, palm. Doh!

Maid, mother and crone.

They are pretty cool. But it’s still the three stereotypes.

For the next batch of art, we’re going to have to find ways to be cool without reverting to any of these three types.

Extreme Perspective: Artistic Evolution

It is time to give everyone a glimpse into some of the creative process that goes into creating the graphics behind Illyriad.  Here is a step-by-step timeline of how I piece together an illustration.

Step 1: Brainstorming and Rough Sketch

We will be implementing illustrations to the entire technology tree in Illyriad in the very near future, however as I have only been working on this project a couple of short months I have only had enough time to complete one of the trees.  To allow us to implement them now we have decided on adding in placeholders to sort of “fill in” for the real graphics while they are being produced.  The following is the creative process for a placeholder that will filling in temporarily for Magic tree graphics while they are under production.  I wanted to create something that would be all-encompassing for both present and future graphics.   When I think of magic I envision a mage or wizard spewing magic from an outstretched hand in a fan of light and energy.  I wanted to avoid something as race specific as a human or orc hand so I decided on a series of five staves fanning out from left to right from cool to warm colors.  Not only would it give a visually attractive effect it would span a variety of different schools of magic.  With this in mind I moved on to my rough sketch.

Yes, this mess of lines is going to turn into something and it really does help me bring out what I have in my head to something I can see and tweak to my liking.  This is probably the most important step in the process…it gives me a sort of skeleton for my piece, allowing me to build from the ground up around it.  I usually do this step the line tool in Photoshop. Unlike a lot of artists, I like to do even my rough sketches on the computer.  Rest assured that this ablated mess will turn into an illustration.

Step 2: Contour

Following my rough sketch I get into the real meat and potatoes of the illustrative process: drawing contours.  This stage really allows me to flesh out my sketch and give it some definition.  During this step I can see if my idea is really going to work or not, and I can make adjustments and see whether or not I need to scrap the idea and move to something else.

I like to keep in my rough sketch so I can still visualize the overall illustration and see what I am trying to accomplish.  Throughout the entirety of the illustrative process from here forward I use the pen tool; this phenomenal tool allows me to tweak lines and shapes through anchor points and keeps out sloppy nasty pixels.

Step 3: Flat Color

After finalizing my contour lines I move on to my Flat Color step.  Here I get rid of my base sketch by hiding the layer (I never delete it as it my be useful later) and then start adding in color through using pen tool vectors of varying colors.  Vectors are very important here as well as I can shape and modify them if I don’t get the colors exactly how I like them.  A very critical point here to is to having colors beneath the contour lines.

As seen here, this step can be very discouraging…it’s still not very pretty.  The colors seem not to mesh well together and everything looks very flat and bland.  Don’t worry though, once shading, glow, and gradient effects are added in it really brings the piece to life.

Step 4: Effects

Magic is the perfect illustration to demonstrate the Effect step of my creative process as some of my work completely foregoes this stage.  This particular piece had a lot of energy in a very literal sense: lightning and fire mainly.

One of the most effective tools I have found for portraying very intense sources of energy is a simple white line with a colored glow around it.  This simple and effective technique gives a sense of intense energy radiating from a source.  With this step finalized I move on to the final stage of the process.

Step 6: Shading and Finalizing

By far my favorite step of the creative process is the final step of shading.  I go over the entire illustration bit by bit adding in varying degrees of shading with the pen tool, this step is what brings my pieces to life and gives them the energy I am looking for.

In this stage I add gradients, light and heavy transparencies, and all sorts of various effects to complete the illustration.  This gives the final piece depth, energy, and emotion.

(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)

Extreme Perspective: On the Shoulders of Giants

I have always believed that all artwork should inspire some sort of emotion, regardless of how minor the task or piece of artwork is it should trigger something.

To this end, I have found that the propaganda works World War II to be some of the most thought provoking and inspiring works of our time.  They were simple, yet powerful. They communicated a complex message to onlookers and were successful at motivating fear, anger, patriotism, and a myriad emotions in just moments.

I was also fortunate enough in my early years to stumble upon an artist by the name of Aidan Hughes a.k.a. “Brute”, a propaganda artist in the U.K. that has been working for years on a style that I feel I am just now coming into my own in implementing.  Aidan’s work is by far my greatest inspiration, as he takes what was done for art in WWII and takes it to the next level.  Each piece of artwork he produces drips with feeling and radiates a zeal unmatched anywhere else.

That sort of emotion and energy is something I try to portray in every piece I work on, be it a simple image such as Inventory Management or something more energetic like Raid.  In the game, my goal is for each piece to give an idea of what that technology brings without having to read the description, and to have that image be memorable.  I accomplish this through bold, powerful lines and exaggerated perspectives.  I attempt this also through bringing focus to the main idea of the piece with color transitions, star bursts (perhaps a bit excessively), and sweeping lines that guide the viewer through the piece.  With these components I attempt to meld them into a powerful and thought provoking image.

I can safely say that without inspiration from great World War II artists and Aidan Hughes, I wouldn’t be where I am today.  As eloquently put by Sir Issac Newton: “If I have seen further it is only by standing on the shoulders of giants.”

Extreme Perspective: Ex Nihilo

Just thought I’d take this opportunity to introduce myself and share a bit about myself.

I signed up with the Illyriad staff in taking the daunting task of providing a graphic for each individual technology in each tree.  This overwhelming project has been a wonderful experience for me to both learn and grow as an artist and designer, and I have been grateful for the task and look forward to more.

I was pulled into the staff mainly due to my work with a prior project using a unique style of “propaganda” artwork.  My use of bold lines and extreme perspectives was just what was needed for my particular project; the developers wanted to be able to tell an entire story in just a single panel…something I have proved at having an aptitude in doing.

I showed the staff some of my previous works, all of which had been strictly black and white.  Following are a couple of examples:

The staff liked what they saw and brought me on.  I will be honest I was a bit intimidated at first as I knew I was going to have to move out my my Black and White comfort zone; I had never worked with color before beyond a monochromatic color scheme…this would be new territory for me.

Fortunately the Illyriad project fit like a glove and I have been steaming along creating a unique piece of art for each technology available (and some that aren’t yet released).  I hope you all enjoy what is to come and I welcome any feedback and critiques you may have.

Please enjoy this sneak peak of an as of yet unreleased technology (Shhh! don’t tell anyone):

Chrome Web Store

When you’re a small indie game developer and you’ve just released your very first game, “getting the word out” is just about the most important thing left to do.

It’s also typically the biggest budget expense item via the traditional method of online advertising.

You can have all the upgrades and expansion packs in the pipeline that you like, but if no one is playing the game – or if the cost per acquisition of new players via advertising is astronomical and ever increasing due to the number of competitors vying for the same keywords – then you’re in no small amount of trouble.

Sometimes, however, you get lucky (or make your own luck!) – and an influential big brother steps onto the scene to champion your efforts.  We’ve been very lucky with massively.com’s coverage of Illyriad, and now we have our second champion!

Largely, we think, thanks to our move to an HTML5 Canvas environment on the World Map, Illyriad came to the attention of those mighty, mighty fine people at the Google Chrome Web Store (CWS) at the end of last week; and they’ve been helping to promote Illyriad since.

The first we knew about our presence on the CWS homepage was when the ‘new player has joined’ “bing” noise (yes, I have a desktop dashboard that goes “bing”… I know, I know. Don’t say anything) changed from a “bing” into a continuous drone.

Not only are CWS promoting us on the homepage, but we’re also in the rotation for the Games and Entertainment categories.

Since we’ve been this visible on the CWS platform, new player acquisitions have increased 412%.  No, that’s not a typo. That’s four hundred and twelve percent.

As if that wasn’t enough, the icing on the proverbial cake is that the Chrome browser itself runs HTML5 and the Canvas technology very fast and very smoothly (in our opinion, Chrome is far-and-away the best browser out there for developing and rendering HTML5 technologies).   Whilst we do, and will, continue to support earlier, non-HTML5 browser versions of all the major browsers, it’s been fantastic knowing that the huge new influx of users coming to Illyriad from the CWS are getting the best possible HTML5 experience once they log in.

Since we  integrated OpenID over the last weekend, CWS users are also getting a streamlined one-click login experience using their Google credentials.  Now we’re moving onto Google pay integration, and can’t wait to see what the Google plus platform can do for us in the future.

In short: if you write any kind of app then getting it onto the Google Chrome Web Store is an absolute “must-do” when it comes to promoting your game, and (especially compared to some of the other app platforms) it’s remarkably easy to do.

As you can imagine, we’re over the moon about this!

World Map: Early Thoughts Revisited

In the same vein as the last blog of “Illyriad dev history” regarding factions

Here’re the first drafts of various elements of the World Map, along with a tiny sample of some of the incredibly pedantic arguments (my fault entirely) that went on about region naming; the amount of detail that went into all of this, I hope, shows through…

BIOMES

The Biomes, Fractally generated, and using the WWF biome classification (https://en.wikipedia.org/wiki/Biome#Map_of_Biomes) as source

TOPOGRAPHY

The Illyriad Topography (height, fractally generated) that overlaid the biomes

We loved the mountain range that looked like a skull’s head, or a netherworld demon wielding a whip… and, given it was entirely fractally generated, we saw this as some kind of sign – and this is the candidate that was chosen.

SEAS

Seas, fractally generated and overlaid on the previous two layers

Rivers & Fresh Water

The first pass freshwater layer

These were all then edited (quite substantially in many ways), especially the water.

We then applied over the political regions (manually drawn, largely around topographic boundaries, as a natural barrier to regional development).

Here’s the first draft, with some region names that never made it to the final cut.

The first pass at regions

Up until now, the entire world was randomly generated, just like all the other browser-based games – and we were deeply unhappy with that idea, hence this project.

iirc, due to a small corp forum accident, about 2 players saw this first map before it was released. They were sworn to secrecy – and they kept it. We remember you guys, tyvm!

Should anyone doubt the level of anal-retentiveness that went into all of this, please allow me to reproduce a small sample of a conversation from the inhouse corp forums regarding the naming of a region:

Originally posted by GM ThunderCat
“Qef” as a region – Not sure about this one as it reminds me of [redacted], not sure if that’s my dyslexia or disturbed mind…

Originally posted by GM Stormcrow
Definitely your disturbed mind, TC.

“Qaf” is the 50th Sura of the Qur’an – and it’s very much an Arabic “mystic word” – but by using an “e” (which doesn’t exist in Arabic) instead of the “a” we might escape the inevitable fatwa via transliteration Wink.

Originally posted by GM ThunderCat
How about “Kul Tor” for Qef?

Originally posted by GM Stormcrow
Because mixing base languages (Kul – Sanskrit meaning “family” or “gathering”; Tor – OE, Gaelic twr meaning “Heap” or “Pile” and from where we get the word “Tower”) is bad m’kay?

We could mix Sanskrit and Arabic though, as that’s a fair enough mix.

Kul Qassim – where Qassim means the sand dunes from which the white Saxaul trees grow…?

PPS Edit. There’s actually no reason why we can’t have Kul Tor… Going back to my endlessly tedious “Why do all the names of the rivers on the East Coast of the UK begin with the letter ‘T’ (Thames, Tees, Tyne, Tweed, Tay etc etc)” party-stopper…  It’s because they’re all Sanskrit, from “Tayus”.

So, actually TC, there’s no reason not to have “Kul Tor”. If we can have the river Ketterick (from the sanskrit iekti, where we also get the word “projectile”) and we can have the the river Ale and places Alncromb and Alnwick (from Alaunna – sanskrit plus “combe” & “wick” – OE), then why not Kul Tor?

I sometimes worry for our sanity.

Factions: Early Thoughts Revisited

Factions are now, of course, ingame  (at least textually at the moment and via hubs on the world map), but I thought it might be interesting to share a first draft of a thematic map from the dev forums that I put together last year, illustrating my initial thoughts on how these might all fit together thematically (rather than geographically).

No, it didn’t make a huge amount of sense to the team either…!   But it’s still quite close to my heart.

Some faction concepts didn’t make it to live; most did.  And, of course, the ones up in the top right have, mostly, yet to be seen ingame.

Illyriad Guiding Principles

We’re gamers, not game-industry insiders, and we’ve written a game that we’d like to play ourselves [but are unfortunately forbidden from doing so, as apparently summoning eleventy-thousand Enraged Mammoths to win a battle would be unfair… sheesh, some people…]

You can boil down our philosophy on game design at Illyriad into some general principles that we adhere to with everything we do:

  • Persistence
    2D MMORPG Strategy games should be truly persistent – the world should carry on changing when you log out. We also believe that servers shouldn’t reset after an arbitrary endgame, destroying all the players’ emotional investment in the gameworld.  Why can’t browser games grow, evolve and change with updates and expansion packs so that the ‘endgame’ doesn’t arrive – except when *you* want it to? Just like, in fact, a “triple-A” box-set game.
  • Depth
    There’s no reason why 2D browser games can’t have depth of gameplay, hand-crafted (rather than random) world maps, and lovingly-detailed NPC environments. Why can’t these worlds live, breathe and be truly immersive?  Browser games can be sandbox games, and you really don’t have to insult players’ intelligence and dumb down everything to the lowest common denominator.  Things should be as simple and intuitive to do as possible, but should have levels of depth as deep as the player wishes them to be.
  • Participation
    In a strategy-focused empire-building game we can meddle with catalysts, but there’s no in-game content that’s as compelling to players as player-created content. Our job is to enable that to happen seamlessly.
  • Platforms
    Long-term games should work on as many browsers and platforms as possible; you should be able to play this on your home computer, your iPad, your Android or iPhone when you’re out-and-about.
  • Pay-To-Win
    Yes, the dev team has bills to pay and mouths to feed but so, actually, do the players.  Games that allow “Pay-To-Win” are short-term and self-defeating for everyone.
  • Playerbase
    It’s not how smart your technology is.  It’s not how beautiful your graphics look.  It’s not how many new spells you added.  Sure, all these things are super-important and will help you get new and retain existing players… but the players themselves are far-and-away the greatest asset of an MMO game.  Players also often know better than the design and dev team when something should be changed, and player suggestions should be listened to and acted upon if the idea is sound; don’t be precious about where a good idea came from!  Players also set the entire tone for the game, and disruptive trolls (apart from the NPC kind!) should be sent on their way as fast a humanly possible.  If you let them thrive they will end up driving your core playerbase away, and putting your potential new players off.
I hope someone can come up with a decent synonym for “Depth” that starts with the letter “P”, and then these can be the 6 P’s of our Philosophy 🙂 My thesaurus is sadly, failing me, and my search fu is weak.