Texturing a car wheel and other rounded objects in 3ds max

Published on November 17, 2011 in Uncategorized. 0 Comments

Modeling round objects is usually not too hard, but when it comes to efficient texturing, most people can spend hours on something that should take but a few minutes. For this tutorial I won’t go into where to find all settings and menus, as I expect you to have rudimentary knowledge of where to find things. This is just purely about process.

Tires are one of those objects most modelers and texturers seem to have trouble with. So let’s look at how to model and texture this quickly.

The tools we need of course are your favorite modeling package (I prefer 3ds max for that so my explanations with tools will use that, but the principle is perfectly applicable to other tools), the edit poly tool, the UVW Map and Unwrap UV tool. So let’s get going:

Initial Setup and Modeling:

  1. The first thing we build is a cylinder. Keep the resolution low, we can always mesh smooth later. Set is height segments to 1 and give it a 1 cap division and 16 corners.
  2. Set it’s size to look like the dimensions of a tire, bets you grab yourself some references for that.
  3. I now set up my face ID’s and make everything except the inner circle shape of my cap to ID 2. I do this because I will use a multi/sub-object texturing for this model later. It’s quicker at this stage to just grab your images and use them in max this way as it means I don’t have to bother with photoshop. If you like of course a decent texture can be built later on, but this if for rough and quick building.
  4. Add an edit poly modifier and use the face select tool to scale the inner cap segments (that’s why you want to have a cap subdivision of the ends of your cylinder) upwards so its edge can define the border between rims and tire rubber.
  5. Now use the inset and scale tools to build the inner shapes of the rim. If you use a reference, this should be quite easy.
  6. When you are done, use the edge loop select on that outer subdivision of your cylinder and scale it up, this will make your tire more rounded looking.
  7. We don’t have a good transition yet for the surface of our tire rubber to the side of the wheel. To fix this, again edge loop select the corner edge where cap meets side of cylinder and user the chamfer tool to break up this hard edge.
  8. If you used your reference well then you have almost a finished tire shape on one side of the cylinder.
  9. We want to work quick so lets apply a symmetry tool and mirror one side of the cylinder to the other side.
  10. Voila the rough mesh is done and we will go on texturing and make any adjustments later.

Texturing:

  1. For speed’s sake I just grabbed two images I liked from the web that will serve for now as my texture. We can adjust them later to look proper:
  2. I go ahead and delete the bottom of my cylinder as we won’t need it at all (save yourself some trouble as well).
  3. Next up I go back to my model and set up my UV’s. Channel 1 I use a planar projection, so select this surface ID and add your UVW Map onto it. For channel 2 I will use a cylindrical projection. Apply as usual buy selecting that ID and apply another UVW Map.
  4. Next we want to ensure our UVs are not stretched so much. I generally add a little checkerboard material onto it to help me quickly. Let’s do that and then use the UVW Map settings to help get proper mapping. You want to make sure at this stage to not get any stretching as much as possible. You will get some stretching that is unavoidable at this stage but don’t worry, everything goes through an ugly phase and we fix that in a moment.
  5. Add a Unwrap UVW and let’s adjust some of that stretching. Make sure your checkers are as good as possible square.

  6. I set up a multi/sub-object in my material editor next, using the wheel rim on channel 1 and the rubber surface in channel 2.
  7. Drop you multi/sub-object material onto your tire now.
  8. As you can see the positioning of our UV’s is not correct yet so go back to your Unwrap UVW and move your UV’s into the right place.
  9. When you done, we have a roughly unwrapped tire. Now we can adjust our texture to look proper and our mesh to fit the texture better and we are done. And If you really just want to have something super fast and don’t mind stretching, you can adjust your UV’s to just match our reference images we used.

Hope you enjoyed this little tutorial and modeling and texturing a tire or something like it becomes a breeze.

The final Image with a neater texture: I won’t leave you hanging cheaply.

Flixel Demo – Creating animated and rotated sprites from an un-rotated animated images.

Published on November 8, 2011 in Uncategorized. 0 Comments

The Problem:

Flixel can load animated sprites and can generate rotated sprites from a single image. It can’t however easily create a rotated sprite sheet of a loaded animation sprite sheet. We will attempt to find a solution on how to combine rotation AND animation into one sheet.

Limitations:

Pixel buffer size limitation of bitmap. 16,777,216 pixels (4096×4096) with a maximum length of 8191 pixels per side.

Thus:

Creating rotation Spritesheets for large graphics is essentially difficult because you quickly can exceed the buffer limit for a BitmapData object.

Solution:

Below Limitation for Bitmap:

For samples where spritesheets can contain animation AND rotation and the total pixel amount is less than the limitation, we are fine and can generate rotations easily and assemble in a rotated spritesheet.

Above Limitation for Bitmap:

For samples that exceed the limitation we can either manually generate rotated sheets and load depending on what angle we need we load the actual graphic.

Advantage:

No need to generate samples through code and quicker implementation. Can reduce memory load as we need only make what we really need. Can allow for odd angle samples depending on need.

Disadvantage:

No flexibility in quickly adjusting sample rotation sheets, manually rendering and creating the sheets before use and updating of code manually each time we change the sample rate. Possibly create samples we might never use. Possibility of artifacts during generation, diffuse and alpha needs to be handled separately. Complex code.

Existing Solutions:

An implementation that uses a pre-built rotation/animation sprite sheet was created by by Hectate and can be found here:

http://flashgamedojo.com/wiki/index.php?title=Mouse-Aim_Tutorial_(Flixel)

He uses the prebuilt sheet and sets how the animation is to be played, adding animation sequences based on row and columns.

In this example we have the rotation along the horizontal, and the fading of the red line on the vertical. Playing now the animation labeled X will rotate the shape, whereas the animation labeled 0 will make the red line fade out and back in.

1
2

addAnimation("X", [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], 30, true);
addAnimation("0", [0, 16, 32, 48, 64, 80, 96, 112, 96, 80, 64, 48, 32, 16], 30, true);

Continue reading ‘Flixel Demo – Creating animated and rotated sprites from an un-rotated animated images.’

Rendering a Planet Video Game Style – Part 1 – Earth

Published on July 24, 2011 in Uncategorized. 0 Comments

Ok, so I was challenged by my wife over the mediocre looking water in Garden Planet and said why can’t you make a planet that looks more believable, especially the water of the oceans.

I though, well then, lets create a little game like demo setup to render planet earth the same way we did in garden planet. No fancy shaders or anything. Just a few tricks etc.

After a few hours of work and tweaks the result is what you see in the images. Ok admitted, I did use earth photographs from NASA, and after a few tweaks I had separate layers for Landmasses, water, shorelines and clouds. And for a bit of visual fun, a very large version of the moon as a visual gimmick. Mind you, it’s it not scale, just make it look nice.

Hope you enjoy. The setup on how I did it will come in a separate post.

Asynchronous Flash Events = Evil little buggers

Published on July 14, 2011 in Actionscript, Game Design, Game Programming and Life and other silly inventions. 0 Comments Tags: , , , , , , .

Did you know that combining loops with any kind of flash event is a bad idea when processing data? Well it should be obvious but usualy it isn’t.

Take a for loop for example. Add in a bunch of remote file downloads that get started in this loop.

1
2
3
4

for(var i:int = 0; i < counter; i++)
{
	Loader.addEventListener(Event.Complete, doStuff);
}

Since they are flash events, you wait until the event triggers and then you got your data. You will end up with missing data.

Why? I don’t know. Third base.

What I do know is, things become asynchronous due to the nature of flash events, and even worse so due to filsize and download speeds. What to do instead…make it state driven! Ok, you don’t get simultaneous downloads inside of a flash application, but then, seems it can’t relly handle it anyway.

How to make it state driven without using the loops in AS3 the way you would usually do it. Simple:

Replace the loop through an ENTER_FRAME event and call your data processing method that way. When done, don’t forget to remove the event again.

Within the method called by the event, use a simple switch to keep track of different states of your loader:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

addEventListener(Event.ENTER_FRAME,update);
 
private function update (e.Event):void
{
	switch(state)
	{
		case "initload":
			initTheLoader();
			break;
		case "loading":
			break;
		case "finished":
			cleanUpYourself();
			break;
	}
}
 
private function initTheLoader():void
{
	state="loading";
	Loader.addEventListener(Event.Complete, doStuff);
}
private function doStuff(e.Event):void
{
	//Loading finished
	//Do stuff to your loaded that form here on out
	//When you are done change the state again
	state="finished";
}
 
private function cleanUpYourself():void{
	removeEventListener(Event.ENTER_FRAME,update);
}

Now you wont get any more funky missing data, everything is referenced and loads properly. You can even put this in a class that you init multiple tiles and it will still work.

One MAJOR thing you must know, that events are dependant on EventDispatcher in AS3. That means you can only ADD event in a class that EXTENDS the EventDispatcher such as Sprites, Bitmaps, the Stage etc. This means that the eventListener must be added to the DISPLAYLIST.

The best way to handle this in classes that are NOT part of the display list, is by adding the listener to the STAGE. Do remember that when you are done to remove the listener again before the class instance is destroyed. Else it will keep lfoating around in memeory and cause trobule.

Thats all folks. Happy coding :D

Unreal – After a long time again

Published on June 29, 2011 in Uncategorized. 0 Comments

For my upcoming class for 3D Level design I am diving into Unreal again. After having dabbles in Source for the past two years, I go back to this lovely thing. Now that UDK is available freely, and the new light engine is just fantastic, I decided to give it a go again and use it as the tool of choice for my class.

For fun’s sake I built a very small demo level to play around with the new light features and getting a hang of using the new Editor (haven’t touched it for like 6 +years). Turns out, few changes that really threw me off. I do miss the SkyBox though…. Oh well, can’t get everything. Here a small taste of the demo level. next up. Build a better unreal level :D

Triangular – Flash Shoot-Em-Up Game Prototype

Published on December 22, 2010 in Game Design. 0 Comments

I have been learning Actionscript 3.0 over the past few months in order to be able to build digital prototypes of my games instead of just traditional paper and pencil / board games. On top of that it is meant to teach my students how to go from an initial design for my game through the process of a technical design to actual implementation. As a first major game I wanted to make a Shoot-Em-Up type of game for three good reasons:

  • First it is challenging
  • It’s is a simple concept of destruction/survival dynamics and it can be competitive
  • Touches base on all fundamental game structures apart from story, strategy and complex stats

Some of the functions I wanted to explore especially in regards to Actionscript are the following:

  • Multiple Class Structures
  • Code and Timeline
  • XML Loading and Saving
  • Level Design
  • Different types of collisions in AS3
  • SIN/COS/ATAN2 for movement
  • Tracking of units
  • Event Handlers
  • Scoring/HUD/Healthbars
  • Screen Navigation
  • Bosses
  • Upgrades
  • Z Coordinates in Flash

In regards to teaching I want to communicate the following in particular in regards to game design:

  • Programming for Game Designers (who don’t have programming experience and won’t become game designers)
  • Rapid digital prototyping
  • Understanding basic programming building blocks for games
  • Flowcharting the game logic
  • Understanding technical limitations of game engines
  • Basic balancing
  • Documenting and planning the implementation of a design

This sounds like a lot to digest, but it is not as much as it might appear. With this entry I wanted to share as a first step the initial technical design document I have put together before I started programming. I didn’t write a full Game Design Document since the game is so simple. But let me summarize for educational purposes anyway:

Game Summary:

Triangular is a 2.5D vertical, top down, space shoot-em-up. The player defeats oncoming waves of enemy ships and a boss at the end of each level. The player tries to beat all levels and gain a high-score. He can fly up,down,left,right as well as fly depth in order to attack enemies and avoid obstacles. The player can pick up upgrades to restore health, lives and change weapons.

So, here you get a sample of the current game:

Buttons:

  • Navigation: Up,Down,Left,Right, Spacebar
  • Cheat: P – to self destruct

NOTE: Highscores are disabled and there is just one level currently.

You may look at the initial design doc here: Initial Design Document

Garden Planet – A short postmortem – Part 2

Published on December 20, 2010 in Game Design. 0 Comments Tags: , , .

In the previous Part I explained what Garden Planet and M-EDGE is. Let me explain some of the things that went well and the ones that didn’t. Hopefully some of you who read this can learn as much from it as I did. Especially some mistakes have been made, not just by others but myself as well. Unfortunately not everyone learned from it, which let to the projects demise (half published doesn’t count as success).

So what went wrong:

Game Design overturned, often without knowing by upper management.

This definitely the worst thong to do. You should never ever be in the situation where your boss  (investigator) goes around behind your back and issue changes in the game design without ever discussing it with you. Especially when he has no experience or knowledge about game design and running a production. Issuing instructions to the production team without it going through an approval process, especially when it involved the design of the game, is asking for disaster, not to mention destroying trust, alienating the team and frustrating.

Last minute  changes for no good reason.

Changing the games direction when alpha is over and it has been tried and tested to work well, is suicide. Especially when the project timeline is 12 months and 8.5 months are done. Worse even, when the change comes from the boss without sound reason and proof that the game is not working. I am not advocating to keep beating a dead horse, but you should never kill the horse thats still running hard and far ahead.

Continue reading ‘Garden Planet – A short postmortem – Part 2′

Terrain Editor Stage 1 – Heliosphere Development

Published on May 10, 2010 in Heliosphere. 1 Comment Tags: , .

Florian pretty much finished a basic first stage of a terrain editor for Heliosphere.

Lithosphere Snowy Mountains

The description runs as follows:

Lithosphere is a GPU driven terrain generator. It allows you to create and export material textures and heightmaps intended for use in realtime graphics applications.

You can download the editor and enjoy playing around with it. Please see the documentation and release notes.

Addition would be to extend it to be generate spherical objects such as asteroids and even planets.

Why so puzzled?

Published on May 6, 2010 in Game Design. 0 Comments

UPDATE: Follow the discussion at GAMASUTRA.

Interactive – non-Interactive and Staic – Active

Puzzles are static, games are interactive. -Greg Costikyan
http://www.costik.com/nowords.html

The first thing I must ask here is:

Are Puzzles static?
Are Puzzles non-interactive?

Can we compare even puzzles to games on the grounds that one is static and the other is interactive? What are we talking about here? Can the two words even be compared to each other?

________________________________________
The state of the thing will change depending on your decision. -Greg Costikyan
________________________________________

A puzzle starts unsolved, and you complete it when there is nothing to solve anymore.
Assembling a car is unfinished until all that go into it are assembled and no parts a left over.
A game is not finished until the last objective is completed and a player has won. Continue reading ‘Why so puzzled?’

Web Text Formatting done better

Published on April 24, 2010 in Digital Life. 0 Comments

There is a big difference between writing for normal documents and the web.

This is even more apparent on blogs, B2C and informative websites then anywhere else. People want to “skim” the site for information and not ready every word.

When Florian read my recently published Garden Planet post, he mentioned that it read more like a book then a skim-able web entry. He directed me to the UseIt Website to read up on how to more effectively write for the web.

To make a long story short, I try to do what the site suggests now and format my entries more according to what their research concludes. You will find a lot more:

I hope those measures will help my avid reader to enjoy my site more and help them assimilate the information given.

Warning: I will add my own spin to all of this at times. I don’t believe in rigid rules. Also I will reformat older entries to become more legible.