kbrecordzz
Home - About - Contact - Overview
I've had a plan for a long time to write shortly about what I've done to improve the graphics in my upcoming game. And, here it is! Enjoy!
#1. In my last game (This Is (NOT!) A Car Club), all houses in an area had to have roughly the same appearance, or otherwise there would be too many "draw calls" (one for every house appearance) for the graphics processor (GPU) to draw the frames smoothly. The GPU doesn't like when you send multiple image files, because then it has to divide the job in an inefficient way. But it really loves when you send one single image file and then simply crop out the part of the image you want to use. So, that's what I did, and now I can have an infinite number of different-looking houses in an area and be much more creative with the environments, instead of being limited to 3 different types of houses for each area (which made the environments in This Is (NOT!) A Car Club look pretty same:y and repetitive). To pull this off, I had to go beyond the general-purpose 3D library "three.js" that I use, and create my own "shader". In this shader I also added the capability to blend these images together and change their colors.
(In the terminology I'm using here, a "house" is a small wall that you can build larger buildings of. The images below show the inside of these buildings, where you can see the walls being made of smaller repeating blocks. These blocks are what I call "houses", which is a historical leftover from This Is (NOT!) A Car Club where a house was just one of these blocks.)
Here's my image file containing multiple house wall images:
#2. The same is true for the flat 2D images that I use for objects inside the game world. Too many of them and the GPU starts to complain, and the solution is the same: Bake all objects into one big image and instead let the GPU crop out the one needed in the moment. I haven't created the shader for this yet, but I will eventually. And the result will be the same: I'll be able to be much more creative with the environments and add more varied details. Right now the areas in the screenshots look half-empty, but they will become more interesting as I add more furniture and other interior (apparently, being a game creator involves being a home furnisher).
#3. I've also started to minimize and simplify the 3D library I'm using (three.js), by removing lots of code from it. This is partly to reduce the file size to make the game faster to download, partly to learn more about 3D graphics, and partly also to some day turn it into my own 3D library, specialized for my own needs. Three.js is a very user-friendly library which is made to fit many use-cases at the same time, which means that most of the code in the library is never actually used by me. So, most of it can be removed. And through this process, I've found the shaders powering the basic rendering in three.js, and by modifying these I'm now able to change the appearance of the whole game on a level I couldn't achieve by using the predefined tools in three.js. By having more central control, I can achieve my own graphical style instead of looking like other three.js games because we use the same tool.
I'm not sure about these exact changes, but the changes I've made in the basic shaders so far are these: I've made the characters shine like gold, and I've made the whole world turn red and then blue, the further away an area is from the camera. It may look good, or it may just be the joy from doing something new that fills me up. Anyways, a game in neon-colors and gold feels right, in some way. Let's see how the actual end results turn out!
Subscribe to Golden emails