Experience developing games on Node.js and Angular.js

I would like to share with you the story of the development of my game.

So, it all started about 4 years ago, when I decided to try my hand at programming games. Having gathered in a handful of three people, we decided to master the Unreal Engine 3 at a gallop. Due to our inexperience, we rushed to do an MMO with a cool grafon. So that there both sounds, and guns, and lasers, and an open world, etc. Naturally, all this brought no results: the fuse died away, the project rested in the abyss of igrodev.
')
However, I still have a passion for programming, ideas were piling up, and the experience gained pushed me to the right (at that time) decision.

Want to make a game - do it yourself.

Part 0. Why is it easier for a programmer to make a PvP game?

Friend: In this game magic photm! If you had a PvP game, it would be fun, and so boring
Me: Ok, I will try to reduce the magicians damage
Friend: Do not, now I will make a team of 4 magicians and tear this bear ...

Having estimated the variants of games in my head, I realized that my project should be an RPG . This is my favorite genre, and the creation of its game mechanics is like a cake for any programmer. I also decided that the game should be step-by-step in order to give scope for tactics and a streamlined strategy, and not for madly calling out enemies. The setting was a familiar fantasy with orcs and elves. The idea of ​​the game was as follows: a squad of heroes consisting of 4 people pass from one location to another and crush groups of monsters, sometimes even bosses. The choice of language fell on C # , since he is quite famous and popular. In addition, at the university we were taught C ++, and the transition to C # was easy enough for me.

And now, after 6 months, I already had a game on C # in which you can create a team and start swinging. But something inside suggested that it was not interesting and boring. During the analysis of the project, I highlighted the following disadvantages:

1. Content Wading through crowds of monsters is very RPG-like. But it takes a lot of monsters and everyone should have a portrait, well, at least 1-2 unique abilities. In addition, opponents need to prescribe AI, so that they properly dispose of their skills. Limited to 5-10 monsters, then make a very boring game. For more, it will take a ton of time and effort that could be spent on qualitative rather than quantitative changes.
2. Bleeding is an essential RPG attribute, but it turns the balancing of class abilities into hell. Made the ability, checked, on the 1st level - beats bearable, on the 100th - not enough. I twirled the step of increasing the ability damage in the formula: on the 1st it became normal and on the 100th too, but now on the 50th a little! And new! So you sit, twist the clock numbers.
3. Inventory and equipment - the same problems as pumping. At the 1st level, the increase of some characteristics was 0.00012%, but at 100th the chances of a critical strike could be 70-80%.
4. Boredom . The endless race on locations and dressing / leveling groups do not change the essence of the gameplay. At the 99th level, you will do the same thing as on the 1st, only the numbers are higher and the monsters are thicker.

C # game prototype

All these thoughts led me to the idea of ​​creating a PVP- oriented game. Having figured in my head how my game would have looked in a different format, I once again revised the previous points and this is what I got:

1. Content If you take a team standoff on a team, then everything can be reduced to creating a large number of characters or their abilities. In the new game, I decided to implement several classes and give them a choice of skills that can be taken into battle. Thus, the creation of content is reduced to the introduction of only new abilities, because they are used by opponents on both sides. In addition, there is no need to write AI.
2. Bleeding . I decided to abandon the system of experience and leveling. On the one hand, this leads to the problem that the player does not observe the result of his actions and progress. On the other hand, it puts all players on an equal footing. The one who just entered the game will have the same chance of winning as the player who has already spent some time there.
3. Inventory and equipment . The problem of lack of progress still overwhelmed me, so I decided to correct the situation by putting equipment into the game. However, I presented all this in a slightly unusual form. At that moment, I remembered the game Blade & Sword (the Chinese copy of Diablo), where the character's ammunition did not change, and only gems were inserted into it, which changed the characteristics of the armor. Now a player, participating in battles, receives a certain currency, with which he is able to buy new pebbles for his characters and improve their characteristics. Growth is present, but it has a direct effect only on the quantitative indicators of the character, so it’s not so difficult to catch up with the “cool folders” in the game.
4. Fan Immediately it is worth noting that no matter how competent the AI ​​is, it is still not suitable for ticks for the irrational thinking of players who fight with each other. The popularity of all kinds of MOBA and card games rests on the ChSV, opposition to living people, a million situations and tricks that can generate your opponent's brain in battle. A large number of tactical moves and team settings only adds replayability and makes you play "one more rink."

PvP-direction of the game led me to the point of no return - in the WEB . Without thinking, I began to learn the basics of HTML and CSS . A couple of unpretentious sites and it became clear to me in which direction to move further. After reading a few pages in Google on the request “Creating a browser game,” I realized that I had to dig into the mysterious Node.js. At that time, all new languages ​​and frameworks seemed incredibly complex, especially after C #. For the most part, the choice of technology was made for me by Ilya Kantor, whose lessons I learned about this new world. Thus, it turned out a bunch of Node.js, Express.js, MongoDB, Socket.io . Only the question of the client part remained open. I only knew jQuery a bit and I couldn’t imagine how it would be possible to realize my idea on it. The whole backend part seemed to point my finger in the direction of Angular.js , which, at first, seemed like magic to me. Magic is fun, the choice was made!

So, the technology stack was found, the process of working on the game began.

Part 1. Shishel-mouse-went-out

I: I threw you a link, click on the registration and fill in your data
Friend: Ok, now I'll try ...
I: Well, how is it?
Friend: I can't think of a name ...
I: Yes, enter any
Friend: Everything, I registered
Me: What aren't you coming in?
Friend: Password forgot ...

No matter how strong the desire to start making character creation screens and to rivet characteristics and abilities for them, I still had to deal with problems of routing, sessions, and working with the database. I wanted to create beautiful links in the address bar, make the “back” button in the browser take me back to where I want, not to her. If the character "Vasya" is now in the game, what will happen if another Vasya comes in from another host? It will be necessary either to keep the new “Vasya” out or to throw out the old one. I had to stop at the second version, the implementation of which took me at least 2 weeks! Then I comprehended Zen WebSockets : who to whom broadcast, who where to emit, who in what room, what is io, and what is socket.


Registration form with validation by angular.js

The minimum task at this stage is the implementation of a properly working (at least in appearance) registration and entry process. After that - hit the room on the server where other users are visible. I remember the day when I showed my friend the result of all these works. He registered, logged in and ... got on the screen, which says that he is now the only person on the server. The result of 2 months of hard work.

Part 2. Heavy metal

Me: I will have a game about angels and demons
Friend: It is a pity if there were elves, I would have composed such an ENT!

The next small (as it seemed to me at the time) task was to implement the process of creating a team and characters.
When you are absorbed in developing your game, thoughts about the setting, characteristics, abilities, races, classes and mechanics blow your brain.

I wrote down many ideas in a notebook.

Most often, inspiration rolled at night, not allowing to sleep. The number of roles and races scrolled 150 times in the head and hewed into a digestible version. In the end, I started to do all the same orcs and elves.

At the stage when the character creation screen was already ready, an insight came to me.


Character creation screen

I remember now: walking down the street and listening to the Judas Priest song “Demonizer”. At that moment, when at the end of the song Rob starts to squeak “demonizeeeeeer”, I thought: “This is a great name for a class! It sounds brutal, mitolitenko, creating a dark atmosphere. " Circulation of thoughts led me to the idea of ​​"metallization" of the setting. As a result, all the names of classes, uniforms and abilities, one way or another, associated with rock music. All this perfectly fit into the wrapper from the angel-demonic confrontation.


I never introduced the Demonizer class, but Sentinel , Ripper and Redeemer appeared . Thanks, Rob!

It is worth noting that the further I climbed into the jungle of angular.js, the more I fell in love with it. During the work with the game, I have not revealed any flaws for which it would be worth scolding this framework.

Part 3. Long live trigonometry!

Me: With the help of a triangle it will be possible to swing the magician completely into force.
Friend: n @ d dont need such a magician

Finally, I got close to the "sweet" - the birth of a mechanic and characteristics. It was assumed that the manipulation of the character lies in the choice of abilities and riveting of new stones for armor, but I decided to go further. Inspired by the triangles of setting the color of the character generator in the MMO Rift , I decided to do something similar with the basic characteristics of each character. Imagine, at the three corners of the triangle are the maximum possible indicators of strength, dexterity and intelligence of the character. The present (or current) value of these characteristics is determined by the position of the white point, which is initially located in the center of the figure. The closer to one of the corners of this point, the greater the current value of the corresponding indicator, and vice versa. For example, by moving it to a power angle, we will get a character with the highest possible strength indicator, but his dexterity and intelligence will be equal to 0.


Character setting triangle (resulting figures: Strength 120, Dexterity 30, Intellect 17)

Armed with Wikipedia, I began to recall the school course of trigonometry in order to understand the ratio in which the intersection point of the three Chevians would divide each of them. In parallel with this, I compiled tables in Excel , in which I painted the dependencies of the characteristics on the outfit. The final result was very pleased and I was seized with pride in the implemented feature.

Part 4. Meet on clothes, and escorted one-shot'om

Friend: can you play something already? Or do you turn all the stats?
Me: Not yet, there is only one sang
Friend: well, so in WoW as well, but people play

The inventory has been created for quite a long time and painstakingly. For example, the implementation of drag'n'drop was difficult. By the way, the choice of tools for this mechanics fell on the module of our compatriot. Another thing is more interesting: before working on the inventory of the crafting system , I did not have a single thought. The idea of ​​creating random stones of different values ​​immediately migrated from the head to the code. Instantly, the currency system was redone for it.

Than to sit and shovel everything in your head a hundred times, sometimes it is worth immediately starting to write code, and your appetite will come with eating.

Inventory, ammunition, crafting system, character characteristics

When I got close to the abilities of the characters, I had a rather clear picture of how everything should look. The obstacle was that I did not know exactly how the battle would take place. The first ability in the game was the usual “Strike”, which deals n damage to the enemy character. At this, the creation of abilities stopped and the construction of a combat room (or arena) began.

To my surprise, the arena took shape very quickly and without serious hitches. And since we have reached the battle, then I will tell you a little about it in more detail. The battle takes place between two teams in the "3x3" format on a field of 10x10 cells. Characters take turns according to a special scale (approximately as in “ HoMM 5 ”). In his turn, the player can perform several actions, the use of which is spent energy. As soon as one team completely dies or surrenders, the battle ends. In general, it turns out the 3x3 arena from WoW, but only with an admixture of chess.

The first match in my game looked like this: two teams run over each other and the ability to “strike” voshotyat their opponents. Who missed - he lost. This was enough to start implementing complex mechanics and return to building abilities.

Part 5. All skills in the five

Me: Well, here we are, what can you say about the game?
Friend: Urgently Nerf Rippers and Redeemers, for they are generally fierce. I did not understand the Oracle, it depends too much on the situation. Heretic little dote. The tank with Cleric is boring, he needs to cut it, and add damage to it. Malefic does not touch, he is just right. And also, lower the CD at all hangouts at the Hangman.
Me: It's on balance, but how is the game?
Friend: Norm

The idea of ​​the variability of each ability was framed in my head at the very early stages of creating a game. Its meaning is not to make the skills “small burn” and “huge lava meteor”, but to leave the skill “fireball” with 5 uses:

• 1st - does little damage, but is cheap and is used every turn.
• The 5th — on the contrary, beats a lot, but rarely and expensively.
• 2,3,4y - search for the golden mean.

Ability Editing Unit

In addition, some skills radically change their behavior depending on the variant, i.e. not just attached to the formula.

I would call the process of generating new abilities the most fascinating in development (although in the last game, it was utterly insane). In the course of working on the following skills, new mechanics had to be added. Imposing effects, spells on the field, stunning, invisibility, attacks, immunities, mana recovery and other features expanded the functionality and opened the way to inventing new ones. At the moment, each of the 8 character classes has 8 spells .

I remember that evening when my friend and I were already really cutting into my game. I could not believe it! Most recently, I proudly showed him the form of entry into the game, and now we are already arguing that the Executioner is too boring, and the Ripper is cool and tears all the magicians into chips. At that moment I was disturbed by the thought that some critical bug would begin to tear down the game in the middle of a battle. But the game strongly refused to pour errors into the console, and the very first test passed "without a single break."

Part 6. What was it now?

I: Look, it is written in the log that I threw a silence on you
Friend: Everything is in English, I don’t look there ...

The next step in the work was the realization of what I kept putting into the far box all the time because of the desire to see the prototype as soon as possible.
First of all, I was concerned about the pleasant appearance of the game only on my monitor. It's time to do adaptive layout . Focusing all my knowledge in the field of css, I achieved a satisfactory appearance on all resolutions.

Everyone to whom I was showing the game required localization into Russian. At that time, it seemed to me an inanimate task. Having carefully studied the issue of internationalization, I came to the getText module and the PoEdit program. With their help, it was possible to solve the problem of a full translation of the game into Russian in about a week.


The main screen of the team Meets the Russian

There was a question of sound design of the game. To implement the soundtrack, the ngAudio module was selected, with which some difficulties arose. I planned to use in battle more than 50 sounds. For this, I created a named array of sound objects and reproduced individual elements. At first everything went well, but as soon as the battle was delayed, terrible hangs began. It became obvious that something was overflowing as the game progressed. So I approached the issue of optimizing my creation, going to the study of the digest cycle and $$ watchers in angular.js.

Work on optimizing the entire client took a lot of time and effort, although it paid off in full. The game ran much faster, and the number of $$ watchers was reduced by about 40%.

After a series of tests, common drawbacks of the game were also revealed. Initially it was assumed that the player may have several teams at once (such a manager of gladiators). However, the system turned out to be practically useless, since increased the amount of data in the database, and the creation of an additional team did not make sense. The game went to the type of player ---> team ---> 3 characters. On top of this lay the system of burning and resurrection for waste of resources. Also solved the problem of punishment for losing or just for closing the browser tab during the battle.

The introduction of such a system without any changes would put a player into a dead end , because he could be left without resources with a dead team. Therefore, I came up with an additional source of income. They became a mini-game "throw the dice" - the usual roulette, which is in most social games.


Built mini-game "Throw the dice"

At this point, the game seemed to me already formed in order to show it to someone else. So I started my profile on Git and transferred everything there. If I had known earlier what a version control system is, I would save a lot of time. In addition, there was the question of "flooding" the game to an external repository. The choice fell on the PaaS platform Heroku , since she has a free tariff. Here, too, was not without difficulties, I had to get acquainted with npm and bower , the node.js environment variables.

Until the moment of the show, it was necessary to embody the rest of bold ideas that neatly and methodically arose in the notebook. The soundtrack, though added interactivity to the game, suggested the idea of ​​a text that appears over the battlefield, reflecting damage, healing and blunders. Writing the directive and specifying the directions of the “departure” of the text resulted in several days of painstaking development and debugging. Even now in this system there are small flaws over which I did not bother in favor of other unrealized opportunities.


Pop-up damage over battlefield

The implementation of translation, voiceover and pop-up text allowed me and my main critic to better understand the situation in battle and interact with the game. These stages of work turned out to be very difficult for me, although the tasks themselves implied the use of all the skills acquired before and the absorption of new knowledge.

Each difficulty was overcome with more and more acceleration and focus on results.

Part 7. You are not prepared!

Friend: In your game, no one will understand anything, translate it ...
***
Friend: Now everything is in Russian, but still nobody understands anything. Write the manual ...
***
Friend: I looked at your manual, nothing is clear there. Make a better video guide ...
***
Friend: Listen, you do not understand what you do, nobody needs it! Make everyone better by 9 abilities ...

The last global innovation from my notebook is the organization of obstacles on the battlefield. Surprisingly, I was able to implement them in 2 days. Moreover, the obstacles hindered not only the movement, but also the use of abilities. It was possible to hide behind the columns and kill opponents who ran away too far from their healer.

This was followed by a series of multiple bug fixes and balance edits. It seemed that everything was ready and it was time to show the game to the masses so that they could decide what was missing. But my perfectionism stopped me all the time. Although not, even the fear that your offspring will be ridiculed, criticized, showered with cocoa and other indecency.

In order to somehow postpone the moment of the open test, I began to invent new tasks. The goal was set - to write the user manual for the game. All games have a manual. I had no idea that this would be such a difficult task! All the nuances that you, as the creator, seem elementary, people have to chew and explain. As a result of my 3-day torment, I gave birth to the Talmud rules for 40! pages. 40, Karl!

With a sense of accomplishment, I created a VC group to accept people who are interested in my creation. It seems that everything is ready and it's time to start. But no matter how so! People will come, and how will I follow them? How do I know who created what team? What are the most popular abilities in the game?

It took me almost a week to create the admin and statistics on the server, although there was nothing super-complicated about it. I created a convenient visual representation of all the players on the server, something like “armory” in WoW. Then I made different charts with the help of Chart.js , which can track the popularity of classes, abilities, ability levels and pebbles (who knows what). Also, the Ladder tab (ratings table) was implemented, which can be shown at the end of each week to all players. Next, I quickly screwed Google Analytics to angular.js. I just need to follow the current online not from the game.


Admin: server statistics graphs

At the moment I am mentally prepared for the whole world to see the result of my painstaking, but very interesting work. More than a year has passed since the moment my friend and I went to the server together for the first time. I hope my experience will be useful to other novice igrodelyam.

Thanks for attention!