Bill Sempf

I bet you all think that I mean failing at writing  the game, didn't ya?  Hmm?  Ha!  Not so fast my friend, I mean handling the last requirement in the project - failing the press the correct letter before the letterbox hits the bottom of the screen.

So what I want to do is check on timer click of the letter has hit the bottom, and if it has then fire off a new message (Oh no instead of Wow) and get a net letter at the top,  Should be good enough for a three year old, I figure.  As I get better in XAML I can make more features, right?

To start off I will modify the ShowWow so that it accepts a TextBlock and renders its transform no matter what it is.  I changed the name of the function to ShowMessage and used the VB refactoring feature to change all references.  Then I altered the signature to accept a textblock as a parameter, and used that object in the code instead of WowTextblock.  Finally, I changed the calling function so that it passes un WowTextblock.  Sounds like a lot, but it just took a second.  ShowMessage now looks like this:

Public Sub ShowMessage(ByVal blockToTransform As TextBlock)
    'Make an animation for the scale
    Dim blockAnimation As New DoubleAnimation(0, 100, New Duration(New TimeSpan(0, 0, 3)))
    'Make another for the opacity
    Dim blockOpacity As New DoubleAnimation(1.0, 0.0, New Duration(New TimeSpan(0, 0, 3)))
    'Go grab the ScaleTransformation from the XAML and se tthe properties
    Dim blockTransform As ScaleTransform = DirectCast(blockToTransform.RenderTransform, ScaleTransform)
    blockTransform.CenterX = 11
    blockTransform.CenterY = 7
    blockTransform.ScaleX = 1
    blockTransform.ScaleY = 1
    'Then run all of the animations
    blockTransform.BeginAnimation(ScaleTransform.ScaleXProperty, blockAnimation)
    blockTransform.BeginAnimation(ScaleTransform.ScaleYProperty, blockAnimation)
    blockToTransform.BeginAnimation(TextBlock.OpacityProperty, blockOpacity)
End Sub

Alright, now I need to add a XAML element that has the Oh No! text in it.  I think I'll make it red.  I just copied the Wow! textblock and edited it.

<TextBlock x:Name="ohNoTextblock" Opacity="0" Foreground="Red" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Oh no!" Visibility="visible">
    <TextBlock.RenderTransform>
        <ScaleTransform></ScaleTransform>
    </TextBlock.RenderTransform>
</TextBlock>

So now clockCheck looks like this:

Private Sub ClockCheck() Handles gameClock.Tick
    letterBoxTop = letterBoxTop + 10
    letterBox.Margin = New Thickness(letterBoxLeft, letterBoxTop, 0, 0)
    'Check to see if it is at the bottom
    Dim bottom As Double = gameBoard.Height
    If letterBoxTop + letterBox.Height > bottom Then
        'It has hit the bottom.  
        gameClock.Stop()
        scoreCount = scoreCount - 1
        'Fire the Oh No message
        ohNoTextblock.Opacity = 100
        ShowMessage(ohNoTextblock)
        'Restart the letter
        SetupLetterBox()
        gameClock.Start()
    End If
End Sub

And there we are!  Kid tested, mother approved too.  I'll post a video of Adam playing it this weekend, when I do my post about further enhancements.  Also, I will check in the changes to CodePlex right now before I forget.

To create a release in CodePlex, I just had to go to the releases tab and Add a New Release.  That gives me a really nice little mini-wiki for the release, and an upload facility for the binary.  I made a few notes and loaded it up!  CodePlex is a really nice, simple facility for opensource work - better than SourceForge for simple projects.  I like it a lot.

I hope this little series has been helpful to everyone - it sure has for me.  I think that XAML is likely the future of Microsoft UI programming, so it behooves us all to get our feet wet as soon as we can, to make the curve less steep when our projects make the move.  Please leave any thoughts in the comments.

OK, we have th game basics, we have enforced the game rules, now we need to make it playable.  In order to do this (according to the original requirements) we need to

1. Add a little pizzaz to the notifications
2. Handle it when the player looses a letter

So I found that in order to proceed with this project, I needed to define a few terms.

• XAML - it's basically HTML.
• WPF - It's ASP.NET, or Cold Fusion, or JSP.  Control that render XAML, like the ASP.NET controls render HTML.

So where does this leave us?  A whole, totally new library to learn, after having already learned HTML since 1992 when it had twelve tags.  Oh, and you windows programmers?  You too.  This replaces EVERYTHING - Windows "ActiveX" and web.  It's global!  Yay.  Replaces Flash even - WPF and XAML run Silverlight.  Rah.  I can't even hide my excitement.

So why am I upset?  Well, I like HTML.  It does what I need.  But I understand that it doesn't fill 100% of what people want, and XAML with WPF probably will.  Problem is when you make a tool that meets everyone's needs, it becomes unusable.  As that say the docs are 'tl;dr;: 'too long; didn't read'.  There are hundreds of options - in HTML there are a few dozen.  Some say that constrains creativity, I think it enhances it.  To each their own.

Polymorphic animation.

Anyway, it's a technology that the biggest software company in the world has embarrassed so I should learn it right?  Right.  There are at least two ways to put text in the viewable area - the letterBox, which we are using for the Game Piece, and the textblock.  The TextBlock is what is needed for the Wow! animation.

One of the nice things about XAML is that it is polymorphic.  Polymorphic is the property of being able to be context sensitive.  If you have a fruit class, and there is a Fruit.Peel method, a polymorphic Peel method will know that you take the skin from a banana, take the seeds out of a pomegranate and don't bother with a grape unless you are making pie.  (No really.  My stepmom just made a grape pie last month.  It was yummy.)

I am pontificating and this is supposed to be a liveblog of a project.  Let it be said that you can apply an animation to an object, and they are truly polymorphic.  Therefore, we have a textblock, and we want to apply two animations to it.  The animations will automagically treat the textblock properly, thus showing us their polymorphic nature.

Enough of that. 

I want a flying 'Wow'.  To do this, I need to animate two properties: the scale of the block, and the opacity of the text.

There are two ways to implement an animation in WPF.  You can use a storyboard in XAML, which is more of a Microsoft Expression thing to do, or you can apply the methods in code, which is what I want to do.  This is a VB blog, after all.

To animate the scale, I have to add an empty ScaleTransform object to the TextBlock.

<TextBlock x:Name="wowTextblock" Opacity="0" Foreground="Green" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Wow!" Visibility="visible">
    <TextBlock.RenderTransform>
        <ScaleTransform></ScaleTransform>
    </TextBlock.RenderTransform>
</TextBlock>

This isn't necessary with the Opacity animation because the Opacity is already a property of the TextBlock.  I know that Width and Height are too, but scaling them isn't.  I suppose I can get behind that.  Anyway.

To animate the block, I am going to make two DoubleAnimation objects, and then BeginAnimation them one after another.  The Opacity I can directly apply, but the Scale I have to go get from the XAML and then set a few properties for.  I packed the whole thing into a subroutine I called ShowWow.  I will replace the old MessageBox.Show with a call to the new ShowWow method.  Here is the code:

    Public Sub ShowWow()
        'Make an animation for the scale
        Dim wowAnimation As New DoubleAnimation(0, 100, New Duration(New TimeSpan(0, 0, 3)))
        'Make another for the opacity
        Dim wowOpacity As New DoubleAnimation(1.0, 0.0, New Duration(New TimeSpan(0, 0, 3)))
        'Go grab the ScaleTransformation from the XAML and se tthe properties
        Dim wowTransform As ScaleTransform = DirectCast(wowTextblock.RenderTransform, ScaleTransform)
        wowTransform.CenterX = 11
        wowTransform.CenterY = 7
        wowTransform.ScaleX = 1
        wowTransform.ScaleY = 1
        'Then run all of the animations
        wowTransform.BeginAnimation(ScaleTransform.ScaleXProperty, wowAnimation)
        wowTransform.BeginAnimation(ScaleTransform.ScaleYProperty, wowAnimation)
        wowTextblock.BeginAnimation(TextBlock.OpacityProperty, wowOpacity)
    End Sub

Of course, you can download the whole thing from the codeplex site for the project.  Next time, we'll handle missed letters, and then call it a project.  Have fun!  I hope this is being some help to those working in WPF.