MAKING OF: Big Pixel

Материал из Blender3D.

Перейти к: навигация, поиск

Introduction 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 in- teractive content. The majority of per- sonal computers have a version of Flash Player installed, with around 95% having the latest Flash Player 10, which is great because not everyone wants to have to download 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 think 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 re- stricted 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 rela- tively 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 lack of spe- cial effects we can use in Flash, we try to give our game a quite stylized look instead of going for pho- to-realism. 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 version 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 think 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 artwork in general) and colours that go well with the ground texture, The ground texture is something that comes to- gether 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 mode- ling. 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 cafe 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 cafe 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 back 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 clock 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 al- ready a cube, lets call him Cubey. Don't bother re- naming 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 ex- ample. 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 de- lete 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 back 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 par- allel to the camera, re- member if we don't rotate that camera no one will know. Then we have a nice and very sim- ple 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 ex- port some- thing, select it and go to file->export- >actionscript 3 class. Make sure you’ve con- verted to triangles first though. And remember not to let your cat eat bitmaps or meshes because they will if they can Links:

Личные инструменты