ART (Continued)
After creating the character sprites and all associated animations, I moved onto the backgrounds, platforms, & foregrounds for the game’s 3 levels. These were hand-painted in Photoshop and were separated into 3 different layers:
Foreground: Displayed in front of the player.
Playground (Platform): Displayed behind the player and is the navigable area.
Background: Displayed behind everything, sometimes containing multiple layers for parallax (explained later).
All landscape art used a resolution of 7680x1440 and it took about 8-12 hours to make each complete level art. Since the player viewport is 1920x1080, this gives the player about 4x the space of the viewport’s width to move around and some wiggle room to prevent seeing the edge of the images.
Background (First Level)
Playground (First Level)
Foreground (First Level)
Combined Layers (First Level)
Proof of Concept Sketches
Anyone familiar with 2D games knows that in order to create depth to your backgrounds, you will want to have a parallax effect with it. This is when the background moves slower than the foreground to simulate distance as the player traverses. Given my approach of designing a 2D game in a 3D world, I was able to use a perspective-based camera (instead of orthographic) to retain depth information; all I had to do was scale and adjust the images’ distance in-engine as seen to the left…
Scaling:
Foreground (Red Dot): 1x
Playground (Blue Dot): 1x
Close Background (Yellow Dot): 1.25x
Middle Background (Pink Dot): 2.25x
Far Background (Green Dot): 5.5x
Lastly, I needed to create some player HUD elements and icons, here are a few examples:
Health Bar
HUD
Resolution: 100x100px
Time Spent: 15 mins
Tool Used: Photoshop
Item Slot
HUD
Resolution: 100x100px
Time Spent: 10 mins
Tool Used: Photoshop
Power Bar
HUD
Resolution: 100x100px
Time Spent: 15 mins
Tool Used: Photoshop
Player Sword Item
Icon
Resolution: 50x50px
Time Spent: 30 mins
Tool Used: Aseprite
Purple Heart (Unrelated)
Icon
Resolution: 50x50px
Time Spent: 40 mins
Tool Used: Aseprite