Introducing World of Warcraft Model and .gif Importing in Gameleon!

After showing you how to import 3d models from either Maya, 3D Studio Max or Blender, we want to show you another way to import assets into Gameleon: .gif images. To showcase this familiar feature, we’re going to be using a program called World of Warcraft Model Viewer, that can extract 3d models straight from Blizzard’s multi-million-player MMO. We’re also going to show you how you can use Gameleon to upload .gifs (not just from WoW model viewer, but any .gif) and import them into your game, as a 2-for-1 article.

The cool bit about .gifs is that they’re already animated, and there are plenty of old-school isometric characters as animated gifs out there on the internet. Plenty of game artists and deviantart.com users work with .gifs. They are an abundant and convenient way to store moving images. So we thought: “why not harness this power in Gameleon?”


So, let’s get this show started. First off, you’ll need World of Warcraft Model Viewer and, of course, World of Warcraft installed. Open up WoW Model Viewer and it’ll ask you to load World of Warcraft data files – just click yes. If you have the En GB version installed, when it prompts you to get En Us files, just click no.

WoW Model Viewer interfaceWoW Model Viewer interface

To the left hand side of the screen there will be a list of all objects in the game –  for our example, we wanted to import a chicken model. To do the same, just type “chicken” into the search bar and you’ll find the second model in the list perfectly fits our needs.

Now, skins in Gameleon come with a default ‘idle’ stance (or animation), so we’ll need to extract the equivalent animation from WoW Model Viewer. For Blizzard’s models, that animation is the “Stand” animation. But we also want our chickens to walk about in Gameleon – so we’ll need their “Run” animation for Gameleon’s equivalent “Walk” stance.


We’ll be giving this model 8 angles in its isometric view, so we’ll need to export each angle for each animation separately. Let’s start with the “Stand” animation – you’ll need all 8 angles (angle list): turn the model around in the rendering window and either orient it by eye or use the angle toolbar that comes with WoW Model Viewer to get the perspective you need.

Then, hit File->Gif/Sequence Export and name each export for its angle (e.g., “chicken45.gif”) – be sure to type the .gif extension into the name. Remember to tick the “transparency” box so your .gifs will be exported without the background. Now, turn the chicken for all the other 7 facings and repeat the export process.

Exporting gifs from WoW MVExporting gifs from WoW MV


Next thing on the list is getting the walk animation. Simply put the chicken in the “Run” animation from the pop-up at the bottom of the screen, rotate your model to fit the first angle you want to export and hit File->Gif/Sequence Export once again. Remember to type in the .gif extension as well as to check the “transparency” box. Sometimes, WoW Model Viewer acts up when it comes to transparency, so my advice is always untick then tick back the “transparency” box for each export. Repeat the process for all 8 angles of this animation as well.

So, now that you’re done, you should have 16 .gifs total: 8 for the “idle” stance and 8 for the “walk” stance. Time to open up Gameleon and get ready to import. Go to http://editor.gameleon.co/ and either open up an existing map, or create a new one – make sure the map is isometric though. Open up the Skin Editor in Object Mode.

Extracted gifs on the diskExtracted gifs on the disk


Dragging and dropping the Walk animationsDragging and dropping the Walk animations

Create a new skin and name it appropriately (in the video, I named it “brown chicken”). A new skin will appear, with a default idle animation and a placeholder skin image. Go to the stances tab and click the red “Remove Angles” button twice to remove 4 angles each time (default skins have 16 angles, we need to whittle it down to 8). Now, drag and drop the proper .gif files into each angle slot.

Once that is done, hit “add stance” and create a stance named “walk”. Gameleon knows to use stances named “walk” automatically when objects move around. Repeat the process above with the “walk” .gifs and drag and drop them into the proper angle slots.


Scripting the skin changeScripting the skin change

I’ve also extracted several other models from WoW: a black skinned chicken as well as a chicken coop, and populated the map with them. Give it a try yourself – extract some more models!

Next comes the scripting. I wanted the player to have the chicken skin as well on this map. For that, you open up the Instance Script Editor and under the OnAddCharacter event, add the ChangeSkin action. Next steps are connecting the AffectedCharacter variable to the CharacterObject parameter, and setting the skin ID, i.e. the skin that the player assumes. In my case, I selected “brownchicken”.


After the scripting was done, and other cosmetic matters were resolved, I gave one of the chicken NPC’s a patrol route and scripted it accordingly (just like in the previous video), and then published the map.

And there you have it!

The finished product, in a browser!The finished product, in a browser!