battle-bit-studios-blog

[battle-bit-studios-blog]

The latest UI with details for the auto-targeting features. I suspect after user-testing the different variations of combat controls we’ll find that we don’t need the physical buttons.

[battle-bit-studios-blog]

Here is a link to the latest version of the UI prototype. It should give you a good idea of the feature-set, navigation structure, aesthetic, and layout Note: - It doesn’t show any transitions at the moment (Invision isn’t a great tool for that) but ). - Some screens still have text in place of icons. - The text for the item descriptions is a little small, and a future version will probably have a larger window for this purpose to accommodate larger text.

- Once the navigation layout of the UI is all tested and final we might convert the designs into wholly pixel-art (rather than vector) graphics to go with the aesthetic of the in-game world. Either this or we’ll use a crisp anti-aliasing filter (such as Super Eagle) to smooth the in-game art to fit better with the UI aesthetic. Which choice we go for will depend on the performance of the filter in Unity.

Still to be added...

- Item icons

- Weapon and armour selection and configuration screens

- Item/spell targeting screen

- Settings (e.g. sound, vibration, controls)

- Map marker detail window and map legend

- Message log navigation (it will probably be done by chapter and scene)

[battle-bit-studios-blog]

Cepheus: Title and Load game transitions

For the game ‘Cepheus’ (working title)

This is the first draft of title screen and load-game menu transitions made using Sketch and Adobe After Effects.

The aim was to introduce the aesthetic and tone of the game, create excitement using vivid colour and animations, and yet still allow players to get back into the action quickly.

Here are the key screens used in the sequence...

The illustrated background will eventually be an animated piece of pixel-art. For the moment we’re using a placeholder image.

For this first transition we will also try...

Using alternative animations for the title text

Have the title text already present and have the background fade into view behind it.

Having the title text already present and no fade in for the initial background (to make the user have to wait for less time to start playing)

We’ll just use one of the transitions for changing between save-game (either the channel change effect, or motion-swapping effect demonstrated in the video) for selecting load games.

Each time the selection changes, the background behind the interface will change to a blurred out version of the screenshot of that game at the point it was saved. If the user chooses to load that save game then it will smoothly transition into it by pulling away the menus and un-blurring over time. Similar transitions will be used for other UI menus when gameplay is paused. If it is a new game, an intro movie will be played instead (this is not the case in the above demonstration).

The gameplay graphics (but not the heads-up-display) are also placeholders as the eventual ones will include a lot more details in the scenery of the levels, but this is enough to give a flavour of what to expect. We will also use Super Eagle anti-aliasing or similar for the pixel art to give it smoothed edges but still retain that illustrated feel. That will also help it sit nicely with the UI and HUD which are currently vector based (though we may need to make them raster if the canvas limitations in the current version of Unity remain until we release the game).

The decision to use pixel art was for three reasons...

To revive nostalgia for the engaging narratives of console games of the SNES era.

To avoid using clunky looking puppet based 2D graphics and give animations a more natural illustrated feel.

To save space. Not using HD sprites means each visual asset will take up very little space and won’t require multiple sizes or blurry upscaling for different screen densities and resolutions. This means

The amount of content in the game can potentially be much larger

The game is more likely to be downloaded as less space will have to be freed to make room for it.

The game is less likely to be deleted to free up space

Fewer resolution issues to work with for different screen densities and sizes and low risk of blurred edges and poor antialiasing artefacts

[battle-bit-studios-blog]

Quick-access weapon-select interaction

This was inspired by the social networking mobile app Path. It was made using Principle.

This might instead be used for selecting a special attack once a weapon is fully charged - We’ll have to see which feels better during the prototyping phase.

[battle-bit-studios-blog]

The HUD and initial gameplay plans to test

1. This is your weapon gauge. It’s nature depends on which weapon you have equipped and how it has been upgraded.

If you have the Tesla Cannon equipped each segment shows how many bursts of charge you have remaining (they deplete with each use). If you max it out you can use a full-screen electrical-stun attack which depletes all the charges at once. This weapon is used to stun enemies that you can’t reach with a melee weapon, but also to disable, jam, or supercharge machinery.

If you have the twin pistols equipped it instead shows you how close they are to overheating (it fills up slowly as you use them and fades more slowly while you aren't). If it maxes out you'll take some damage and they'll stop firing for at least 30 seconds.

With the shotgun it's how many shots you get before you have to spend time reloading.

The number of segments available for a weapon can be upgraded.

Tapping on the icon will reveal a quick-access weapon-select menu

2. This is the health bar. The number of segments reflects how many health upgrades you have (the whole bar stays the same size), but when you lose health you won't necessarily lose a whole segment.

3. This is the rage-meter for your melee weapon. It fills up as you successfully deal damage against most enemies. Once you have a certain amount of charge then special moves will become available to you. It depletes back to zero over time so it's best to use these moves in the heat of the moment. The symbols are endowed with meanings and will correspond to symbols found throughout the game at situations and places where those meanings are particularly relevant. They could also indicate which moves are available at that level of charge. In the first version of the prototype, holding down the attack button will have the player will charge up the sword - holding it for longer uses up more glyphs. 4. This is the health of the last enemy or destructible object that you hit. It appears if you make a successful attack on an enemy or destructible object. Destructible objects that aren't enemies will have an orange bar instead. Enemies with many hits will have extra layers (getting lighter and lighter) overlapping the initial yellow one. Empty is dark yellow or dark orange. The meter will fade in on the first hit, and stay there for at least 2 seconds after the most recent hit. Subsequent hits while it's still showing will make the meter shake.

5. This rating updates to show how well you're fighting. Chain attacks without getting hit to get a higher rating. The rage meter fills up more quickly if you’re doing well.

6. This button launches the pause menu. We may use an icon that resembles a rucksack (to represent the inventory), but currently the analogy is of using a personal digital device within the game to navigate settings, maps, the game journal etc.

This is just a provisional plan. There are more considerations to make, and combinations of combat mechanics to try (not detailed here). We'll try a few things out in the prototyping phase and figure out what is most fun.

We could allow players a certain amount of customisation to their preferred play-style by having different options for special attacks or the ability to swap weapons around (either via menu or quickly in the heat of combat). 

We'll also force players to adapt their combat strategy by finding narrative events, narrative choices made by the user, or level design reasons to take equipment away from them as well as situations where what they have is super-effective (e.g. you have the Tesla Cannon and you're near an open electrical power source and thus get unlimited energy immediately - a constant arcing stream of chain-lightning rather than pulses sent to individual enemies). 

Different enemies will have different vulnerabilities to different weapons and strengths of attacks, as well as have attributes that interact with these (e.g. stun first to kill, explosive deaths, and destructible shock-absorbant armour).

Above: A fully charged Tesla Cannon.

Above: Energy pistols selected (which risk overheating and hurting the player with too frequent usage)

Above: Selecting a different weapon.

Influences

This UI and set of mechanics are influenced by the following games:

Devil May Cry

Legacy of Kain (series e.g. Defiance)

Hyper Light Drifter

Soul Knight

Mage Gauntlet

Wayward Souls

[battle-bit-studios-blog]

Pause-game menu / Inventory

The inventory can be open or closed by the button in the top right corner of the screen during gameplay. We’ll probably make the icon morph into a close ‘x’ icon in a later iteration.

To increase the sense of immersion, most settings and menu features of the game have an in-game object that you will find in order to obtain access to them (e.g. you pick up separate devices or download modules for your map, journal (save games), and comms device (objectives and message log).

In the inventory we also want to make a clear distinction between items that can be used in a battle, items that can be configured, and items that only have bearing on the story. This is why there are 3 categories...

Use-once

Equipped

Quest-items

This means the user can predict how to use them depending on which area of the UI they are sorted into. We’ll experiment with other labels (e.g. Toolbelt, Settings, Backpack) but they may end up too ambiguous during user testing.

Each of the slots will have an icon (and not text as above) if occupied by an object. 

Alternative ways to display empty slots

I’m currently experimenting with how to best display empty slots...

Perhaps this will spark curiosity and users will have fun filling them out. Or perhaps a progressive disclosure style approach will be better...

In that last one, only the categories for which you have an item would actually appear. 

This could help with a sense of realism as you won’t be given a sense of how much progress you’re making in the game simply from how many slots you’ve yet to fill. 

It also could be less confusing for viewing the first time - You won’t wonder what the categories mean or what the placeholders are for as they’ll only appear when relevant.

Limits

Our initial plan is to have a hard limit of 6 on the number of types of use-once items you can carry. If we find the need to have more than 8 quest items at once in the story then we’ve got some strategies to try to make that space bigger - but I’ll go through those in another post if we get to that point. Equipped items that may be swapped (e.g. weapons or armour) will have their own dedicated screen for that (yet to be designed).

Equipped items

Each of these (e.g. map, journal, comms, ranged weapon, melee weapon, armour) will launch a unique full-screen interface for their unique set of features. I’ll cover these in other posts when they are ready.

Use-once items

Above: An example of selecting a use-once item.

In the final design the circle will be replaced with an image of the item matching the one in the square selected.

Note: I’ve added a hint of blue to the borders of all the squares - we’ll probably have something like this rather than grey in the final designs of the inventory.

Tap the item again to go to a screen where you can use gestures or taps to target yourself, allies, enemies, or features in the environment with the item as appropriate.

Different items will have different restrictions, effects, and attributes - as listed beneath the description.

Quest items

Above: An example of selecting a quest item.

The three icons in the panel function like this...

This shows you how many objectives in the current level are related to this item. Tapping it will take you to the objectives screen for the current level.

This shows you how many long-term goals are related to this item. Goals are part of the larger story and span across multiple levels. Tapping it will take you to the journal screen to view the relevant goals.

This shows you how many times it’s mentioned in conversation. Tap this to find those instances in the conversation log screen.

Transitions

The animations for item selection have yet to be designed but they will most likely involve swapping out the Equipped panel (it will fly away to the left) with the item description (which will fly in from the left). tapping outside of that description, swiping it back to the left, or tapping a close icon (we will add one if necessary) will bring back the Equipped panel. Changing item selection will fade out the panel contents and replace them with new contents for the new selection.

Item colours

Different items will have different coloured borders when selected. Selecting them also applies a wavering light gradient effect of that colour behind the item icon (yet to be animated).

[battle-bit-studios-blog]

A quick draft of what the map screen could look like. It needs a lot more design, and may need a legend (perhaps accessible via an ‘i’ icon or similar).

Top-left button sends you back to the inventory.

Top-right button resumes the game.

Drag the map to reposition it (as it may end up larger than the screen)

Tap on a location marker to view a label for it.

Note: It may be too awkward to tap top-left and top-right so we may introduce larger buttons closer to the thumbs for those purposes instead.

[battle-bit-studios-blog]

Conversation within the game

The first few of these are heavily inspired by the games Wayward Souls and Mage Gauntlet. If you haven’t played them, and you like this sort of game, then you should check them out.

Thoughts made by your character as you’re walking around

Dialogue that doesn’t lock the controls

Dialogue that locks the controls 

Dialogue with narrative choices

These sort of dialogues will influence anything from which route you take through a level, which levels you end up doing, who your friends are, which items you get / lose, and how the larger story plays out. The ideal depth of this game would be such that making different choices lends to different player interpretations as to who the bad guys are and who ultimately wins at the end. Multiple play-throughs would give you the whole perspective.

[battle-bit-studios-blog]

Some early concepts for the journal screens

Goals

Goals are high level and can span across multiple levels / missions

Objectives

Objectives are only related to the area / level / mission you are currently in

Location markers could take you to the right place on the map screen if you tap on them.

Chat icons could take you to the relevant place in the message log.

Message log

Mobile phone games are normally played in short-bursts. This means you can forget the context of what you’re doing - which could be problematic for an adventure game. Having a feature like this makes it much easier to recap on previous conversations and context.