3D Workflow – Creating an Object with Moving Material in UDK.


Here’s the steps included when I go about creating an object that I’ll use in a game. In this example the object will be a screen with a display with a moving message on it.

So, first, it starts with an eternal empty void within a newly created Blender project. A voice appears in the void and says: “Box!” Like magic, the next split second a box manifests in the space:


“Great,” the voice says, and shuts up. The hands, fingers and eyes takes over, playing with the keyboard, mouse and computer screen. Eventually, the box has morphed into this thing:

2_InformationScreen_beginning“A bit simple,” the voice says, ” .. but I like it!”

Next step is giving the little baby some suitable clothing. “Unwrap, please!” the voice asks and commands at the same time. In an instant the screen is unwrapped:


“Beautiful,” it says. “Now get it ready for Gimp.” Blender accepts and exports the image as a UV Layout. “Gimp, you know what to do!” the voice says and laughs.

In the next second Gimp pops up, gets a hold of the UV layout and fits it up on the screen with a nice white background, ready for whatever might come:


“Paint it!” the voice orders. Gimp rogers that:


Simplistic and easy, the cartoony feel for the screen turns out like this:


Exports object as Autodesk FBS  (.fbx) and imports it to UDK.

Well inside UDK it’s time to give some more depth and detail to the material. I create two more layers of the material, namely the Normal and Specular layers. In UDK’s material editor all three are connected, like this:

5_MaterialEditorUDKI update the material on the object, place it in the game world, and scale it up a LOT – yeah, I always seem to forget that objects created in Blender are tiny once imported to UDK. So a good idea is to scale it up a lot before exporting it as .fbx. When I’m happy with the object’s placement,lighting and whatever else, it looks like this:


The next step now is to create a moving display for this screen. Flash Professional is a great friend for this work. In Flash, then, I create a very simple text saying: “Warning”, “Virus infected security bots are unleashed and dangerous”. Looking like this:

7_LivingScreenCreationInFlash2It looks blurry because you can see all the layers created for this little swf.movie. I guess it was about 30 frames. When this is done the movie is exported from Flash as a swf. file. There is a way to use the original swf. file as a moving texture in UDK, using Kismet. I tried that method first, but it ended up not working. I couldn’t get the image to show, so I switched to the method now described: Convert the swf. to avi, wmv, mov or something the RADtools can convert to a bink file, .bik. I found a completely free swf to avi-converter named “swftoavi”m and it did an .. adequate job, with no watermarking or anything. The quality of the movie gets pretty bad compared to the crystal clear image on the swf file, so this is probably not the best method ever invented – just good enough for my own homemade game.

When the swf has been converted to avi, then, I use RADtools to convert the avi to bink:


When this step is done, the file is ready to be imported into UDK. Once inside, create a new material where this file is connected to “diffuse” – and “emissive” might also be a good idea, since it’s supposed to be a self-illuminated source of light. The end result ends up being a screen with an animated movie going on on the display. This is what it looks like:


This screen twitches, flashes and the letters move like the screen is about to stop functioning, but this can’t be seen from the picture, of course. If there were a way to include the swf. movie in the post, it would be awesome. However, I have not been able to find out if this is even possible on a wordpress.com site like this.

Anyway, now that’s that. Once the object is created and the display is working, it can be resized and used in all kinds of places.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s