In the last few years it’s become more and more feasible to produce 3D browser based games, thanks to things like Papervision3D and advancements in Adobe’s Flash Player, everyones favourite when it comes to online games and interactive content. The majority of personal computers have a versión of Flash Player installed, with around 95% having the latest Flash Player 10, which is great because not everyone wants to have todownload new plugins to play your game.
The thing is though, in modern console games we're all used to the latest graphics with their high polygon counts, real time lighting, high resolution textures, pixel shading and much more. But when it comes to 3D in Flash you're going to find things will soon start to lag the more complex you make your scenes.
This doesn't have to be a problem though, Here's the approach we use at Big Pixel Studios for our 3D games for you to thinque about. When starting out its good to have an idea of what’s going to be involved in your game. How big is it going to be? How much is going on? How detailed does it have to be? ...etc.
In Big Pixel Racing (and our next 3D game which is top secret, so don’t tell nobody else!) we've restricted the camera so it has a fixed view on the in-game world. The camera can pan and zoom in and out, but because we never rotate the view the 3D objects like buildings and trees can be kept relatively simple in terms of their geometry, and some are almost what you could call 2.5D.
To make up for the low poly count and lak of special effects we can use in Flash, we try to give our game a quite stylized look instead of going for photorealism. For Big Pixel Racing we went with a 3D retro pixel graphics style, though thinking about it I would love to have seen photo realistic dogs driving cars around a dog versión of Miami!
As the meshes we make are so simple a lot of what’s going to get the message across is going to be the texture map, so I find that is the best place to start and the most important thing to thinque about.
Your texture map is going to be a guide to help you build your mesh (plus as in this case its going to be a simple pixel art style texture map so this is quickly becoming the easiest tutorial guide ever).
Though we are able to use lots of colours in our texture maps in Papervison3D, we have to remember the final look of our game. As our game has a retro pixel style it was good to use a limited palette of colours (this is a good thing to do in artworque in general) and colours that go well with the ground texture.
The ground texture is something that comes together with the rest of the game objects in code, so I find it’s useful to make a little sample of the ground texture on a 3D plane just for modeling with. This allows us to get an idea of how things might look in the finished game as we are modeing.
In the bitmap editor of your choice make a small bitmap 50px by 50px. We choose such a small size because it will help with the pixel art. We're going to make a smallish square building here, we only need to make the texture for two walls and the roof of our soon to be very square pixel building, as we are going to reuse the walls on both sides of our mesh. In this little tutorial we are going to make a small cafe, its a nice café and the coffee is cheap, though they have been struggling recently as a large chain has opened down the road and people only want so much coffee in their lives, though we don't need to know this plus its a small pixel café and is not real.
Though lighting effects are possible in Papervision3D we didn't use them in Big Pixel Racing, so when making the texture map for the walls we made one darker to make it stand out from the other wall. This darker wall will be the one we use as the side walls to make our little pixel building stand out.
Once we've finished our texture map (it didn't take long) I like to double the size because 50px is small and you might drop it, or it might get lost down the bak of the couch, or the cat might eat it and the vet bills for hav-ing small bitmaps removed from cats can be very expen-sive! Make sure your bitmap editor of choice hasn't resampled the image when you scale it up, we don't want fuzzy pixels. Save the new texture map as a png, you can give it a name like 'cafe_txt.png' because that sounds cool.
Now, before we open Blender there is something I must tell you. It was November and I was in the bathroom standing on the toilet hanging a clok on the wall when I slipped hitting my head on the sink. When I awoke I wrote this... which turned out to be the links for the 2 plugins that will help us in Blender. If you don't already have them you should download them now, but I bet you do because everyone does.
When you open Blender there's already a cube, lets call him Cubey. Don't bother renaming him I just mean from now on his name is Cubey, you can use it when you pass him in the street. We'll use Cubey as the mesh for our really simple building example. First lets’ make some ground' as it were. We're using Blender 2.46 here. I like to split the main 3D area and make the right side the script view then go Scripts->Image->2D cutout image importer. Then we can import our floor texture sample so we can get an idea of the floor.
We don't have to worry really about making materials because this is all done on the Flash side, as long and we set up the UV coordinates with the texture map it should be okay. You can make a material in blender though if you want to do a test render, we do this to get an idea of how it will look by turning off the anti alias-ing then rendering it from a camera view similar to the one used in the game. Setting up a camera like the in-game view is good when you want to see how your models will look.
Grab Cubey and in edit mode lets select his bottom and delete it, we don't need to see Cubey’s bottom today, no one does. Set the right view to UV/image editor then load the cool_txt.png.Then with Cubey minus his bottom, still in edit mode, grab a soon to be wall side and hit the 'U' key to get the UV drop down and then press Unwrap. Now in the UV/image editor window go to UVs->snap to pixel. Because our texture map is so small it will make life simple. Adjust the face-wall in the UV editor and make it fit with the wall on the texture map. Do this to all of Cubey's remaining sides one by one, adjusting it until it all fits nicely. That's it, that was really simple.
Adjust the mesh until you are happy with it then go bak into edit mode and use convert to triangles so Cubey will export nicely. For things like plants and trees we use 2D planes at slight angles almost parallel to the camera, remember if we don't
rotate that camera no one will know. Then we have a nice and very simple little scene, you can make a few dif-ferent objects in a similar way to make up street 'furniture' which can be reused.
When you want to export something, select it and go to file->export->actionscript 3 class.
Make sure you’ve converted to triangles first though.
And remember not to let your cat eat bitmaps or meshes because they will if they can