Goal: Create a fun online learning game by connecting card borders to complete tasks on each card. Play all cards to win and learn something along the way.

Title: The Frame Game

Audience: The audience for this game are college students enrolled in an online version of IGME-236 at RIT. Students in the Game Design and Development and New Media programs typically enroll in IGME-236 during their sophomore/junior years.

Dave will benefit from playing The Frame Game in lieu of completing homework not only due to the reduced workload, but also because it was made in Unity2D (and displays a “Made with Unity” splash screen at the start), and can learn a bit about what the engine is capable of. Because this game is a nontraditional form of education, Dave may grow a bit fonder of academics if it integrates methods such as games.

Ann will hopefully appreciate having one less homework assignment to

complete each week. The game’s reinforcement of central topics can help her take away a key piece of information or two from IGME-236, and she may even gain some ideas to implement in her flashcard application because both The Frame Game and her application qualify as educational resources.

James, being a gamer, may take interest in this edutainment game over traditional forms of education, and the ease and convenience of playing The Frame Game over completing homework can help him pass his class. The game’s chat log may even help him communicate with fellow pupils in the course.

Competitive Analysis/Context AnalysisEducational games 2.6 Billion in 2017 …

(https://www.td.org/Publications/Newsletters/Links/2016/09/Game-Based-Learning-Market-Accelerating-Globally)

4.9 Billion by 2019 …

(http://www.ambientinsight.com/Resources/Documents/AmbientInsight_2014_2019_Global_Edugame_Market_Whitepaper.pdf)

Critical Analysis:

Scoring

Poor Excellent

Dominoes Jigsaw Puzzle Tetris Rummy Truth/Dare

1 --------- 10

Overall Design/ Layout 8 9 2 8 5

Color Scheme

9 7 2 6 8

Content 8.5 9 3 9 3

Student Interest

6.5 7.5 1 8 1

Gameplay:

Game software generates a single topic from a random selection from a list of topic keywords. Alternately, beginning words may be selected manually. These words are distributed across the card types into the tasks/questions as in the example above. Players are dealt six (6) cards. Play begins to the dealer’s left.

Cards must match by at least one side by border (size, shape, color, pattern). When a player matches more than one side of a frame, the player completes the associated task (s) AND plays a second card. Players who pass draw an additional card. As frames are created, players answer questions or complete activities arranged around the chosen topic word. At the end of each full round of play (all players have played or passed), one card is passed to the left.

Game Cards:

This game is played with a customized card deck of 36 square cards. Game cards are laid out with graphic borders and interior empty spaces. The empty spaces will become “frames” when surrounded on four sides. The card used to complete a frame is the card that decides what sort of task the player must now complete. There are four (4) types of cards. Using the example of PERCEPTION, the following tasks are grouped according to card type.

Provide a definition of ___PERCEPTION_______________.

Provide a synonym of ___PERCEPTION________________.

Describe a fact about _ PERCEPTION_.

Think up a new idea about ___ PERCEPTION _________________________

Say more about ___ PERCEPTION _____.

When you think about _____ PERCEPTION _____________, what’s next?

Make up a sequence that includes ___ PERCEPTION

In my opinion, __PERCEPTION__ is significant because ____________________.

Give a personal example of __PERCEPTION__?

Name 3 reasons __ PERCEPTION _________ is important.

What does _____ PERCEPTION____ have in common with ______________________?

How is _____ PERCEPTION _________________ different than _________________________________?

Where does ____ PERCEPTION ___ intersect with _________________________________?

In addition to the four types of card layouts, card borders also use four different visual variables (size, color, shape, pattern).

Interactivity:

Players draw and play customized cards. A synchronized chat log captures the player’s answers and other players’ interactions. Ability to turn cards in order to match borders.

Human-Computer Interaction

Game controls are driven primarily by the mouse, while the keyboard is required for chat. The mouse may interact with on-screen buttons, input fields, and cards; these cards can be dragged and dropped. Each card also contains an attached rotation button, detailed in the figure below. Ideally, players will also be able to copy/paste text from the in-game chat log to external files. In the future, the game may have more accessibility options such as eschewing the mouse entirely for the keyboard.

Figure: A demonstration of how card rotation functions in-game.

Human-Human Interaction

Because The Frame Game is an online card game, all players in the same lobby will be playing with the same game board layout, synchronized over Unity’s UNET networking system. With the built-in chat log, players can send public messages to one another, discussing the topics of the round. To further encourage discussion, the Server will send messages to the chat appropriately, prompting players to answer questions or reporting details on the game. Ideally, each player would have their own unique color for the chat text.

Functionality:

Game software randomizes Borders match. Online chat. Drag and drop. Randomized opponents/cards. Randomized card content.

Card Topic Randomization

The Frame Game procedurally generates challenges for its players. Given a list of key words, the software will prompt students with a randomly generated question using the word. For example, if the list of key words contains “perception” and a player has completed a frame, then the Server may ask them to “Give a personal example of perception.” A tentative feature I’d like to implement is the ability to use the text of a user-created, specialized input file as the list of key words, making the game perfect for personal study sessions.

Table

The table is the grid where cards will be placed. Players can drag and drop their cards onto the table to create matches; imperfectly placed cards will automatically snap to the grid. However, this table can either be implemented as a fixed-size grid or an “infinite” one which can handle, for example, all 36 cards placed in a straight line. The two methods of implementation are detailed in the figure below.

Figure: Whereas Option A’s grid can be infinitely expanded (which may cause camera and visibility issues), Option B’s grid limits players to a fixed-size, but still large, grid of 144 spaces.

Card

Each card, in implementation, has a graphic, screen position, and rotation button. These cards may be dragged and dropped by players onto the playing field (table). While in the player’s hand, players can click the rotation button to rotate the card by 90 degrees, opening up more potential connections on the table.

Border Matching

These cards can only be played on the board if their borders match in some way governed by Burtin’s visual variables. If the match is invalid, the player making the invalid match is given a specific reason why the match does not work. To implement this validity check, I believe that each border must contain an (invisible to players) GameObject within the card that can cast a ray directly to its neighbor, gleaning information from the adjacent border.

Frame Checking

A frame in this game is defined any enclosed shape created by the borders. In order to check whether or not a frame has been made, the cards must have a new (invisible to players) GameObject which checks for enclosing borders in the four cardinal directions.

Visual Effects

While not the most important feature, visual feedback encourages players to continue playing, and similar visual effects to Hearthstone will amplify the effect of the final product. Sparks, lighting, particles, and animation upon interactions will serve to enhance the playing experience.

Timed Play

Because the game takes place one turn at a time, players must be moderated with an in-game timer that limits the amount of time they may use on their turn. At the beginning of the turn, players will see a countdown timer beginning at a set time (we’ll begin with 30 seconds). If the player either plays a card or passes, the timer begins anew for the next player, but if all of the time has elapsed, then the game will automatically deal one card to the player and move to the next one. However, if a player has created a frame during their turn and must answer a question, the timer will reset, giving them, for example, 45 seconds (15 to answer, 30 to play).

Chat

The chat is an online feature that allows players to send public text messages to one another in-game. Additionally, the Server will interact with the players by asking randomly generated questions, notifying them of an invalid match (and how to fix it), and other game details. I hope to implement a feature where the chat log data is automatically sent from the game to a designated archive where we can read the data; otherwise, data will be reported by the students copying and pasting the chat log text into a document. The players may also have a command to notify the Server (and other students) when they have finished answering a question, such as “/STOP” or “/END.” Finally, I want each player to have their own personal text color in the chat.

Game Visuals:

Game visuals will reinforce Bertin’s visual variable and match by size, color, shape, and pattern.

The gameplay screen mockup shows a user dragging and dropping a card from their hand onto the table. In the hand, cards can be rotated with the rotation button on each card. The table contains a greyed-out card of 4 borders, so a frame has been created. Consequently, a player (mtb02) has been prompted with the appropriate question, they have answered it, and is allowed to play another card. Points are kept confidential; players may only see their own point totals. Above the chat log lies the player log, which denotes all players currently in the room, the host (dealer) and the current player.

Storyboard

1: The Title Screen is where play ers connect to the game. Using the Unity UNET

networking sy stem, dealers choose "LAN Host" and others choose "LAN Client."

2: Player 1 (P1) and Play er 2 (P2) hav e connected to the same table, and it is

currently P1's turn. In the chat, P1 has greeted P2. Note that for simplicity ,

certain details and features have been omitted. Because the first turn cannot be skipped, the SKIP button has been grey ed out. We will follow P2's experience for this

storyboard.

3: P1 has successfully placed their card, and it is now P2's turn. P2 attempts to play

a card next to P1's, but…

4: Because the patterns of "solid" and "checkered" do not match, P2's attempted

card is returned back to the hand. The server's "Inv alid" message is colored black

instead of red to prevent discouraging players.

5: P2 has rectified their mistake by matching "solid" to "solid," and has made a

frame in the process. For the point, P2 must answer the corresponding question

prompted by the Server.

6: P2 has answered the question in the chat, and consequently has scored the

point. P2 may play another card.

7: P2 has play ed another card, but this time cannot make another frame.

8: Because a round has ended, the Server prompts all play ers to pass one card in

their hand to the next play er. We can see that P2 is discarding the one they had

failed to play back in panel 3.

9: The game flow reverts back to P1, who has given their 3-sided, checkered card to P2 in exchange for P2's 1-sided, checkered

one.

Visual Design 1: Mondrian Lines

Sample Card Designs and Completion Picture:

Sample Game Board:

Description:

In this Piet Mondrian-inspired design, players match card borders by their colors and/or lines. Upon completing a frame, the bright “Boogie-Woogie” pattern appears inside the borders, signaling the same sense of victory as intended in 1944.

Visual Design 2: Colors and Shapes

Sample Card Designs and Completion Picture:

Sample Game Board:

Description:

This abstract theme expands upon the visuals from the sample/demo deck, incorporating bold colors and making more use of Burtin’s visual variables. A solid color appears in each completed frame.

Visual Design 3: Colors and Shapes, revised

Sample Card Designs and Completion Picture:

Sample Game Board

Description:

This theme expands upon the colors and shapes found in the previous theme by using a wider variety of colors and patterns, striking a healthy balance between visual appeal and clarity for gameplay. Visuals were inspired by the demo deck’s use of large shapes, colors were influenced by Bertin’s cartography. A striped pattern appears in each completed frame.