Graphics Final Project: Bubble Tank Bullet Hell
The Bubble Tank Bullet Hell is a 3D WebGL game, in which a player controls a tank, which they can use to move around and shoot enemy tanks. This game’s visual design was inspired by flash games like Bubble Tanks (http://www.kongregate.com/games/herointeractive/bubble-tanks-2), in which tanks shoot one another in worlds comprised entirely of bubbles, which are represented in this game as spheres. Tanks are comprised of two spheres each, a larger one representing the base of the tank, and a smaller one offset to the side representing the turret, from which bullets emanate. All bullets are rendered as spheres as well, as is the game map/floor, which is textured to look like a water bubble.
In terms of graphics, several things were implemented. Perspective projection is implemented, and zooming in and out via the mouse wheel is possible by changing the fov values. The camera is made to follow the player by modifying the eye and at variables used in the lookAt function. Lighting is computed in a per-vertex manner due to performance considerations, via a distant light source in the +x, +y, +z direction. Additionally, the base of the competition is textured with a water surface texture, in order to provide a relatively compelling environment.
Four different types of non-player characters (NPCs), or tanks not controlled by the player, are implemented. The sniper NPC shoots far and aims at the player, pushing the player away from the sweep of its turret’s fire. A shotgun NPC shoots three bullets at once, also aimed at the player, pushing the player away with its wide cone of fire. A berserker NPC shoots short-range bullets and runs quickly towards the player, at almost the same speed as that of the player, providing the player an immediate priority target to run away from and aim at. A turret NPC shoots many bullets at once in all directions, providing a small area of denial for the player, but also an opportunity to pit non-player characters against one another, as its lack of aim makes it easy to kill other non-player characters.
At any point in time, up to four characters, including the player, will reside in the game. Each NPC killed will grant the player 100 points, whether by another NPC or by the player. This encourages the player to not only shoot NPCs, but to also to put NPCs in each other’s line of fire, so that they engage one another. Points will increment in NPC deaths until the death of the player, at which point a game over dialogue will appear and the camera will stop moving. Even after player death, however, NPCs will engage one another, sort of referencing the going-on of life but also providing an interesting view of how NPCs battle one another.
The game begins at load time and ends with the death of the player, after which the player must refresh the page to play once more. Controls are specified at the bottom of the screen, WASD to move the character (w moves up, a moves left, s moves down, and d moves right), left and right arrow keys to rotate the turret, space bar for the player to shoot, and up and down arrow keys, or the mouse scroll wheel, to zoom in and out on the map. Player lives remaining, as well as player score, are specified at the top of the screen, and a fps counter is shown on the upper left. On death of the player, the only controls still applicable will be scrolling controls, and a game over display will appear.
One can play and experience this project by downloading the code from https://github.com/dway123/BubbleTanks, and running index.html, or by visiting the hosted website (courtesy of github) at https://dway123.github.io/BubbleTanks/. This code has been verified to work only on Windows 10 64-bit browsers Google Chrome 58, and Microsoft Edge 40. It is recommended to use Microsoft Edge to play-test this game, due to higher framerates (lack of lag). Additionally, if one wishes to download the code and run it locally on Google Chrome, please run (windows key + R) this command “chrome --allow-file-access-from-files” to allow the texture to load locally. This game has also been verified to work on Google Chrome on a MacBook, and should theoretically work on any browser with Javascript and WebGL enabled.
I wished not only to make a bullet hell, but also a “fun” game to play. I feel like I have achieved these goals, as it is important for the player to dodge bullets, and I enjoyed messing around with game mechanics and balancing while working on this game. The only thing which I believe I did not achieve which I wished to, was the rendering of more bullets. This was due to the abundance of vertices on each sphere, and while it could be avoided through use of 3D models, which generally would generate a sphere using fewer vertices and more efficient algorithms, I felt that the spirit of the project included the generation of the base shapes that were to be used, so abstained from importing 3D models. However, this turned out to be a fortunate limitation, in that I ended up designing simple AIs for the NPCs to maintain a non-trivial level of difficulty even with fewer bullets on the screen at once. Another limitation was that of rendering performance. I had initially done all development and debugging on Google Chrome for its developer tools, but ended up doing most playtesting on Microsoft Edge, due to much better performance on that browser. While my game would go down to 20-30 frames per second on Google Chrome, it would never dip below 50 fps on Microsoft Edge. It is noteworthy, however, that Google Chrome did achieve consistently 50 fps on a friend’s Mac, so it may just be my Chrome installation or Windows.