Adobe Photoshop

Creating the Ultimate Memory Game

This week, I took a look at a bunch of other Storyline 2 Memory games that were available online, and all of these card-flipping games left me longing for Simon.Capture

Everyone who was born in the 70s or 80s knows how awesome the game Simon was. The anticipation of the crazy pattern alone was enough to drive you crazy, and Simon gave immediate feedback, which sometimes was soul-crushing when you were incorrect.

Creating the buttons was easy. Thinking through the logistics of how to make it work was not so easy. I contemplated using a million layers (blah). It could have worked, but it was a workaround (boo). I toyed around with the possibility of using true/false variables, but this only really worked when I used two colors (one time each: blue, yellow).

I knew it was a matter of assigning numerical values to actions, but all I could think was this was going to turn into a crazy mathematical sequence from high school algebra or something. You remember…

5 (+3), 8 (+3), 11 (+3), 14 (+3)…

I also knew that I couldn’t have the value of any two clicks equal the same number. For instance, if the pattern was blue (+1), yellow (+1), I needed the computer to know that the person clicked blue, not yellow. With the same values assigned to both, this wouldn’t work.

I also knew that I might want the pattern to contain two of the same color in a row, so counting userClicks became important.

I actually have to give it up to my husband who mentioned prime numbers, and I tried that out…tada! It worked. Let’s explore how and why (for the first light pattern: blue then yellow).

 

Creating Variables

First I created two variables, clickNumber and sumTotal.

 variables1

clickNumber = how many times the person has clicked

sumTotal = each colored button has a value assigned to it, and when you click on a button, it adds the value of the button

  • blue = 1
  • yellow = 3
  • green = 5
  • red = 7

 

Setting Variables to Zero

Then on the slide, you have to set the variables to equal 0 at the start of the slide so the math is done properly and matches up with your values later.

setto0

 

Officially Assigning a Value to Each Color

Now, I said above that each color has a number associated to it. You actually have to create the number values as triggers.

setuptriggers

 

See?

B (Blue)

When the user clicks blue, add 1 to the clickNumber (you clicked one time).

When the user click blue, add 1 to the sumTotal. (1 = blue).

For the first click (which is blue), the variable will have +1 added to it because blue = +1.

 

Notice above that each color has a different sumTotal associated with the color. G(reen) = 5, R(ed) = 7…yadda yadda.

 

Associating the Incorrect Response to an Incorrect Click

If you remember, Simon doesn’t reward you for tapping each correct button. It just keeps moving onto more difficult patterns if you press the easier patterns correctly. However, it does let you know when you are incorrect!

I made an incorrect layer that redirects you to the lights pattern again, and I also made a correct layer (for when you are finished the whole correct pattern, i.e., press blue then press yellow…correct!). Whenever the number of clicks doesn’t match up to the value it’s supposed to, the incorrect layer will display.

You can see in the trigger below that if the first click (clickNumber = 1) adds a value to the sumTotal that is NOT equal to 1, it will show the Incorrect layer; this means the player must have clicked another button (besides blue) since yellow, green, or red are not equal to +1.

incorrect

On the second click (which is supposed to be yellow), the user should technically have these values:

  • sumTotal = 1 (from blue) + 3 (from yellow) = 4
  • clickNumber = 1 (from blue) + 1 (from yellow) = 2 total clicks

So we set up a trigger to show the Incorrect layer if the second click (clickNumber = 2) adds a value to the sumTotal which makes the sumTotal NOT equal to 4, it will show the Incorrect layer.

click2

 

Associating the Correct Response to User Behavior

If you’ve followed the pattern correctly (blue then yellow), you will be automatically taken to the next “level” with a more difficult pattern.

So you need to show the Correct layer when the sumTotal variable changes and becomes correct, 4 (because 1 [blue] + 3 [yellow] = 4). This total of 4 should only happen with 2 clicks (so the clickNumber is equal to 2).

correct

 

Making More Difficult Patterns

And for more difficult patterns, you add more of the Associating the Incorrect Response to an Incorrect Click steps. For example, if on the 3rd click you wanted the user to press blue again, then you would add another Incorrect trigger that says:

  • sumTotal not equal to 5 (1 [blue] + 3 [yellow] + 1 [blue]
  • clickNumber equal to 3 (3rd click)

 

Check out the demo or download the .story file to take a closer look.

Also, feel free to download the button files to change the colors as you wish.
Creative Commons License
Memory Game Buttons by Lauren Franza is licensed under a Creative Commons Attribution 4.0 International License.

 

Designing, Developing, and Implementing

The video above shows a brief look at the features and content provided in MISSION:RECON. Video produced by Lauren Franza.

 

For three years, I was the Lead Instructional Designer at ATLT Games. I met daily with a team of instructional design assistants, subject matter experts, and game developers to create an educational video game that helps entering college students prepare for their college math placement tests.

Visit the MISSION:RECON website for more information.

Creating Animated Videos in Premiere Pro

(c)2010-2014 ATLT Games

 

(c)2010-2014 ATLT Games

 

When I was the Lead Instructional Designer for ATLT Games, I developed a few concept videos for our video game, Pi & The Lost Function. These videos helped our story writers understand possible plot lines and themes that would work well with the instructional content we developed.

All animations were done using Adobe Premiere Pro and Adobe After Effects by Lauren Franza. Graphics in these animations were created by Katie Cavitt.

 

Creating Art Using Wacom 21UX

art

 

While I was the Lead Instructional Designer at ATLT Games, I created some in-game graphics for our lessons, assessments, and instructional videos. The icons you see are used in the learning tablet in the 3D game, Pi & The Lost Function. These graphics were created in Adobe Photoshop using a Wacom 21 UX writing tablet. All graphics above were created by Lauren Franza for use in Pi & The Lost Function, the educational math game.

Training Students on Player Control

spacebar 0bfasttravel 1b

 

As the Lead Instructional Designer at ATLT Games, I was responsible for tasks involving the design, development, and implementation of educational content and also the instructional components of game play, like player tutorials.

I created the educational videos that show the student how to use the in-game learning tablet and created the tutorial stills as well that dictate character movement throughout the levels.

Here are some examples of tutorial stills that I created for Pi & The Lost Function.

Creating Math Graphics Using Wacom 21UX

mathimages

Link: Math Graphics Created by Lauren Franza

 

While I was the Lead Instructional Designer at ATLT Games, I created some math graphics for our lessons, assessments, and instructional videos. These were created in Adobe Photoshop using a Wacom 21 UX writing tablet. All graphics above were created by Lauren Franza for use in Pi & The Lost Function, the educational math game.

Creating Informal Assessment Activities

blank post-it note 3x3 template - tatertotsandjello blank post-it note 3x3 template - tatertotsandjello

Link: Sticky Note Coordinate Planes

 

As the Lead Instructional Designer for ATLT Games, I often created activities and resources for teachers to use with our math adventure game, Pi & The Lost Function. This is an activity that I created that allows teachers to print out coordinate planes on sticky note paper for students, allowing teachers to informally assess their students faster and in more creative ways.

Using Photoshop to Create Instructional Materials

qg1

Side 1: Level Information, Quick Keys, and Game Symbols

qg2

Side 2: Accessing the Teacher Portal and Understanding Student Performance Results

 

Link: Teacher Quick Guide (Adobe .pdf)

 

During teacher trainings on how to use our software, Pi & The Lost Function, many teachers asked questions about game play. I created this instructional quick guide to help teachers identify important artifacts in the game and understand student performance in the Teacher Portal.

Creating Banquet Programs with Photoshop

nauticusbillboard

Billboard at Nauticus

image3

Banquet Program

Link: Hampton Roads Business Hall of Fame 2011

 

When I was the Education Director for Junior Achievement of Greater Hampton Roads, I created 2011 Business Hall of Fame invitation, billboard (above), and program printout (above). I have linked to the program which shows my use of Photoshop and how I integrated company logos and ads into well-selected spaces and used white space to maintain balance.

This program was created in Adobe Photoshop and was compiled in Adobe Bridge. All company logos and ads were given to me by the marketing departments of each company.

Creating Annual Reports with Photoshop

image1

Link: Junior Achievement Annual Report 2009-2010

 

When I was the Education Director for Junior Achievement of Greater Hampton Roads, I created the Annual Report each year to notify volunteers, Board of Directors, and sponsors of the events, annual budget, and student activities that were held during the fiscal year.

In this report, I presented all information using Adobe Photoshop. The .psd files were then compiled together in Adobe Bridge.