Barbarians of Heavy Metal: Game Slate Panel 1...

Just a quick update on the progress of BoHM, this time talking about the tablet interface for the Gameslate.

The interface is made up of multiple panels, accessed through a pull down menu bar (which can be seen at the top of the picture below). For the first, Kickstarter, release, we will be focusing on everything the player needs to play the game, so that means a Character Generation panel, an Action Panel, a Music Panel, a Gear Panel and a digital Rulebook reminiscent of the Hitchhiker's Guide to the Galaxy, which can be pulled down and read at any time from any panel.

To illustrate, here is the first panel a player will use, the character generation panel, and a character that has been created using it - Nicodemus Bosch, a Ledite of House Capricorn (inspired by Jethro Tull, of course):

Using this panel, one can completely create a new character, save it, delete it or search through the database for other characters created on this tablet (we'll be looking into transferring them over Bluetooth later this year).

The Bio Panel is the first stop, as this is where you create a name for your character. the six buttons, from left to right are: Search, which allows you to use the next two buttons, left and right, to flip through the various characters stored in the database; two buttons to delete or add/save a character, represented by a '-' and '+'; and finally a Text button that pulls up the keyboard so you can name or rename your character. The small number to the right of the name is the 'Level' indicator. Basically, this keeps track of how advanced the character is over a starting one. This makes it easy to manage experience on sight.
 
The Attribute and Combat Adds panels are fixed, as the names of the stats are constant, and only allow the rank of the relevant Attribute or Combat Add to be adjusted up or down by the use of the adjoining dial. BoL players will notice that there is no panel for secondary attributes built off of these, like Life Blood (or Fight in the case of BoHM). This is intentional, as these are automatically generated from the ratings on these panels and will show up, and be manipulated on the Action Panel.

The Career and Instrument panels are three part: the top allows you to dial through the relevant careers, and by hitting the text button on the bottom right edge, even allows you to add custom ones. This is particularly important for instruments, which aside from the standard grouping of Axe, Bass, Percussion and Voice, can include a wide variety of other sonic devices, as Nicodemus shows with his preferences for Flutes, Keyboards and Mandolins.

The second part of these panels allows you to dial in a rank for said Career or Instrument and then add it with the down arrow button, to your skill list or, if you want to remove a career or instrument, take it away again. Very simple.

The third, bottommost panel simply shows you the careers you have chosen along with their appropriate ranks. If you end up with more than 4, the handy dial will let you scroll through them. 

The final part of our character generation panel is the Style Dial. This large central construct determines three things for your character: their School of Rock, which is indicated by turning the metal Roctagon so that the character's school is at the top; the character's ranking in various styles, indicated by the number in the radiating Rank Indicators adjacent to each schools position on the interior Rocktagon; and the opposition school, at the bottom, which is the only place on the dial without a radiating Rank indicator.

Ranking various styles is done by turing the central selection dial so that the arrow is pointing towards the appropriate school and then using the '+' and '-' buttons at the base to change the number in the indicator.
 
The controls are all designed to look good and prevent accidental mishandling, hence the use of dials for a large number of selection points. I like dials on a touchscreen because they require a three step process to use: touch - drag - release. Unlike a plain button, which is simply touch, this means it is harder to accidentally change something by a simple misplacement of the finger.

There are buttons of course, but in accordance with the way people hold tablets,  they are kept towards the center of the design so that any movement of the hand to access them will be largely deliberate (in theory, or course). This is also why the dial controls are mirrored on the left and right edges. Ease of use for the thumbs. And of course, mixing it up a bit helps to make the design more varied, hence the use of buttons for Style Ranks instead of Dials.

Once the character is created, all these numbers will be fed into the approriate spots on the  other panels. The only place to change them, however (except in temporary cases, as when using equipment) is on this panel. This avoids accidental changes to the character during play and also allows the information to be presented in a more compact manner on the other panels, which is hugely important from a mobile platform perspective.

This panel is being broken up and the graphics added to the underlying code this week, and I'm currently putting the finishing touches on the Action Panel and Splash Screen panel (the in-progress version of which I placed at the top of the page). Hopefully, the Gear and Music panels will be finished by the end of the month so that we can get everything the player needs, sans Titans, ready for beginning of May. The Titan screen will probably have to wait until we can figure out how to get the tablets to communicate through Android, which might be a post Kickstarter deal, but progress is apace and I'm very happy with how it is turning out...

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...