This is part 3 of a series of dev blogs, where I will be documenting our progress in the design and implementation of an Online Trading Card Game Maker app, as part of our work in the final capstone project during our final year at the program of Computer Science at Oregon State University.
If you haven’t already, you can refer to part 2 of this series from the link below:
In this part, I will outline our progress so far in designing and developing this web app, as well as delve into details about our choices for game design, mechanics, deck building, and anatomy of trading cards.
Architecture
In the grand scheme of things, we have divided our app development into four sections:
1- Frontend development:
This involves developing and styling the main web pages of our app, which include the home page (landing page), the TCG Portal (where users can view TCGs published by other users), the User Portal (where users can login to access and view their private information, the games they have created, and have the option of creating/editing their own games).
Our frontend framework of choice for developing this section is React.js.
2- Backend development:
This involves developing the REST API and the various endpoints for interacting with our database of choice (Google Firestore), the interaction involves CRUD operations on Users, Games, and Cards in all varieties. This section also includes user authentication with Google OAuth 2.0.
Our backend framework of choice for developing this section is Express.js.
3- The Game Customizer Interface.
This is a major React component that works as a UI that allows the user to interact with the REST API to create and customize their own games, set game rules, create and design the different types of cards. And it can be accessed by registered users from the User Profile.
4- The Game Engine.
This is the main engine users can use to play their own custom games. It fetches the backend for game data (main game rules, deck data.. etc), and couples that information with game logic to bring the game to life on the browser. We knew we had to pick a practical HTML5 game engine for this task which uses Javascript, as all of our development involves Javascript, so we are using an HTML5 engine called Phaser to develop this section.
Now, let’s delve into our design choices when it comes to the “Universal TCG Rules Framework” I have mentioned in the previous part of this series.
TCG Design
Since the start of this project, we were presented with a major challenge and an important architectural choice, which is to design a TCG creation framework that is both feasible to develop in a timely manner, and satisfying to the user in terms of creativity, and the broad design choices presented. So we have decided to go with a game design that is similar to other single player online TCGs that depend on “deck building” strategies to succeed. This included games like Slay The Spire, which was the main motivation for our design choices.
In a nutshell, an anatomy of a deck building TCG like Slay The Spire involves the player choosing a character from a provided list of characters, and each character has a specific starting health and special ability. The player then uses that character, along with a starting deck of cards associated with that character, to play the game and go through different “trials” or rounds, where that character will be combating “enemies” using the provided deck of cards. And with each successful round, the character is gifted with new cards which they can add to their existing deck, and can then progress to more difficult rounds facing more difficult enemies. The main objective is to build a strong deck that will help you in the later rounds in the game.
With the above game methodology in mind, our TCG Maker app will allow users to create their own games which will loosely follow the above methodology, while giving them enough creative control to make the games truly unique.
When accessing the game customizer interface and creating a new game, users can do the following in order:
1- Create General Game Rules:
Users start by setting the parameters for the main rules of their game, the rules we have incorporated so far include the following:
- Game title.
- Game description.
- Game cover image.
- Hand Size (number of cards in a hand).
- Number of Enemies per encounter.
- Player Health Total.
- Number of available cards drawn per turn.
- Deck Size.
- Deck Generation.
- Default Cards vs Random cards.
- How battles happen: Do all enemies spawn at once? One per turn? Do all spawn at once but a limited number can do an action in earlier turns?
- Decking mechanics.
2- Create Characters:
Users can create the starting characters players will choose from, the first time starting a game. Creating characters involves setting the following parameters:
- Character name.
- Character description.
- Character ability.
- Character health, attack, and defense.
3- Create Cards:
Users then will start creating and customizing their decks, the cards they will create have two categories (monster cards, and spell cards).
Monster cards:
- Title.
- Description.
- Cost (the cost of using this card).
- Art (the image shown in the card.
- Card background color.
- Card effect (some creature cards can have an effect when played).
- Stats (Health, Attack, Defense).
- Card type (spell, ally, ..etc).
Spell cards customization is similar to monster cards except that spell cards don’t have stats.
4- Create Enemies:
Users can then start creating the enemies in the game, these are the monsters the player’s character will be combating as as they progress through the game. The enemies defer in power and level and the user has the freedom to set their power and decide when they will spawn during the game, the enemy card creation involves setting the following parameters:
- Enemy name.
- Enemy Image.
- Enemy Description.
- Health.
- Attack (how much damage they will do).
- Defense (reduces damage taken).
- Special Effect (poison, resource drain, discard on hit, etc).
- Enemy type (Orc, Troll, Robot, etc. Could be used to have interactions with different player cards or enemy abilities).
- Battle Population Rule.
Once all the above parameters are set, the user can then save their game and start playing it immediately using our game engine to test out how it runs, the can make changes to the game whenever they see fit until they are satisfied with the result, then they have the option to publish their game where it will be visible to users on the platform when they access the main TCG portal.
Finally, so far we have managed to design and implement most of the frontend and backend API for our application, and we are currently in the process of developing and testing our two game components, the game customizer interface, and the game engine. In the next part, I will outline our progress with developing these two components, and the technical challenges we are facing in during this journey.
Leave a Reply