Digichar.io (WIP)

Digital Character Sheet for Tabletop RPGs

 

Technologies

  • MongoDB
  • ExpressJS
  • VueJS
  • Vuetify
  • NodeJS
  • JQuery
  • MaterializeCSS
  • Meteor

A multi-platform solution for character and party management

Digichar.io is a web-based application developed for players and game masters of any tabletop RPG. The application offers a mobile and desktop solution for editing and viewing character information and connects players to their parties and party leaders.
 
 

Digichar.io allows players to maintain large amounts of character information, inlcuding Class, Level, Resource meters, Stats, Proficiencies, Traits, Equipment, Spells and the like. Because this character-specific information is important to the players themselves and the game masters, it is necessary that this data is available to anyone the player is connected with for each respective character. It also offers tools for game masters to keep track of campaign information, data that should be kept secret from players, and real-time modification of character health, experience, skill checks and more.

This is a case study of my work in progress application, which I plan to release for free in the coming months, deployed with Meteor.

HTML/CSS/JS/JQuery/AJAX Prototype

The Problem

Players want a digital platform to help keep track of pertinent information that would otherwise be stored as physical copies and hard to edit and keep track of when playing multiple campaigns.

The Solution

I am developing a web-based application that will help players manage all important data relating to their campaign. Streamlined, real-time interaction between all players is also a major focus.

Process

I have played and lead multiple campaigns in multiple tabletop RPGs over the past ten years, and using this experience I designed a platform that would be user-friendly and fully-featured. I read through many game manuals and took notes of each major and minor process each game leads players through in the gameplay loop, and used these to design an application that would aid players through a modern RPG campaign.

Technology Stack

Digichar.io is being developed with a MEVN stack architecture. From the database to the front-end design, the application is being developed by myself alone as a venture into the VueJS framework. I will be using responsive CSS frameworks and extensions including Materialize and SCSS to bring the same application data to mobile browsers as a hybrid app that feels like a mobile application, without the need for installation or local data transfer. This way, no matter what platform the players use, all necessary information can be accessed when signed into accounts with connected campaigns. I will also be implementing VueJS and RESTful API technology to make real-time updates the standard for the application, no matter the device. 

Features

Interaction

While at the core of any tabletop RPG is social play, much of the time used in a game session can be taken up by scouring character sheets for stats, searching through rulebook appendices for details on spells and feats, organizing encounter data, and many more roadblocks. By allowing for digital skill checks, die rolls, maps, spell cards, image and equipment sharing, and resource management with an easy-to-use interface and user experience design, players can spend more time actually playing. This application is meant to be a companion for the tabletop, not a replacement.

As users will create accounts on which their characters and campaigns will be saved and updated in real-time, players will be able to create, join and leave “parties”, lead by DMs which will have a set amount of access to certain character attributes if the players so desire. This way, things like health, experience, and items can be updated by either the DM or the player. DMs will also be able to share secret notes, dice rolls, and world information such as maps, enemy stats, and store prices with selected players via the app.

Players will also have the option to interact with other players by viewing their public character sheets, campaign information, and more.

 

Learning Tools

If you’ve ever played a tabletop RPG, you have probably been a bit intimidated by the amount of reading, learning, memorization, and math that comes along with most of them. Unfortunately, I’ve seen many first-time players drawn away from the hobby because of these things, when their first session didn’t go as smoothly as they thought it would.

I plan to use my skills as a UI/UX designer, and as a player/DM, to help streamline the process of character creation and play as much as possible for many popular RPGs. I will have built-in character generators for these titles, as well as randomizers for DMs to create unique NPCs with. A screenshot of this work-in-progress feature is shown in the “Screenshots” section below. This will not be required for character creation, as some experienced players may find a regular form quicker or easier. I also plan on implementing tools for gameplay, to help automate many equations for spells, health and armor gain/loss, experience gain, leveling up, and currency fluctuation. 

 
 

Visualization

In the (far) future, I plan to work with graphic designers to develop a portrait generator, which will give the users options of different styles akin to the visual customization featured above, to create basic portraits of different styles, similar to how you might in a 2D video game character customization screen. This would include choosing a style (fantasy, sci-fi, noir, pixel), then choosing things like hair, eyes, nose mouth, skin tone, and shirt, to create a basic bust of a character, to view on the character cards. I also plan to allow for image uploads so that users may upload their own portraits for their characters, with moderation.
 
I also plan to add animated gif icons that can be used with spell and weapons, so that users may visualize their attacks by sending an animation to other player’s screens. As a player myself, I feel that this might add a layer of immersion that I think users could have fun with, even if just to spice up their character sheets.
 

Simplification and Accessibility

My plan with this project is to showcase my skills as a designer to make it as intuitive as possible, so that it works well as a companion rather than a hindrance. I plan to run many tests and try out many different architectures so that users have an easy time selecting characters, joining parties, running campaigns, and interacting with each other. As of right now, each user will have a character select screen where their generated characters can be seen as cards and selected from, deleted, and sorted by game, level, name, etc. More details will be available on the same page by selecting the respective character, and from there they can be edited as well. Users will also have access to their campaigns in the same way, either as a player or a DM, with different permissions based on what the campaign creator gives them. 

All of these tools including the character and campaign generators and browsers will be available from a single-page dashboard that is updated in real-time, easily from any device. However, if the user has access to a keyboard, all features will be accessible from strictly use of that, if desired. All standard accessibility features will be implemented and tested as well.

Customization

Since this application is meant to be used with many different RPGs, the theme is very important. One may not want to view a fantasy-styled character sheet while playing a Star Wars RPG, or a classic fantasy-styled sheet while playing Shadowrun. Because of this, users will be able to choose new color palettes and fonts for each specific campaign and character sheet using tools from the Paletton and Google Fonts APIs. These can either be set globally for the party by the DM, or individually by the player. Of course, some users might prefer the default “Material” theme as shown in the screenshots, so this will always be an option as well.

Along with visual customization will come content customization. I will be implementing default sheets for some popular RPGs, but as tabletop gaming has become more popular in recent years, many new RPGs and homebrew tabletop experiences have been created, and are still being released. Because of this, I want users to be able to create custom character sheets using fields they might choose, or by creating their own forms and selections, that can be released publicly for use by other members. I also plan to give users access to adding, removing, and editing fields of existing characters, so that they may be converted to other RPGs easily.

 

Communication 

It is important that game masters have direct access to certain information about characters so that they can build appropriate encounters and storylines around the party that will be both challenging and give the players opportunities to use the skills at their disposal.
 
Both player characters and GMs also need ways to keep notes and campaign information hidden from other players, as well as streamlined interaction between all players and their respective characters.

Screenshots

Registered User Prototype – Character Select Screen

Registered User Prototype – Character Generator Ability Score Screen

HTML/CSS/JQuery Prototype – Character Info Screen

Registered User Prototype – Campaign Select Screen