InteractivePrototype-Group:O
From CS160 User Interfaces Fa06
Contents |
Prototype
Image:GroupO-Prototype.zip - This includes the Pen Monitor and our utility to parse the pen strokes.
GAMESMAN source code - compile instructions included in the INSTALL file, as well as in the README.txt file in GroupO-Prototype.zip.
PowerPoint Presentation
Image:Interactive Prototype Group O.ppt.zip
Team Members + Roles
Alex Wallisch
- Created interactive Upload Game interface in Swing.
- Contributed to report
Jason Lee
- Created board detection and move detection logic for Tic-Tac-Toe
- Contributed to report
Michael Udaltsov
- Created pen and inkstroke XML parsing logic for separating individual game data
- Packaged the prototype into a standalone program, launched by the Pen Monitor from R3
- Helped organize presentation, contributed to the report
Sean Carr
- Created and organized presentation
- Provided interface with GAMESMAN and added key features
- Load/save game feature
- Undo to specific position by clicking in VVH
- Redo undone moves
Problem and solution overview
Our project addresses two aspects of playing and analyzing two-player paper-based games such as Tic Tac Toe and Dots And Boxes. Currently, there exist at least two ways of playing these games: on paper and on a computer system, such as the GAMESMAN system, a product of the GamesCrafters research group on campus. Games played on paper are easily transportable, but for players who prefer to analyze different strategies, and learn from previous games, paper does not offer any kind of convenient or automatic analytical tools. Alternatively, the GAMESMAN system serves as an engine for solving, analyzing, and providing a perfect computer opponent for two player, finite, perfect information games such as Tic Tac Toe, Checkers, and many other games. While playing on the GAMESMAN system is good for analysis and strategy development, particularly through using the Visual Value History display, it is often inconvenient, since a computer is required to utilize this system and these tools. There is also a certain learning curve for the GAMESMAN software, which may prevent potential users from using it. The problem is that each of these systems offers several benefits, but also several drawbacks. We wish to recreate the easier and more user-friendly pen-and-paper interface for paper-based games, while still offering the powerful analytical tools of GAMESMAN. The solution is to utliize the affordances of the Anoto digital pen and paper system by recording the strokes of the pen used during gameplay and offering a user interface that can be used at a later time (when the pen is docked) to upload these ink strokes into a file format that will be recognizable by GAMESMAN, such that the analytical tools may be used. This solution offers a marriage between the ease and transportability of pen and paper with the powerful analytical tools of the GAMESMAN system.
Tasks
Starting, Playing, and Ending the Game (Easy)
These tasks are considered the easy tasks, as they are simple to perform on the user's end, and for the most part are exactly what users would do with a standard pen+paper interface. The main difference are that the Anoto pen must be used with a notebook or sheet that has the pattern on it. Starting a game entails drawing the board for the game, such as the 3x3 grid comprised of 2 vertical and 2 horizontal lines for Tic Tac Toe. While playing the game, players must think about the game strategy and how to successfully play against the opponent. This step involves actively thinking about the rules of the game and how they apply to the current situation of the game, as well as thinking about what moves are currently available and how to take advantage of them. Ending the game is another step that is slightly different. To mark the game finished, the users must draw a circle around the game board. This allows the application to recognize finished games, and separate multiple games from the same page for individual import.
Uploading the Game (Medium)
Dealing with the upload interface is considered a medium task, as it involves getting used to an unfamiliar UI, but at the same time, the UI is fairly simple and straightforward. The main goal is to successfully navigate the UI to pick specific games and upload them into a format that can be read by GAMESMAN. After inserting the pen into the cradle, the software will automatically parse the pen data, then detect and separate each game, and then present the user with the Game Upload interface. It is up to the user to provide information via the upload UI, such as what type of game was played, what rule variants were used, and what is the filename that the file will be saved as. The user may choose to skip certain games, but those that are chosen will be recognized and saved out to a file that can be read by GAMESMAN.
Loading the Game and Using the GAMESMAN System (Hard)
This task is considered hard, as it offers many various options in the GAMESMAN interface, and may be difficult for new users to learn. Users must first launch the GAMESMAN application and pick the game they want to use. Then they must load a game file that was saved previously by the upload step. After loading the game, the user is able to see all the moves made in that game, undo and redo the moves, and view the Visual Value History. It's possible to see the eventual outcome of the game (Win/Lose/Draw) for every possible move, and the user can choose a different move at any point to see the mistakes and learn better strategies. We think that both new and experienced users with respect to using the GAMESMAN system will spend most of the time on this task.
Revised interface design
Changes made due to low-fi testing results (and rationale)
For the most part, the flow and general design of our interface has not changed drastically since the low-fidelity prototype testing phases. The users that we tested the low-fi prototype with generally found our design to be agreeable and fairly self-explanatory. The only changes that were suggested and deduced were either cosmetic changes, in order to better explain some of the features and options of the interface, or adding other features that would be helpful during the uploading phase, such as adding a "Help" and "Back" button, disabling the ability to upload the game until all necessary information has been filled out. or saving the decisions from uploading one game to the next game (in the very likely case that most or all of the games the user wishes to upload are of the same game type played with the same game variants). Adding the "help" and "back" buttons are a good add, as a user might be confused with certain parts of the interface and may need to read some documentation, or the user might accidentally skip uploading a desired game and wish to go back to it and upload it (although at this stage, the help button remaind unimplemented, most of the screenshots below prominently display the "previous" button). Disabling the ability to upload the game until all information has been filled out is also a good idea, as it minimizes the potential for saving games in an incorrect fashion. Certainly trying to write a saved game file without the type of game it is and the game variants is a bad idea, as it will lead to erroneous results when trying to open the game in GAMESMAN. Thus, disabling the ability to upload the game without the appropriate information has been disabled. Saving the decisions is a good addition as well, as it allows the user to easily upload games of a large quantity of the same game type and same game variants. Even if all the games are of a different type with different game variants, the user would still be required to click on the new choices, which is the same amount of work as clicking on the choices with no defaults selected. Hence, this addition gives an added benefit without potentially adding more work for the user.
Unimplemented portions of the interface
Most of these are discussed below in the "What was left out" portion of the Prototype Overview section, as well as the rationale for why most of these parts were not implemented. The most significant part that was left out of this intial prototype was the functionality of uploading Dots and Boxes games. Additional features that were left out are mostly cosmetic or cannot be sketched due to intangibility (such as improved space detection) and are discussed below.
 |
Storyboard of tasks
The basic storyboard of the tasks can be found at the bottom of this document. Figures 0-4 demonstrate the process from playing the game on paper, to interacting with the upload UI to write a game file, to opening the game in GAMESMAN and using Visual Value History (VVH) to analyze the game. Pleae refer to the screenshots at the bottom of the page.
Prototype overview
Overview of UI
The primary aspect of this prototype is the interface that allows a user to upload games played on pen and paper into GAMESMAN. The interface can be seen in the screenshots in the following section. Figure 1 shows the interface immediately after it has been started up. The panel at left displays a bitmap rendering of the first game that the user has played. The area on the right is used for the user to describe the game and any rule variants that were used. In Figure 1, the first step is for the user to choose what type of game was played (in this prototype, "Tic-Tac-Toe" or "Dot and Boxes"). The text box at the bottom is for the user to enter the desired name of the game file that they wish to save. The buttons at the bottom correspond to any actions that the user wishes to enact on each game. Previous will skip backwards to the previous game, while next will skip forwards to the next game saved on the pen. Upload Game will mark the game to be saved in the .gcs format that GAMESMAN recognizes. In this prototype, clicking Upload Game also automatically skips ahead to the next game. Figure 2 shows the interface after the user has selected "Tic-Tac-Toe" from the dropdown box. The radio boxes that appear below the dropdown allow the user to select which variant of the game they played. In this case, since Tic-Tac-Toe does not have many variants available in GAMESMAN, there is only a single set of buttons. The single game variant involves the win condition of the game: Standard or Misere (the explanation of each term is given with the description of the radio buttons).
In the upload UI, users will go through each game in a similar fashion that allows them to upload each game properly. They will be presented with a bitmap representation to the left and enter in the game type, game variations, and the filename they wish to save the game under. For each game, users are given the option to either upload the game or skip to the next game. This continues until all games saved in the Anoto pen have been cycled through.
Figure 3 shows the interface after all games have been viewed. At this point, the user can either return to the previous game or click "Finish" to create the .gcs files that were chosen to be uploaded in the previous stages. Once the files have been written, they are able to be opened by GAMESMAN. Figure 4 demonstrates a successfully uploaded game being opened in the GAMESMAN system and successfully using Visual Value History to analyze each move of the game. At this point, the user is free to utilize the capabilities of the GAMESMAN system as a whole, such as undoing the game to a certain state and attempting to play through the remainder of the game with a different strategy in mind.
For reference, the .gcs file type used by GAMESMAN is a simple text file with certain information printed on each line:
Gamesman Executable Game Name Space Separated Move List (reverse order, first move is last on the list) Game Variant Number Left Player Name Left Player Human or Computer Right Player Name Right Player Human or Computer Who plays first
Here is an external link with more information on the Save game state
What was left out
Several things were left out of this initial prototype. Most notably, our prototype is missing Dots and Boxes in the upload UI. Though the user is given the option to choose it as a game type, the parsing logic for Dots and Boxes is not implemented and the UI will only correctly recognize Tic-Tac-Toe games. The rationale behind this is that given that we only had a week to put together a prototype, we decided that we wanted to have as many fully functioning options as possible, as opposed to having all the options available, but potentially not functioning at all. Given that Tic-Tac-Toe is a much simpler game, in terms of game complexity and in terms of number and position of ink strokes, it was decided that for the prototype we would simply concentrate on Tic-Tac-Toe.
There are also some cosmetic and functionality aspects that were left out of this prototype build for various reasons. A small cosmetic change that has not yet been implemented (that was available in our lo-fi prototypes) is numbering for each step of the upload UI for each game (example: "1. Select game type. 2. Select rule variants. 3. Enter name for file."). Additionally, a "help" button that was not included in our lo-fi prototype but was deemed valuable and necessary for our final product has not yet been implemented. Another planned feature that has not yet been implemented is a popup window that appears after writing all selected saved game files that lets the user know that all games have been successfully uploaded and asks if the user would like to launch GAMESMAN right away.
In addition, though the Tic-Tac-Toe parsing logic is currently fuctional, it does not perfectly interpret every single uploaded game. For most games in which the Tic-Tac-Toe board is constructed correctly (ie, with relatively straight lines), the .gcs files will have the correct move order. However, for one game that we attempted to upload, where the board was constructed with diagonal lines, the game did not parse correctly, as the wrong number of moves were recorded (only 7 moves were detected, whereas it is clear that all 9 moves were used while playing). The move detection algorithm needs some further tweaking for games in which the board is not constructed as conveniently as hoped (ie, non-straight lines). Figure 5 displays the game that does not parse correctly.
Most of these features are in the works to be implemented in the near future. It is also worth mentioning that for this prototype build, we decided to concentrate on ease of use, instead of ease of installation. Currently we hard code that the environment is set up such that GAMESMAN is installed in the same code directory as our UI. Knowing the location of the GAMESMAN directory is useful for more seamlessly integrating with it by saving the uploaded .gcs files in GAMESMAN's default saved game directory. Hard coding the location of the GAMESMAN directory restricts how the user can install the software and therefore makes installation possibly more tedious, but luckily maintains the ease of use which was our goal. In future versions we intend to use a configuration file, possibly XML, which will include values such as the path to the GAMESMAN saved games directory.
Wizard of Oz functionality
This prototype is fully functional, and no "wizard of oz" techniques are required to go from pen and paper into GAMESMAN. However, as stated above, the only game that is currently supported is Tic-Tac-Toe.
Prototype screenshots
 |  |  |  |
 |  |
