WAY
TEAM PROJECT (3 People)
Genera: Single Player, Narrative, Platforming, Pixel
Game Length: ~20 mins
Screen Shots
Gameplay Video (18mins)
Group Size: 3
Role: Environmental Artist
SOFTWARE: GameMaker, Photoshop, Aseprite
MY WORK:
+ Pixel style tileable parallax background
+ Sprite tile sheet of each block
+ Implement background and tileables in Gamemaker
+ Adding VFX
+ Adjusting art based on playtest feedback
+ Pixel style assets (Some not used in the final version)
WORKFLOW & ITERATION
Our Background art reference was Celeste. I began investigating the background art of the game. I decided to create pixel-style art and focus on a tileable parallax background to create depth. On the front layer, which handles physical collisions, I utilized a sprite tile sheet to cover the collision area. Behind this layer, I placed additional assets to enhance the scene's decoration. I first tested and decided on the comfort scale of tile block size based on pixel resolution compared to our character art.
Based on the narrative design, I developed some style concepts. Once the level is blocked out with a white box, I worked on drawing background layer and sprite tile sheet layers to cover the collision box, collaborating with the level design and narrative to determine the necessary materials and their sizes for the scene. Also, at this point, I started to explore a bit on how to do snow VFX in GameMaker Engine
With these assets, I created the first playtest version, based on the feedback received during the playtest and my observations of player behavior. First, the feeling of climbing a mountain from low to high was not well-expressed, and the tile ground was divided into chunks, which looked somewhat unappealing. Also, for the small assets, it was distracting, and I decided to remove the small decorative asset layer. Compared to Celeste, the main difference was that our game took place on a single level. This creates a challenge for me because this means the tileable background will be huge in size, and it needs to change based on height to form the illusion of climbing from low to high. It even includes an underground part. I decided to use the stone style to illustrate the cave part and use background trees to indicate ground level, with more snowfall appearing as the player moves up.
Based on these rules, I created the tileable background (the background on this page), a sprite tile sheet, and VFX snow that falls from the top and gradually decreases in size as the altitude decreases. The pixel art was primarily done in Photoshop, with minor adjustments in Asprite.
I separate the background into several layers to ensure they move individually with the code, and then adjust their position relative to the player's movement to create the parallax effect. The foreground, featuring physical collision, was created mainly using a sprite tile sheet. I first used the tile brush to draw out a large area and hand-decorated the snow on top with some block variation. A fake foreground layer was added behind the real one, with a dimmer color, to indicate the connection between the platform, show the path, and for decorative purposes.
After the environment felt polished, I focused on VFX, first adding masks in some areas to represent cave tunnels and adding blowing snow in other areas to create a windy effect.
I also created the small cave scene. Given the flat collision of this level, using environmental art is crucial for effectively depicting the scene. I utilized the previously created shader mask VFX, incorporating multiple layers of fake tiles and gradient changes between layers to achieve the cave's depth. Additionally, I employed the alpha channel with a filter effect to create the glowing effect of fire.
For more details on my environmental work, please refer to the video below. With the combination of all the work above, the scene feels alive, especially with the background moves and the snowfall. The video also includes some of the abandoned pixel assets that I made, but didn't show up in the final version
Video introduction of my work: