Clash of Conjurers: Elements of Battle
Clash of Conjurers is a 1 vs 1 card based attack game, built using the Phaser 3 framework in conjunction with Javascript, NodeJS, HTML5, and CSS. Where two wizards face off, choosing their attacks from 5 cards representing different elements. It was built by a team of 3 as our end of Foundations final portfolio project for Holberton School over the course of a month.
The team behind Clash of Conjurers consisted of John Knight as server manager and developer, who focused on using NodeJS to setup a server to test and host our game. Adam Sedki assets and UI manager, focusing on the games artwork and overall aesthetic design. And myself, as a project manager and lead developer. I focused on the overall game mechanics, making sure our game works as it should.
When we started this project we set out to design and build a game with little to no learning curve so that users could open the game and play without needing to memorize a bunch of rules, or learn a bunch of controls. A game where players could enjoy themselves by playing a few rounds with a friend to kill some time, without worrying about having to invest an afternoon just learning how to play.
Deciding to build a game as our portfolio project was an easy choice. Growing up, and even to this day, I have always played and loved video games. So when the opportunity to design and build our game came I couldn’t have been more excited. Even at the age 30 video games are still a big part of my life. My fiancee and I own just about every major gaming system that has released over the past 20 years. For me gaming provides a stress relief from a long day, a way to escape to another world, a way to kill boredom, and a source of entertainment that allows me to interact and hangout with friends and family virtually all rolled into one. Building this game gave me the opportunity to create something from scratch that could check off all of those boxes for myself and others.
We began building our game where most ideas start, on the whiteboard. Sketching out a rough idea of the layout and the functions we wanted to have, as well as discussing how the game would be played. From here we began our research on what it takes to make a web-app game. This is where we found Phaser 3, a framework to build games utilizing HTML5 and Javascript or TypeScript. Because we had just begun using Javascript in our other projects at Holberton, we thought this framework would be a great choice to improve upon our skills. Phaser 3 also had a lot of online tutorials, and some of our peers were using the same framework so we knew we could reach out them as another resources in learning this new framework.
Phaser 3 requires you to setup your game with a some kind of server to develop and test your code, whether it be local or on a live server. John has had previous experience using NodeJS so it made it the easy choice to set our game up with.
With our final MVP that we presented to our peers and mentors we were able to accomplish building in quite a few features. First and foremost, we were able to successfully setup and initiate different scenes in our game. This allowed us to have a loading scene, a main menu scene, and the actual gameplay scene. Giving our overall project a more polished aesthetic and a feel similar to the old Nintendo games that I grew up with.
In the game scene we were able to successfully implement working health bars that decreased as either player was attacked, and we were able to add interactivity for all of the attack cards at the bottom of the screen. So when you chose an attack the selected card was highlighted, then it initiated an attack animation for which ever players turn it was, and finally it lowered the opponent’s health all in one click. Not every aspect of developing our game was a success, and we faced numerous challenges over the course of this project.
The biggest challenge we faced was a lack of proper documentation for Phaser 3. This lack of documentation impacted every aspect of our game, especially implementing the core game mechanics. More specifically, allowing the player to select which card/cards they will choose to attack their opponent. While programming the scenes for our game, and getting them to interact correctly was not an easy feat, the actual game play proved far more difficult than we anticipated without any written documentation to reference.
Although the code is written in Javascript, the Phaser 3 framework has such strict and specific requirements and syntax. To try and overcome the lack of available documentation tried to follow different tutorials online to better familiarize ourselves with Phaser 3 and the structure it uses. However, the style of gameplay that Clash of Conjurers is built around seems to be very unique to the catalogue of games that have been developed in Phaser 3, most of which are either side scrolling platform jumpers, or 2D open world online multiplayer games . So creating some of the key action features needed to play our game left us with reaching out to peers, trial and error, and some luck in order to get them working properly. In the end we found that our best resource was our peers, and with our groups determination and persistence we were able get theses features working properly.
After completing our MVP for this project I walked away with a lot. I have a new found appreciation for developers that have utilized Phaser 3 (or any framework) and built some amazing products given the lack of documentation. A far better understanding of building video games concepts such as sprites, sprite sheets, and scenes which is universal to most game development. And I have gained far more confidence in my JavasScript abilities. There are a few things I would change if I was to do it all over again.
I would have focused on setting our game up on a live server from the beginning, rather than setting up a dev server on localhost. it would have allowed more time to get the multiplayer functionality working flawlessly. I also would have spent more time working together with my team in person in the beginning to accomplish as much as possible. We always seemed to get more done in person rather than remotely, and being forced to work remotely towards the end of our project due to the COVID-19 pandemic was a definite hindrance (although it was a challenge that no one saw coming).
This project has also taught me quite a lot about myself. Going into the project I always had reservations about my programming ability. Falling victim to the “imposter syndrome” I often thought that I wasn’t “good enough”. I could only excel when projects were broken down into small individual tasks with set directions, similar to most of our previous projects at Holberton. But this project minded me that I have the tools and knowledge to tackle anything I set my mind, because Holberton didn’t just teach what I needed to learn, but how to learn. Completing this project also helped me to solidify my decision for a specialization at Holberton going forward. I was still on the fence as to which direction I wanted to specialize in, but now I know I want to focus on AR/VR. Building my own video game from scratch reminded me of the possibilities that learning how to program offers, and the ability to build something that I love and work in a career that is fulfilling is exactly why I made the decision to come to Holberton 9 months ago.
A year ago I was a full-time carpenter, and although I enjoyed the work I was doing, there was always something missing. I believe it was the desire to keep learning and passion to better myself. Holberton has allowed me to fill that void and provided me the tools to do just that. I am looking forward to what the future holds and excited to keep developing games, because this is just the beginning and now I’m on to tackle the next level.
Follow along with my journey at:
Clash of Conjurers Repo: https://github.com/BrandynR/C_O_C
Clash of Conjurers Landing Page: http://unbouncepages.com/clash-of-conjurers/
LinkedIn: https://www.linkedin.com/in/brandyn-reindel-372b57102/
Twitter: https://twitter.com/Optimus_is_Me
Email: brandyn.reindel@gmail.com
