Three holes in Scratch Mania
Hello!
Recently, my friends and I published the game Scratch Mania for the Windows Phone platform, on the approach of Android. Here I will tell you about where you’ve been missing since the last posts about Kinect and how an enterprise developer is writing games.
We conceived this game as a hackathon theme for the weekend: get together from someone, write a basis - a working prototype, and then bring it to a state suitable for publication in a month. And actually spent a great year. More than a year, Karl! In fairness, I note that the work was done as a rule in the evenings, in free time. Now is the time to look at the key technical solutions.
')
If you make a rating of the most popular questions from people I tell about the game, this question comes first: “Gee, Windows Phone? Seriously? .. ”Even the Sarcasm sign is not needed. Nevertheless, we chose this platform because we know C #. And Java is also a C-derived language, so we decided to skip the version for Android, only it is in a semi-ready state for now. As a result, the choice was reduced to the decision whether to use “stylish, trendy, youth” Xamarin or to write native applications. Alas, but Xamarin lost. Mainly due to mixed reviews from colleagues and the online community. I really did not want to spend a lot of time fighting the framework. And besides, the price turned out to be biting - about $ 20 per month for individual developers.
Java and .NET were not the only contenders, they also considered exotic options, such as javascript. But he is too slow. By the way, we later used prototypes for the site of the game , but do not lose the good.
As for the versions of Windows Phone and Android, for simplicity, they decided to stop at WP 8+ and Android API 11+, respectively. And here I will mainly talk about Windows Phone, because it's too early to talk about Android.
We spent about two weeks on prototypes, instead of two days off, as originally planned. Started with javascript. The idea is simple: add canvas to the page, draw a picture in it. Create another canvas, without adding to the DOM. In it we draw another map, while the dimensions of the canvas are the same. In the OnMouseMove event handler, copy the N × N area of ​​pixels from one canvas to another. It turns out, something like:
But this will not surprise anyone, so we wrote the following prototype on Windows Forms, and the erasure algorithm itself was made by analogy with the airbrush tool from graphic editors. In this prototype, two images superimposed on each other and at the top, in the touch zone, the value of the alpha channel changed. I'm sure javascript guru could write something similar, but this was not found among us.
The code from the prototype was practically unchanged on smartphones. It turned out that the components of Windows Phone and Android work differently with the alpha channel. In Windows Phone, the channel is premultiplied, whereas in Android it is not. This means that on Android, the alpha channel value does not affect the color components (RGB) of a pixel, whereas on Windows Phone they are modified according to the formulas:
Images presented in this format are easier to overlap, since in this case the operation of calculating the pixel value actually reduces to the addition of the pixel components, for example, Rres ~ R1 + R2. Details can be found in the book Programming Windows (6th edition) by Charles Petzold ( amazon ).
But trouble does not come alone. The Touch.FrameReported event (onTouchEvent in Android) is very slow on both platforms. Let's say if we subscribe to this event in order to calculate a new value for the alpha channel at the touch point in its handler, then we get an FPS of about 20. This is very small, because delays become visible to the naked eye. The Android has so far postponed and decided to fix it closer to the release. In Windows Phone, the problem was solved using a background stream, which queries the screen about once every 25ms, gets points (there are usually several) touches (if any) and calculates the value of the alpha channel. This allows you to keep the FPS level 30-40.
In addition, you need to remember that in Windows Phone there is no invalidation of the part of the image - after any changes, you need to update the whole picture. This also imposes additional restrictions on touch handling: the more points that are processed at a time, the better. On the other hand, one cannot process too many points, since jerks will be noticeable.
Beautiful erasure is the first killer feature, the second is picture albums. Understanding that such an important code requires an appropriate attitude to itself, they took the design seriously. They stratified the system - from the low-level parser of individual albums to the high-level manager of installed albums and albums available for download.
Here we made a blunder that can be described as the “Enterprise of the brain”. Just look at the class diagram.
At first glance, not everything is so scary, but much is simplified in the diagram: some types are not indicated, code contracts for all interfaces, helper classes, etc. This family was refactored several times, corresponded and in the end almost all interfaces and factories were removed.
An attempt to create an ideal architecture can be called: a textbook, classical, but not instructive for us, because if the correct conclusions were made on time, the game would have been ready six months ago.
This is almost all that we managed to do in 4 months. The skeleton was ready: it was possible to switch between pre-installed albums, guess pictures in two modes (by letter and select from the options), view already guessed pictures. But there was still more to do: draw a UI, implement scoring, download albums, integrate with social networks - “tell friends”, add google analytics and in-game purchases.
We deployed the server part of the game in Microsoft Azure. Original pictures and finished albums are stored in Blob Storage. For storing album metadata such as ID, physical location (in Blob), in-game availability, etc. Azure SQL is used. Working with these components is hidden by the RESTful service. Now this is the main stream, so we decided to keep up.
In fact, our service is a set of 3 methods: get a list of albums, get detailed information about the album, download the album.
To download an album, the service generates a link with a limited lifetime. Azure provides a ready-made mechanism - Shared Access Signatures. The essence of the procedure is as follows: the validity period is stitched in the URL, then the URL is signed with a private key. This eliminates any URL changes. The date can be not specified - it is enough to create an access policy for the container, and refer to this policy in the URL. However, this option is less convenient in the case of short-lived links (for each new period, you must create a new policy).
The harsh truth of life - the player doesn’t care what is inside the game and how many man-hours it takes to spend his few minutes with pleasure. Therefore, it is important to build a user-friendly interface. We decided to try painting everything on our own. Although, perhaps, it would be worthwhile to look for a professional artist and the costs of his work would have paid off with the free time.
It took us about a month to draw sketches. Expression Design was chosen as an editor, simply because: a) we had it, b) it is convenient to use it, and c) its files are easily exported to XAML or PNG. Therefore, later almost all the styles and icons turned out to be transferred without changes to the game.
Another, no less important element of the game, affecting the overall perception - these are pictures that the player will guess. We tried to select interesting and high-quality, as well as with a free license. Each album has about 20-30 pictures. To simplify your life, we decided that the pictures should be the same size. A side effect of such an assumption was the extra effort when creating an album; each picture needs to be adjusted in size. And what if the resolution we decided to use today will change tomorrow?
It turns out you need to re-edit all the pictures. So we came up with the idea of ​​creating an album designer. The result was a complete management system. The designer allows you not only to create and edit albums for different languages ​​(they are now available in 2 languages: English and Russian), but also to publish them, i.e. make available in the game.
We spent about 3,500 rubles on advertising the game. This includes advertising on VKontakte, Bing and Windows Store. As practice has shown, advertising in Reddit is the same as buying snow in the winter: $ 20 - 0 installations.
But the publication of news in groups dedicated to mobile games in social networks. The easiest way is to find groups dedicated to games, windows phone, etc. and contact the administrator with a request to publish an advertisement. Now we continue to work in this direction, mainly looking for contacts of people who are ready to publish a review of the game. So far, only guys from 1800 Pocket / PC went to the meeting and published a review.
The version for Android due to the release is not yet being actively developed. This is a goal for the near future. Will there be an iOS version? It is not yet clear and largely depends on the success of the game for Windows Phone and Android.
PS So what is the enterprise developer writing games? Instructive. It does not matter whether you design complex high-load systems, automate business processes, or write your online store - keep it simple. Everything. Trite ... :)
Recently, my friends and I published the game Scratch Mania for the Windows Phone platform, on the approach of Android. Here I will tell you about where you’ve been missing since the last posts about Kinect and how an enterprise developer is writing games.
About the game
In the game Scratch Mania, the player is asked to guess a picture hidden by a protective layer. The protective layer is erased by simple touches of the screen. Moreover, the player can erase only part of the protective layer, this gives interest and, at the same time, additional complexity. Pictures are grouped into albums by subject: sports, cars, actors, cities, etc. For each guessed picture, the player receives in-game coins, which he can exchange for new albums.
We conceived this game as a hackathon theme for the weekend: get together from someone, write a basis - a working prototype, and then bring it to a state suitable for publication in a month. And actually spent a great year. More than a year, Karl! In fairness, I note that the work was done as a rule in the evenings, in free time. Now is the time to look at the key technical solutions.
')
Measure seven times
If you make a rating of the most popular questions from people I tell about the game, this question comes first: “Gee, Windows Phone? Seriously? .. ”Even the Sarcasm sign is not needed. Nevertheless, we chose this platform because we know C #. And Java is also a C-derived language, so we decided to skip the version for Android, only it is in a semi-ready state for now. As a result, the choice was reduced to the decision whether to use “stylish, trendy, youth” Xamarin or to write native applications. Alas, but Xamarin lost. Mainly due to mixed reviews from colleagues and the online community. I really did not want to spend a lot of time fighting the framework. And besides, the price turned out to be biting - about $ 20 per month for individual developers.
Java and .NET were not the only contenders, they also considered exotic options, such as javascript. But he is too slow. By the way, we later used prototypes for the site of the game , but do not lose the good.
As for the versions of Windows Phone and Android, for simplicity, they decided to stop at WP 8+ and Android API 11+, respectively. And here I will mainly talk about Windows Phone, because it's too early to talk about Android.
Down and Out trouble started
We spent about two weeks on prototypes, instead of two days off, as originally planned. Started with javascript. The idea is simple: add canvas to the page, draw a picture in it. Create another canvas, without adding to the DOM. In it we draw another map, while the dimensions of the canvas are the same. In the OnMouseMove event handler, copy the N × N area of ​​pixels from one canvas to another. It turns out, something like:
But this will not surprise anyone, so we wrote the following prototype on Windows Forms, and the erasure algorithm itself was made by analogy with the airbrush tool from graphic editors. In this prototype, two images superimposed on each other and at the top, in the touch zone, the value of the alpha channel changed. I'm sure javascript guru could write something similar, but this was not found among us.
The code from the prototype was practically unchanged on smartphones. It turned out that the components of Windows Phone and Android work differently with the alpha channel. In Windows Phone, the channel is premultiplied, whereas in Android it is not. This means that on Android, the alpha channel value does not affect the color components (RGB) of a pixel, whereas on Windows Phone they are modified according to the formulas:
A = alpha R = red Ă— alpha / 255 G = green Ă— alpha / 255 B = blue Ă— alpha / 255 Images presented in this format are easier to overlap, since in this case the operation of calculating the pixel value actually reduces to the addition of the pixel components, for example, Rres ~ R1 + R2. Details can be found in the book Programming Windows (6th edition) by Charles Petzold ( amazon ).
But trouble does not come alone. The Touch.FrameReported event (onTouchEvent in Android) is very slow on both platforms. Let's say if we subscribe to this event in order to calculate a new value for the alpha channel at the touch point in its handler, then we get an FPS of about 20. This is very small, because delays become visible to the naked eye. The Android has so far postponed and decided to fix it closer to the release. In Windows Phone, the problem was solved using a background stream, which queries the screen about once every 25ms, gets points (there are usually several) touches (if any) and calculates the value of the alpha channel. This allows you to keep the FPS level 30-40.
In addition, you need to remember that in Windows Phone there is no invalidation of the part of the image - after any changes, you need to update the whole picture. This also imposes additional restrictions on touch handling: the more points that are processed at a time, the better. On the other hand, one cannot process too many points, since jerks will be noticeable.
There is no limit to perfection
Beautiful erasure is the first killer feature, the second is picture albums. Understanding that such an important code requires an appropriate attitude to itself, they took the design seriously. They stratified the system - from the low-level parser of individual albums to the high-level manager of installed albums and albums available for download.
About albums
The game was originally pre-installed 3 albums with pictures, the other albums are stored on our server. This allows the player to decide which albums are interesting for him and download them, and allows us to simplify the process of distributing new albums - the player will see them marked “new” in the album list.
Here we made a blunder that can be described as the “Enterprise of the brain”. Just look at the class diagram.
At first glance, not everything is so scary, but much is simplified in the diagram: some types are not indicated, code contracts for all interfaces, helper classes, etc. This family was refactored several times, corresponded and in the end almost all interfaces and factories were removed.
Learn from mistakes
An attempt to create an ideal architecture can be called: a textbook, classical, but not instructive for us, because if the correct conclusions were made on time, the game would have been ready six months ago.
This is almost all that we managed to do in 4 months. The skeleton was ready: it was possible to switch between pre-installed albums, guess pictures in two modes (by letter and select from the options), view already guessed pictures. But there was still more to do: draw a UI, implement scoring, download albums, integrate with social networks - “tell friends”, add google analytics and in-game purchases.
All in "openwork"
We deployed the server part of the game in Microsoft Azure. Original pictures and finished albums are stored in Blob Storage. For storing album metadata such as ID, physical location (in Blob), in-game availability, etc. Azure SQL is used. Working with these components is hidden by the RESTful service. Now this is the main stream, so we decided to keep up.
In fact, our service is a set of 3 methods: get a list of albums, get detailed information about the album, download the album.
To download an album, the service generates a link with a limited lifetime. Azure provides a ready-made mechanism - Shared Access Signatures. The essence of the procedure is as follows: the validity period is stitched in the URL, then the URL is signed with a private key. This eliminates any URL changes. The date can be not specified - it is enough to create an access policy for the container, and refer to this policy in the URL. However, this option is less convenient in the case of short-lived links (for each new period, you must create a new policy).
Meet on clothes
The harsh truth of life - the player doesn’t care what is inside the game and how many man-hours it takes to spend his few minutes with pleasure. Therefore, it is important to build a user-friendly interface. We decided to try painting everything on our own. Although, perhaps, it would be worthwhile to look for a professional artist and the costs of his work would have paid off with the free time.
It took us about a month to draw sketches. Expression Design was chosen as an editor, simply because: a) we had it, b) it is convenient to use it, and c) its files are easily exported to XAML or PNG. Therefore, later almost all the styles and icons turned out to be transferred without changes to the game.
Design to PNG
When you have to export a large number of Expression Design files to PNG or JPEG, the process can be tedious without automation. I wrote a small converter using the Expression Design API (this is not a documented API, obtained by examining the assemblies with one popular "reflector").
We will need two assemblies:
% ProgramFiles% \ Microsoft Expression \ Design 4 \ GraphicsCore.dll
% ProgramFiles% \ Microsoft Expression \ Design 4 \ Microsoft.Expression.Design.dll
And this code:
We will need two assemblies:
% ProgramFiles% \ Microsoft Expression \ Design 4 \ GraphicsCore.dll
% ProgramFiles% \ Microsoft Expression \ Design 4 \ Microsoft.Expression.Design.dll
And this code:
const string from = @"..."; // *.design const string to = @"..."; // *.png Module.Instance.Initialize(); var doc = Module.Instance.OpenDocument(from, false, null); ExportImageInfoHandler exportHandler = doc.ExportImage(to, (Enum)ImageFormat.Png); exportHandler.Info.Resolution = 96.0; exportHandler.Info.DocumentUnits = UnitType.Pixel; exportHandler.Info.ConstrainProperties = false; exportHandler.Execute(); Another, no less important element of the game, affecting the overall perception - these are pictures that the player will guess. We tried to select interesting and high-quality, as well as with a free license. Each album has about 20-30 pictures. To simplify your life, we decided that the pictures should be the same size. A side effect of such an assumption was the extra effort when creating an album; each picture needs to be adjusted in size. And what if the resolution we decided to use today will change tomorrow?
It turns out you need to re-edit all the pictures. So we came up with the idea of ​​creating an album designer. The result was a complete management system. The designer allows you not only to create and edit albums for different languages ​​(they are now available in 2 languages: English and Russian), but also to publish them, i.e. make available in the game.
What goes around comes around
We spent about 3,500 rubles on advertising the game. This includes advertising on VKontakte, Bing and Windows Store. As practice has shown, advertising in Reddit is the same as buying snow in the winter: $ 20 - 0 installations.
But the publication of news in groups dedicated to mobile games in social networks. The easiest way is to find groups dedicated to games, windows phone, etc. and contact the administrator with a request to publish an advertisement. Now we continue to work in this direction, mainly looking for contacts of people who are ready to publish a review of the game. So far, only guys from 1800 Pocket / PC went to the meeting and published a review.
The version for Android due to the release is not yet being actively developed. This is a goal for the near future. Will there be an iOS version? It is not yet clear and largely depends on the success of the game for Windows Phone and Android.
PS So what is the enterprise developer writing games? Instructive. It does not matter whether you design complex high-load systems, automate business processes, or write your online store - keep it simple. Everything. Trite ... :)
Source: https://habr.com/ru/post/268379/
All Articles