First impressions are powerful. The initial exposure to a game, book, or even web application, affects your not only your interest in it, but your perception and expectations of it. That initial exposure is a promise to the player, reader, or user. It's a sort of taste of the full experience, a sort of summary. If you read a book that starts out like Harry Potter but halfway through turns into Game of Thrones, the author did a bad job at getting across the books' tone on the first page.

Scars of the Untrodden is a browser based, fantasy, rouge-like map exploration game I've been working on which makes heavy use of data visualizations. I waited until I had completed most of the game to work on the introduction. I feel the initial experience is incredibly important - not just from an aesthetic perspective, but from a teaching one.

Within the first moments of gameplay, I feel that a good game will communicate the tone of the game, teach the user what kind of experiences to expect, and convey a sort of summary of the full experience. One of my favorite examples of a game executing this beautifully is Megaman X ( watch Sequilitis's explanation of Megaman's level design - warning: explicit).

In this post, I'd like to share part of the initial experience of my browser based HTML5 rogue-like fantasy game. The core of it uses SVG (and D3.js) for gameplay, but there is also a heavy emphasis of data visualization in the game. It's a work in progress, and I'm not a designer, so I welcome suggestions and criticisms. I'll describe the things I'm trying to accomplish from a design standpoint, as well as how I'm accomplishing them from a development standpoint. Feel free to take a look at the initial experience, which is what I'll be discussing in this article. NOTE: This is designed for modern browsers, and may not work in older browsers and some mobile devices

Sources of Inspiration

No idea is developed in a vacuum. Taking ideas from other disciplines can be powerful and create a richer, more unique game experience. Ideas from game design can be applied to other fields as well - for instance, I tried to incorporate some of the concepts from Sequelitis's Megaman Video into our Five Labs experiment. These are the goals I'm trying to accomplish with the initial experience of my game:

1. Use diegetic elements as much as possible, and establish a clear and consistent design language.
2. Create a promise (summary) of the full gameplay experience: convey the tone and communicate the large role data visualization will play. This is a broad goal, and also involves things such as immediately providing the player with meaningful choices

There are countless sources of inspiration I've used, but I want to focus on just a few.

Deadspace

Deadspace not only has amazing diegetic design, but it also has a clear design language. Interactive elements have a consistent color, and your character is in a consistent position (your character's healthbar is on your character, so a consistent position is incredibly important). Deadspace's lead designer, Dino Ignacio, gave an amazing talk of Deadspace's UI at GDC in 2013. This was a powerful presentation for me, and has heavily influenced the way I think about not just game design, but app design, and design in general.

Shining Force

One of my favorite games of all time is Shining Force. When I moved and started a new school in third grade, I asked every kid in class if they had ever heard of it, and some of my friends I met were because of it. Nostalgia aside, one of the things I loved about Shining Force was the introduction. When you start the game, a little bit of the story starts scrolling in. It stuck with me, and I love the way the text comes in word by word, scrolls down; the experience it creates. Every time I turned the game on, it just felt like I was starting a journey in a fantasy world.

Understanding Comics

Understanding Comics is an amazing book that has a lot to do with comics, but not as much as the title implies. One of the many concepts it discusses is the concept of audience involvement. It's easier to relate to a stick figure than it is to a realistic drawing of a man. Your imagination sort of fills in the blank.

The more the concept of an object is emphasized, the less realistic it is drawn. Less emphasis is given to their physical appearance. To portray the beauty and complexity of the physical world, however, realism plays a larger part. It's fine for the background in comics to be more realistic, as brick walls and landscapes aren't things audiences identify themselves with. Likewise, in my game I've tried to give the backgrounds and map a little more high fidelity, while the foreground character sprites resemble characters from a SNES or SEGA role playing game.

Technology Used

Scars of the Untrodden makes heavy use of SVG filters and CSS filters (both built in, and using custom SVG filters). Browser based games have tremendous potential. One reason, I think, is the power of different HTML element types. The <canvas> element can be used to render things that change often. <Div> tags can be overlaid to display text (taking advantage of the browser's built-in text rendering engines, as opposed to writing your own), or to handle UI elements. SVG and D3 can be used to easily handle interactive elements or provide visualizations. The menagerie of different elements available can make the prototyping and development process extremely fast and less bug prone.

In Scars of the Untrodden, SVG is the primary technology used to play the game, and D3.js is the primary library used to handle it. A canvas element is overlaid and used when necessary to render particle effects and other things that require frame-by-frame updates. Normal HTML elements are used to draw and handle UI elements. This approach won't work for all games of course, but by leveraging the built-in elements browsers provide, I'm able to quickly iterate and make little or no performance tradeoffs. For some games, like action games, canvas (or webgl) is an obvious choice... but for others, like tactics-based games (Shining Force), there can be benefits to using SVG. In my game, there are few graphic updates each game loop iteration, so for me SVG is a fine fit.

Initial Experience Breakdown

I'd like to share how I'm designing my game's initial experience. Feel free to check it out before reading about it.

General Aestethics

This is a fantasy rogue-like game. I want to immediately convey that this takes place in a fantasy world and is centered around exploration. The book, typography, title, and blurred out map hopefully convey this. I like the idea of using a journal in the introduction, as I'm trying to imply that this is a story the player is creating by exploring the world. The journal is also, to some degree, a diegetic interface. The goal is to try to encourage a more immersive experience right from the start.

The First Page

Let's take a look at the first page; what you immediately see when opening the game:

Like Shining Force, the body of the text fades in word by word. The actual meaning of the text is a bit nebulous, but it hints at the underlying story. It's also a type of visualization (although a bit subtle). As you progress, the text will change based on your progress. It will be a subtle cue, and something that isn't critical to playing the game (but could add a little flavor for those that enjoy it). If you don't want to wait for the text to fade in, you can click it or press escape. This is important as most players don't want to be forced to wait to play, and forcing it on them could be considered bad design.

After the text fades in, the name input comes up. It's the only thing that has any behavior when interacting with, so hopefully it's clear enough without being too obvious. The background is white and the font is different. Like Deadspace, I'm trying to immediately establish a consistent design language for interactions. When you see something white with that different font, it means you should (or can) interact with it.

Race Selection

After entering your name, you're presented with the option to select a race. Like the name input, the background is also white to imply that it is interactive. When you click the race, the font of the selected race changes as well.

Many role playing games allow you to select a race. By providing race selection so soon, I'm trying to imply that this is some sort of fantasy role playing game. There are two races that can be selected, and two that cannot which have the name 'undiscovered'. This is a visualization as well, and it aims to do a couple things:

• First, it implies that you have a choice. By providing two selections immediately, I'm trying to give you a hint that you will have to make choices in how you customize your character.
• Second, by showing other races that are 'undiscovered', it implies that you will be able to unlock them somehow. Hopefully, this also immediately sparks a bit of curiosity.

One game that also does this well is A Wizard's Lizard:

Race Description and Visualization

The bonuses for each race hopefully seem like they will have a heavy impact on gameplay, even if you know nothing about gameplay. I'm trying to immediately present the player with significant choices. Selecting human grants +20% exp, but but Elves have a chance to completely avoid all damage. Without knowing anything about the game mechanics, other than what has been implied so far (likely some sort of progression based fantasy game), hopefully the player will already have the sense that they are making significant descisions.

D3.js is used both for the main gameplay, and for drawing visualizations. The visualizations are intentionally nebulous in that no numbers are shown and there is no scale provided. The experience this kind of visualization creates is different than a straight, clean bar chart with numbers. There are a few things I'm trying to accomplish:

1. To convey that this game will involve a significant amount of visualizations.
2. Visualizations in this game are designed to help aide in your decision making process.
3. While data visualizations will play a key role, they are not the game. By including them as the last thing on the page, it emphasizes it's importance.
4. The visualization is to, some degree, diegetic. I'm trying to make it look like it's a bar chart that someone could have drawn in their diary.

Data Visualization in Games - Abstractions

The visualization the games provide will provide a sense of what the data means, but they do not fully represent the data. By this, I mean that the goal of the visualizations is to not give you perfect information. The concepts that visualizations in games represent are abstractions. A character's health is an abstraction. In real life, humans don't have hit points. If I can jog a couple miles - does that mean I have 75 stamina? Quantifying these things are tough. How do I translate my programming ability into 'programming' skill points?

The point I'm trying to make is that hit points, ability and stats in video games are by nature abstractions of reality. By showing a health bar of exactly how many 'hit points' your character has, you expose the data behind the abstraction, you expose that abstraction for what it is. An abstraction. So, by showing a bar without displaying the 'behind the curtain' value calculation, I think that the visualization can help aide in creating a more immersive experience. In Scars of the Untrodden, I'll rarely (if ever) show the actual number values, and instead will try to keep the visualizations a bit nebulous.

Conclusion

This game is a work in progress and while a lot of it is coded, I have not yet planned a release date. You can check out the demo of the initial experience. I'm trying to improve my design skills, so I appreciate any suggestions or criticisms.

After selecting your character's race, you will then select abilities. You'll explore a procedurally generated world by interacting with a map, hoping from place to place. Some locations may contain battles, or shops, or quests. The map exploration is inspired by FTL, and is built using D3.js and SVG filters:

My last post explained how to use D3.js to create a fog of war effect like the one I'm using in my game. The battle system is in real time, a sort of mixture between final fantasy and League of Legends.

In future posts, I'll go more deeply into other areas of gameplay, design, and more how I use D3.js and a variety of HTML5 elements to create a browser based game which makes use of a variety of browser features.

In the meantime, feel free to take a look at the initial experience. Feedback is welcome!