Platforms for browser games
- Tutorial
Let's say I created a browser game, and then what? If for mobile - there are Google Play stores, App Store, Windows Store and a bunch of all sorts of alternative ones. You can find sites for distributing standalone assemblies - Desura, Steam, Itch.io. But when you think about the fate of the browser, you involuntarily fall into a stupor. And where is she?
It is necessary to think about the fate of your brainchild at the initial stage of development. So, in the case of Dangerous Insects, I already knew where and how I would be located, although from the game at best there was only a dzdok. So with HTML5 I wanted to test the soil in advance.
The first thing that comes to mind is working on a separate site. The ingenious decision! It blows with the freshness of thinking. Thousands of visitors per day, mountains of gold and the status of a cool developer (already saliva dripped). However, all this is possible if two conditions are met: an excellent game and a lot of money for promotion. For a simple indie developer, finding the latter is extremely difficult.
It is much easier to place the game on popular social networks: VKontakte and Facebook. And if you are still officially registered as a legal entity, then you can add Odnoklassniki to the list. If the game is decent, it has a chance to get on the "windows" and become visible to thousands of potential players. You can use groups and communities or just PR among your friends. In general, social networks look very tempting.
Both that, and other option have the right to life and, most likely, should be used at the same time. Especially if the game is supposed to be free with advertising or f2p. There is just one little nuance - in most cases, game files are downloaded from third-party services, and not stored on servers of social networks. Do you think this is nonsense?
Personally, I have a mediocre VDS on which my site is spinning, so somehow I didn’t particularly bother with this question. Just think, create another page for the game or set up a folder for sharing files. Nonsense ... But there it was. Publishing a game on networks requires the HTTPS protocol to access files. Ops, but for a certificate they ask for money, and not small ones.
And in this regard, I will begin an article not about publishing a game, but about storing its files.
"Freebie", O greatest word of all time. I went through dozens of services, shook through the sieve boltology on the forums and came to the brilliant idea that no one gives direct links. The question is, what was he counting on? What a normal creator of the service will give to download files, without showing a page with advertising or demanding payment. There were no simpletons, of course.
True, I came across information that Dropbox may receive this direct link, but only for old accounts. My turned out to be younger than required and there were no more public folders.
I tried using Microsoft OneDrive. Oh miracle, there is the right thing! But the euphoria was gone as quickly as it appeared. Direct links are available only to those who have an account with this service.
Did not live up to Yandex Disk trust. Although people on the forums insisted that it was possible to get a direct link after some tricky gestures, a small check showed that such links are temporary and change their address after a few hours.
And only the American giant IT company Google allowed to get a free, permanent download link with the HTTPS protocol. Oh, it’s not for nothing that Sergey Brin is among the creators. Something Russian was still in him.
So, the HTML5 game involves a whole bunch of files: html, css, javascript, media resources. Of course, you won’t put all this in one link and the Google Drive option is only suitable for distributing a single file.
I am working with Blend4Web. It is this engine that impresses me more for creating browser games. Why? Take a look at my profile - there is already a whole “stack” of articles on b4w. Therefore, everything that is said in this article is directly related to Blend4Web. But nothing prevents you from using the information for other webgl solutions. Yes, why am I ...
But why! The unique feature of b4w is that it allows you to pack the application into one single HTML file that contains all the dependencies, executable code, resources. So, for such a file, you can perfectly use the direct link from Google Drive. And already based on the IFrame container publish on all kinds of forums, blogs, etc. It can be models from the game, scenes or even levels - a great opportunity to promote a project on available resources, without any technical difficulties.
Let's look at the algorithm for obtaining this direct link using Google Drive:
And this unique code needs to be placed at the end of the line:
This is a direct link that can be perfectly inserted into the IFrame container. Of course, IFrame is not available on all blogs, sites and forums, but most still support it. At least blogspot and wordpress blogs (what I tested). So, you don’t have to spend money on your own server at all, but you can publish your developments on free services.
Example IFrame code:
So, they sort of figured out one file, but what to do with the whole folder? To start this, you already need server support: VDS or dedicated. Although a little further I will tell you a great option for a completely free hosting for browser games.
Suppose you own a virtual or even a physical server. I will not consider the configuration of Apache and other server software - all this has been chewed dozens of times, including on the hub I will focus only on the problem of obtaining an SSL certificate.
A simple search on the Internet gives a large number of resources that trade this certificate. Moreover, prices vary from several thousand to several tens of thousands. Of course, a lot depends on the requirements put forward for the certificate.
There is an interesting articlededicated to getting SSL and setting up Apache. Although it is in English, everything is written simply and clearly. So, it talks about the startssl.com service, which just allows you to get a full certificate for free. The resource itself is in Russian, so everything is clear and without comment.
Everyone knows github as a service for hosting and collaborative development. However, it was a surprise to me that they offer website hosting. Personally, I use bitbucket for my projects and I'm not particularly interested in github features, but GitHub Pages looks very tempting - a full-fledged third-level domain, without ads, with HTTPS. And you can work with it as with a regular repository.
It is important to consider that the name of the future site, the name of the github account and the name of the repository should be the same. Suppose I want to create mygame.github.io domain. Respectively:
Here are the steps for those who have never worked with git. It is assumed that you have already downloaded and installed it in your system. I describe only terminal commands:
Pour on the server:
Beginning developers think about social networks in ecstasy, especially after reading success stories of venerable igrodelov and get cold with horror at the details of the “brutal” moderation. In fact, to publish a game on one of these social networks, you don’t need to go through moderation at all. It is necessary to include the game in the application catalog and monetization. And so, no one bothers you to create a project, place it in a social network and it will be available to all your subscribers.
Perhaps I’ll start with Facebook. My impression of the develop portal on this network is mixed. Facebook is a very dynamic system, and literally. It’s not a fact that the developer’s panel opened the next day will look the same as yesterday. It seems like the guys are experimenting directly on a living system. Anyway.
It all starts at: developers.facebook.com. If you have a facebook account, then consider yourself the developer of this system. No additional actions or cash contribution (hi mobile store) - create a project and voila.
And then it all depends on your ability to think and active google experience. On the one hand, everything is clear. In the beginning, you need to choose the target platform from the four proposed: iOS, Android, Facebook Canvas, Website. For a web project, you need to select Facebook Canvas. Go through the confirmation procedure and get into the settings panel.
I will not talk about filling icons, texts - this is understandable. What’s more interesting is where to drive the address of your game? The trick is that, despite the previously selected Facebook Canvas platform, you will get an empty project. It is necessary to once again create the platform of the same name, but already in the game panel. Click the Add Platform button, select Facebook Canvas again and only now you get the opportunity to enter the address of your game. The key points are highlighted in the figure.
Please note that in the Secure Canvas field, you need to insert a link not to the main index.php file, but to the project directory. And yes, the index file must have php permission, otherwise the application will not start. The game itself will be available at: apps.facebook / id of the project.
VKontakte is much easier to work with (vk.com/dev). There are fewer settings, everything is in Russian and somehow there are no such misunderstandings, as is the case with Facebook. The user account also matches the developer account. Press the button “Create application” and get to the main page where you need to specify the name, category of the game, and most importantly type. VKontakte offers three options: Standalone, Website, IFrame. Of course, for Blend4Web games you need to choose an IFrame. Confirm the creation of the page by SMS and go to the application settings.
The screenshot shows what needs to be done. Unlike Facebook, in the “IFrame Address” field you can specify both a folder and a separate file. Please note that the protocol must be HTTPS. Change the current state to “visible to everyone” and that’s it - the game appears in the list of your applications.
In this article, I tried to compile my throwings, individual notes and articles all over the Internet into one. I hope that someone draws for himself the necessary and interesting. If you have something to add to the topic of “sites for html5” - write in the comments.
It is necessary to think about the fate of your brainchild at the initial stage of development. So, in the case of Dangerous Insects, I already knew where and how I would be located, although from the game at best there was only a dzdok. So with HTML5 I wanted to test the soil in advance.
The first thing that comes to mind is working on a separate site. The ingenious decision! It blows with the freshness of thinking. Thousands of visitors per day, mountains of gold and the status of a cool developer (already saliva dripped). However, all this is possible if two conditions are met: an excellent game and a lot of money for promotion. For a simple indie developer, finding the latter is extremely difficult.
It is much easier to place the game on popular social networks: VKontakte and Facebook. And if you are still officially registered as a legal entity, then you can add Odnoklassniki to the list. If the game is decent, it has a chance to get on the "windows" and become visible to thousands of potential players. You can use groups and communities or just PR among your friends. In general, social networks look very tempting.
Both that, and other option have the right to life and, most likely, should be used at the same time. Especially if the game is supposed to be free with advertising or f2p. There is just one little nuance - in most cases, game files are downloaded from third-party services, and not stored on servers of social networks. Do you think this is nonsense?
Personally, I have a mediocre VDS on which my site is spinning, so somehow I didn’t particularly bother with this question. Just think, create another page for the game or set up a folder for sharing files. Nonsense ... But there it was. Publishing a game on networks requires the HTTPS protocol to access files. Ops, but for a certificate they ask for money, and not small ones.
And in this regard, I will begin an article not about publishing a game, but about storing its files.
File vault
"Freebie", O greatest word of all time. I went through dozens of services, shook through the sieve boltology on the forums and came to the brilliant idea that no one gives direct links. The question is, what was he counting on? What a normal creator of the service will give to download files, without showing a page with advertising or demanding payment. There were no simpletons, of course.
True, I came across information that Dropbox may receive this direct link, but only for old accounts. My turned out to be younger than required and there were no more public folders.
I tried using Microsoft OneDrive. Oh miracle, there is the right thing! But the euphoria was gone as quickly as it appeared. Direct links are available only to those who have an account with this service.
Did not live up to Yandex Disk trust. Although people on the forums insisted that it was possible to get a direct link after some tricky gestures, a small check showed that such links are temporary and change their address after a few hours.
And only the American giant IT company Google allowed to get a free, permanent download link with the HTTPS protocol. Oh, it’s not for nothing that Sergey Brin is among the creators. Something Russian was still in him.
So, the HTML5 game involves a whole bunch of files: html, css, javascript, media resources. Of course, you won’t put all this in one link and the Google Drive option is only suitable for distributing a single file.
I am working with Blend4Web. It is this engine that impresses me more for creating browser games. Why? Take a look at my profile - there is already a whole “stack” of articles on b4w. Therefore, everything that is said in this article is directly related to Blend4Web. But nothing prevents you from using the information for other webgl solutions. Yes, why am I ...
But why! The unique feature of b4w is that it allows you to pack the application into one single HTML file that contains all the dependencies, executable code, resources. So, for such a file, you can perfectly use the direct link from Google Drive. And already based on the IFrame container publish on all kinds of forums, blogs, etc. It can be models from the game, scenes or even levels - a great opportunity to promote a project on available resources, without any technical difficulties.
Let's look at the algorithm for obtaining this direct link using Google Drive:
- Open the “Sharing” window (select the appropriate item from the file’s context menu).
- Click the “Advanced” link and select “Everyone on the Internet” in the window that appears.
- Copy the unique identifier (see figure).
And this unique code needs to be placed at the end of the line:
https://googledrive.com/host/This is a direct link that can be perfectly inserted into the IFrame container. Of course, IFrame is not available on all blogs, sites and forums, but most still support it. At least blogspot and wordpress blogs (what I tested). So, you don’t have to spend money on your own server at all, but you can publish your developments on free services.
Example IFrame code:
So, they sort of figured out one file, but what to do with the whole folder? To start this, you already need server support: VDS or dedicated. Although a little further I will tell you a great option for a completely free hosting for browser games.
Suppose you own a virtual or even a physical server. I will not consider the configuration of Apache and other server software - all this has been chewed dozens of times, including on the hub I will focus only on the problem of obtaining an SSL certificate.
A simple search on the Internet gives a large number of resources that trade this certificate. Moreover, prices vary from several thousand to several tens of thousands. Of course, a lot depends on the requirements put forward for the certificate.
There is an interesting articlededicated to getting SSL and setting up Apache. Although it is in English, everything is written simply and clearly. So, it talks about the startssl.com service, which just allows you to get a full certificate for free. The resource itself is in Russian, so everything is clear and without comment.
Github pages
Everyone knows github as a service for hosting and collaborative development. However, it was a surprise to me that they offer website hosting. Personally, I use bitbucket for my projects and I'm not particularly interested in github features, but GitHub Pages looks very tempting - a full-fledged third-level domain, without ads, with HTTPS. And you can work with it as with a regular repository.
It is important to consider that the name of the future site, the name of the github account and the name of the repository should be the same. Suppose I want to create mygame.github.io domain. Respectively:
- I am registering an account with the name mygame.
- I create mygame.github.io repository.
Here are the steps for those who have never worked with git. It is assumed that you have already downloaded and installed it in your system. I describe only terminal commands:
- Go to the directory where git projects are supposed to be stored (cd command directory name).
- Add a local repository. When you create a repository in your git-hub account, an address like https: /github.com/mygame/mygame.github.io is issued. Insert it after the git clone command.
- Go to the local repository directory (cd mygame.github.io)
- Copy your project to this folder.
Pour on the server:
git add --all
git commit -m "Initial commit"
git push -u origin master
Social networks VKontakte and Facebook
Beginning developers think about social networks in ecstasy, especially after reading success stories of venerable igrodelov and get cold with horror at the details of the “brutal” moderation. In fact, to publish a game on one of these social networks, you don’t need to go through moderation at all. It is necessary to include the game in the application catalog and monetization. And so, no one bothers you to create a project, place it in a social network and it will be available to all your subscribers.
Perhaps I’ll start with Facebook. My impression of the develop portal on this network is mixed. Facebook is a very dynamic system, and literally. It’s not a fact that the developer’s panel opened the next day will look the same as yesterday. It seems like the guys are experimenting directly on a living system. Anyway.
It all starts at: developers.facebook.com. If you have a facebook account, then consider yourself the developer of this system. No additional actions or cash contribution (hi mobile store) - create a project and voila.
And then it all depends on your ability to think and active google experience. On the one hand, everything is clear. In the beginning, you need to choose the target platform from the four proposed: iOS, Android, Facebook Canvas, Website. For a web project, you need to select Facebook Canvas. Go through the confirmation procedure and get into the settings panel.
I will not talk about filling icons, texts - this is understandable. What’s more interesting is where to drive the address of your game? The trick is that, despite the previously selected Facebook Canvas platform, you will get an empty project. It is necessary to once again create the platform of the same name, but already in the game panel. Click the Add Platform button, select Facebook Canvas again and only now you get the opportunity to enter the address of your game. The key points are highlighted in the figure.
Please note that in the Secure Canvas field, you need to insert a link not to the main index.php file, but to the project directory. And yes, the index file must have php permission, otherwise the application will not start. The game itself will be available at: apps.facebook / id of the project.
VKontakte is much easier to work with (vk.com/dev). There are fewer settings, everything is in Russian and somehow there are no such misunderstandings, as is the case with Facebook. The user account also matches the developer account. Press the button “Create application” and get to the main page where you need to specify the name, category of the game, and most importantly type. VKontakte offers three options: Standalone, Website, IFrame. Of course, for Blend4Web games you need to choose an IFrame. Confirm the creation of the page by SMS and go to the application settings.
The screenshot shows what needs to be done. Unlike Facebook, in the “IFrame Address” field you can specify both a folder and a separate file. Please note that the protocol must be HTTPS. Change the current state to “visible to everyone” and that’s it - the game appears in the list of your applications.
In this article, I tried to compile my throwings, individual notes and articles all over the Internet into one. I hope that someone draws for himself the necessary and interesting. If you have something to add to the topic of “sites for html5” - write in the comments.