npc d&d DnD character generator rpg app

GM Wizard: Character Generator

HTML-based Mobile App (PhoneGap)


This mobile app was created with PhoneGap and jQuery Mobile, and is currently available for Android and iOS. It is the result of a collaboration with my friends at Ixie Studios. In the RPG tabletop gaming niche, we saw an opportunity to create a tool that would be helpful in the process of creating unique characters.

App Features

Randomizing Related Character Traits

The app randomizes various types of data, to come up with a workable fantasy character. It allows randomization on everything, by section, or by individual traits and fields. You can also “lock in” a finished section, so that it is not affected.

Select lists load in a list of options from arrays. The height, weight, and name generate based upon the fantasy race and gender that is chosen. Some of the text areas, such as “Inventory”, pull a number of unique entries from a large array (object) that allows limitations based on class or level. There is all sorts of other logic going on behind the scenes to randomize certain character traits, so they make sense overall.

Saving and Loading via HTML5 Local Storage

The saving and loading feature took up a large portion of the app’s development time. Through PhoneGap, it uses the browser’s localstorage to store key-value pairs with all form fields as serialized JSON.  It makes use of the SerializeJSON for serializing data and jQuery Populate for loading that data back into the form. The saved character list shows all character entries in local storage and groups them into folders (the user can create a new folder when saving).

Other Features

A simple dice roller was added as a bonus feature. There are already a ton of serious dice apps on the market already, so we decided to focus on the character section. The dice button has a cool 3d flipping effect, criticals are highlighted, and the individual rolls are listed when multiple dice are rolled at once. The tavern section, in addition to housing tips and feedback, has a randomized phrase from the barkeep that’s mostly for fun, but could be used in a campaign.

Design and Development

D&D NPC Creator App UI - Before and After Design

The design of the functionality was an iterative process. We started by figuring out the basic traits that we wanted, setting up the character create page with randomized select lists, and by beginning to write the list of names for the name generator (now there are over 1000 names). The UI and functionality was prototyped using jQuery mobile and its built in styles and widgets. This worked fairly well.  All the box-shadows and rounded corners were removed to try and help speed it up, as jQM runs a bit slow.

Throughout the many early versions (tested via Google Play’s Alpha Testing), we tweaked and modified the available options and how they were organized. Around 1/3 of the original fields and layout ended up changing. We added more character traits on the first page, that gave an overall feel of their motivations and notable appearance, without diving down into unimportant minutia. Towards the tail end of development, the ability to type in custom weapons and armor was added, as we knew this would be requested by users. The ability to roll and randomize the individual options (in addition to the sections) was added too.

Android and iOS Release

I ran into some insurmountable browser bugs in certain older versions of Android, so I ended up reluctantly excluding pre-Jelly Bean APIs (older than 4.1.2). As of August 8th 2014, GM Wizard: Character Generator is now available for iOS! Check it out on Google Play and Apple’s App Store:

Get it on Google Play - RPG Character Generator

iOS App Store

 


Project Details

  • Published Android app built with PhoneGap
  • JavaScript / jQuery
  • jQuery Mobile
  • Data loading & randomizing
  • Saving and loading from HTML5 localstorage
  • Tablet layout
  • High PPI screen (retina, @2x) support
  • Extras: Dice roller