Browser 3D WebGL game with the ability to install in IndexedDB

Stock up on popcorn - I will tell you an interesting story ... In general, it will be one of thousands of essays on the topic "How I wrote my game." At first, I planned to cover as many technical details as possible, but then I realized that there were too many of them for one article and it would be huge. Therefore, the "first series" will be, rather, a review. If it is interesting, then I will continue. So.

Idea!

My programming experience was limited to a couple of applications for social networks, when I had the idea to recreate a game like "Monopoly", in 3D. In childhood, my friends and I had something like a club of board economic games, of which there were about ten in total in our arsenal. And now, when they have gone into their own business, or even went somewhere else, and only the Internet unites us, I wanted to create an electronic version based on, so to speak, various economic games. But since this is a virtual reality, everything should look like in the real world: the field should be built at home, and instead of chips, players should have personal cars that need to be purchased at the car dealership ...

I suggested that my idea is not new and googled (and also poydeksil - this is not advertising, simply - for the sake of justice). To my surprise, I found that most of the 3D versions of these games are reduced to rotating three-dimensional boards with three-dimensional, but, again, just chips and familiar business cards. Only on XBox there was a kind of 3D city, but the concept of the game itself was, it seems, far from the classic one, however, I did not play. I also found a very old 3D clone of "Monopoly" under Windows. Yes, in one social network worked normal 3D "Monopoly". But in that there was a top-side view from afar, in an isometric view. I also wanted to ride through the streets of the town and see the enterprises through the eyes of the hero of the game.
')


Looking ahead, it is said - done. Between these events, 10 months have passed. Not so much, given that I worked almost alone. Immediately I warn you that, since I understood everything on my own, the graphics in the game are very far from ideal, and the code is extremely harmful for professional programmers to view. I did not use OOP, because, firstly, I do not know it well, and secondly, I see no reason to use it in JavaScript. Therefore - only functions, only hardcore. In the development of a template applied KVG - crutches, bicycles, rakes. And about 3D ... For example, I learned about wuv-mapping (how to correctly translate it into Russian?) In the 3D editor only about 4 months after the start of work ... And also, what phrase about a bicycle is good, just pronounced first?



I was helped only by the 2D designer, who drew funny people. Unfortunately, in the first version of the game there will be no 3D characters. And this is a task for the future.



The meaning of the game, as it is easy to guess, is to take turns to “walk” (that is, drive a car) around the “field” (that is, around the city) and build our houses. The economy has been slightly modified and improved relative to other similar games. You can take out a loan from a bank, and buy stocks at the stock exchange. You can speculate in goods, as well as burn the buildings of competitors. The game has police, court and prison. Another thought flashed to give the players themselves the opportunity to play for a representative of the rule of law. And also to introduce another such character as "moth" ... Apparently, this idea was inspired by long programming evenings. But playing “Monopoly” for a policeman or a priestess of love is probably already a topic for the next part or a mod of some ... As the game was planned to be launched in one social network, the currency of the game was secretly named “seals”.

Tasks

Generally speaking, the tasks from the very beginning were set very ambitious.

1. 3D. It was necessary that everything eventually worked in 3D.
2. Cross-browser and cross-platform. Since my friends have different operating systems, it was necessary for the game to run on any OS. Well, in various browsers, of course.
3. Installation. So that you can (at the request of the user) save models and textures to the file system - to reduce download time and save traffic on subsequent launches. And at the same time to save server traffic.
4. And without plug-ins! So that nothing needs to be additionally downloaded and specially installed, there are no “web players” there. And even Flash - no, no!

In fact, with varying success (that is, it’s not starting up on all devices due to the lack of support for new technologies in them, but I think everything will change very soon) this was realized. Generally, why browser? The browser seems to me to be a kind of standard that unites all operating systems, a key to writing truly cross-platform applications that work regardless of which processor and OS the user has and without installing additional modules. This idea seems to me very interesting.

By the way, lyrical digression (And here I was carried ...)

Today, writing cross-platform applications is as follows. Something is written in any development environment, and then the executable modules for all three (or more) operating systems are saved. Well, these assemblies are loaded into the appropriate stores. In fact, this is just a tool for assembling for different platforms. No, all this is also wonderful, but I want more. So that, here, I wrote the code, and - voila, it worked as it is under any OS, in a single build, and everything else is the concern of the OS itself.

Of course, in addition to the JavaScript interpreter, there are other virtual machines with corresponding programming languages, but for them, firstly, a separate installation of the client interpreter is required, secondly, the existing one may not be for each OS, well, the main thing is that some gestures from the user with this installation itself, which the user usually does passion, as he does not like. And web technologies, in my opinion, are moving just in the direction of some common cross-platform, without installing any additional engines. Yes, JavaScript and WebGL are still slow, but I think everything will change soon. In addition, such an application, in theory, will then have to work even on OS and browsers that do not yet exist.

For example, the Android system has not been around for quite a while, and now there is a completely new super popular OS. And, if in the future there is still something similar (OS), then there certainly will be a browser with support for all modern features. So, all existing web applications will be launched. After all, you see, it would be foolish to release a tablet without the Internet. The network dictates its standard. And, if you completely switch to programming according to the web standard, it will not matter what OS is installed on the user. And, by the way, in the future, most likely, this will lead to the fact that all sorts of branded operating systems will start to appear, or, there, operating systems, customized for specific tasks, etc ... So, okay, do not deviate from the topic.

Development

A simple bunch of JavaScript + PHP was chosen as programming languages. PHP - because it is familiar to me, and because this project did not require some kind of fierce real-time on the server: this is not a shooter or a race. As a 3D engine - library THREE.JS. The latter attracted me because it does not require installation from the user. And, if the browser and video player support WebGL, then the game starts without any questions. Even the notorious flash player is not needed, which, by the way, is still not installed on my tablet, but my game is working. Yes, and ask the user to update, say, the browser is not so indecent as to suggest installing some incomprehensible multi-megabyte third-party engine that is not familiar to him, and it’s not a fact that it exists under its OS. This “beauty” (WebGL) is supported in all new browser versions, including IE11. Oh, yes, challenge the "Donkey"! Just kidding, not a single donkey, of course ... However, IE11 also works, only FPS is noticeably lower there than the competition.

For possible storage (at the request of the user) "heavy" models and textures on the client, I used IndexedDB. I wrote a simple manager that allows you to select the installation option (minimal, normal, complete) and consistently writes files to the browser database. This base is maintained even after turning off the device. And the game engine reads files from there, well, either it loads those files from the server, the installation of which has not been done (or completed). Naturally, there is also a removal option. The manager is simply fed with installation options and file lists. I called it all WEB5, I do not know, by analogy with HTML5 or something. It was necessary to name somehow.



And further. For programming purposes, I didn’t need any particularly abstruse development environment. Everything (html, php, js) was typed in a program like an advanced notepad with syntax highlighting. And about 1% of the code was typed at work in a fancy html editor, simply because it was there. Debugging was done using the browser console.

At the very beginning, moving from idea to work, I began to study the documentation for the library THREE.JS, which is mainly in English, and that is only very poor. Therefore, in some nuances it was necessary to sort out imperatively at the “test site” - a separate scene. It so happened that it took several evenings only to come up with an experimental method to think of how to do this or that.

On the main stage, the construction of the game was going very slowly but surely. I had no idea how to create the territory, so I broke the field into squares, created for them several types of textures - with different turns of roads and grass. And just programmatically arranged them in the right order. Now I understand that there are more elegant ways to generate territory, and this is a reason for future updates. Fortunately, it is possible at any time and is done simply by uploading new files to the server.



With 3D models - a separate story of countless experiments with formats, ways of loading into the game for processing on js, sliding or not displaying textures at all, etc. With this, I suffered a lot. Besides, I had never worked with 3D editors before. I think if I knew this science, the time to develop a game would be halved. In the end, I settled on the * .3ds format supported by 3D by Max and Blender and converting it to * .json using the Assimp2json converter. And the json-model already in the running game is quietly loaded from the server (or from IndexedDB) using the bootloader from the THREE.JS kit - AssimpJsonLoader (slightly doped by me so that he can work also with my “manager” IndexedDB, that is, he could load not only from the server, but also from the client base). And the colors are preserved, and everything is fine with the textures. In addition, json is a native JavaScript format, which later also played its positive role. He made models of houses and other small things himself, he partially made trees and cars himself, partially downloaded from free 3D art and transformed it into low-poly. In order not to make dozens of different types, but houses of the same design (and it’s necessary for all ten possible player colors for each of the ten types of enterprises of each of the 3 floors), I created a software system for changing color and loading the desired texture. And for the plates with the addresses of the houses (and where without them) canvas-textures are created and applied programmatically, which in turn are assembled from a single png-image containing all the street names and house numbers.



My joy knew no bounds when the first house appeared on the field. Moreover, this color, what was needed, and in the place where it was needed. And with an address label. Then I programmed about the same for cars, while remembering the formulas of motion from physics. And at the same time algebra with geometry. ("You will have both a bath and a coffee bag. And cocoa with tea.")

Now it was necessary to create “distant landscapes” or simply “backdrops”. How they are done - so far I have no idea. If you tell me where you can read about it, I will be grateful. Having rummaged in my pics, I found 4 landscapes from which I made textures (a view of St. Petersburg from the Gulf of Finland, a view of Kronstadt, just a view of the bay and the forest in the Vologda region). Programmatically pulled them on 4 planes and positioned them from all sides of the playing field. But the problem was that due to the lateral illumination of the scene, the boundaries of these planes were visible on the "sky". I looked at a few examples from the THREE.JS package, but they did not suit me. The huge sphere with the inner texture did not suit me, since my field was square, and there were too many triangles in that sphere, which created brakes. A cube with a texture suitable only for the interior, on the exterior could be seen the same plane boundaries. In the end, I just saved the textures in png format with transparent alpha in place of the “sky” (picking up the brightness for each plane) and set the scene to have a global background color under the sky. Likely, I now write some nonsenses, and the normal 3D-designer was horrified with such an approach.

Monetization

I initially did not want to “fight” with the players too much, but it would be very desirable that the costs of hosting and the divine drink be paid off. Therefore, I have provided three options for buying inside the game: you can purchase 1, 3 or 10 gold bars, each of which gives you the opportunity to play the game once. If you win, then you get all the bars of this game. If a player has less than two bars, then he loses his VIP status. Actually, you can play without it, then some opportunities become unavailable, which, in general, do not greatly affect the gameplay.

Result

I will sum up. What finally managed to achieve.

1. 3D. However, while there are problems with the graphics itself, namely, with baking textures and other gadgets and beautiful. But in my free time I study all this. Textures will be updated.

2. Cross-platform. The game works in the most recent versions of browsers when installed with respect to new video card drivers.

As for Windows, it runs without problems on a tablet with Windows 8.1 (fps up to 40), as well as on a computer with Windows 7 on all new versions of any browsers, including IE11, only IE has a rather low fps. On another test machine with Windows XP (P4 3GHz, Radeon R5 230), it worked only in Chrome of not the freshest versions around 28.0.1500.95 with disabled auto-update. Perhaps this is due to the fact that newer browsers require newer versions of video adapter drivers to work with WebGL and simply block WebGL if drivers are installed below a certain release date. And in older browsers that have already started supporting WebGL, there is no such limitation or it is lower.

Under Android also works in fresh browsers. If you do not have enough RAM, you can always use the 2D version.

And finally, it also works on iOS, however, it was tested only on a friend's iPhone-5. The result in 3D - fps 3 frames per second. But it's still a phone ... Testing on it for the first time was already at the very end of work on the game and, to be honest, I was even surprised that it all worked the first time and it worked at all. I don’t have iPads for the test, but probably there will be clearly better than on the iPhone, that is, comparable to a tablet on Windows.

In some other, others, the OS has not been tested.

3. Installation.
I fought a long time with IndexedDB. The result is a framework to which you can feed a list of files in the form of an associative array, composed in a certain way. These files are sequentially downloaded and saved in the database for further use off-line. The main problem was that it was impossible to verify the existence of a database and keys (tables and entries in them) in IndexedDB (that is, to check whether the game was installed or not), but you can only try to create them and get an answer in the form of success or failure of this operations. Failure is, respectively, if they already exist (well, or the database is not supported, but there is another function to check this fact), otherwise they are created. As a result, each time you started the game, you had to set the creation of empty tables and a small config in one of them, where, if successful, information is written that the game is not installed, its installation options, etc. If it fails, it means that the game has already been installed or an empty config has been created with a record of the installation progress. Subsequently, during user actions, the framework takes information from this config and changes it. With the removal of data, I did not completely understand. No, everything is deleted, I just can not catch the event of the completion of this process. With the installation - everything is in order. And you should also take into account the fact that each browser has its own separate database, and by installing the game in one browser, you will not get access to the same installation through another. Clearing browser history can also affect IndexedDB.

4. No need for the user to install third-party client libraries, interpreters, engines, etc.

The price for this was the initial download from the server each time about 1.1 MB of javascript code, including the THREE.JS engine, plus 3.5 MB of images. Not so much, because, after all, this is not just a website, but a 3D game. In addition, all this is stored in the browser cache. Well, the rest (3D models, images) can be loaded during the game from the server or from IndexedDB. By the way, those 3.5 MB images can also be downloaded from IndexedDB. But one of the goals has been achieved - the game does not need any native (relative to the OS) engine. You can, of course, also leave some of the scripts in the database and load them from there. Connection to the Internet, in any case, will be required, as the server part for multiplayer works. However, there is an idea to release a completely local version with a game against artificial intelligence, that is, without a server, and starting just by an html file.

Publication

The game was approved by the moderator of the target social network and published in the general catalog. However, the confirmation was attached to the confirmation that the game does not have the opportunity to get into the top of new applications. To my question why, I have not received an answer yet. The result - 240th place in the "Economic Games" and I do not even know what - in the overall issuance. However, in the first day - 85 installations. And plus 40 left the game. Of course, there are no purchases. At the same time, the load on the server part amounted to 0.16 out of 50 CPUs per day and almost 0 out of 1000 according to MySQL.

We will advance, improve the game and run on other platforms and social networks.