I spent in games hundreds of hours according to Steam statistics, and thousands, if you count on all platforms. But what struck me was the ratio of time in some cases. It took me 8.5 hours to complete the magnificent Bioshock Infinite, but on Sacura Clicker - 12 minutes more. There are more than forty hours on Clicker Heroes, almost as many as on Torchlight 2. The trick is that I remembered and well represented the time spent on big games. But small toys didn’t remain in my memory at all; they stole my time imperceptibly, dragging five to ten minutes apart for weeks and months.
When I realized this, I thought that it would be nice to fasten a turbine to this ballerina. That is, to make a useful timekiller - a simple game that will not steal, but invest my time for five to ten minutes. For example, in English vocabulary.
Once I bought a bunch of cards with English words and read them in a minibus on the way to the office. Then he quit the office and the habit disappeared, I forgot about the cards. I used to shake up my backpack, and when different words fell out of the upper side pocket with a fan, I realized that it was match 2! A game in which you have to make pairs (as opposed to match 3, where they take three or more).
“Make a pair” timekillers have been known for a long time - for example, the mahjong solitaire computer game (not to be confused with the classic Chinese gambling game that Sammo Hung played in Hong Kong action movies).
Mahjong from KDE GamesMahjong Solitaire has a simplified version of Mahjong Connect, where chips are laid out in a simple layout, without shaped pyramids. In Wikipedia, you can read that it is called Shisen-sy (Eng. Shisen-Sho), but if you want to google samples - the first name will be more appropriate.
I suspect that the first version was made by a programmer like me, who had no experience in programming a full-fledged mahjong with a complex layout - but the game suddenly became popular and spawned its own clone branch.
Sisen-sho from KDE Games or Mahjong Connect by peopleLook at the cards with the words and Mahjong Connect - they are great for each other - and there are pairs there. It only remains to turn each card into a pair of chips.
Design chips and gameplay
Five new words in each session and a few more repeated words from the previous ones - this is the idea that I repelled. This meant that the game should involve at least about 20 chips.
At each chip it was necessary to place at least one word with good readability. Paper cards allow you to place quite a lot of text, but chips with such proportions would be too big. In addition, I really wanted to keep the feeling “as if mahjong”, which meant that one game chip should be very compact both in form and in text. If you rotate the Mahjong knuckle by 90 degrees, you will get enough space for text.
Having modeled the game layout with such knuckles in a graphical editor (Fireworks 2003, if curious), I saw that the game looks pretty boring. Looking again at the screenshots with mahjongs, I tried to add different graphic elements to animate the picture. And then it dawned on me - you can just add one gem for each pair. Then it will work not only as an animating element, giving at least an outward resemblance to casual toys, but also as a hint.
Draft version of the playing field with different options chipsThe final version turned out like this - three gems for 10-11 pairs of words. This gave a hint with a chance of an accidental coincidence of about 25%. If you forgot the word - you can view the chips with the same words.
An additional design element that accelerates orientation is a gray flag that marks all words in one (Russian) language. The original idea was to mark one element of a pair, not a national attribute, so I did not do tricolor or something else in this spirit.
It looks almost like cheating, but I didn’t want to do an exam or a complete knowledge test. The exam is stressful, but I needed as easy and pleasant gameplay as possible so that during the game a feeling of victory and self-reliance was formed. I think this is one of the most important qualities of cult timekillers like Bejeweled or Zuma. The player goes on the optimal border between his skill and inability, enjoying and returning to the game again and again.
What about the rules - I took another step in simplification from Mahjong Connect and allowed me to make pairs of any matching chips, not just those that were unlocked. There are two reasons why this happened. The first is that I didn’t have ready-made mahjong code at hand and I tested just making pairs. The second is that I discovered that chips with words in different languages themselves complicate the gameplay and making pairs of them already creates a sense of play.
Looking ahead - if you make a full-fledged connection and mahjong with the same chips, it will actually become much easier to play. The fact is that additional restrictions on the chips will narrow the choice and the player will only be able to check all chips that are available for the gems that match the gems - and this will give a sharp increase in the probability of a match from 25% to 50 or even a hundred, depending on the layout.
But no matter how easy it is to play or cheat, the main goal in such a game will still be fulfilled - the player’s brain will constantly match a couple of words in his native and foreign language. If someone manages to make such a timekiller, then dozens of hours in it will turn into benefits for the players, no matter how they cheat. Although conscious learning is certainly always better.
Programming
For this project, I used plain JavaScript and the Phaser.io 2.10.2 game engine. What is good about HTML5-games - they allow you to quickly provide access for testing and running prototypes. I have already managed to make sure on other projects that as a means to create a cross-platform HTML5 game is not very good (noticeable drawdown on FPS on weak phones, problems of cross-browser compatibility, the need to think over bridges to the native API in some cases). But as a tool for creating web prototypes and web toys, this is a good choice.
As in the case of the
post-nuclear caravan , I began to develop a model of the game state — that is, a data class with fields that simply reflect the current progress of the player.
function GameState() { this.pairKey = "ru-en";
To save and load the game state in the browser JS, it is enough just to serialize and deserialize this model when writing and reading to the local storage - and this is how we get the progress saved on the user's computer with just a couple of lines.
Laying out chips on the field, handling mouse clicks and touchscreens in the Phaser are quite simple. It has a class Group, which allows you to automatically align all the visual objects added to it on a given grid.
However, this can only be done with regular rectangles (or grids, if you set a large step), which looks rather primitive. Therefore, I wrote my layout function, in which every second row is shifted by half chips - it turns out the layout "bricks".
But the main questions I had to solve with a dictionary.
Games with a dictionary and fonts
The first thing that catches the eye of everyone, if not already rushed - the length of the chips is not sufficient to adequately display all the words in the dictionary. You can solve this by randomly changing the font size depending on the length of the word.
Different font size for different lengths - it looks a little crazy, in my opinionBut this option seemed to me too bad, so I decided to just filter the dictionary and leave only words no longer than 9 characters in both cases (Russian and English). In my case, this was permissible because I took the frequency dictionary as the basis — that is, the words in it were sorted by frequency of use. In the first thousand words longer than 9 characters were very few, and in the first ten, that is, the most frequent, they were not at all.
The limit of 9 characters is suitable at the stage of testing the concept and for the most common words, but if you develop a prototype, sooner or later you will have to do something with it. Most likely, change the proportions of the chips or increase their size. For the German language, this will have to be done even within the framework of the first most popular hundreds of words - and I also want to test German, recall school years.
The second point is the visual coincidence of letters in English and Russian. The Russian “not” and the English uppercase he often coincide just to the pixel. Frequency vocabulary enhances this effect, because these short words are in one lesson almost at the very beginning.
Russian NOT and English HE in upper case look the sameThe gray flag helped weakly, the words were confused. After the first complaints of testers, I changed the register of the inscriptions to the usual lowercase. And then I saw the next bug - the letters began to dance, in some words floating away vertically by a pixel.
The reason was that I used one raster font for output (formed as a set of picture letters in one size), scaling it as needed. In most cases, it runs smoothly, but rounding errors occur in small letters - sometimes one pixel is eaten, which gives the effect of dancing.
Moral: bitmap font for small texts should be immediately prepared in the right size
After preparing a separate font, everyone stopped dancing and stood strictly on the baseline.
If you use Phaser or another HTML5 engine in your projects, here’s another tip: output the raster font immediately in the color that will be used in the game. Otherwise it gives an additional load on the processor, which in games with a bunch of actions and effects can lead to a strong subsidence of FPS. In addition, even in the latest mobile Chrome, on some Android tablets, the “non-native” color specified by the raster font programmatically may not be displayed at all - there will be output in default.
And, of course, the dictionary for such a game is best connected as a separate downloadable file - this will allow you to update it if typos or dubious options are noticed.
For example, my version of the dictionary, it seems, was compiled from arrays of translated texts, taking into account the context, so “what” in the first lessons translated there as “that”. It is clear that in this sense, this particle is used much more often than the question, but for learning without context it is not suitable.
My main vocabulary conclusion is that particles and other words that strongly depend on context are not suitable for learning in such pure pairs. Variants of the solution that I see is to make some kind of separate toy in particles or to create chips with longer texts. The second option looks more logical, because you cannot literate with words alone and you still need to fully learn the language with context, at least in the example of small expressions. And that means - there are still a lot of experiments ahead!
Tutorial
At first I tested the game, in which the chips were simply laid out - and it was entertaining, because the gameplay was reduced to the joyful recollection of already known expressions and it gave a feeling of easy victory, which was required. But then I realized that it would not work with a completely unfamiliar language. Therefore, we had to add the training option - before the start of the lesson the game shows the chips in the correct pairs, and then mixes them up.
Technically, this is implemented as follows - the level is initially laid out as usual, that is, in a random order. Then, if the tutorial option is enabled, a function is launched that remembers the original coordinates of the chips, adds flight animations and layouts to them in working pairs, and then returns everything to its place. Since the layout and preparation of the tutorial occurs before the start of the first update cycle (screen redrawing), the user feels that the game first displays the chips in the correct order, and then randomly mixes them.
In the Phaser engine, Group has a shuffle method that works like a shuffle of a regular array, but updates the Z-index along the way. This is a very convenient function, which will certainly come in handy for realizing full-fledged mahjong and other games, where there is at least a conditional third dimension and elements overlap each other.
The algorithm for starting the game looks simple - we take N pairs from the dictionary of pairs for a given lesson, form visual elements from them, then make a shuffle and line up into a grid - we get a pseudo-random layout.
In the tutorial, the reverse process takes place — the sort function is called on the array of chips, where the id parameter from the dictionary is the significant parameter — the chips are arranged one after the other in pairs, after which it remains to place them in two columns.
Progress
To monitor progress, I added small indicators to the start menu and an asterisk, which should appear when all levels are completed in a hundred words. The screenshot shows an artificial situation with a test asterisk.
Sultan with the face of Cartman, I took on Craftpix.net - he went in the same free set as the diamonds. Just to spice up the screensaver. Although if you do not like the Sultans or Cartman - I admit that the move is not particularly successful.
Conclusions and perspectives
I am sure that teaching timekiller is a real timekiller, and not this prototype, which I did is possible. And when they appear in large numbers, the world can change for the better. At least millions of people will spend hundreds of hours for nothing.
If you have at hand a code for a normal game on a combination and a few days off - try to experiment, at least in the pair words. You can get the
finished JSON file here . It has more than a thousand pairs, I formed with a margin.
All match3 and match2 games - with balls, diamonds, chips for mahjong, fish and bear cubs, with a fractal dynamic display like Zuma or a static field, as in most games - these are essentially assignments for making combinations, for selecting groups according to some attribute .
In current games, this feature does not carry any payload; people simply combine red and green balls, translucent striped jelly candies and sticky gummy bears. But what if these cubs are full of healthy vitamins? I remember that I learned a number of English words from Fallout and Heroes Might and Magic, which means that such vitamins exist.
My prototype of the game
can be tested here . There is a choice of different hundreds and levels, preservation, progress and a thousand of the most commonly used English words. Layout is designed for desktop monitors or tablets. Each level is designed for several minutes, contains 5 new words and 6 repeated ones from previous ones (according to the formula of random sampling 3, 2, 1).
Updated 13.06.18 : added transitions between hundreds of words and salute when passing the last level in every hundred. Also removed from the dictionary are some context pairs that do not make sense in single translations. Optimized work with memory.