A Look Into the Art of Shots Fired [Part 1]

Park Map Original 2015

 

SF logo 2015

It’s been now a little over 2 years since we started Shots Fired. It has grown from a simple game jam into a full-fledged game that would be releasing on Steam and Switch this 2018. The amount of changes it has been through is huge. Total make-overs and overhauls were made to make it what it is today. So, why don’t we hop on our DeLorean and get to 88 miles per hour and look back into what “was” then Shots Fired. 🚙🎛


2015


December of 2015 is when we started Shots Fired. It was developed under Ludum Dare 34 with the theme “Two Button Control” & “Growing“. This was initially going to be the medium in which our artists would explore different art styles that we were not experienced with (This was ‘Pixel Art’, which to be honest was a first for the team then).

Upon deciding on a sniper / assassin type game, we practiced doing some art. The characters were created under this style, inspired by other games such as Party Hard, FTL, etc. The simple style of the characters made it easy to mass produce a bunch of them (as seen below).

Character Set OLD

Character sprites showcasing the different variations of characters

Character Sprite_Sheet 2015We had decided on using sprite animation during this time. Of course with every new character we had to slice each part to match, pivot points needed to be the same so we had a template where we could just replace the part needed.

We added a few inspired characters from pop-culture and famous anime that would easily be noticed by the players. This was one of the ways we tried to get players to get the “Hey! I know that character” kind of feeling when playing the game. We did decide to not include faces in-order for players to not fully perceive them as real people.

The environment itself was a challenge during that time, as we wanted something that looks complex yet simple. We somehow got to the environment seen below which is also in the latest build but in a more updated version, the “Park” map. After 2 iterations, we finalized 2 trees and changed their colors to add a change in the monotonous greens of the park (a bit autumn as Ronnie would say). The rocks and lake took a bit of time as we went overboard with the detailing on that. We also needed to populate the park with other amenities or objects that would add a busy look to it.

Park Map Original 2015

It looked pretty bluish at that time. At this time, we had no logo or name for the game yet so we decided to try making a few random ones. One of the artists made an exploration of the text “Shots Fired” as you are firing bullets. We tried using the colors of a bullet which didn’t really look as appealing as a blue metallic theme which is an old school type of logo.

Logo Concepts 2015

Now that we had a logo, environment and characters, we needed the basic UI for the game. We had no main character to show except for a concept character that we used all throughout the creation of the 2015-2016 build. We had him smoking to add motion in the main menu and a few contrasting buttons that made it feel like a retro game. A mission selector was also created for the initial build of the 2015 game.Shots Fired Start Screen 2015

2015 Mission Brief UISF UI 2015


2016


After 2015, we wanted to create more with Shots Fired. We didn’t want it to be just an arcade shooter type game, we wanted it to have more substance. We had a total overhaul of the environment and UI during this year. More environments and characters were added during 2016 as well as a plan for us to go to into Steam Greenlight. We changed the color palette into something a bit brighter and pleasant looking as seen in the image below though we forgot to add walls to the sides during this time.

Old Park Map

Old Apartment Map 2016

Just the color itself made a huge impact in how the mood is like in the game. From the bluish darker tone to a brighter tone it now made the characters a lot more visible. We added a few more objects into the scene to make it less empty looking. We also decided to add a few more maps into the game, seeing as a single map would not add to the game’s replay-ability.

So with a full fledged game being targeted, we needed a new set of UIs to come with the game. Since we knew we were paying homage to the old school games of the 90’s, we decided to return to our roots of doing a parody of Windows 98 which we called Doors OS.

We also decided to use old website designs for the games mission list while using an email system similar to a popup “MSN Hotmail” or even “Yahoo!” mail. We had a store for the supposed feature of adding cosmetic items to your weapon or weapon upgrades which at the time was one of our main features.

Shots Fired Desktop UI 2016

This is where things started getting serious. We had the base game almost ready but it still didn’t have the oomph we wanted. What were we missing we wondered, then we came up with a story. This was when stuff about the extremist group ISIS came about and we decided to go with IBRO; An extremist group that does any and everything to take TVs from unsuspecting innocents.

With a villain already in mind, we needed bosses which were unique and would stand out in a crowd of 100 in a map. It was during this time that we decided to change our animation technique into something much more time efficient. We used “Puppet” style animation using the Unity animator to create a few animations that could be reused by each other character by just replacing the specific part sprite.

Character Sample Sprite 2015  Sample Sprite Animation 2016

Unity kept each sprite sharp through changing the “Filter Mode” into “Point” in the inspector. This animation style made it easier to adjust and add new animations that could quickly be added into the game. We had generally everything up and running during this time and we were ready for Steam Greenlight; to which we proceeded to complete, trailer included.

The trailer was made through in-game footage and some editing but it generally showed the gist of what the game was at the time. We got tons of views and “Yes” votes when the (in)famous game critic, Jim Sterling, created a new series with our game as the first video.

Once we got greenlit, we decided to join a local indie game showcase, “ESGS Indie Arena”, through our friend Ms. Gwendelyn Foster. We soon met our Publisher, Another Indie Studio, who were showcasing Lost Castle in the event.


Early 2017


Early 2017 was when we once again had a total makeover of the game. This time it wasn’t just small details that had to change, but the overall aesthetic of the game. We decided to take a modern turn this year for the game. We knew that the characters didn’t have much impact in terms of visual appearance, so we decided to start with that.

A few concepts were created to begin with, but ultimately we chose one which I considered was a style befitting of what we were about to do (Which was shooting them). This also meant that we had to update every animation which was previously created with the old sprites since the new characters had new pivot points due to their larger proportions.

Character Concept 2017  IdleAnimation 2017

Now it wasn’t just this that had to change. We also wanted to add more variety to the society in the game, thus we decided to add body types. (Sigh, such hard work all gone down the drain… 😟)fat body type

You can see how much improvement was done in terms of animation smoothness and character design. This was step one of the what we call Shots Fired 3.0.

We then had to change the environment and UI once more to fit the new updated style. The environment went through a lot of changes especially the Apartment map that was shown above. A total of 3 overhauls were made specifically for the Apartment map at the time.

Park_Reskin 2017 Apartment Map 2017

Through all of this, even with all the major overhauls of the game we were still inching bit by bit into what we wanted Shots Fired to be. As the post is a bit long, we’ll continue more in Part 2!

Have a great one everyone!

ronnie

This entry has 0 replies

Comments open

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>