Universal game for Windows 8.1 RT and Windows Phone 8.1

    Good afternoon, colleagues.
    I think many have heard that Microsoft is working to create a single operating system for all platforms: mobile, tablets, desktops, watches, refrigerators .



    Moreover, they are starting to move towards the unification of platforms now. If you open Visual Studio 2013 Update 1, then in the development section for the Windows Store you can see the relatively new menu item "Universal Applications". Now Microsoft is pouring active advertising of these “universal applications” into IT ears, and I succumbed to this advertisement. But the first question I asked myself was: “Why only applications? And not write me a universal game in C # and XAML. ” If it became interesting what came of it, click "Read more."

    I must say right away that I have nothing to do with Microsoft, and I do C # and XAML programming in my free time. So, let's begin.

    INSTRUMENTS

    In order to be able to write such universal applications, I need Visual Studio 2013 min c Update 1. I don’t know about the younger versions. Also say that he mastered programming under the Win8 platform by typing + according to the book by Charles Petzold "Programming for Windows 8".

    IDEA

    Of course, the easiest option was to write another “Flappy Bird”, but even me was already sick of it. The idea came about by itself. My wife and I, when we lived on the outskirts of Minsk and went to work, we had half an hour of free time that we killed together in various mobile games. At first everyone had their own games, but then we just got infected with one game for two. This game consisted of several mini-games, such as “Algebraic expressions”, “Flags of countries”, “5 different pictures”, etc., and the one who quickly and correctly clicks his button won. We also played on my old Android-e, and so enthusiastically that we often even drove through our station. Then they both got windshields, and were imbued with great love for them. But rummaging around the local market, there was disappointment - there simply weren’t such games for this platform, and those that they were a miserable parody. Therefore, I suddenly really wanted to write such a game under Windows Phone.

    GOALS

    There were several goals:
    1. I really wanted to play a reaction game with my wife for two again, but already under Windows Phone.
    2. I wanted to write the code so that while reading it a tear of emotion flowed, it would meet the requirements of the MVVM pattern, because in the process I was very inspired by the idea of ​​separating the model code from the code of the fuse.
    3. For a long time I wanted to write something that, even if it will not be great, but pleasant and what you will play on your own. My development experience is limited to work in large companies (accounting systems at retail facilities, ERP systems, banking software). And there, respectively, the finished product is not the result of enthusiasm, but the equations in which the terms are “TK” and “deadline”.

    DEVELOPMENT

    When developing a model, you can immediately divide two main classes: Players and Mini-games. Players can be from two to infinity, but given the size of the screen - limited to six, three on each side. Mini-games can also be different, with a different number of tasks. All this stuff is in the management class "Game". For the mini-game, a parent class with basic functionality was made. It has changed many times, and as a positive result of these changes, some of the ancestors of the tasks began to occupy from one hundred to less than twenty lines of code. The following mini-games were implemented:
    • Sudden picture
    • Six different pictures
    • Arithmetic
    • Color and name
    • Countdown
    • Country flag
    • Capital of the country and others (10 different mini-games)
    There were no problems with the encoding of the model, but the development of the view frankly upset ... My expectations about “everything is just like in WPF” were already broken down on an elementary one: when I wanted to make a pseudo-click player button, I could not find the radial gradient, which is in WPF. At first I thought that it was VS designer’s limitations, but when I opened Blend (you never know) I realized that it wasn’t anywhere, I had to be content with the linear one:



    Although such trifles were found, each of them either had a tambourine or had to go to the detriment of the functionality.
    Despite the chronic lack of free time, the result loomed fairly quickly. In just a couple of weeks, I already tested the game for desktop (Windows 8) and enjoyed life. Why did I test only on the desktop? Yes, because I could not understand what the XAML code parsing error could be for the Windows Phone platform:



    With one hand removing the XAML markup in parts, I read the Internet with my second eye and found out the following: creating panels is Windows RT code, but for universal applications you need to create But already, this code was automatically created for me by the Visual Studio 2013 editor itself! Moreover, he still does this, and even with update 3 the situation has not changed. After everything I read in this article, habrahabr.ru/company/microsoft/blog/218441 suggestion:

    <Page.BottomAppBar>
    <AppBar />
    </Page.BottomAppBar>




    <Page.BottomAppBar>
    <CommandBar />
    </Page.BottomAppBar>



    “... the XAML markup language has also been unified across platforms.”
    I was already aware of it not only with joy (after all, it has become almost the way they are written), but also with some annoyance: it is a pity Visual Studio does not know about it yet.
    As for the generic code - it's really generic! In my case, everything was general from the model to the view (everything except resource files specifying sizes for a specific platform).
    And now it was up to the implementation of platform chips, such as integration into a miracle panel or support for a fixed page view.
    To make it convenient for the user to perceive the application both on the desktop and on the phone, he made a similar miracle panel on the phone. It looks like this:



    And I got carried away with the general code so much that even the menu did not just hardcode for each platform, but formed from a general list of objects (menu items). But these menu items were already pushed under the directives, each for its own platform, in its own menu. In Windows RT, this is a miracle panel (under the directive #if WINDOWS_APP), and in Windows Phone it is the usual menu attached to the side (directive #if WINDOWS_PHONE_APP), which in Windows RT version was Visible = false.
    I’ll add a little that the miracle panel turned out to be a convenient thing, but I got used to it for a long time and chronically in all applications I searched for the settings menu using some button located in the interface.
    To navigate the pages, use the corresponding visual button with the left arrow (<-). Where this arrow is not (for example, during the game) I used hardkey buttons. On the desktop, the KeyPressed (Esc) event is processed, but on the phone, if you press the hardkey back, the application collapses and the user finds himself in the main tiled menu. All event handling for version 8 did not help, in 8.1. I accidentally stumbled upon an event that really started to be triggered when the hardkey button was pressed back: For the desktop, it was necessary to solve the issue with the fixed mode, and again, if earlier in version 8 there were only three options for placing the window: • the application is deployed to full screen (Full Screen );

    using Windows.Phone.UI.Input;

    HardwareButtons.BackPressed += HardwareButtons_BackPressed;




    • the application is docked to the side of the screen (left or right) (Snapped). The width of the application in this mode is 320 pixels;
    • the application works in conjunction with another application fixed to the side and takes up all the remaining space (Filled)
    In 8.1, the window no longer clung to these options, and the window size could be changed in some locations pixel by pixel. Ideally, for each of the modes, you need to create your own View, with a changed arrangement of elements, font size, etc. I chose another option - relative coordinates. Those. for example, the field with tasks takes 2/3 of the screen length (no matter how many pixels it is), but I stuffed all the components with text into the Parent-object of the ViewBox. This object automatically scales everything that is inside it, including reducing the font size depending on its size, for all Childs. The result looks like this:



    And a few words about animation: you really want everything to leave and unfold beautifully, just like in the operating system itself. With a standard animation was no problem, it is easy to add and hide, but the realization of their own animations via the Storyboard gave the following effect:



    That is, images in the process of animation are compressed so that, to put it mildly, it looks scary. And it doesn’t matter what the object was, the result is the same for both TextBlock and Image. As far as I can guess, the object before the animation is compressed sooo much so that everything looks smooth in the process. Unfortunately, I did not find a way out of this situation, so I left everything as it is. In addition, after the animation ends, the object again acquires its original resolution.
    As a result, I drew about a dozen icons of different monsters (with a small “green and red Easter egg” that will especially please people living in Belarus), localized the application in French, English with the help of a friend Vasily Lapitsky (for which many thanks to him), and in Portuguese, Spanish and Hindi using Bing transliteration. By the way, I was very pleasantly surprised at how simple localization is done (there are examples in any book, so I will not focus on this).

    RESULTS

    I will write the results for the purposes:
    1. Now my wife and I have a joint time killer not only on phones, but also on a computer. Through it, we often decide who goes to the store or prepares to eat.
    2. In general, despite some little things, I really liked developing under the Windows 8.1 platform, but it was under 8.1, not 8! Although this article was slightly accentuated by Microsoft’s existing flaws, in general, the ease of development often caused me simple programming joy. In a universal project, 98% of the total code was obtained, and only 2% of the code enclosed in the directives - this result surprised me very much, and I didn’t expect anything like that when I just started writing the “universal game”.

    You cannot convey the enthusiasm that I experience every time I come home from work and change Borland Builder 6.0 to VS2013, I see my code and am proud of it! And even though I understand that there is no limit to the perfection of the code, and that after a while I might again want to rewrite or improve something. And let my colleagues and I build huge code skyscrapers at work during the day, in the evening at DOM I built my code bungalow, which is small, but it's so nice to be in it every time. And how nice it is to get a phone, play with a friend, immediately get a fitback from him, and then say "yes, I wrote it."

    INSTEAD OF A THOUSAND WORDS

    It was a good experience, and now in my free time I have to develop another game, but now at Unity.
    As for this game, “Red Reactor”, it is already available both in the Windows Store and in the Windows Phone Store . I will not give direct links, so as not to be considered advertising.
    It turned out the way I wanted: interesting and fun. We periodically organize tournaments with friends, both in some types of mini-games, and in all. By the way, the game will be very useful for children, as it develops not only reaction and attentiveness, but also arithmetic + a lot of geography.

    The game is absolutely free and without internal advertising, because I really program in the evenings for the soul, and not for the money.

    Also popular now: