As I wrote the game for the contest, or the wonderful transformation of "Lines" into "Sea battle"

This story is about how I made another 3D web game. The history of torment and doubt, the history of lack of sleep and laziness. The story of how to do everything at the very last moment. In general, why pull the cat by the horns - go to the story. But first - something else to do away with all the formalities. "Madam, do you have coffee in bed?" "No, better in a cup." Coffee was my daily rescue from the clutches of Morpheus, especially when I wanted to work on the game in the morning, before all the other day cares. We must pay tribute to him. I just can not fail to mention him, because for me it has become truly one of the components of success, by which I mean bringing the game to release. (Your coffee ad could be here).

Competition

In fact, I didn’t fit into the competition for which I could do something. By its terms it was required to create a game for Windows, downloaded and run on an exe-file. I love programming for browsers. I don't know C ++ and C #, I don't even have Visual Studio. But then suddenly I had a great idea for the game, and I thought - what the hell! I'll just make a game. And whether it will be possible to comply with all the conditions of the competition or not is not so important. In the end, just run it on social networks.

There is no limit to perfection

My previous game was launched on a php-file from the server. This time I decided to go further. I wanted everything to work not only on the Internet, but also from the file system, without a web server at all, even local. First, the offline version was demanded by the terms of the competition, and, secondly, in order to be able to play along the way, for example, where there is no Internet. (Actually, everything that I do, I do for myself. And now I play my game.) But if necessary, from the server too, with people, not with the AI, that is, this option should also be present. In general, the task was to create a universal assembly with all the scripts, 3D models, textures and sounds for distribution both on the Internet page and as an archive, which could be downloaded, unpacked and just run the game by index. html. Of course, the latter option makes sense only for the single-user version.
')
In fact, the above local option is a saved web page with relative paths. The catch is that it contains not only text with pictures, but also a 3D engine, as well as models with textures. However, with the engine itself there are no problems. This is THREE.JS, it is written in JavaScript, it weighs 500 KB and is connected simply with the SCRIPT tag. However, the engine does not know how to load 3D models from the local file system, but wants to pull them ajax from the server. I had to finish the loader for this, so that the models were also connected from the script files. Pay attention to the address bar.



The original 3D models I created for the web version were stored in files of the model.json type, however, I found that when connected with the SCRIPT tag, everything works in Firefox, but in Chrome it gives an error related to security policy. The solution turned out to be simple: rename json to js - and no problems. Well, probably, it would be possible to forcibly put the necessary content-type, but who knows what, in the future, security policies will appear in browsers. Suddenly, they still will not allow downloading scripts from files that are called differently than * .js from the local file system. And so, js - and no questions. Download the script and do not show off. Loading 3D models:

var el=document.createElement("script"); el.type="text/javascript"; el.src=url+'.json.js'; el.async=true; document.getElementsByTagName("head")[0].appendChild(el); 

Also, because of the security policy of the browser, textures of models that behaved perfectly in the version with the server refused to connect from their png and jpg files locally, so I had to convert them to base64 and also arrange them in the form of scripts, with file names of texture type .png.js Well, these scripts are connected with the good old SCRIPT tag, which is dynamically created. It is very easy!

 var image = document.createElement( 'img' ); image.onload = function() { var tex = new THREE.Texture( image ); tex.needsUpdate = true; tex.wrapS = tex.wrapT = THREE.RepeatWrapping; tex.anisotropy = 5; }; image.src="data:image/gif;base64,"+imagedata.replace(/^data:image\/(png|jpg);base64,/, ""); 

It works like this: my model parser finds references to images in its file, these links are achieved with .js endings, scripts with texture images are dynamically connected, images are translated from base64 and superimposed on the model. And in order to make sure it’s ironic to determine when the script is finished loading, I added each such script at the end with a call to a function that signals the main program that it is loaded and you can now work further with the image or model contained in it.

Development tools

So, now that the model and texture loader is working fine with the file system, without any server, I started writing the game itself. Yes, I program in pure javascript. Many at this place twisted his finger to his temple. I do not use any libraries (except 3D engine), I don’t even use jQuery. OOP do not use too. Prototypes - in rare cases, only when, in my opinion, it is really necessary. I love minimalism and nothing extra. And no extra code, in which I do not understand what each line does!

I will reveal a terrible secret. I also do not understand new-fangled managers to build projects, I don’t use a github and have never opened any Visual Studio. Doctor, what is wrong with me? From software I use only advanced notepad. I'm probably crazy.

However, it seems to me that it is very simple to connect a WebGL 3D script library to the page and create a scene. Does anyone else today include scripts with the SCRIPT tag and create the HTML markup manually? Does anyone today press the buttons with their fingers and look at the monitor with their eyes? With these fingers, these buttons? With these eyes, this monitor? What wildness! Okay, just kidding. But today, to touch HTML or, God forbid, to pure JavaScript is how to touch a snake. It is better to screw several layers on top. And after converting the code in ten steps to JavaScript, wondering why in the end not a damn thing works. I do not blame anyone, it's just, it seems to me that in web development there is some not very healthy bias towards the use of numerous tools, managers and libraries. I hope my story will not cause anyone to have an attack of cognitive dissonance.

Technical specification? What? To myself? Dizdok? Oh, here's another, wasting precious moments of your life on this nonsense. The only thing I regretted is that I didn’t immediately draw a flowchart of the server-side multi-user version. In the end, she earned wrong. But, when I did draw a block diagram on a piece of paper, I immediately saw all my mistakes and corrected them.

Creation

What I like about indie design is the creative process. Actually, initially within the framework of the contest, I decided to write a variation on the Color Lines theme and even created a working first level. Here is how it looked.



The point was that the game works in 3D, and the balls themselves do not appear on the field, they need to be thrown there and made in lines of the same color. That is, it is necessary to get into the necessary pockets in the grid. Then under the balls open the sash in the floor, and they fail. But when the first level was ready, and I played it myself, I suddenly realized that the game was not very interesting. And then I decided to leave it until better times, until I had an idea how to improve this creation, what, maybe, to add. I had another idea. Throwing balls caused my association with the flight of cannonballs. And I decided to quickly remake this game in a sea battle. Fortunately, the writing of a competition project was given for two whole months.

Ta-dam! With a flick of the wrist, the Lines turn into ... turn into ... turn into ... into an elegant Sea Battle! And yes, I just could not help creating the Black Pearl. What a sea battle without the storm of the seas.



3D graphics is, of course, not my element. Ships did as best I could. In order to reduce the load, I used invisible colliders around each ship to determine collisions. On one ship - one collider, approximately repeating the form.

Thus, it turned out a turn-based sea battle, but in 3D and with the ability to move ships to any point of the playing field. The point is to correctly adjust the angles of rotation and inclination of the guns, to get into the enemy ships with nuclei.

Ways to share with the world

1. Competition.

First, of course, the competition. In the process it turned out that the organizers of the competition are not satisfied with the launch of the game on the html-file and need an exe. What we have with the assembly of js executables? At first I tried it was Electron. However, there everything turned out to be too difficult for me. It was necessary to install a bunch of some managers from the githab and do a dozen manipulations to configure and build all of this. I understand that Electron wants to lead me on the path of standard web development. I did not have time to deal with this, since the last day of the time allotted for the creation of a competitive game was going. No, this is no good. And then I came across a utility web2exe. It's very simple - you run it, poke it into the html file, it even downloads node-webkit itself, and you get an assembly with an exe file at the output. What I didn’t like was that the file was very large, 105 MB. Hmmm ... While the game itself weighs only 15 MB. However, I found a packaging utility with which I compressed the largest file nw.dll. As a result, the entire assembly began to weigh 68 MB, and in the zip-archive 43 MB.

By the way, web2exe does not support building an "eezheshnik" under Windows XP, which is a pity. My html version works in XP too. Only in this OS there are some special requirements for WebGL graphics in browsers.

I did not win the competition, but I gained invaluable experience in solving, as it seemed to me earlier, unsolvable problems. Now I am sure that nothing is impossible.



Well, let's go further, and we will lay out the web version. After the end of the competition, I wrote a server in php. It took about a month of free evenings.

Oh by the way server

Polling the server on the usual http hosting too often will not work. Therefore, we will poll him once every 10 seconds. A queue is created on the client from the player's actions, such as the movement of a ship from point A to point B, a shot, etc. And at the right moment of sending data, this queue goes to the server. The rival reads it and he has a queue formed to play. All the same: movement, shot, etc., only, from his point of view, with the opponent's ships. Thus, each of the two players has two lines - one to send information to the server, the other - to play the actions of the enemy. Here, of course, there will be no synchronization, but since the game is turn-based, it is not needed. The main thing is that the enemy's ship would fire as a result from the necessary point that came from the server. And the route to it is built by the program on the client, and the ship moves to this point.

The whole server script in php, if presented in one line, turned out like this:


2. Facebook

The game was moderated in just over a day. In general, posting anything on Facebook is pretty pointless unless you are a company specializing in AAA games. It’s quite difficult to earn there on an in-game purchase for a mere mortal, so let's call a programmer working for an idea, and Facebook doesn’t allow advertising of third-party banner networks. Only go broke on hosting. There is, however, a special list of partners, mainly American, through which it is allowed to place advertisements in their application. But for this, it is necessary through their website to send them a letter explaining what you want from them, etc. Not the fact that they agree to work with the application of some guy from Russia. And on most of their sites, besides, I have not found a word about Facebook ... I, too, partners. And the question of paying taxes, both in the United States and in Russia. In general, I somehow immediately got into trying to negotiate with them. And I just folded my small banner with the name of the game and placed it at the bottom of the screen. It can be turned off by donating a certain amount to the author through the in-game purchase system.

3. VKontakte.

Moderation in VK lasted several days. And the game was added, as usual, to the very bottom of the catalog. But in the VC, you can immediately and without any problems connect the advertising banner. The monetization scheme is the same as on Facebook - turning off the banner. It should be noted that the advertising system in the VC is very convenient, simple and understandable. Personal account - above all praise. That's just to make money on advertising there can be very little. VC pays only for clicks, not for impressions. And on some days, about 200 hits you get just 0 rubles. Few people even click on ads, apparently.

Total

I will note what I have achieved for myself. Now I can write single-player games with WebGL graphics that run on an html file both from the server and from the local file system. All this works in both versions in Windows, Android and should work in iOs and Linux - but I cannot check these OSs. Also, I can make from the same html version more “heavy” assemblies with executable files under Windows and iOs (there is such a possibility in web2exe). All code is written once on JS and works in all the above options. Well, except for the online option for social networks, you need to add another server script and client calls to api.