BoL Gameslate Design Dairy 2: Character Sheet User Interface...

After a week of fiddling with the thing, the design for the Character Sheet section of the Player Suite is complete...

A few changes of note since the last post. First, I've come to the realization that trying to get a free flowing design for both portrait and landscape is a fool's errand with an interface as complex as this one. I spent a great deal of the last week trying to design the sheet in three dimensions: as a graphic design; a UI design; and finally, web design. As a result, something that I can usually knock out in three hours took me probably triple that in actual work hours. It will still be flexible in both formats, I'm just going to have to code two CSS sheets for it and insert some code to detect orientation and switch between the two.

Now a description of the inner workings of the sheet:

THE GAMESLATE MENU

In the upper right corner we have the three icons for changing modes between (in order from left to right) the Player Suite, the GM Suite and the actual BoL Rulebook. The Rulebook, it should be noted, will not be a simple PDF of the Legendary Edition, but a searchable web standards setup, more akin to BoL: the Offline Web Edition. All text, no pictures, just what you need to learn the rules. Also, as it will be in HTML, it will be a simple matter for you to add house rule pages to it, using a special interface found in the GM suite.


THE ATTRIBUTES

Just below the Gameslate Menu, we have our BoL Attribute List. The numbers are editable, of course, and some of them will feed directly into other parts of the sheet. Your Lifeblood maximum, for instance will automatically adjust based on your strength. They will also take adjustments, so selecting the Cerulean Strength Boon will add 1 to your Strength (or remove it when you take the boon away) and it they can also be temporarily boosted by spells, alchemy or items, turning bright orange when the stat is being artificially boosted or lowered.


THE BACKPACK

This box, located underneath the Attributes, will list all of the current gear being carried by the character. Double tapping an item will bring up a quick info box on the item, while pressing the backpack in the bottom right corner will open up the Backpack Editor, which allows you to move things to and from your backpack and create new items.

The Grimoire item is the one exception to the double-tap info rule, in that when you double tap it, it takes you to the Grimoire editor which allows you to create and use spells and alchemy items.

NAME

This box, right beneath the logo and really part of a larger Bio section with everything under it, is a workhorse box for saving, recalling and deleting characters from the database. By pressing the small button to the right of your name, you can do all of those things. Each character is saved under the name you type in the Name area, which can be edited simply by tapping it.

Beneath it, you can choose your heroic background. By tapping the 'Of' you get a selection of backgrounds from BoL to choose from. Together with the name you get something like 'Thongor of Valgard' or Balthazar of Cerulea' or the like, and this also determines what boons and flaws you get to choose from.

As with most of the other options, we will include a database editor to allow you to add or modify these options as needed.

CAREERS

This box is really a display box, and tapping it take you to a small editor that allows you to add, subtract, or modify careers, even making up completely new ones if you like. You can also change the background picture to that of another class (all the ones in the book will be included). Again, for those who wish to, you will also be able to add pics of your own using the GM Data Editor.

BOONS & FLAWS

Right under your Careers are your Boons (in red) & Flaws (in red brown). Double tapping the box brings up an editor that allows you to add or subtract them.

Because of the wide variety of boons and flaws, the only ones that will actually do anything will be those that add to attributes. Those that add bonus or penalty dice, or have other, more roleplay oriented effects will rely on the players and GM to implement them (as when using the Die Roller).

LANGUAGES

As with Boons & Flaws above, except that it is strictly a list and has no other effects outside of RP.



STATUS SECTION

The furthermost third of the screen is dedicated to the most active variables in the game. It contains:

The Die Roller Button
By clicking the double dice, the die roller comes up (more on that later).

The Arcane Point Indicator

The moon shows, graphically how many AP you have left, as do the numbers below it. Tapping the moon reduced the number by 1, while tapping the sun increases it by one.

Lifeblood Indicator

The character silhouette represents how many LB you have left graphically, as the number do to the right of it. Tapping the silhouette reduces the total by 1, while tapping the cross adds one.

Hero Point Indicator

the number represents the remaining HP total. Tapping the triskele brings up a selection box which give you a selection of options for Hero Point use, which reduces your Hero Point amount, and to add Hero Points back.

Weapon Select

Tapping the box give you a drop down populated by your available weapons, selection of which determines damage in the Die roller. the small axe to the left can also be pressed to generate a random damage number for instances when you don't need to roll to hit to do damage.

Armour Select

Tapping the box give you a drop down populated by your available armours.  The small shield to the right is tapped to generate your damage reduction based on the armour you are wearing.

THE DIE ROLLER INTERFACE

This box pops up whenever you use the dice. Difficulty is set using a drop down and then the player selects whatever Attribute, Combat Attribute and Career they will use in the roll in the same way, the numbers being drawn from those on the main character sheet. And yes, you could use all three, even if the game, as written only allows the use of two. This is to allow room for GM fiat.

You also select the number of Bonus and Penalty dice you will be using. Again, you can select as many as the GM desires for flexibility reasons, although you will normally only pick one.

The results section shows you your original roll, the bonus and/or penalty dice rolled and then figures out the final two dice to take. the result is added to the totals of the Attributes selected above, compared to the difficulty and then a result generated from Catastrophic Failure, Failure, Success and Mighty Success. By pressing the Hero Point button to the right, you can reroll the dice on a failure, turn a success into a Mighty Success or turn a Mighty Success into a Legendary Success.

NEXT...

The completed character sheet UI is a few days late, but the next one, the Backpack Editor, should go quicker and be ready by Friday. Let me know what you think about the format, in the meantime...

BoL Gameslate Design Dairy 1...

This will be the first in a series of design diaries highlighting the march of progress of a Gameslate from concept to finished app (for those who have no idea what this is, you can check out the first stirrings of the prototype project here). I'm doing this partially to record my thought process for future reference but also to show the usefulness of standards based design in the creation of system agnostic apps and, finally, to show how the table top RPG can take advantage of the digital age beyond very basic dice rollers and PDFs.

Barbarians of Lemuria will be my first system agnostic Gameslate project and I am currently in the process of working out the visual design and UI elements. To get an idea of the look and feel I'm going for, here is a pic of the visual design in progress...

Now some of you might be looking at this pic and thinking 'what screen is that thing formatted for?' and the answer is 'none of them and all of them.' What you're looking at is a theoretical layout on which I will place the UI elements and try to get a coherent look and feel.

To make a truly system agnostic layout, I am using a number of elements. The first is a background image that is built to fit a screen up to 10.5" long at 300dpi (Retina Level, i.e. as detailed as a human can pick out). That bit of bloody parchment is it. There will be no need for tiling, it is one size fits all for pretty much any screen coming out in the near future.

The next bit are the midground design elements. They will be layed out in the typical HTML5/CSS manner, but with relative, rather than absolute positioning. So the title will always float about 3% from the left and the top while the snake knots will float at around -1% or 101% (depending on their corner) from the left and 100% and 0% from the top (these numbers are all just estimates right now, but you get the idea). This allows the page to work in both landscape and format depending on tablet orientation.

Finally, the yet to be added foreground UI elements will be layed out in a manner similar to the midground design elements. Again, this allows the character sheet to flow naturally if you tilt the tablet. It will take some tweaking to make sure the priority of flow is maintained, but it shouldn't be too difficult and will hopefully negate the need for a mess of alternate layouts and the code to implement them.

I'll probably tweak the title a bit to make it stand out more, but I'm fairly happy with it. On to the UI elements...