Three of the holes at Scratch Mania
Hello!
Recently we published a game Scratch Mania for the platform Windows Phone, on the approach of Android. Here I will tell you about where you've gone since the last publications about the Kinect and about how enterprise developers to write games.
We planned this game as the theme of the hackathon for the weekend: to meet someone, to write a basis – a working prototype, and then for a month, another to bring to a state suitable for publication. And actually spent a year. More than a year, Carl! In fairness, I note that the work was done usually in the evenings, in my spare time. Now it's time to look at key technical solutions.
If you make a ranking of the most popular issues from people who I tell about the game – this issue in the first place: “Gee, Windows Phone? Seriously?..” Even the label "Sarcasm" is not needed. Nevertheless, we chose this platform because we know C#. And Java is also C-derived language, so I decided for the Android version of gash, she's the only one in a semi-ready condition yet. In the end the choice came down to a decision whether to use "stylish, fashionable, youth" or Xamarin to write native applications. Alas, Xamarin lost. Mainly because of the mixed reviews from colleagues and the Internet community. I did not want to spend a lot of time fighting with the framework. And besides the price was biting — about $20 per month for individual developers.
Java .NET was not the only candidates, were considered as exotic options as, for example, javascript. But he is too slow. By the way, the prototypes we used for game site, do not disappear as good.
As for versions of Windows Phone and Android, for simplicity, decided to stay at a WP 8+ and Android API 11+, respectively. And here I'm mainly going to talk about Windows Phone, because the Android is too early to say.
On the prototypes we spent about two weeks, instead of two weekends as originally planned. Started with javascript. The idea is simple: add a canvas to the page in it, draw a picture. Create another canvas without adding it to the DOM. In it, draw another picture, and the sizes of canvas's the same. In the OnMouseMove event handler of the copied region N×N pixels from one canvas'another. It turns out, something like:
But this is no surprise, therefore, next prototype we wrote on the Windows Forms a the algorithm of the Erasure was made by analogy with the airbrush tool from the graphical editors. In this prototype two images superimposed on each other, and at the top, in the touch area, change the alpha value. I'm sure the javascript gurus could write something like that, but among us such is not found.
Code of prototype is almost no change was moved to smartphones. It turned out that features of Windows Phone and Android work differently with alpha channel. In Windows Phone channel premultiplication (premultiplied), whereas in Android no. This means that any alpha value does not affect the three color components (RGB) of a pixel, while on Windows Phone they are subject to change according to the formula:
the
The images presented in this format, it is easier to impose on each other, as this case, the operation of calculating the pixel value actually is reduced to the addition of the components of the pixels, for example, Rres ~ R1 + R2. Details can be found in the book Programming Windows (6th edition) by Charles Petzold (amazon).
But the trouble does not come alone. Event Touch.FrameReported (onTouchEvent in Android) is very slow on both platforms. For example, if we subscribe to this event to its handler, to calculate a new value for alpha channel at the point of tangency, we get about 20 FPS. It is very small, because the delay will be visible to the naked eye. Android is deferred and decided to fix closer to release. In Windows Phone the problem was solved by using a background thread, which is about once every 25ms pings the screen gets a point (usually several) touch (if any) and computes the alpha value. This allows you to keep 30-40 FPS.
In addition, we must remember that in Windows Phone there is no invalidation of the image — after any changes, you need to upgrade the whole picture. It also imposes additional restrictions on the processing of touches: the more pixels will be processed, the better. On the other hand, you can not handle too many points because there are visible jerks.
Beautiful Erasure – the first "killer feature", the second album pictures. Realizing that such an important code requires an appropriate attitude, to design approached seriously. To stratify system from nizkourovnevoj parser separate albums, to high-level Manager of installed albums and albums available for download.
Here we made a blunder, that can be described as “enterprise brain”. Just look at the class diagram.
At first glance, not so scary, but in the diagram, much simplified: not specified some types, code contracts for all interfaces, classes, helpers, etc. This family several times been refactored, rewritten and in the end almost all the interfaces and factories were removed.
Attempt to create an ideal architecture can be called: a textbook classic, but not instructive for us, because if the right conclusions were made on time, the game would have been finished six months ago.
It's almost all we managed to do in 4 months. The frame was ready: it was possible to switch between preset albums to guess the picture in two modes (the letters and choosing from the options), browse the guess pictures. But still had to draw UI, implement scoring, download albums, integration with social networks – “tell a friend”, add google analytics and in-app purchases.
The server part of the game we have deployed in Microsoft Azure. The original image and the finished albums are stored in Blob Storage. To store metadata of albums such as identity, physical location (BLOB), availability in the game, etc. uses SQL Azure. Working with these components hides RESTful service. Now it is main stream, so we decided to keep.
In fact our service is a set of 3 methods: get list of albums to obtain detailed information about the album, download the album.
For download album the service generates a link with a limited life time. Azure provides a ready mechanism — Shared Access Signatures. The essence of the procedure is this: in the URL is the validity period, the URL is signed with the private key. Thus, there is no any change in the URL. The date can not be specified enough to create an access policy for a container and the URL to invoke this policy. However, this option is less convenient in the case of short-lived references (for each new period it is necessary to create a new policy).
The harsh truth of life – the player anyway, what's hidden inside the game and how many man-hours spent on it to spend with pleasure your few minutes. It is therefore important to build a comfortable and intuitive interface. We decided to try to draw all on their own. Although, maybe I should look for a professional artist and cost of his work would pay off your free time.
The sketching took about a month. As an editor was selected, Expression Design, simply because: a) he was with us, b) it is convenient to use and b) files can be easily exported to XAML or PNG. So later almost all of the styles and icons turned to move without changes in the game.
Another important element of the game that affect the General perception is of images that the player will guess. We tried to find an interesting and quality, as well as a free license. On each album we have about 20-30 pictures. To simplify your life, decided that the images should be of the same size. Side effect such assumptions have an additional effort when creating the album, every picture must be resized. What if the resolution that we have decided to use today, will change tomorrow?
We need to re-edit all the pictures. So we came to the idea of creating designer albums. Make it a complete control system. The designer allows you not only to edit and create albums for different languages (they are now available in 2 languages: English and Russian), but also to publish them, i.e. to make available in the game.
On advertising games, we spent about 3500 p. this includes advertising on Facebook, Bing and the Windows Store. As practice is in Reddit, it is like buying snow in the winter: $20 – 0 plants.
But it works the publication of news groups devoted to mobile gaming in social networks. The easiest way is to find a group dedicated to games, windows phone, etc. and to contact the administrator with a request to publish the advertisement. Now we continue to work in this direction, mainly looking for contacts of people willing to publish a game review. While the meeting went only the guys from 1800 Pocket/PC, and published a review.
Android version because the release is not yet very actively developed. It is a goal for the near future. Will there be a version for iOS? It is not yet clear and depends largely on the success of games for Windows Phone and Android.
PS So what enterprise developers to write games? Instructive. No matter whether you are designing highly complex systems automatizalasi business processes or writing your online store – keep it simple. All. Corny... :)
Article based on information from habrahabr.ru
Recently we published a game Scratch Mania for the platform Windows Phone, on the approach of Android. Here I will tell you about where you've gone since the last publications about the Kinect and about how enterprise developers to write games.
About the game
Mania Scratch game the player is invited to guess the picture, hidden by the protective layer. The protective layer is erased by a simple touch of the screen. And the player may erase only a portion of the protective layer, it adds interest and at the same time, additional complexity. Pictures are United in albums by themes: sports, cars, actors, cities, etc. For each picture, guess the player gets in-game coins that can be exchanged for new albums.
We planned this game as the theme of the hackathon for the weekend: to meet someone, to write a basis – a working prototype, and then for a month, another to bring to a state suitable for publication. And actually spent a year. More than a year, Carl! In fairness, I note that the work was done usually in the evenings, in my spare time. Now it's time to look at key technical solutions.
measure twice
If you make a ranking of the most popular issues from people who I tell about the game – this issue in the first place: “Gee, Windows Phone? Seriously?..” Even the label "Sarcasm" is not needed. Nevertheless, we chose this platform because we know C#. And Java is also C-derived language, so I decided for the Android version of gash, she's the only one in a semi-ready condition yet. In the end the choice came down to a decision whether to use "stylish, fashionable, youth" or Xamarin to write native applications. Alas, Xamarin lost. Mainly because of the mixed reviews from colleagues and the Internet community. I did not want to spend a lot of time fighting with the framework. And besides the price was biting — about $20 per month for individual developers.
Java .NET was not the only candidates, were considered as exotic options as, for example, javascript. But he is too slow. By the way, the prototypes we used for game site, do not disappear as good.
As for versions of Windows Phone and Android, for simplicity, decided to stay at a WP 8+ and Android API 11+, respectively. And here I'm mainly going to talk about Windows Phone, because the Android is too early to say.
the beginning
On the prototypes we spent about two weeks, instead of two weekends as originally planned. Started with javascript. The idea is simple: add a canvas to the page in it, draw a picture. Create another canvas without adding it to the DOM. In it, draw another picture, and the sizes of canvas's the same. In the OnMouseMove event handler of the copied region N×N pixels from one canvas'another. It turns out, something like:
But this is no surprise, therefore, next prototype we wrote on the Windows Forms a the algorithm of the Erasure was made by analogy with the airbrush tool from the graphical editors. In this prototype two images superimposed on each other, and at the top, in the touch area, change the alpha value. I'm sure the javascript gurus could write something like that, but among us such is not found.
Code of prototype is almost no change was moved to smartphones. It turned out that features of Windows Phone and Android work differently with alpha channel. In Windows Phone channel premultiplication (premultiplied), whereas in Android no. This means that any alpha value does not affect the three color components (RGB) of a pixel, while on Windows Phone they are subject to change according to the formula:
the
A = alpha
R = red × alpha / 255
G = green × alpha / 255
B = blue × alpha / 255
The images presented in this format, it is easier to impose on each other, as this case, the operation of calculating the pixel value actually is reduced to the addition of the components of the pixels, for example, Rres ~ R1 + R2. Details can be found in the book Programming Windows (6th edition) by Charles Petzold (amazon).
But the trouble does not come alone. Event Touch.FrameReported (onTouchEvent in Android) is very slow on both platforms. For example, if we subscribe to this event to its handler, to calculate a new value for alpha channel at the point of tangency, we get about 20 FPS. It is very small, because the delay will be visible to the naked eye. Android is deferred and decided to fix closer to release. In Windows Phone the problem was solved by using a background thread, which is about once every 25ms pings the screen gets a point (usually several) touch (if any) and computes the alpha value. This allows you to keep 30-40 FPS.
In addition, we must remember that in Windows Phone there is no invalidation of the image — after any changes, you need to upgrade the whole picture. It also imposes additional restrictions on the processing of touches: the more pixels will be processed, the better. On the other hand, you can not handle too many points because there are visible jerks.
improvement
Beautiful Erasure – the first "killer feature", the second album pictures. Realizing that such an important code requires an appropriate attitude, to design approached seriously. To stratify system from nizkourovnevoj parser separate albums, to high-level Manager of installed albums and albums available for download.
albums
In the game are pre-installed 3 albums with pictures, the rest of the albums stored on our server. This allows the player to decide which albums he is interested in and download them, and allows us to simplify the process of making new albums, the player will see them marked as "new" in album list.
Here we made a blunder, that can be described as “enterprise brain”. Just look at the class diagram.
At first glance, not so scary, but in the diagram, much simplified: not specified some types, code contracts for all interfaces, classes, helpers, etc. This family several times been refactored, rewritten and in the end almost all the interfaces and factories were removed.
learn from mistakes
Attempt to create an ideal architecture can be called: a textbook classic, but not instructive for us, because if the right conclusions were made on time, the game would have been finished six months ago.
It's almost all we managed to do in 4 months. The frame was ready: it was possible to switch between preset albums to guess the picture in two modes (the letters and choosing from the options), browse the guess pictures. But still had to draw UI, implement scoring, download albums, integration with social networks – “tell a friend”, add google analytics and in-app purchases.
"azhure"
The server part of the game we have deployed in Microsoft Azure. The original image and the finished albums are stored in Blob Storage. To store metadata of albums such as identity, physical location (BLOB), availability in the game, etc. uses SQL Azure. Working with these components hides RESTful service. Now it is main stream, so we decided to keep.
In fact our service is a set of 3 methods: get list of albums to obtain detailed information about the album, download the album.
For download album the service generates a link with a limited life time. Azure provides a ready mechanism — Shared Access Signatures. The essence of the procedure is this: in the URL is the validity period, the URL is signed with the private key. Thus, there is no any change in the URL. The date can not be specified enough to create an access policy for a container and the URL to invoke this policy. However, this option is less convenient in the case of short-lived references (for each new period it is necessary to create a new policy).
Singapore
The harsh truth of life – the player anyway, what's hidden inside the game and how many man-hours spent on it to spend with pleasure your few minutes. It is therefore important to build a comfortable and intuitive interface. We decided to try to draw all on their own. Although, maybe I should look for a professional artist and cost of his work would pay off your free time.
The sketching took about a month. As an editor was selected, Expression Design, simply because: a) he was with us, b) it is convenient to use and b) files can be easily exported to XAML or PNG. So later almost all of the styles and icons turned to move without changes in the game.
Design to PNG
When you have to export a large number of files in Expression Design PNG or JPEG, without automation, the process can be tedious. I wrote a small Converter using Expression Design API (it's not documented API, obtained by examining assemblies, one popular "reflector").
We need two builds:
%ProgramFiles%\Microsoft Expression\Design 4\GraphicsCore.dll
%ProgramFiles%\Microsoft Expression\Design 4\Microsoft.Expression.Design.dll
And this code:
the
We need two builds:
%ProgramFiles%\Microsoft Expression\Design 4\GraphicsCore.dll
%ProgramFiles%\Microsoft Expression\Design 4\Microsoft.Expression.Design.dll
And this code:
the
const string from = @"..."; // path to *.design file
const string to = @"..."; // path to the output *.png file
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 important element of the game that affect the General perception is of images that the player will guess. We tried to find an interesting and quality, as well as a free license. On each album we have about 20-30 pictures. To simplify your life, decided that the images should be of the same size. Side effect such assumptions have an additional effort when creating the album, every picture must be resized. What if the resolution that we have decided to use today, will change tomorrow?
We need to re-edit all the pictures. So we came to the idea of creating designer albums. Make it a complete control system. The designer allows you not only to edit and create albums for different languages (they are now available in 2 languages: English and Russian), but also to publish them, i.e. to make available in the game.
as you sow, so shall you reap
On advertising games, we spent about 3500 p. this includes advertising on Facebook, Bing and the Windows Store. As practice is in Reddit, it is like buying snow in the winter: $20 – 0 plants.
But it works the publication of news groups devoted to mobile gaming in social networks. The easiest way is to find a group dedicated to games, windows phone, etc. and to contact the administrator with a request to publish the advertisement. Now we continue to work in this direction, mainly looking for contacts of people willing to publish a game review. While the meeting went only the guys from 1800 Pocket/PC, and published a review.
Android version because the release is not yet very actively developed. It is a goal for the near future. Will there be a version for iOS? It is not yet clear and depends largely on the success of games for Windows Phone and Android.
PS So what enterprise developers to write games? Instructive. No matter whether you are designing highly complex systems automatizalasi business processes or writing your online store – keep it simple. All. Corny... :)
Комментарии
Отправить комментарий