Battleships Collide - The Development Process

This page covers:

The project's lifetime from first idea to final idea these includes summary of ideas and implementations in versions 1 and 2
The project goals
The creative and design process of the game from my perspective as a gameplay designer and programmer
The transition from version 1 to version 2
The "behind the scenes", ideas, what worked and what didn't work during the design of this game

Setting Project Goals

Battleships Collide Version 1

Battleships Collide Version 2

When I started this project, I never had a game design experience. I was just the kid who just learnt how to use Unity to make game. I was extremely eager to make my first game. And with that in mind:

To create a game
To release my first playable game

With the success of my second game, Exbots Revolution and with the experience garnered through design experimentation with unity, I set out to furnish my first game Battleships Collide, and I had a few goals in mind:

To enhance my artistic design skills by giving a more futuristic sc-fi vibes to the game
To improve user experience in the game
To fix lots of bugs, glitches and various issues found in version 1

IMPLEMENTING IDEAS AND GOALS

Having learned a lot about game development and programming mostly from YouTube and eBooks, how it is done, what game engines are and getting the Unity game engine(version 5.6 at the time). The time came for me to practice what I've learned and make a game.

First, I had to come up with a game title. This sounded quite easy at the time, there are a lot of ideas I had, but I decided to try something a bit easier on the eye. I thought I'd make it a sorta sci-fi endless runner involving spaceships.

Then I went into blender, and began to work on some low poly 3D models to represent the characters. I used a sci-fi asset from the unity assets store to make the environment. Then made custom shaders using shader graph and the shuriken particle system to make a lot of weapons including a laser with the star trek disintegration effect.

Early game stages

The idea wasn't so bad at the time, but the execution posed a lot of challenges to me given that I was a beginner with very little experience at the time.

So I decided against making an endless runner and make one with missions and actual spaceships.

Making a 3D sci-fi space shooter

The second idea I had for this game was to make a sci-fi spaceship shooter in 3D, one in which the player gets missions and objectives, and has to complete them in order to advance to the next level. It was that simple, so I began to think about the assets that I may need to make this game.

Environment Design

Next up was to create and fill in the environment, so having the idea of sci-fi and space, I was thinking:

Spaceships - Representations of the player, non player and enemy characters.
Weapons - Objects the spaceships would utilize in order to damage it's target.
Skybox - Space and cosmic illusion that makes up the whole environment and light up the game world.
Asteroids - Damageable objects in space that not only makes up the environment but also rewards the player when damaged.
Planets - Non damageable objects in space that make up the environment, creating the illusion that the player is in space.
Misc - Space objects including galaxies, metallic debris, stars, nebula that make up the rest of the environment and make it feel "space-y"

Spaceships

I went into the unity assets store and searched for spaceship models. Luckily, I found 2 sets of spaceship models that caught my eyes. One made by Ignacio Berge and Ebal Studios

Battleships Collide V1 - Enemy Ships 3D model

Weapons

There are 4 primary weapons used in the game:

Lasers - A long glowy line like in Star Wars.
Missile - A powerful weapon used by jet fighters
Plasma beams - A lively cannon shell filled with dense electron particles
Energy beams - An electrified glowy line that reaches a target far away

And a secondary defensive forcefield shield that protects the player's ship from attacks

Skybox

I searched for space skybox, and found quite a few of them from Pulsar Bytes. They had an amazing set of skyboxes, and just what I needed.

Asteroids, Planets, Black holes, Galaxies

In Battleships Collide Version 2. Higher quality textures were used on 3D models to produce planets, asteroids and various space and cosmic environments

Game Mechanics - Battleships Collide Version 1

Environment

Being my first game and all, I don't have much in view in my head when designing this version. All I envisioned in my head is a spaceship flying around through space fighting other spaceships.

So I designed the environments by asking myself "what would space be like?" Then I thought "dark, filled with asteroids, nebula, gases, planets". Then I imported them and set them up in the game.

Mechanics

Now to build the mechanics of the game. Since this was a spaceship game, we'll obviously need spaceship controls. So how would this work? Based on the design of the ship, the model would have at least two thrusters, this means the ship can only move at full speed in it's forward direction. To design the rotations of the spaceship, I would only apply movement on the direction of the analog stick. This didn't provide a much realistic feel to the spaceship's rotation, but that was a problem I'll have to fix in the next version(Yes, I did fix this, see "Battleships Collide Version 2 > Mechanics"). Up came the ship's weapon system, for this, I had to try and achieve a sci-fi ambience during spaceship battles, so I thought about lasers, missiles, cannon artillery shells and an energy beam. These weapons were a great idea, so I made a laser out of line renderers and custom shaders with HDR properties in which post processing bloom effects enhanced. I got the missiles from the same assets pack as the enemy ships. Then I modeled a cannon shell out of a 3D sphere and then added a custom shader I made with shader graph to simulate a dense cannon shell, then used particle effects to simulate the trails and then achieving a sci-fi cannon and finally made an energybeam out of a line renderer with custom shaders. With the exception of the energy beam, these weapons operated in basically the same way, when instantiated/spawned, they move forward and are disabled upon impact with an object. The only differences are the way they look, the impact they made, and the damage they've inflicted. The energybeam was designed to be the most powerful given that they lock onto a target in the ship's crosshair and kept firing at it as long as the player holds onto the fire button, and the target will be severely damaged. Their values were ranked in order from weakest to most powerful: laser, missile, cannon shell(later renamed to plasma beam), then energy beam. And the last weapon was a defensive weapon, a forcefield shield designed to repel hostile attacks. I made this with a regular unity sphere and a shader I made thanks to Brackeys.

The enemy ships were quite different to the player's ship. Unlike the second version of the game, these enemy ships were different models compared to the player's ship. They only fired lasers, and were programmed to wander around space until they encounter the player, only then were they allowed to attack the player's ship. Their movements were identical to the player's ship's movement mechanics, but they fired just lasers.

User Interface

Setting up the user interface was tricky given the number of weapons I have on the game. From the games I've played from the app stores, there is usually a pause button, stats and controls. After setting and resetting the basic UI assets that I designed using Adobe Photoshop, I finally set up the interface like this: placed on the lower left corner is an onscreen joystick for a more accurate operation of the ship's rotations, and on the lower right corner contains the ship's battle operations like it's fire buttons that spawned it's weapons, a forward button that moves the ship on it's forward direction, a brake button that slowly brings the ship to a halt, and a forcefield activation/deactivation button. On the upper left corner contained the ship's health status, time and pause button(put into the health UI object). Each enemy the player's ship would face would have a hovering UI object that indicates that ship's current health status.

When the player hits the pause button, a pause menu would appear, and the time on the game would freeze causing every time based movements(used by all spaceship in the game's scene) to hold off updates which then creates the paused state of a game. I had a more simplistic approach to the pause menu design, so I used colored images of a white image asset to represent the background images on the pause menu. Then I added a way for the player to either quit the level, restart the level, or resume the level.

Gameplay

The gameplay was pretty simple, you fly around using the controls, find and shoot enemies.

I used a progression system to design the levels. This means that players can only advance to the next level when they have achieved the objectives set for the particular level. These objectives includes random options like finishing the level with at least 50% health, destroying all enemy spaceships or asteroids, finishing the game within x minutes, and more...

To maintain a level's intensity, health packs and coin packs would appear at random places in the gameplay world for the player to pick up(by flying their ship into it). When a player begins the game, they're given a low level spaceship which they can upgrade or replace later in the game. These were done to boost the game's intensity and a sense of accomplishment.

Main menu, Spaceship upgrades, Deciding Names

Le main menu and options in Unity

Designing the main menu of a game is probably the trickiest and probably the simplest part of making a game. This is because a game's main menu is like the cover of a song, movie or a book. So essentially a good main menu should invite the player into the game, get them to feel excited for the game and also to showcase the an essential feature in the gameplay mode(in my case the game environment). Not only that, but have a good placement of UI components to showcase buttons that enters the gameplay modes, or upgrade weapons or tweak a setting or see how much they have in their in-game currency.

I had these in mind and went on to create nothing too fancy: a representation of the player and the space environment, then wrote a simple code that slowly rotates the environment props(like asteroids, space shards, etc...) over time.

Then designed the UI by using fonts that would showcase a sci-fi design on them, these fonts were from the Text Mesh Pro Asset on the unity store at the time. These fonts were placed on UI buttons, and empty spaces. This allowed players to easily navigate the game.

The spaceship hanger is the environment in which players can unlock a new spaceship or upgrade their existing spaceships using currency items like coin packs earned during gameplay.

The hanger would contain different spaceships that are more powerful than the previous one. These spaceships may be unlocked or upgraded using coin packs and they may be equipped with various levels of upgrade-able lasers, energy beams, missiles, plasma beams and forcefield shields. When these weapons are upgraded, the damage done to enemies will be more precise and severe.

I made 2 hangers because I thought players who paid real money to play this game should get a special treat for supporting the developers. This "premium" hanger would feature a locker containing all weapons, and an unlocked spaceship that already has all weapons unlocked.

Premium spaceship hanger

Regular spaceship hanger

Coming up with names for a game isn't as easy as it sounds now is it? This was my first game, so I wanted a really good name, a name that quite fits and sounds cool when it is called. So I started combining different words that are associated with the game's theme like space galaxy, galaxy battles, and others. Eventually I settled with one that had style: Battleships Collide. Because it involved spaceships that were sort of at war...plus it sounded cool to me(don't judge haha).

Battleships Collide V1 - Monetization

In order to earn from a free to play game such as this, I had to monetize it somehow. After a bit of research into game monetization techniques, I integrated in game advertisements and In- game purchases.

In-game ads are a way developers put ads in their apps and earn money whenever the ads run in the game. And in order to provide a smooth game experience and retain players, I opted to integrate 2 forms of ads: the interstitial ads and rewarded ads. Interstitial ads are adverts that are shown and can be skipped by the player after about 0 - 5 seconds into the ads. This was well suited for when the player completes a level. Then the rewarded ads are adverts that are shown at request and cannot be skipped until the ads are completed. This is a perfect way to give the player game items in exchange for ad views.

Game Mechanics - Battleships Collide Version 2

Seeing how my skills improved since Exbots Revolution, I decided to take that skillset into Battleships Collide. It's going to be fun.

I designed the environment in version 2 to be quite similar to version 1, some notable difference are the UI, spaceship models, lighting, mechanics and environment. This version was intended to improve performance on mobile devices, create and enhance an engaging gameplay experience through improved user experience and stunning visuals.

These designs were implemented after researching what brings about engagements to a game, jet movements and rotations and after learning more about Unity and successfully practicing on test projects.

Environment Design

The first step to go on this version was to build a better gameplay environment scene.

To enhance the environment, I focused my work on visuals. So I upgraded my Unity version from 2019 to 2020LTS to utilize it's latest features.

Then switched from the built in pipeline to the Universal Render Pipeline support, and switched lighting methods from gamma to linear for a more accurate lighting technique. I also upgraded the skyboxes to produce more ambient lighting to the game scene. And I added fictional planets, nebula and gas effects to the gameplay scene. The goal of this was to create an environment that actually looks like a "real" galaxy. The inspiration for this came from watching both Guardians of the galaxy movies.

To optimize the gameplay experience and reduce jittery and lags, I had to combine meshes together using the static and dynamic(with instanced materials) batching techniques. Then used unity's baked global illumination system with baked light and reflection probes to simulate changes in light colors and intensity, and provide a color theme to each level and every objects in it based on the skybox's color. And of course occlusion techniques

Mechanics

To enhance the game's mechanics, I looked into the one problem I encountered in the previous version: The controls.

For the controls, I wanted to achieve a more realistic aproach for a spaceship controls, so after briefly studying a jet's movements, I wrote C# code that would control the spaceship to "roll" into the direction of the horizontal joystick movement by smoothly rotating the spaceship's body itself around the z axis up to a certain angle(a technique known as spherical interpolation) and "pitch" into the direction of the vertical joystick movement using the same technique but this time, around the x axis. Then physical movements(using unity's rigidbody) would be applied on the axis to create horizontal and vertical movements. Forward and backwards movements remained the same by applying a continuous force to the ship's forward axis until it reaches its limit(a terminal velocity).

Another problem I encountered with the previous version was a way to locate enemy ships, so I made pointer icons on photoshop and imported them into the game, and wrote code that manages these "pointers" and makes it keep track of every active enemy ship, and it would be disabled when an enemy ship is destroyed.

With my previous camera setup, I encountered a problem with the ship's movement. The problem was that no matter how fast the ship moves, it still moves slow when viewed in the player's perspective. To fix this, I watched and analyzed some race gaming videos on twitch and observed that it looks like there are some screen effects like motion blur, lens distortion and a contracted camera FOV activated when the cars reach a certain threshold. So I experimented with those idea in unity but unfortunately got weird results given the style of my game being a spaceship game on a mobile phone where performance is a priority. However, those videos did inspire me with an idea to create a speeding spaceship. So, I setup a new camera system using unity's cinemachine package, then wrote C# code that would slowly bring the camera to its default distance from the spaceship model as it moves faster, then I furnished it by adding mild camera shake effects and activating a wave of particle effects that simulates hyper speed space travels when the ship reaches a specified velocity threshold.

User Interface

The UI setup was not so different from the previous version given that the weapons and controls were placed at the same position as the previous version. I had to make it more sci-fi themed, so why not? First, I had an idea for a heads up display. I got this idea while playing Crysis 3 sometime ago, and thought "Hey! that ought to be a good idea for battleships collide", and so I went into photoshop and did a few quick designs and tested them out in unity.

At the end, I went with Idea 4.

I ended up redesigning the UI from version 1, by providing a clear pause button and a smaller pause menu, a healthbar to represent the player ship's health, an energy bar to represent the strength of the ship's weapon system. And then I modified the controls, weapon systems and other windows panel with these assets: Asset1 and Asset2.

UI PLACEMENTS

In order to correctly place UI on the game, there are a few things to consider:

A clear view of the game environment
Accessibility to controls and weapons
Visibility of in game stats

To accomplish these I made sure that the player's field of view to the game world is free of obstructions, so most UI items are placed at the corners and sides of the screen. The few that are placed at the center are meant to help the player locate or aim towards an enemy, and for mission briefing right before the game begins. The joystick, the item necessary for the ship's rotation was naturally placed at the lower left corner, while the accelerator, and weapons were placed at the lower right corner. A button which enables the player to switch between first person and third person was placed at the center left side, this is because, the feature would be the least used in a game level, and so it'd be natural to have it away from the main controls. Two brake buttons would be placed at the left and right of the screen for the purpose of usability.

All these UI items would have a relatively low color opacity to visualize UI transparency.

Gameplay

The basic idea of gameplay would be maintained from the previous level. The pattern for the game's objectives were relatively the same, this time with more emphasis on a story surrounding a returning hero who makes an attempt to save a dying civilization. They do these by either fighting other ships or finding and collecting item fragments hidden in the level.

As part of my optimization technique, I changed every enemy ship's model and behavior logic. The models were replaced with modified versions of the player's ship. I modified the ship's parts, color, weapon system and wrote a custom waypoint system that lets enemies patrol a level, avoid hitting different obstacles and engage the player when threatened.

Then I went ahead to add more excitements to the impacts with the player's ship as part of the game's mechanics:

Effects

When an asteroid is destroyed near the player, a screen shake feedback would be observed in a way that feels like the destruction of the asteroid sent shock waves that affects the players movement. Realistic particle effects would be played upon ship and destruction and weapon collision. I then modified the forcefield's shader to be more performant on a mobile phone and rewrote it's code to be less static, this means that when it is spawned, the forcefield doesn't appear out of thin air(or space :smirks:), but rather would emerge out of the ship's core. Then I optimized the energy beam weapon, and tied it to the forcefield making them both to siphon the ship's energy while active.

Sound

I turned all world space sound effects to 3D audio not only to give an advantage to players with headset to easily locate an approaching and an attacking enemy but also to enhance the excitements in the game. I then added BGMs and low pitched jet engine sound effects that plays continuously to provide ambience sound. Then finally, I added sci-fi interface beeps sounds that plays as the player navigates through the menu. Some of these sounds I created by recording and editing raw audio clips or creating them on FL studio.

Main Menu, Level select and Monetization

In other to provide more in-game visuals, the main menu and level selection in the previous version had to be replaced completely, and as a way of income, players can only upgrade ships by watching adverts or paying with real money.

To maximize revenue, I used ad mediations thanks to Yodo1.

Instead of unlocking so many ships, we'd rather have one ship unlocked, and upgraded as the game progresses.

Players will be evaluated on how accurately they compete each level's objectives.

Plasma Beam Weapon

Missile Weapon

Energy Beam Weapon

Forcefield Shield