I've been learning a lot lately about creating isometric game art. As many of you know, I've been exploring the possibility of creating a browser-based casual multiplayer online game. I've been learning about Javascript and PHP and loads of other fun stuff -- most recently I've been learning Blender and trying to figure out how to make good isometric game art.

I'm not sure how "good" my stuff is yet, but it's come a long way and is getting to the point where it's usable I think. I thought I would post some of what I've learned about creating isometric game art in hopes that it will be useful to other people later on down the road.

Basically, the problem is trying to create customizable avatars when you're working only in 2d. The trick is to make your graphics so that they can overlay without interfering with each other. So I do 3 passes of rendering in Blender. One is with just the base character visible -- you only need to show head, arms and legs -- the rest of the torso is covered by the current attire. So this render is just with the base character set to visible, and all of the accessories set to invisible:

(by the way, you can get the source .blend file for all of this right here so that you can see exactly how I do all of this)

Then, you make whatever accessory you want to render visible, and you set the material for the base character to be of type "env", which means that it will still block light, but instead of rendering the base character, it now just renders straight to the "environment color". Because I don't have any environment set, it just makes those pixels transparent. I know it's probably confusing -- it took me a long time to learn all of this, so perhaps another picture would help:

You can see how there's a cutout there for where the arms should go. That's so that when I paint this pair of jeans over the player's avatar, it doesn't paint over her hands when they swing by.

You can do the same for other accessories (such as tops or shorts or other color pants) and come up with a whole assortment of things that you can customize your character with:

I made a test page that will overlay the different outfits using some Javascript -- you can find that here:
Animated GIF outfit test.

Sadly, even though Firefox's support of .png's is far superior to Internet Explorer's, Firefox's support of animated gifs pales in comparison to IE. I think this is the first time I've ever been so dissapointed with the way Firefox handles web pages. IE handles that graphical overlay test page sooo incredibly well, but I can't get it to work well in Firefox. I'm probably going to submit it as a bug report to Mozilla's bug tracker -- but it's a severe enough of a problem that I'm not sure I can make outfits customizable the way I had hoped (since I'm planning for a browser-based game). Aaaargh. I came so far in learning Blender and only to hit a roadblock like this -- it's frustrating. However, if Mozilla decides to fix this issue, then I'll probably continue as planned.

I'm interested in knowing how well other browsers (such as Opera or possibly other versions of Firefox/IE) work with that outfit test page. If you try it out and have feedback, please pass it on -- I'd love to hear it.

Again (just in case you missed it before), here's the link to the .blend. I think it's getting much closer to a professional setup that would really be used as part of an actual game production's art pipeline. With that setup, it doesn't take me long at all to churn out new outfits and render them and get them into the game (it took me less than an hour to render and put a dozen different accessories into that graphics test last night, once I got everything set up).

So just wanted to post my progress for anyone who is interested, as well as make a sort of "internet archive of progress" for any lurkers who might come along who are trying to make their own isometric game art.

Cheers!

In Christ,
clint

------------------
penny --Is. 64

Yeah -- I don't know that I would have known either except that I saw this technique used on an old isometric MORPG I used to play called Faldon. I wondered for years how exactly they were able to make their graphics like that, and as you can see, I've just recently figured it out.

On a side-note, here's a minty-fresh bug report that I just filed over at Mozilla. Animated GIF support seems to be one area where FF has a number of issues -- so I'm not entirely confident that this will get fixed any time soon. We'll see though.

Cheers!

--clint

------------------
If you can see Chuck Norris, He can see You.
If you Can't see Chuck Norris, you may be seconds away from death.

If there is too much overdraw and it slows down the game, you can assimilate all the overlays onto one picture. There's no free lunch, though, and your game user will be tapping his fingers while your code is chugging away, but the gamespeed will not suffer.

very nice, could you tell me how you did the overlaying the images, was it javascript?

Do you know how to do it in PHP, if so, could you please tell me, I have been trying to work it out with the help of some tutorials, but none of them are very clear.

------------------
Kiwee Stuff Website:
http://kiwee.gibbering.net

quote:

---

Originally posted by HanClinto:
Sadly, even though Firefox's support of .png's is far superior to Internet Explorer's, Firefox's support of animated gifs pales in comparison to IE. I think this is the first time I've ever been so dissapointed with the way Firefox handles web pages.

---

Nice work clint! I hope I remember most of this if I need to use it some day.

BTW, one of the reasons you have a bit of disapointment with FF is that is has not passed the Acid2 test yet. I'm using Konqueror (not trying to start a browser war here) which does pass the Acid2 test and the GIF's render nicely with no glitches whatsoever.

------------------
All Your Base Are Belong To Us!!! chown -r us ./base
"After three days without programming, life becomes meaningless.'' -- Tao of Programming Book 2

Jeff: Thanks for the feedback! Yeah -- grayscale works well too. I think that may be how Ultima Online did a lot of their graphics. It's too bad that there isn't an easy way to do color-cycling in web-pages, or else that would certainly be a very viable option for me.

Kiwee: The only thing I had to use Javascript for was to change the player's outfit when you click on the page. In order to overlay the different images, I just used <div> html tags to make absolute-positioned containers, then put my images inside there. Like so:

<div style="position: absolute; visibility: visible; width: 150px; height: 150px; left: 200px; top: 200px;" class="player"> <img src="f_base_norm.gif" width="150" height="150" border="0"> </div> <div style="position: absolute; visibility: visible; width: 150px; height: 150px; left: 200px; top: 200px;" class="player"> <img src="f_pants_jeans.gif" width="150" height="150" border="0"> </div> <div style="position: absolute; visibility: visible; width: 150px; height: 150px; left: 200px; top: 200px;" class="player"> <img src="f_shirt_red.gif" width="150" height="150" border="0"> </div>

I hope that helps!

Thanks for the feedback, all!

--clint

I'm learning/using blender atm for Galedor art work. Brandon has done some very amazing houses and various structures in blender and it's all looking good

@jasco: Glad to hear it! Please feel free to ask questions about anything in that .blend file. I made everything in there except for the base mesh -- but I modified it to make it cartoony, I did all of the rigging, animation, layering, and camera setup.

@David: Thanks for the compliment! That's great that we're both learning Blender now -- I look forward to seeing some of your work!

--clint

quote:

---

Originally posted by HanClinto:
@CPUFreak: Okay, great! Thanks for the information about Konquerer -- is that built off of the Mozilla code-base as well? I know FF uses a fork of the Mozilla code from a few versions ago.

---

For a little more offtopic trivia, KHTML (the HTML layout engine developed by the KDE project) is used by Apple in their Safari browser.

------------------
All Your Base Are Belong To Us!!! chown -r us ./base
"After three days without programming, life becomes meaningless.'' -- Tao of Programming Book 2

[This message has been edited by CPUFreak91 (edited August 30, 2006).]

So are you using Blender to make all of your models for Galedor?

--clint

------------------
#include <spazz.h>
int name()
{
char name['B','u','d','d','B','o''y']
}
-----------------------
MMMM... I love pi!!

quote:

---

Originally posted by David Lancaster:
Here is some of my work clint, I'm liking it cause I found a way to work it like the bsp editors I'm used to, by using many objects. I'll create 1 object, texture it, such as a beam of wood or a wall, then duplicate it and it makes things easier. The ability to manipulate verticies makes things easier as well. Here are some renders from 3DGS, I made the house, it's interior and the few furniture items, level design wise things are very bare:

---

Wow...that is sweet! You should post those in the Model Dump thread I would've missed seeing them if Han didn't link back to this thread

------------------