Tag Archives: Game Design

Seize the Sky – Building Virtual Worlds, Round 1

Introduction: Seize the Sky was built during Building Virtual Worlds at Carnegie Mellons Entertainment Technology Center. The world was constructed using Oculus Rift, and Leap Motion. Using these technologies we put our guest into a virtual reality space with an ability to use a natural interface in our world.

Story: A mighty giant heads towards a town with murderous intent. A country side boy notices, and cries to Zeus for help to defeat the giant to save the city. You are Zeus, save them all!

Platform: Oculus Rift + Leap Motion in Unity 3D | Time: 2 weeks |  RolesProgrammer – Game Designer

Design Goal: Our design goal with Seize The Sky was help character A (the boy) who is afraid of character B (the giant).

Design Challenges:

  • Incorporating a satisfactory use of Leap motion.
  • Achieving our a sense of character A is afraid of character B.
  • Level design.
  • Game-play design.

My Contributions: As the lead programmer on Seize The Sky I made large contributions to the code base for this project. I also took an active part in the design process with working with the team to develop various aspects including game play, and level design.

Development

Iteration 1

The development process started with being assigned teams. In our first team meeting we made clear our skills, started brainstorming ideas, and kept good development processes in mind.

This slideshow requires JavaScript.

During brainstorming we tried using several appropriate methods, such as gesture centered brainstorming (due to our use of Leap Motion). Finally we had five initial ideas:

  1. Help mend relationship between characters.
  2. Play piano to make baby sleep.
  3. Use light to guide a character home.
  4. Keep animal safe growing to adulthood.
  5. Hold characters hand to guide them.

This slideshow requires JavaScript.

With our initial ideas we further boiled them down to three concepts with the following reasoning:

  • Concept one was hard to conceptualize compared to our other ideas which seemed simpler and more clear.
  • Concept five could be incorporated into concept three.

Creating sketches of each concept we then sought out the advice of our professor Jesse Schell.

bvw_round_1_initial_three_concepts

With Jesse Schells feedback we went with concept C, because we wanted to explore squeezing in Leap Motion.

bvw_round_1_post_meeting_notes

We then began further conceptualizing the idea with sketches, and research into the capabilities of Leap motion and Oculus.

This slideshow requires JavaScript.

With this in mind we began assigning tasks to complete, considering game play, and used a scrum board to assist us in tracking tasks.

This slideshow requires JavaScript.

On the technical side we used a NavMesh, and simple A.I. to run the behavior of the Hunter and Deer. The behaviors of the two agents were essentially:

  • The deer always moved to nearest tree that has an apple.
  • The Hunter patrolled around fixed points, and if it came close enough to the deer it began chasing it.

The result of our hard work was the following.

We then received feedback at interim, which sadly wasn’t good…

Iteration 2

Continue reading Seize the Sky – Building Virtual Worlds, Round 1

Building Virtual Worlds – Round 0

Building Virtual Worlds at Carnegie Mellon University starts with each student being assigned a role in Round 0. Since I have a Computer Science background, my role was that of programmer; this entailed I build a world that employed a number of basic features in Unity, such as:

  • Loads models and textures.
  • Play animations.
  • Use intervals, lighting, collisions, and multiple scenes.

The world can be downloaded here.

Concept

When considering the world, what I noticed was the amazing talent of the artists and musicians around me. It occurred to me what a shame it would be for their work not to be seen. I decided then that my virtual world would be a gallery of other peoples work. My first task was then to coordinate of assets with artists, and sound designers.

Creation

Artists were initially required to create animated lunchboxes, then dragons, and sound designers were required to create music for a clip of game play from a previously made world. I decided to meld the two by attaching audio sources to several of the artists assets that would constantly play music made by our sound designers.

This slideshow requires JavaScript.

Continue reading Building Virtual Worlds – Round 0

Shogun 2s User Interface, Center

The central area of the Total War interface receives the highest attention from the player. This post will look at a number of the elements that appear there.

Total War Encyclopedia

There are many pages within the encyclopedia. A look at one page gives a good understanding of the user interface (UI) element given the consistency used throughout the encyclopedia.

Encyclopedia Page

  • Light Blue – Main Subject Categories.
  • Dark Blue – Scroll Bar.
  • Green – Navigation Buttons.
  • Light Green – Part of Page Description.
  • Orange – Topic Navigation.
  • Pink – Relevant UI Image.
  • Purple – Page Title.
  • Red – Main Title.
  • Yellow – Browser Breadcrumb.

Notes

  • The scroll bar (Dark Blue) is not themed, resulting in it looking quite out of place. Perhaps this area was not given as much priority which is understandable as perhaps players don’t use the encyclopedia so much? From my experience I didn’t, and that is a sign of good game design.
  • The designers used the encyclopedia icon next to the UI elements main title (Red) likely to subtly have a player associate the image with the words Total War Encyclopedia.
  • The cancel button, and the navigation buttons are grouped together (Green) in the top left. For this area the designers have used the Main Menu button for the Home Button in the encyclopedia, they rely an understanding of ‘importance’.
  • The use of bread crumbs is good for players to quickly backtrack when navigating (Yellow).
  • The on hover underlining used for the main page categories is more link like (Light Blue).
  • There is a further reading tab located at the bottom of the page (Orange) which makes sense since the read is likely to look there. At the bottom of the page, the left and right topic options are displayed based on related topics in the manual.
  • For the main article they used topic headings, text descriptions with images, and icons which prove to be very helpful (Pink & Light Green) in conveying the point of the article.

Continue reading Shogun 2s User Interface, Center

Shogun 2s User Interface, Bottom Right

Bottom Right UI Element
Bottom Right UI Element

The bottom right UI element is located in a circular image that suits a dial design. It balances well the circular dial located on the opposite side of the campaign map page. The UI element can be split into two major parts.

First is the management dial which contains the vast majority of this UI elements functionality. Secondly is the resource pane which includes an overview of the most important resources used in the game, money and food.

Management Dial

Management Dial
Management Dial
  • Blue – Technology.
  • Green – Turn.
  • Purple – Clan Management.
  • Red – Finance.
  • Yellow – Diplomacy.

The UI element is compact, containing a number of icons that are representative of their function. There is though a small risk of accidentally hitting the turn button given its size and position.

  • Diplomacy (Yellow) uses a bowing person which appears to be an envoy.
  • Clan Management (Purple) uses a Clan flag which is the best representative of a Clan, and since the image is used in many other places in game the player is familiar with the image.
  • Finance (Red), uses an abacus looking instrument which is a tool used for accounting, as well as images of the currency to associate the button with in-game money.
  • Technology (Blue) uses a picture of a sword and another item representative presumably related to technology.
  • The turn button (Green) reflects the season as well as the year written clearly in black.

Management Pages

A standard used throughout the management pages is the location of the help and exit buttons. The help icon is located on the top right, and the action buttons are centered at the bottom of the page. Perhaps the help button would have been better located on the top left to coincide with the position of the help button on the main campaign map page.

Clan (Purple)

On pressing the purple icon a clan management page opens that has a number of tabs.

Summary

The summary tab is the default tab that opens. The page includes several clan related thematic elements namely the clans symbol (Blue), the name of the daimyo and an in game image (Green).

shogun_2_interface_clan_management_summary

Continue reading Shogun 2s User Interface, Bottom Right

Shogun 2s User Interface, Top Right

The Top Right UI Element in Shogun 2s Sengoku Jidai Campaign Map consists of three primary elements.

Top Right UI Element
Top Right UI Element

Map & Global Effects

The first element is a Map of Japan. Known clans territories are marked with a representative color (e.g Purple), and clicking the elements of the map takes you to that element on the 3-D map.

In addition selecting the Map Tabs results in icons appearing on the map e.g Navy, and Army symbols which when pressed take you to the unit. Certain symbols are given different styles depending on whether they are ‘active’ or not. An example of an inactive symbol is the trading post (Yellow), an example for active is the symbol used for the city of Kyoto which has been captured in this Campaign (Green).

shogun_2_interface_top_right_map

  • Blue – Expand Button.
  • Green – Active Icon Style.
  • Purple – Multiple Clan Colors.
  • Red – Minimize Button.
  • Yellow – Inactive Icon Style.

The Map can be expanded and minimized with the button in the top right corner (Red) of the Map (placement follow a standard for window closing making it more intuitive), and expand (Blue) is located in the bottom left corner which makes sense given it expands in that direction.

Map Resizing: Expanded(Top)/Default(Middle)/Minimized(Bottom)
Map Resizing: Expanded(Top)/Default(Middle)/Minimized(Bottom)

The space difference when resizing can be somewhat judged by the above diagram. When expanded the Map takes up approximately a quarter of the screen, when minimized it disappears completely leaving only the Map Tabs and Global-Effects.

Global Effects
Global Effects

The second element is a list of Global Effects located at the top left corner of Map. This area displays an icon for each Global effect e.g. Master Builders which reduces construction costs. Perhaps leveraging perceptions of color, positive effects are displayed with a green background.

Continue reading Shogun 2s User Interface, Top Right

Shogun 2s User Interface, Top Left

Top Left UI Element
Top Left UI Element

The Top Left User Interface (UI) element of Shogun 2s Sengoku Jidai Campaign Map consists of three equally sized icons. Pressing these icons open up the Game Menu, Total War Encyclopedia, and Game Menu UI elements.

  • Blue – Adviser Toggle.
  • Green – Encyclopedia.
  • Red – Game Menu.

The Top Left UI Element is never hidden, and when large elements appear in the interface from the area underneath this UI element, this element often overlays the larger element which was likely done given that this UI element has a higher priority function.

Adviser Toggle (Blue)

The Icon for the Adviser Toggle button (Blue) was likely chosen because one adviser looks similar. The functionality of the Adviser pane can be changed to either appear when using a feature in the Campaign for the first time or, considering more experienced players, can be set to not appear at all.

Pressing the icon from the UI element at the top left of the screen opens the following pane.

Adviser Pane
Adviser Pane
  • Blue – Advice Toggle.
  • Green – Advice Subject.
  • Orange – Advice Details.
  • Red – Character Image.

The character image (Red) serves a thematic purpose, the arrows (Blue) are for cycling through Advice, and are grouped with the character image to avoid getting in the way of the Advice description space.

The Advice Title (Green), and Text (Orange) are positioned in a standard way for reading. The Advice description takes the most space of all the elements, and can expand if necessary in case of text overflows. The cancel button (Purple) is placed in a commonly expected place for exiting which is the top right.

Encyclopedia Icon (Green)

The Encyclopedia Icon seems to be a Japanese style lamp with a question mark on it. I interpret this to be a symbol for a lamp that illuminates the unknown represented by the red question mark. It also leverages the commonly known iconography for help by using a question mark.

Encyclopedia Title
Encyclopedia Title

To reinforce that this is actually the Total War Encyclopedia, the icon is prominently displayed on the start page of the game, and is constantly visible in the game Encyclopedia with a clearly visible label.

Start Page Encyclopedia Icon
Start Page Encyclopedia Icon

Options Icon (Red)

Start Page Options Icon
Start Page Options Icon

I’m not exactly sure what the Game Menu Icon (Red) is. I’d hazard a guess, and say it looked like a face that was wearing glasses, and had a Japanese castle like hat?

In the Start Page of the game for displaying the Options Icon they used an image of a sword rack with multiple blades. That icon made more sense to me as I interpreted it to mean an option of swords to choose.

Perhaps they could have used the same image for consistency? Perhaps it was an issue of space?

Shogun 2s User Interface, A Study

The purpose of this project is to further my understanding of good UI design by studying various elements of Shogun 2s User Interface (UI) used in its Sengoku Jidai Campaign Map.

This post will serve to discuss the Campaign Maps UI layout, and be an index post in a multi-post project of non comprehensive personal observations of Shogun 2s User Interface.

Disclaimer: The User Interface (UI) is not quite in its Vanilla form due to having the Steam mod by Radious installed at the time of the study.

Shogun 2s User Interface Screenshot
Shogun 2 Campaign UI

The focus of this piece will be mostly on the 2-D elements of the interface such as menus, tabs, pop-up, and icons NOT the ‘3-D’ campaign map itself. So lets start with the general layout of the the Campaign User Interface.

General Layout

We can abstract Shogun 2s User Interface into an approximate layout with the following areas:

Shogun 2s User Interface General Layout
Interface Layout – Not to Scale
  • Dark Blue – Help and Options.
  • Green – Screen Center.
  • Light Blue – Map Lists.
  • Orange – ‘Selection’ Dial.
  • Pink – Description Popup area.
  • Purple – ‘Selection’ Banner.
  • Red – Map and Global effects.
  • Yellow – Management Dial.

Continue reading Shogun 2s User Interface, A Study

Know – An Educational Card Game

The following are play instructions for Know, and educational card game.

know_logo

Equipment

To play Know requires the following equipment:

  • Blank Cards (or pieces of paper).
  • Pens (not pencils).
  • Teams (at least one player per Team).
  • Source of Answers e.g Academic Textbooks.

Definitions

These are the definitions for terms used in Know:

  • Answer Cards A card that has written on it a Teams ID, their Answer and the Question number that the Answer Card is addressing.
  • Point Pool – The number of points available to be won on a Question.
  • Question Cards A card that has written on it a Teams ID, their Question, and a unique Question Number.
  • Question Prep A round for preparing Questions.
  • Question Round A round for asking Questions and submitting Answers.
  • Resolution A round for marking the Answers to Questions.
  • Round Deck A collection of Answer and Questions Cards for a Question Round.
  • Team ID A secret identifier that is unique to each Team.

Continue reading Know – An Educational Card Game

Jedi Knight: Jedi Academy – An Overview

Recently Humble Bundle had on offer a Star Wars Bundle which included an awesome entry from the Star Wars’s Jedi Knight: Jedi Academy.

jedi_academy_logo

I’d bought a physical copy of Jedi Academy years ago, and the memory of it was so endearing I thought I’d give it another play. This time with the difficulty set to max, and an eye open on elements of its design.

Continue reading Jedi Knight: Jedi Academy – An Overview

Extra Credits – A Resource for Game Designers

I was talking to a friend the other day on the topic of personal game design interview experiences. I mentioned mine could have gone better if I’d have had a deeper understanding of game design. To this he recommended that I start watching videos from a YouTube channel called Extra Credits.

So far I’ve watched about 26 of their videos in about a day, and I fully intend to watch every last one. They’re that good!

If you believe games matter, then check them out too. You wont be disappointed.