(X) Hide this
    • Login
    • Join
      • Say No Bots Generate New Image
        By clicking 'Register' you accept the terms of use .

A classic memory game: Part 1 - Designing the game

(7 votes)
Levente Mihály
>
Levente Mihály
Joined Apr 27, 2010
Articles:   7
Comments:   16
More Articles
7 comments   /   posted on Jan 20, 2011
Categories:   Gaming , Windows Phone , Design

This article is compatible with the latest version of Silverlight.

Don't miss...

         Beginning Windows Phone 7 Development

             Show more books

This article is Part 1 of “A classic memory game”.

Introduction

My wife has started learning Silverlight and because of my Expression Blend skills are still lacking, we have decided to build the following classic memory game so both of us can learn something new. We kept things simple but we respected basic Silverlight principles. That’s why we used MVVM which might sound an overkill for a simple game but you’ll see that it fits together perfectly.

Nowadays everything revolves around Windows Phone 7 in the Silverlight world and I am not an exception either. Once I got my phone I quickly ported the game over to WP7 to see that with a few modifications it’s running nicely.

In this first article I will go around the game’s concepts, designing the controls and the main game-states. In the second article I’ll finish building the game by adding the necessary code and connecting it with the View. The third part will be about porting the Silverlight game to Windows Phone 7.

First things first, here’s the game itself and download link for the source code.

 

Step 0. – creating a new MVVM Light project

For the project we have used my personal favorite and probably the most popular lightweight MVVM framework out there: Laurent  Bugnion’s MVVM Light toolkit. If you haven’t already installed it, you can do it from here: http://www.galasoft.ch/mvvm/installing/manually/

After installing and copying the Blend template in its place, two new ‘New Project’ templates should appear in the Silverlight department:

mem_0_thumb1

Of course you can add the MVVM Light toolkit bits later to the project as well, but it is very nice to have a template for an easy start. It’s also important to note that the MVVM Light toolkit is available for Silverlight 3, Silverlight 4, WPF3.5, WPF4 and Windows Phone 7.

Creating a custom ToggleButton Style – the Card

After drawing the different cards, the back of the cards,  and saving them as images, our first step was to create a custom control for the cards.

In Blend put a Grid in the LayoutRoot and put two Images inside this Grid. One will represent the back of the card, the other will be the front. Right click on the Grid and choose Make into Control..

mem_cardctrl1_thumb1

In the upcoming panel find the ToggleButton control and add the name CardToggleButtonStyle. Select a separate resource file (you may have to create a new one) to define the style in to keep the MainPage.xaml clean.

mem_cardctrl2_thumb3

Delete the ContentPresenter, so you will end up something like this:

mem_cardctrl3_thumb1

Notice the States panel, especially the CheckStates state-group. Every ToggleButton has a checked and unchecked state and we will use these two states to switch between our card’s front and back. So select the Unchecked state and change the front image’s Visibility to Collapsed. Then select the Checked state and do the same with the back image.

Now if you run the application you should be able to switch between the back and front of the card by clicking on it. Let’s add the turning-animation to the switching to make it look better!

Select the Unchecked state and add a transition to Checked state (1). A good length for the animation is 0.3 secs (2). By selecting the newly created transition we can edit its animation. Forward to 0.2 sec in the timeline, select the front image (3) and click the Record Keyframe button (4). Do this for the back image too (3,4). Set up a 90 degrees Y rotation in the Projection panel for the front image, and a –90 for the back (5). (Don’t worry when Blend automatically overrides the 90 degrees to 89...) Change the Visibility of the images, the front was Collapsed, change it to Visible. The back was Visible, change it to Collapsed (6). Now forward to the 0.3 sec mark and change the front images Y rotation to 0 (7). Now when you press the play button, you should see the card turning from one side to the other.

mem_ctrl_anim_thumb1

You’ll have to create the opposite of this animation in the Checked->Unchecked transition.

The cards will be flipped back when a certain time elapsed or a third card is about to turn. That means the logic is responsible for this task not the player. So in the Checked state set the IsHitTestVisible to false. At first I didn’t do this and had this bug where the user could turn back and forth a card without the MoveCounter increasing.

Designing the layout – Creating a WrapListBox

So we have the card control, now we need to place them. The memory game shouts for a WrapPanel, you’ll find that in the Silverlight toolkit. But we wanted a more dynamic solution, having different number of cards for each difficulty. That’s why we used a WrapListBox, a ListBox with WrapPanel’s layout. Here’s how to do it:

Drop a ListBox in the Layout Grid, right click on it and choose Edit Additional Templates –> Edit Layout of Items (ItemsPanel) –> Create Empty..

mem_wrap_thumb2

Give it a name (WrapItemsTemplate) and again place the template in the separate resource dictionary to keep the main xaml clean. The ItemsPanel is responsible for the layout of the ListBox’s items. Here you can override the ListBox’s default layout (which is a StackPanel) and do anything you want. Just check out Bea Stollnitz’s famous solar system example.

We’ll need only a simple WrapPanel now. Delete the default StackPanel and replace it with the WrapPanel (you’ll need the Silverlight toolkit).

mem_wrap2_thumb1

Trying it by placing a few Cards inside you’ll see that it doesn’t do exactly what we wanted. The problem is the ScrollViewer.

mem_wrap3_thumb

The quickest solution is to remove it from the ListBox’s template (we wouldn’t want the user to scroll for flipping cards).

Right click on the ListBox, select Edit Template and Edit a Copy.. After giving it a name (MemoryListBoxStyle) and placing it in the separate resource dictionary, move up the ItemsPresenter into the Grid, and delete the unneeded parts: the Border, the ScrollViewer and the ValidationErrorElement. The ItemsPresenter defines where the ItemsPanel (that’s our WrapPanel) is added inside the ListBox template. So we will need just that.

mem_wrap6_thumb1

Much better:

mem_wrap7_thumb1

Designing the layout – Menu and VisualStates

The game has three main stages: choosing a difficulty (start), playing, score (end). VisualStates are useful not just in (Custom) Control level, but in UserControl level as well. I’ve added three VisualStates to the LayoutRoot after building the menu items.

state0_thumb1state1_thumb5state2_thumb2

All the menus are Grids with a rounded Rectangle inside them. The Buttons use a custom style containing a rounded Rectangle and the ContentPresenter.

The template of the RadioButtons are the ContentPresenter and two Rectangles. One Rectangle behaves as a highlight border, because it doesn’t fill and is visible only when in Checked state.

For the states first we need to add a VisualStateGroup, select the LayoutRoot, switch to the States panel, and add a VisualStateGroup. Now we can add our three states and of course we won’t miss adding transitions as well. The result looks like this:

mainstates_thumb4

Note that you can add Easing to transitions (highlighted too) to make a more realistic animation. For example in my case I have an ElasticInOut Easing on the MenuState –> GameState transition.

Switching States using the GoToStateAction behavior

A great and straightforward way to change between states is the GoToStateAction behavior. With this behavior we can easily set up the initial state, the GameState, and the switching from EndState to MenuState. What we can’t do with it, is the switch from GameState to EndState because it’s not trivial, it’s decided by the game logic. So let’s do the trivial ones:

Switch to the Assets panel and find the GoToStateAction behavior in the Behaviors. Put the behavior inside the LayoutRoot and select Loaded for EventName and MenuState for State. Don’t forget to check the UseTransitions box.

gotostate0_thumb1  gotostate01_thumb6

To switch from MenuState to GameState place another GoToStateAction behavior inside the start button, EventName is Click, StateName is GameState. Put the final behavior inside the new game button to make the switch from EndState to MenuState again (StateName is MenuState).

Summary

In this article we started designing a game, our main tool was Expression Blend. We’ve created a custom control for the Cards, a WrapListBox for laying out them, and we set up the three main states of the game. All of these parts are real, working elements.

In the next part we will put some logic behind the game and connect it with the View, using converters, the CallDatacontextMethodAction behavior and others. We will again rely heavily on Blend.

About the Author

Levente MihalyMy name is Levente Mihaly. I've entered the .NET world in 2006, and after graduating at Budapest University of Technology (Msc in Computer Science) I started working as a .NET software developer. After meeting technologies like WinForms and ASP.NET, Silverlight quickly became my favourite platform from the early Silverlight 2 beta stages. I was always interested in mobile development and now I'm very happy since with Windows Phone 7 I can easily expand my knowledge to the mobile world. Nowadays beside following Silverlight I'm focusing on WP7 in my free time. I'm also the runner-up of the 2010 Silverlight ecoContest. You can reach me on twitter (@leventemihaly).
 


Subscribe

Comments

  • -_-

    RE: A classic memory game: Part 1 - Designing the game


    posted by Michael Josiah on Feb 21, 2011 01:51
    This is a very good read Levente. Will use this to help me learn the basics.
  • wildfox

    RE: A classic memory game: Part 1 - Designing the game


    posted by wildfox on Feb 21, 2011 11:37
    Thanks Michael, glad you like it :)
  • davekoo91

    Re: A classic memory game: Part 1 - Designing the game


    posted by davekoo91 on Nov 29, 2012 20:10

    Hi, can I implement this in Windows Phone?

  • wildfox

    Re: A classic memory game: Part 1 - Designing the game


    posted by wildfox on Nov 30, 2012 10:22
  • davekoo91

    Re: A classic memory game: Part 1 - Designing the game


    posted by davekoo91 on Dec 24, 2012 17:21

    Hi, can I add some kind of sound pronounciation for the card when it flip? example if the card is A, the device will said A? is it possible to do that and do you have any reference on this?


  • davekoo91

    Re: A classic memory game: Part 1 - Designing the game


    posted by davekoo91 on Dec 24, 2012 17:39

    Hi, can I add some kind of sound pronounciation for the card when it flip? example if the card is A, the device will said A? is it possible to do that and do you have any reference on this?


  • davekoo91

    Re: A classic memory game: Part 1 - Designing the game


    posted by davekoo91 on Dec 25, 2012 11:42

    when I put more than 15 cards and I wanted the card to be randomly select, can I implement the random numbers with no repeat to select the cards? example I have a-z cards

Add Comment

Login to comment:
  *      *       

From this series