This series is about a promotion game we built to support our iPhone apps.
You can play the game here – it is “early stage” but you can really win!
Like explained in the previous posts of the series we’ve been building a promotion game for our iPhone apps.
The facts:
- We have skills on “game mechanics”
- We have skills on “infrastructure”
- We have skills on Silverlight
- We are everything else than designers
Fortunately telerik introduced a new control the RadTransitionControl which helped us a lot with our project.
I already did some work with the RadGauge and the game has a part where this control could help.
Lets talk about this step first. Part (main) of the game is that you (the player) spread information about the promotion. As I wrote before we use twitter as “transport” for this. For us it is important that as much people as possible get informed about the game / product. To motivate the player to spread the news we offer promotion codes as prices.
Each promotion code has its own “win counter” – a number which must be reached to win.
We measure “how much” a player spreads the information via his "follower counter”. Depending on this value (we have limits and calculations behind it) we raise the “Promo code counter”.
The reason that every code has its own counter is to bring some kind of “dynamics” into the game.
The player never knows the number of points needed to reach the goal.
Anyhow – to give the player some feedback we decided to use a RadGauge to display the percentage of the current counter. RadGauge has some kind of animation built in which animates the “needle / bar” when the value changes. But in our scenario this was not enough. As I told before we use a WCF Service to query twitter. This can be a bit (Seconds) time consuming.
From the client perspective two things happen: The search (takes time) and the display of a new value.
I had the idea to simulate some kind of “tuning thing” while we retrieve the new information.
Maybe you remember old films where an actor hits his (monochrome) TV to get a better display.
The display “flickers” and after some time (punches) it becomes sharp. You may have also seen effects like this in “Space Movies” when the video link to the starship is bad.
I think an effect like this reflects best what’s going on behind the scenes – we have “un-sharp” information about the current value and we try to get better ones. Here is what I mean:
We have 3 “pages” in the solution – First a manual, next the game itself and last not least a “popup” when we found a result.
The next thing we wanted to achieve was a “page transition”. Silverlight offers things for this – but RadTransition impressed me so much that I decided to do this also with that control.
We need such a “page transition” 2 times – once when the user starts the game (from manual to game) and a second time when the user clicks the “help button” (from game to manual).
And we need some kind of “popup” to display the game result a soon as we find the entry (tweet made by the player) in twitter.
The popup was very easy – we just used a RadWindow changed its style (we need no border or things like this) and called the “ShowDialog” method of the window.
The window contains a user control with the information. It also has two buttons OK / Cancel. OK ends the game, Cancel keeps the game open (with limited functionality). And the content of the popup depends on what happened. The player won, he did not win, he spammed…
For this our user control offers a function to set the information (yes no binding 
).
As you may know everything (almost) in Silverlight is asynchronous. So RadWindow will not stop the calling thread. Instead it will fire an events when something happens. For us it is important to know when the window closes. There we have to find out if the user clicked OK or Cancel. Here is the window markup:
Snippet created with CBEnhancer <telerikNavigation:RadWindow x:Name="rwFoundInfo" CanClose="True" CanMove="False" ResizeMode="NoResize" WindowStartupLocation="CenterOwner" Style="{StaticResource RWInfoStyle}"> <local:FoundInfoDisplay x:Name="fdFoundDisplay" /> </telerikNavigation:RadWindow> In code behind we do:
Snippet created with CBEnhancer rwFoundInfo.Closed +=
new EventHandler<
WindowClosedEventArgs>(rwFoundInfo_Closed);
fdFoundDisplay.SetInfoText(strResult, strResultInfo,
App.ThePromoInfo.CodePrompt, strCode,
App.ThePromoInfo.OKInfo,
App.ThePromoInfo.CancelInfo,
App.ThePromoInfo.PromoImage,
App.ThePromoInfo.PromoTitle);
rwFoundInfo.ShowDialog();
}
void rwFoundInfo_Closed(
object sender,
WindowClosedEventArgs e) {
if(e.DialogResult.HasValue && e.DialogResult.Value) {
HtmlPage.Window.Navigate(btnResearch.NavigateUri);
}
}
And the user control in the window does this to handle OK / Cancel:
Snippet created with CBEnhancer private void btnOK_Click(
object sender,
RoutedEventArgs e) {
RadWindow rW =
RadWindow.GetParentRadWindow(
this);
rW.DialogResult =
true;
rW.Close();
}
private void btnCancel_Click(
object sender,
RoutedEventArgs e) {
RadWindow rW =
RadWindow.GetParentRadWindow(
this);
rW.DialogResult =
false;
rW.Close();
}
Very little code, and what we get is a modal (!!) popup which displays information.
OK – some code is not displayed here – it is the (stupid) transfer of values to control content in SetInfoText.
But this is “our problem” – we could have used bindings or other things.
Now back to the RadTransitionControl. We have a user control which holds the surrounding border the background image and the promotion title / icon. In it we display two different things – the manual and the game itself. It looks like this:
Our goal was to have two different transitions – one for manual ==> game and the other for game ==> manual.
Here is what I mean (static):
To do this we needed a bit of code – first the markup (part of it) from the “holder”:
Snippet created with CBEnhancer <telerik:RadTransitionControl Grid.Row="1" Grid.ColumnSpan="2" x:Name="rtcTrans" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="3,0,0,0"> </telerik:RadTransitionControl> In Code behind we do the following:
Snippet created with CBEnhancer public MainPage() {
InitializeComponent();
m_fwPTrans =
new FlipWarpTransition();
m_rtTrans =
new RollTransition();
rtcTrans.Transition = m_fwPTrans;
}
We create two “transitions” and assign one to the RadTransitionControl (Manual to Game).
Have a look at the telerik demos to see these animations live.
Snippet created with CBEnhancer private void UserControl_Loaded(
object sender,
RoutedEventArgs e) {
btnHelp.Visibility =
Visibility.Collapsed;
m_ucInfoPages =
new InfoPages();
m_ucInfoPages.StartClicked +=
new InfoPages.
StartClickedDG(ucInfoPages_StartClicked);
rtcTrans.Content = m_ucInfoPages;
}
void ucInfoPages_StartClicked() {
if(m_gIC ==
null) {
m_gIC =
new GameInnerContent();
}
rtcTrans.Transition = m_fwPTrans;
rtcTrans.Content = m_gIC;
btnHelp.Visibility =
Visibility.Visible;
}
private void btnHelp_Click(
object sender,
RoutedEventArgs e) {
rtcTrans.Transition = m_rtTrans;
rtcTrans.Content = m_ucInfoPages;
btnHelp.Visibility =
Visibility.Collapsed;
}
First we hide the “help button” (not needed when we display the manual). Next we create the manual user control assign a handler for the StartButton and simply set it as content of the RadTransitionControl.
The button handlers (Start / Help) are also very easy. They set the wanted transition and assign the Content to the RadTransitionControl. This (content changed) starts the transition automatically.
There is no hidden code or other “magic behind” – except (of course) the one provided by telerik.
As I told you before – the RadTransitionControl if “beta” (CTP) so there are some things missing at the moment. But it is very easy to implement those parts. We needed to do this for our “fade effect”. The things are (a little bit) tricky – so I made an extra post about that.
Stay tuned
Manfred
Subscribe