Parallax Background & Character

Programs: Adobe Illustrator, Adobe Animate, Visual Studio Code (HTML, JavaScript)

This project is a combination of graphic design and interactive coding to create a simple game. First, I thought of the character design and drew it out in Illustrator, creating a run and walk cycle as well. After realizing how long it would take to draw out each frame, I imported the character into Adobe Animate to produce a walk, run, jump, and attack cycle. For the background, I went with a Japanese concept. Using Illustrator, I drew the background in 5 separate layers so that I could create a parallax effect with it as the user navigates the game.

The game’s name is Kill to Live, and the concept follows a 20-year-old girl named Lela. She lives in the city Takayama, Japan with her mother and younger sister, Kiko. One night their city gets attacked and her mother is killed. In the action Kiko is kidnapped by the attackers so now it’s Lela’s mission to go save her.

Since this is set in Japan, I needed to make sure the background had elements from their culture. The background is parallax, so using Illustrator I drew 5 different layers:

Foreground – A stone path.

Midground – Grass with bushes, cherry blossom trees, rocks, and a shrine to the left.

Background 1 – Two traditional buildings.

Background 2 – Mountains, a waterfall, and one traditional building.

Background 3 – A pink gradient sky with clouds and a sun.