Category Archives: Mobile

Using await to build cool UI tutorials

In the last post we discussed how we can build custom awaiters and showed simple example how to await for click on the Button instance.

Maybe it was not obvious how we can expand that idea and create some useful application, so i decided to expand the whole concept in this post.

We are going to build some more complex awaiters (for example TextBox awaiter that awaits for certain text to by typed into it) and use it together with the old Button click-awaiter to build the tutorial on how to use some imaginary app inside of the app itself.

For those not patient enough here is what it will look like at the end:

Tutorial App Gui With Await

So lets get started. First we need to build that awaiter for text box to be typed into the TextBox. This is little more complicated then our Button awaiter because in this case we need to pass the text parameter to our awaiter, and await keyword does not support that out of the box.

This is the usage we want to achieve in the end – if we are awaiting for text “123” to be entered into TextBox named tb1 then we want to be able to write something like this in our code:

    await new TextBoxTextAwaiter(tb1, "123");

To do the trick, first we are going to create one intermediary class TextBoxTextAwaiter that will accept two parameters, our TextBox instance and the text that we are expecting to be typed into it:


    public class TextBoxTextAwaiter
    {
        public TextBox TextBox { get; set; }
        public string TextToAwait { get; set; }

        public TextBoxTextAwaiter(TextBox textBox, string textToAwait)
        {
            TextBox = textBox;
            TextToAwait = textToAwait;
        }
    }

So now that we have something to hold on to our parameters we will create an extension method GetAwaiter for that class TextBoxTextAwaiter so that it can be awaited:

    public static class TextBoxAwaiterExtensions
    {
        public static TextBoxAwaiter GetAwaiter(this TextBoxTextAwaiter textBoxTextAwaiter)
        {
            return new TextBoxAwaiter(textBoxTextAwaiter.TextBox, textBoxTextAwaiter.TextToAwait);
        }
    }

As you see in the GetAwaiter we are creating instance of another class called TextBoxAwaiter (details of it below) and pass all the parameters into its constructor and this class can now do the actual await for use:

    public class TextBoxAwaiter : INotifyCompletion
    {
        private readonly string _textToAwait;

        public TextBoxAwaiter(TextBox textBoxToAwait, string textToAwait)
        {
            _textToAwait = textToAwait;
            TextBoxToAwait = textBoxToAwait;
        }

        public void GetResult() {}

        public bool IsCompleted
        {
            get { return TextBoxToAwait.Text.Equals(_textToAwait); }
        }

        public TextBox TextBoxToAwait { get; set; }
        public void OnCompleted(Action continuation)
        {
            TextChangedEventHandler h = null;
            h = (sender, args) =>
            {
                TextBoxToAwait.Focus();
                if (IsCompleted)
                {
                    TextBoxToAwait.TextChanged -= h;
                    continuation();
                }
            };
            TextBoxToAwait.TextChanged += h;
        }
    }

As you see this final awaiter is simple and works similarly like our ButtonAwaiter with difference that its subscribing to TextChanged event of the TextBox and checks if our desired text is entered. Once the text is entered, we are notifying awaiter that we are done by calling the continuation Action (and unsubscribing from TextChanged event for the cleanup).

And that’s all, now we can build any in-application tutorial that involves typing certain text in TextBoxes and clicking on the Buttons.  We could off course go further and build all kinds of awaiters for example MouseMovedAwaiter, MouseMovedToRegionAwaiter, UserInactivityAwaiter etc.

Also on mobile platforms we could easily create SwipeAwaiter, ShakeDeviceAwaiter, DoubleTapAwaiter etc.

This would be out of the scope of this article, i just wanted to share this idea :)

So here is how we would implement that imaginary “GUI Tutorial” from the image on the top of the post:

            public MainWindow()
        {
            InitializeComponent();
            Loaded += (a,e) => { Setup(); };
        }

        private async void Setup()
        {
            await BtnTutorial;
            ShowDemo();
        }

        private async void ShowDemo()
        {
            tb1.Text = "";
            AddVisualCue(Btn1);
            ShowMsg("Press First button");
            await Btn1;
            ClearVisualCues(Btn1);

            AddVisualCue(Btn2);
            ShowMsg("Press Second button");
            await Btn2;
            ClearVisualCues(Btn2);

            AddVisualCue(Btn3);
            ShowMsg("Press Third button");
            await Btn3;
            ClearVisualCues(Btn3);

            AddVisualCue(Btn4);
            ShowMsg("Press Fourth button");
            await Btn4;
            ClearVisualCues(Btn4);

            AddVisualCue(tb1);
            ShowMsg("Type the code '123' into the TextBox");
            await new TextBoxTextAwaiter(tb1, "123");
            ClearVisualCues(tb1);

            ShowMsg("Tutorial finished");

            Setup();
        }

I’m not posting the whole source code here because you can download the full zipped solution to see all the details. We simply use our awaiters to avoid boilerplate code for anticipated user interactions and we can concentrate on the actual logic of the tutorial.

Off course this is very simplified example but its very easy to extend it and make it really useful and interesting.

I can imagine this approach being used to create in-app tutorials for mobile applications where user would be expected to touch certain parts of the screen, do swipe actions, then maybe shake the device to clear screen etc.

Or for mobile games for kids where they should “interact” with the device in order to proceed in the game, take a picture of their pet, say some voice commands etc.

i would hear about see some nice usages of this pattern, feel free to post some in the comments.

Download full source code in Visual Studio 2013

Marbles

Video of my game Marbles for Windows 8

Hi all,

here is 1 minute video of my game Marbles for Windows 8. Its recorded on my desktop machine and played using a mouse,

but it works also with touch based devices, and you can even play with multiple hands at the same time, which opens some interesting

multiplayer possibilities…

Let me know if you have some ideas how to improve the gameplay, what power-ups i could add etc…

Marbles

Marbles game for Windows 8

Finally my first Windows 8 game called Marbles is finished and available in the Windows Store!

That partially explains why i did not wrote any posts on this blog for almost a year :)

It’s been emotional!

Seriously, it has been quite a journey.

First i was learning XNA, then Monogame, and then game development in general.

I always wanted to write a game (aren’t we all?) so finally i decided to really do it!

At first i started very enthusiastically and tried building a 2d platformer game, and after solving most of technical problems like character and level rendering and physics i sadly realized that there is no way i will be able to complete it alone without help of level designer and gfx artist, sfx artist etc.

Since i was a one man band that meant this game is not gonna happen…

Just for the record, here is the video of that unfinished game – be warned it was just a early prototype.

So eventually after months of work i got real and abandoned that idea and started from scratch.

I realized that if i want to get anything done i need to start small and build simple game and this is how idea for Marbles was born.

Along the way I discovered that developing games is very much unlike writing other software applications.

When you are running at 60 FPS then every byte counts, every loop is considered not necessary until proven otherwise and every operation needs to be fast or its out!

But writing games is very fun so i enjoyed (almost) every moment of it :)

Monogame is for real!

I must say that guys from Monogame team did excellent job and gave XNA another life.

Once you get past initial problems like how to setup environment or how to make the Content Pipeline working you are already making games and Monogame tries to help without getting in your way – just as i expected it.

Forums on the Monogame Codeplex site are very helpful and if you post your questions there you are almost sure to get some answer.

Forget Class Inheritance!

Another interesting thing i discovered on this bumpy road is the Entity Component System pattern.

After struggling some time with class inheritance for the game, i realized that there has to be better way so i started researching and found out that many people are writing games using Entity Component Systems.

I wrote small Entity Component System framework for my game and it worked much better then deep class inheritance approach so i definitely recommend it to any aspiring game dev out there.

If you want to see how real world Entity Component System for game development looks like check out for example Artemis its quite stable framework.

To the future… And beyond!

So now that i wrote a game, i can proceed to my next task – learn how to play drums!

Ok seriously, whats next?

Probably i will soon write some Monogame tutorials on this blog to help beginners that are struggling with typical problems that every game has to solve.

Especially on how to setup Content Pipeline and how to easily do Resolution Independence – the holy grail of Game Programming :)

So what else can i say then – stay tuned and in the meantime check out my game and send some criticism or at least few bug reports ;)

Windows-Phone-7-logo

Another way to close Windows Phone application from code


Correction

In my previous post on how to terminate the Windows Phone application i proposed a solution that is not really in accordance with Windows Phone Marketplace Technical Cerification Requirements (see requirement 5.1.2):

” An application that closes unexpectedly fails certification. ”

Even though I’m pretty sure that this requirement is not enforced since my apps use this approach and they were never rejected i decided to present another way.

Some good people suggested in comments of my previous post that you can terminate current application  simply by calling the XNA Game class Exit method like this:

using Microsoft.Xna.Framework;

namespace Roboblob
{
    public class AppLifetimeHelper
    {
        public void CloseApplication()
        {
            new Game().Exit();
        }
    }
}

The downside of this is that you need to add 2 XNA dll’s to your project:

  1. Microsoft.Xna.Framework
  2. Microsoft.Xna.Framework.Game
So there you have both approaches and you can choose which one is better for you until Microsoft exposes standardized way of closing application from code (i hope this will happen in Windows Phone 8 APIs).