CHARMS

Following my previous project involving the transfer of the Darkest Dungeon UI into a mobile format, I came upon the idea of using a similar battle mechanic and combining it with creature collection mechanics found in Pokemon. Aiming to build a role-playing game that involves collecting an entire team of creatures and battling against another team of creatures. Combined with the type mechanics from Pokemon, each creature has strengths and weaknesses and choosing the most advantageous team to explore the world is up to the player. This project will require a large amount of work from both a designing aspect and a development aspect. For the design aspect, an entire world will need to be designed and built which includes creature design, lore and city building. From the development aspect, the game is designed to be played on a browser. This is largely due to my knowledge of web development, but also because I believe having a game that is easily accessed through a web browser allows for more chances to play and eases accessibility. This game should be accessible through any web browser which means responsiveness is a key element.

Goals:

• Proper Darkest Dungeon port to mobile
• Keep all of Darkest Dungeon’s look, feel and behaviours
• Portrait orientation for one-hand use interactions
• Creating the designs in Figma

Battle mechanic

Types and elements

Much like the type mechanic in Pokemon, Project Elements uses 9 different elements with strengths and weaknesses against other elements. Each skill has a corresponding element that would do extra damage to effective elements and less damage to resisted elements. Creatures will have 4 skill slots that can be changed as it grows and changes forms.

Damage calculations

The damage calculations follow the Pokemon formulas more closely due to the several modifiers that a creature can have affecting it’s attack. Skills are separated into elements and each of the skills has an attack power. In addition, skills are also separated into Physical and Special attacks. Each creature has a level and corresponding attack and defense stats for physical and special skills.

Most of the modifiers in Pokemon are also translated into Project Elements, with the removal of weather and badge, and an additional “Depressed” modifier which works similarly to burn but for special attacks.

Battle format

Darkest Dungeon uses a turn-based battle mechanic with 4 character slots on each side, where larger characters can occupy several slots. Pokemon also uses a turn-based battle mechanic with varying battle formats with the most frequent being 1vs1. Creature size is not accounted for in Pokemon and would be an interesting feature to include in Project Elements. Most of the other battle mechanics will be akin to Pokemon. Turn order is calculated from the creature's speed stat along with an added random value.

Design and worldbuilding

As the sole developer for this project, I needed to balance aesthetics with ease of creation. In addition, since this is a creature collection game, I will need to create a large library of assets for each creature. Initial creature design involved a 3D effect with highlights and strong shadows. As I continued to design more creatures, the art became too much to handle as a solo developer. I redesigned the creatures in a flat design but still visually appealing and full of character. In terms of animation, I decided to pull from Darkest Dungeons animation criteria. During the battle scene, characters have an idle animation. When a character attacks, the battle animation only involves a single frame with slight tweening between for visual effects. For Project Elements, I needed an idle animation for each creature. For the battle animation, I decided to add an extra frame, which I call the anticipation frame. This is when the creature prepares it’s attack before launching it, creating a sense of anticipation and build up for a powerful attack.

Creating Project Element also meant designing and creating a world that a player could explore and traverse. I started brainstorming what kind of world and time I wanted Project Element to be based in. There must be a reason for the people of the world to collect creatures, whether it be for sport, survival, or work. Should the people work with creatures to become the very best? Or should it be to protect themselves from other creatures. In my world, I saw it as more of a right of passage, to become an adult is to be able to befriend creatures and work together as a team. Creatures and the people live together and have created a mutualistic relationship. The era in which Project Elements takes place is along an ancient time. Technology is non-existent, and people live in villages and towns working together with the creatures of the world.

Platform and PWA

When deciding on the platform, I knew from the beginning I wanted the game to be focused on the browser. The game should be accessible from any platform and perform the same throughout. I also wanted cloud-based storage in the form of Firestore from Google’s Firebase. Offline play should also be possible if the game was packaged as a Progressive Web App (PWA). Proof of concept work began with finding a solution that is web responsive, and can integrate Firestore and PWA into one cohesive package. I first explored Phaser and although it is a great complete framework, I found limited resources on how to integrate all my requirements. From Phaser, I looked into PixiJS which is just a simple renderer that Phaser uses. Being a simple library, it was easy to combine it with Firestore and package it as a PWA. In addition, a simple tutorial (https://github.com/kittykatattack/learningPixi) helped me use PixiJS as a game. Logic became simpler since I was mainly working in surface level JavaScript and adding additional libraries, instead of figuring out how to add different requirements to Phaser.

Template and styling

With flat design chosen as the design language, a new template for the modules was created. The theme was resized to a 16:9 aspect ratio which provides enough area to follow a proper line length and ample space for graphics. The template includes the styling of all the assets native to captivate which include fonts, shapes, and buttons. In addition, the template would control the layout of the content on each slide as well as the basic structure for the training modules.

Sprite and art

Programming

Working on this project has taught me a lot on mobile interaction and working within the constraints of an already released game. Adapting a landscape PC game into a portrait mobile game taught me a lot on compromises and learning how to prioritize key elements in the interface. In addition, what options are available to me to hide away options that are not always needed. However, after this project I would keep the landscape orientation of Darkest Dungeon for a mobile port. Shrinking the stage to such a small portion of the screen takes too much away from the art and animation that made Darkest Dungeon so fun to play. Using interfaces that overlay the stage might have been a better choice. Portrait orientation for a mobile port only works if the user has a choice between portrait and landscape. The player could use the more visual landscape when they are playing the game more seriously, and then switch the portrait when commuting on a crowded public bus. However, designing the port in landscape orientation presents different problems like how to show the user the same amount of information provided by the portrait orientation. Overlay menus that hide and show throughout the game might have been a better choice. In addition, veteran players may not need all that information since they would know what to expect from each action. In this project, I went with the mentality that you could not provide too much information, especially in such a punishing game. All in all, I have learned a lot from this project and the lessons that I have learned could be applied to my next project, a game that could be continuously played on the desktop and then on mobile while on the go, stay tuned for more information.