ABOUT
Mystic Crusaders is a single-player 2D action RPG with fast-paced combat.
WATCH THE TRAILER!
The Project
Mystic Crusader was developed in collaboration with a team of six computer science/computer engineering students for the Video Game Programming course at UBC (CPSC 436D) during spring 2019. We implemented the game from scratch using C++ as a programming language, without relying on any game engines in the development of the key features.
Key Features
— Fight your way through hordes of alien robot enemies with diverse behaviours and increasing difficulty.
— Unlock and upgrade skills, equip your favourite ones, forge the character in a unique way that suits your style.
— Shopping system to permanently upgrade hero attributes.
The Story
The earth rumbles briefly and quiets down. A hero emerges from the altar, renewed by the many spirits that fought before her. Rain falls all around the hero, but there’s an inextinguishable fire that burns inside her soul. She walks down from the altar, ready to unleash hell upon the invaders that took her land.
High-pitched chattering noises permeate the air. She has been spotted. The alien robots are closing in upon her! But, for the briefest moment, she gives a faint smile. This land will not fall today!
The Gameplay
Controls: The player uses WASD to control the character movement, and mouse to aim and attack enemies.
Base attack: left click to release a string of fireballs.
Secondary skills:
Ice blades - generate multiple ice blades towards enemies, with available upgrades including the number of ice blades increase, damage increase, and mana cost decrease.
Lightning - generate a lightning flash towards a specific area, with available upgrades including lightning effect time and damage increase, strike area increase, and mana cost decrease.
Phoenix - summon up to three phoenixes to shoot fireballs towards enemies, with available upgrades including fireball damage increase, phoenix effect time increase, and mana cost decrease.
The Game Objects
We used Aseprite, an animated sprite editor and pixel art tool, to paint and animate our original game objects.
The Team
Lead Game Designer — Max Ma
Developers — Max Ma, Andy Liu, Xianchen Long, Cindy Shi, Zizhuang Liu, Guanting Li
Artists — Cindy Shi, Andy Liu
UI/UX designer — Max Ma, Cindy Shi
Sound Designer — Cindy Shi
My Contribution
Stage 1: Proposal
Decide on the setting of the storyline
One big decision we made for the storyline is the hero is capable of magic (because magic projectiles look super cool) and the enemies are aliens (we want to have a cyberpunk environment setting). During our team meeting, we discussed how we could bridge these two styles together. As a big Sci-Fi/Fantasy fan, I researched several Sci-Fi films and drew comparisons to Alex Garland’s 2018 Sci-Fi film Annihilation. In Annihilation, a biologist signs up for a dangerous, secret expedition into a mysterious zone where the laws of nature don’t apply. This becomes the base of our storyline where our hero ventures into the territory of the enemies to save the homeland.
One big decision we made for the storyline is the hero is capable of magic (because magic projectiles look super cool) and the enemies are aliens (we want to have a cyberpunk environment setting). During our team meeting, we discussed how we could bridge these two styles together. As a big Sci-Fi/Fantasy fan, I researched several Sci-Fi films and drew comparisons to Alex Garland’s 2018 Sci-Fi film Annihilation. In Annihilation, a biologist signs up for a dangerous, secret expedition into a mysterious zone where the laws of nature don’t apply. This becomes the base of our storyline where our hero ventures into the territory of the enemies to save the homeland.
Researching the look of the game: Low Poly vs Pixel Style
When we were thinking of the look of the game, we narrowed it down to two options: pixel art and low poly, which both appeal to me due to their “jaggedness” or “crunchiness” that comes along with the style. After I did some research, I realized the low poly style are more suitable for 3D games. In the end, I found a great tool called Aseprite to create pixel art and settled down our look of the game.
When we were thinking of the look of the game, we narrowed it down to two options: pixel art and low poly, which both appeal to me due to their “jaggedness” or “crunchiness” that comes along with the style. After I did some research, I realized the low poly style are more suitable for 3D games. In the end, I found a great tool called Aseprite to create pixel art and settled down our look of the game.
Stage 2: Skeletal Game
Setting up sourcetree version control
Setting up the template code as the start point and version control policy.
Setting up the template code as the start point and version control policy.
Working on character design
As the visual designer of the team, I am responsible to design the look of our hero. I went through Aseprite (animated sprite editor and pixel art tool) tutorials got used to the pen tablets. I researched several looks of a hooded wizard and the human walking cycle animation.
As the visual designer of the team, I am responsible to design the look of our hero. I went through Aseprite (animated sprite editor and pixel art tool) tutorials got used to the pen tablets. I researched several looks of a hooded wizard and the human walking cycle animation.
Working on level design
I am also responsible for providing the level design assets. I started designing grass tiles.
I am also responsible for providing the level design assets. I started designing grass tiles.
Stage 3: Minimally Playable
Implementing game background
I created Map_screen.hpp and Map_screen.cpp class, modified world.cpp class for background. Also, I worked with UI team on user_interface.cpp and start_screen.cpp.
I created Map_screen.hpp and Map_screen.cpp class, modified world.cpp class for background. Also, I worked with UI team on user_interface.cpp and start_screen.cpp.
Providing assets on game background, tutorial screen, and projectiles
I delivered assets including enemy laser, ice arrow, vine as static enemy, HP MP bar, tutorial screen and game background.
I delivered assets including enemy laser, ice arrow, vine as static enemy, HP MP bar, tutorial screen and game background.
Stage 4: Playable
Implementing tree object and its vertex and fragment shader
I added treetrunk.mesh (basically a brown rectangle) and treetrunk object in the code. In world.cpp I added the tree trunk’s initialization, draw, update and destroy. For the tree swaying effect, I added the fragment shader, in which the tree has an offset with speed and bend factor. I also helped with the tree trunk and hero's collision detection issue.
I added treetrunk.mesh (basically a brown rectangle) and treetrunk object in the code. In world.cpp I added the tree trunk’s initialization, draw, update and destroy. For the tree swaying effect, I added the fragment shader, in which the tree has an offset with speed and bend factor. I also helped with the tree trunk and hero's collision detection issue.
Providing assets on skill level screen, home screen, polygonal geometric for collision
Stage 5: Robust Game
Implementing sound effect
I searched and implemented the sound effect for ice blades, lightning, amplifier buzzing, laser projectile, transition portal. For the code implementation, I’m using SDL_mixer to play audio. Mix_LoadWAV for loading sound effects, Mix_FreeChunk to free the sound effect, Mix_PlayChannel to play the audio.
I searched and implemented the sound effect for ice blades, lightning, amplifier buzzing, laser projectile, transition portal. For the code implementation, I’m using SDL_mixer to play audio. Mix_LoadWAV for loading sound effects, Mix_FreeChunk to free the sound effect, Mix_PlayChannel to play the audio.
Implementing obstacle
I added a new obstacle to the second map. When hero collides with this obstacle, the hero will get damaged. I created vine.cpp and used the sprite sheet for the animation. In hero.cpp I added the collision detection with the obstacle. In world.cpp I added this obstacle’s initialization, draw, update and destroy.
I added a new obstacle to the second map. When hero collides with this obstacle, the hero will get damaged. I created vine.cpp and used the sprite sheet for the animation. In hero.cpp I added the collision detection with the obstacle. In world.cpp I added this obstacle’s initialization, draw, update and destroy.
Designing power up UI
Our third enemy is an amplifier. It powers up nearby enemies with different power-up types, such as higher speed, high hitpoints, longer range, and unpredictability. How can the user know which nearby enemy gets powered up? I got inspirations from the spidey sense in 2018's animation film Spider-Man: Into the Spider-Verse and designed the "buzzing" effect as power-up UI for the amplifier.
Our third enemy is an amplifier. It powers up nearby enemies with different power-up types, such as higher speed, high hitpoints, longer range, and unpredictability. How can the user know which nearby enemy gets powered up? I got inspirations from the spidey sense in 2018's animation film Spider-Man: Into the Spider-Verse and designed the "buzzing" effect as power-up UI for the amplifier.
Providing assets on the desert map, phoenix animation, and UI texture
Stage 6: Grand Finale
Implementing map transition, sound effect and introduction story.
For the grand finale, I implemented 3rd map (map_screen.cpp), as well as its obstacle and animation (box.cpp). I continued working on sound effects, including different background music's fading in and out (the use of SDL_mixer in world.cpp). Finally, I implemented introduction story initialization and button (intro_text.init in world.cpp).
For the grand finale, I implemented 3rd map (map_screen.cpp), as well as its obstacle and animation (box.cpp). I continued working on sound effects, including different background music's fading in and out (the use of SDL_mixer in world.cpp). Finally, I implemented introduction story initialization and button (intro_text.init in world.cpp).
Providing assets
In the final milestone I wanted to polish the game and hugely improve the visual. I drew the following textures: tutorial screen, shop screen, introduction background, forest map, desert map, indoor map, and obstacle sprite sheet.
In the final milestone I wanted to polish the game and hugely improve the visual. I drew the following textures: tutorial screen, shop screen, introduction background, forest map, desert map, indoor map, and obstacle sprite sheet.
Improving sound design
I searched and licensed the following audio elements: home screen music, introduction music, battle music, phoenix sound effect, library sound effect, and shop sound effect.
I searched and licensed the following audio elements: home screen music, introduction music, battle music, phoenix sound effect, library sound effect, and shop sound effect.
The Source Code
For Windows users: