Best way to visually switch between game screens?

06-04-2009 3:01 AM |

Let's say you have a game that consists of a: splash, menu, gameplay and gameover-screen. I guess these are the most common "game screens" and somehow we all need to visually switch between these.

As I see it there are two ways of doing this:

1. 100% in code. You simply add/remove UserControls from your main LayoutRoot dynamically
   
1. Good about this approach
1. You have 100% control over what's going on at any time.
   
2. Bad about this approach
1. If you have a designer working in Blend, or you work in Blend yourself, you don't get a very good picture of the game. You can't see in Blend, visually, what shown in the different "game states".
2. You can easially get a lot of "spaghetti code" that can be pretty complex, just for the purpose of switching between screens.
   
2. Using VisualStates in Blend
1. Good about this approach
1. I guess this must be the "right" way, as you use the tools fully.
2. You can easially make VisualStates within Blend and apply transitions between screens
   
2. Bad about this approach
1. You can't do "all" by doing it this way, sometimes VisualStates just isn't enough, or at least I have run into problems sometimes, maybe it's just me not good enough in Blend :)

So, I just want to hear how you guys are overcoming this very common scenario?

:)

Re: Re: Best way to visually switch between game screens?

06-04-2009 2:40 PM |

 Ok great to hear, so doing this in code seems to be the most used way of doing this.

@lionsguard: "I have a static manager class to aid in switching states." Do you mind sharing some of this code here? Or just give an example?

 

Re: Re: Best way to visually switch between game screens?

06-05-2009 9:48 PM |

Yeah, sounds more complex to describe it that actually use it :)

I have two these two interfaces defined:

public interface IScreen
{
  UIElement Element { get; }
}

public interface IScreenHost
{
  void SetScreen(IScreen screen);
}

Then, the UserConrols that are to be screens just implement the IScreen interface and return themselves as the UIElement:

public partial class PlayScreen : UserControl, IScreen
{
  public UIElement Element { get { return this; } }
}

The IScreenHost is the container canvas for the screen (This control is placed on the Page surface):

public partial class Host : UserControl, IScreenHost
{
  public void SetScreen(IScreen screen)
  {
    this.LayoutRoot.Children.Clear();
    this.LayoutRoot.Children.Add(screen.Element);
  }
}

And I use this class to handle switching of the screens.

public static class ScreenManager
{
  private static IScreenHost _host;

  public static void SetHost(IScreenHost host)
  {
    _host = host;
  }

  public static void SetScreen(IScreen screen)
  {
    _host.SetScreen(screen);
  }
}

In my Page.xaml.cs class, in the Loaded event handler I make this call to set up the host:

ScreenManager.SetHost(this.host);

When I want to change screens or set a new screen as the default I just make this call:

ScreenManager.SetScreen(new PlayScreen());

Re: Re: Re: Best way to visually switch between game screens?

06-07-2009 11:41 AM |

 Thanks for sharing :)

I see, that IS pretty simple, but seems effective. One could extent this so IScreen could have some kind of "Intro" and "Outtro", for instance if you wanted it to fade in/out or what not.

Thanks again.

Re: Best way to visually switch between game screens?

07-02-2009 4:34 AM |

I just want to +1 on using code to switch between screens instead of using VisualStates.  In the original Vector Space, I had all the controls on the Page at once, which got messy.  For TowerOfBabble and Vector Space Armada, I did what others described, where every "screen" is just a user control, and I have a method in a control class that handles all the screen setup and take down.  It is much easier to maintain that way.

In tower of Babble I have a FadeIn and FadeOut animation on a storyboard on my Page, and oldScreen and newScreen instance variables.  I set the targets on FadeOut to oldScreen and on FadeIn to newScreen.  On FadeOutCompleted oldScreen is removed and set to null and the targets are cleared on FadeOut.  No interfaces were needed.

Re: Best way to visually switch between game screens?

07-02-2009 7:56 AM |

DDtMM:

I just want to +1 on using code to switch between screens instead of using VisualStates.  In the original Vector Space, I had all the controls on the Page at once, which got messy.  For TowerOfBabble and Vector Space Armada, I did what others described, where every "screen" is just a user control, and I have a method in a control class that handles all the screen setup and take down.  It is much easier to maintain that way.

In tower of Babble I have a FadeIn and FadeOut animation on a storyboard on my Page, and oldScreen and newScreen instance variables.  I set the targets on FadeOut to oldScreen and on FadeIn to newScreen.  On FadeOutCompleted oldScreen is removed and set to null and the targets are cleared on FadeOut.  No interfaces were needed.

That's exactly my experience too. In Bubbles and Balloon Mayhem I have each "screen" as a UserControl, but all the UserControls are on the Page.xaml. I switch between them with VisualStates. I can see now that that, very quick, becomes way to complex control and develop on in some scenarioes, thats why I created this thread. Thanks for you input guys, seems like the "best" way is to handle switching of screens in code. This rise another question, when do you guys then use VisualStates? Or do you just discard them totally? :)

Re: Best way to visually switch between game screens?

07-02-2009 8:02 AM |

I too have each screen as a UserControl that's created and scoped in the custom Application class.  My Application class has a method called ChangePage that takes an enumerated type that contains the various pages available.  This makes the code a little cleaner.

 I think that a benefit of using different UserControls is that it would be easier to reuse one of the pages, for example a chat lobby page, in another application.

Re: Best way to visually switch between game screens?

07-02-2009 8:53 AM |

Qbus:

This rise another question, when do you guys then use VisualStates? Or do you just discard them totally? :)

I don't.  Since I'm not developing any controls I expect to distribute, or even use as templatable controls within the app, then I don't see the advantage over just plain old Storyboard's.

Re: Best way to visually switch between game screens?

07-03-2009 4:26 AM |

 Actually, I switch between screens in make some animations in UserControls, and so, all the content is in the XAML page. But that you said in this post seems very interessant and more powerful. If someone has an article or a tutorial about that.

 

Thank you :)

Re: Re: Best way to visually switch between game screens?

07-03-2009 4:59 AM |

In my games, every screen is a UserControl, which implements an interface "IScreen". I have a MainScreen UserControl, which is invisible, which displays the current screen and handles switching between the screens.

The IScreen interface contains an event "OnSwitchScreen". The MainScreen subscribes to this event when a new screen is created with the new keyword. The screen itself invokes this event when it needs to switch to another screen. I use an enumerated type to communicate the destination, (ie, main screen display, highscores, instructions) and this enumerated type is translated to a new <NextScreen>() in a factory function. This way I don't need to worry about how the screenswitch is handled while I am creating a screen. The OnSwithScreen event constains the screen destination, and optionally the level and score of the player, for the case that you want to communicate this information to the highscore screen.