Game development experience on Node.js and Angular.js

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

So, it all started about 4 years ago when I decided to try my hand at game programming. Gathered into a pile of three people, we decided to gallop to learn Unreal Engine 3 . In our inexperience, we rushed to do MMO with a cool grafon. So that there are sounds, and guns, and lasers, and the open world, etc. Naturally, all this did not bring results: the fuse faded, the project rested in the abyss of igrodev.

However, I still had a passion for programming, ideas accumulated, and the experience gained pushed me to the right (at that time) decision.

If you 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, magicians fotm! If you had a PvP game, it would be fun, but it’s so boring
Me: Ok, I’ll try to reduce the damage to mages
Friend: No, now I’ll make a team of 4 magicians and tear this bear ...

Having estimated the game options in my head, I understood 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 turn-based in order to give scope for tactics and a well-functioning strategy, and not for crazy calling of enemies. The setting was a familiar fantasy with orcs and elves. The idea of ​​the game was as follows: a detachment of heroes of 4 people go through location after location and crush groups of monsters, sometimes even bosses. The choice of language fell on C #because He is quite famous and popular. In addition, we were taught C ++ at the university, and the transition to C # was easy enough for me.

And now, after 6 months, I already had a game in 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 identified the following disadvantages:

1. Content Wading through crowds of monsters is very much like RPG. But a lot of monsters are required, and everyone should have a portrait, and at least 1-2 unique abilities. In addition, opponents need to prescribe AI so that they manage their skills correctly. To limit yourself to 5-10 monsters means to make a very boring game. Used for about ng bigger quantity required a ton of time and effort that could leave on the qualitative rather than quantitative changes.
2. Leveling is an integral attribute of RPG, but it turns the balancing of class abilities into hell. I made the ability, checked, at the 1st level - it beats tolerably, at the 100th - not enough. He twisted the step of increasing the damage of the ability in the formula: on the 1st it became normal and on the 100th too, but now it’s not enough on the 50th! And in a new way! And so you sit, spin the numbers for hours.
3. Inventory and equipment are the same problems as pumping. At the 1st level, the increase in some characteristics I had was 0.00012%, but at the 100th, the chances of a critical hit could be 70-80%.
4. Boredom . Endless running through locations and dressing / pumping groups do not change the essence of the gameplay. At the 99th level, you will do the same as at the 1st, only the numbers are higher and the monsters are thicker.

The prototype of the game in C #

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

1. Content . If you take the confrontation team on 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 provide them with 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 opponents from both sides use them. In addition, there is no need to write AI.
2. Leveling up . 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, puts all players on an equal footing. Anyone who has just entered the game will have the same chance of winning as a player who has already spent some time there.
3. Inventory and equipment . The problem of lack of progress nevertheless overcame me, so I decided to correct the situation by introducing equipment into the game. However, I presented all this in a slightly unusual form. At that moment, I remembered the game Blade & Sword (Chinese copy of Diablo), where the character's ammunition did not change, and only precious stones were inserted into it that changed the characteristics of the armor. Now the player participating in the battles receives a certain currency, which he is able to buy new stones 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 catching up with the “cool folders” in the game is not so difficult.
4. Fan . It should be noted right away that no matter how literate AI is, it nevertheless does not fit the irrational thinking of players who fight with each other. The popularity of all sorts of MOBA and card games rests on the FAQ, confronting living people, the millions of situations and tricks that your opponent’s brain can generate in battle. A large number of tactical moves and team settings only adds replayability and makes you play “another rink”.

The PvP direction of the game led me to the point of no return - in WEB . Without thinking twice, I began to learn the basics of HTML and CSS . A couple of simple sites and I already realized in which direction to move on. After reading a few pages in Google for «Creating a browser-based game," I realized that it is necessary to delve into the mysterious Node.js . At that time, all new languages ​​and frameworks seemed incredibly complex, especially after C #. For the most part, Ilya Kantor made the choice of technologies for me, from the lessons of which I mastered this new world. Thus, we got a bunch of Node.js, Express.js, MongoDB, Socket.io. Only the question of the client side remained open. I only knew a little JQuery and I could not imagine how it would be possible to realize my idea on it. The whole backend part was pointing me with a finger towards Angular.js , which, at first, seemed to me magic. Magic is fun, the choice has been made!

So, a technology stack has been found, the process of working on the game has begun.

Part 1. Sishel-mouse-walk-out

Me: I threw you a link, click on register and fill in your details.
Friend: Ok, now
I’ll try ... Me: Well, how is it?
Friend: I can’t think of a name ...
I: Yes, enter any
Friend: Everything, zaregis
I: And what do not you enter?
Friend: Forgot password ...

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


Registration form with validation using angular.js

The minimum task at this stage is the implementation of the correctly working (at least in appearance) registration and login process. After that - getting into a room on the server where other users are visible. I remember the day when I showed my friend the result of all these labors. He registered, logged in, and ... got to a screen that 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’s a pity, if there were elves, I would have composed such an ENT!

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

I wrote down many ideas in a notebook.

Most often, inspiration rolled at night, preventing sleep. The number of roles and races was scrolled 150 times in the head and trimmed into a digestible version. In the end, I started making all the same orcs and elves.

At the stage when the character creation screen was already ready, insight dawned on me.


Character Creation Screen

As I Remember: Walking Down the Street and Listening to Judas Priest"Demonizer". At the moment when at the end of the song Rob begins to peep “demonizeeeeeer”, I thought: “This is a great name for the class! It sounds brutal, mittered, creating a dark atmosphere. " The cycle of thoughts led me to the idea of ​​“metallizing” the setting. As a result, all the names of classes, uniforms and abilities, one way or another, were associated with rock music. All this fit perfectly into the wrapper of 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 got into the jungle of angular.js, the more I fell in love with it. During the time of working with the game, I did not reveal any shortcomings for which it would be worth scolding this framework.

Part 3. Long live trigonometry!

Me: With the help of the triangle, it will be possible to swing the magician completely into strength.
Friend: n @ th, such a magician is not needed.

Finally, I got to the “sweetie” - the birth of mechanics and characteristics. It was assumed that manipulating the character consisted in choosing abilities and riveting new stones for armor, but I decided to go further. Triangle-inspired skin color settings from character generator in MMO Rift, I decided to do something similar with the basic characteristics of each character. Imagine the maximum possible indicators of Strength, Dexterity and Intelligence of the character are located at the three corners of the triangle. The present (or current) value of these characteristics is determined by the position of the white dot, which is initially located in the center of the figure. The closer to one of the corners this point, the greater the current value of the corresponding indicator, and vice versa. For example, moving it to the angle of strength, we get a character with the highest possible strength indicator, but his dexterity and intelligence will be 0.


Triangle character settings (the resulting indicators: Strength 120, Dexterity 30, Intellect 17)

Armed with "Wikipedia", I began to recall the school course of trigonometry in order to understand in what ratio the intersection point of the three Chevians will share each of them. In parallel with this, I compiled tables in Excel , in which I wrote down the characteristics of the characteristics of the uniform. The final result is very pleased and I was seized with pride in the realized "feature".

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

Friend: can you play your game already? Or are you spinning all the stats?
Me: So far, not really, there is only one sang and one shots.
Friend: well, in WoW as well, but people play.

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

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

Equipment, ammunition, crafting system, a character

when I crept to the ability of the character, I had quite a clear picture of how things should look. The obstacle was that I did not know exactly how the battle would happen. The first ability in the game was the usual “Strike,” dealing n damage to an enemy character. On this, the creation of abilities stopped and the construction of the battle room (or arena) began.

To my surprise, the arena took shape very quickly and without serious hitches. And since we reached the battle, I will tell you a little more about it. 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 expends energy. As soon as one team completely dies or surrenders, the battle ends. In general, the result is a 3x3 arena from WoW, but only with an admixture of chess.

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

Part 5. All skills in five

Me: Well, they tested what you say about the game?
Friend: Urgently nerf Rippers and Redeemers, for they are generally fierce. I did not understand the oracle; it is too dependent on the situation. The heretic does not finish much. Tank with Cleric are boring, they need to cut a heal, and add damage. Don’t touch Malefica, he’s just right. And also, lower the CD on all of the executioner's abilities.
Me: It’s in balance, but how is the game?
Friend: Norm.

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

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

Ability editing block

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

The process of generating new abilities, I would call the most exciting in development (although in the last game he infuriated very much). In the course of work on the following skills, new mechanics had to be added. The imposition of effects, spells on the area, stunning, invisibility, attacks, immunities, restoration of mana and other features expanded the functionality and opened the way to inventing new ones. At the moment, each of the 8 classes of characters accounted for 8 spells .

I remember that evening when my friend and I really chopped into my game. I could not believe it! Most recently, I proudly showed him the form of entry into the game, and here we are 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 ruin the game in the middle of a battle. But the game resolutely refused to pour errors into the console, and the first test passed "without a single break."

Part 6. What was it now?

Me: Look, it’s written in the log that I silently threw a
friend at you. Friend: Everything is in English, I don’t look there ...

The next stage of work was the realization of what I kept putting off into the far box because of the desire to quickly see the prototype.
Before, I was concerned about the pleasant appearance of the game only on my monitor. It's time to do adaptive layout . Having focused all my knowledge in the field of css, I achieved a satisfactory look at all resolutions.

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


The main screen of the Meets the Russian team

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

Optimization of the entire client took quite 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, the general shortcomings of the game were also revealed. Initially, it was assumed that a player could have several teams at once (such a gladiator manager). However, the system was practically useless, because increased the amount of data in the database, and the creation of an additional team did not make sense. The game has passed to the mind of the player ---> team ---> 3 characters. On top of this lay a system of incineration and resurrection for a waste of resources. Also solved the problem of punishment for losing or just closing the browser tab during the battle.

The introduction of such a system without any changes would put the player in a deadlockbecause 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 dice" - the usual roulette, which is in most social games.


Built-in mini-game “Roll the Dice”

At this point, the game seemed to me to be 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 have saved a lot of time. In addition, the question arose of “uploading” the game to external storage. The choice fell on the Heroku PaaS platform , since it has a free tariff. Here, too, was not without its difficulties, we had to get acquainted with the npm and bower, environment variables node.js.

Before the show, it was necessary to realize the rest of the bold ideas that neatly and methodically arose in the notebook. The soundtrack, although it added interactivity to the game, suggested the idea of ​​a text pop-up over the battlefield, reflecting damage, healing and misses. The writing of the directive and the directions of the "departure" of the text resulted in several days of painstaking development and debugging. Even now there are small flaws in this system, over which I did not bother in favor of other unrealized opportunities.


Pop-up damage figures over the battlefield

The embodiment of the translation, scoring 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 involved the use of all previously acquired skills and the absorption of new knowledge.

Each difficulty was overcome with increasing 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 no one will understand anything. Write a manual ...
***
Friend: I looked at your manual, nothing is clear there. Make better videogayd ...
***
Friend: Look, you do not understand what you do, no one needs! Make everyone better with 9 abilities ...

The last global innovation from my notebook is the organization of obstacles on the battlefield. In an amazing way, I was able to realize them in 2 days. Moreover, barriers prevented not only movement, but also the use of abilities. There was an opportunity to hide behind the columns and kill opponents who ran away too far from their doctor.

This was followed by a series of multiple bug fixes and balance adjustments. Everything seemed 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 no, even the fear that your offspring will be ridiculed, criticized, will throw kakakhami and other indecency.

To somehow postpone the moment of the open test, I began to come up with new tasks. The goal was to write a user manual for the game. All games have manuals. I did not even realize that it 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 a Talmud of 40 rules! pages. 40, Karl!

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

It took me almost a week to create the admin panel and statistics on the server, although there was nothing super complicated in this. I created a convenient visual representation of all the players on the server, something like a "weapons" in WoW. Then he made different graphs using Chart.js , which will be able to track the popularity of classes, abilities, ability levels and stones (who cares what). Ladder tab has also been implemented(rating table), which can be shown at the end of each week to all players. Next, I quickly screwed Google Analytics to angular.js. It is important for me only to monitor the current online not from the game.


Admin: statistics charts on the server

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

Thanks for attention!