Publishing an iFrame / HTML5 game on VKontakte. Basics

Why are these applications created?

An audience of millions of users will easily provide a high-quality product to a permanent, highly populated community. And this, in turn, will bring a decent profit to the developer. It doesn’t matter which path is chosen - advertising in the game or donation, the work spent will pay off. This state of affairs attracts both professional studios and beginners. In the latter case, there may be no development team. Everything will rest on the shoulders of one person. And if professionals know almost everything about their work, then beginners often have a completely reasonable question: “How to create a game “VKontakte”?

Application Types

Before you start thinking about how to create an application in VK, you need to know that there are two types of them on this resource. This, by the way, is reflected in the documentation.

  • Flash applications . They are files that have a .swf extension. They are made in the Adobe Flash environment, then compiled into a file, after which they are uploaded to the server of this resource or to their own server.
  • Application Iframe . They can be done using various technologies provided by browsers available today. Then a certain window will appear on the VKontakte page in which people can use this application. The program will transmit and receive data using JavaScript.

First steps

At the initial stage, all that is required from a newly minted developer is an idea. Moreover, the more specifically it is described, the better. In addition to specifics, you need to describe it from all sides: theme, direction, features. The application is being developed for integration into a social network, so the best option is a multiplayer game. However, don’t try to create a universe right away; start with something simple. This approach will protect you from mistakes and will allow you to gradually gain the necessary experience to create a truly high-quality VKontakte game.

Concept

After understanding the idea, vague and not yet fully clear formulations will have to be reworked to create a meaningful document (in jargon it is called a design document). At this stage, not a single detail can be allowed to slip through the cracks. Design, interface, gameplay, interaction systems and everything else - everything must be documented before creating a VKontakte game. Why do this? First of all, all the data will already be on hand, and it will only be a matter of implementation. That is, the technical side of the work will come into force. Secondly, so as not to get confused in your own thoughts and ideas. And lastly, so that you can tell others about your idea. A person by himself cannot be a jack of all trades. Some are good at programming, some are good at level layout, and some are natural advertisers. It is quite possible that the project will become large, and additional personnel will have to be recruited to the team.

How to create a VKontakte game?

It’s no secret that the social network “Vkontakte” is very popular, both among ordinary users and among those who are trying to make money with it (companies, programmers, designers, game developers, etc.). Today we will look at how to create a VKontakte game.

How to create a VKontakte game: Step-by-step guide

Stage I

Concept creation

This stage is needed to clearly see the target audience and the positioning of the game.

Gameplay Creation

This point mostly applies when small games are created, because the question becomes what genre the game will belong to.

Game mechanics

This stage will help calculate all the mathematical processes involved in the game (for example, shooting mechanics, damage balance).

Stage II

Game prototype development

Programmers must develop a prototype “engine”.

III Stage

Alpha version

At this stage, the concept of characters and graphics as a whole is being developed.

IV Stage

Beta development

At this stage, almost the entire game and 70% of the content should be ready, at which point the game becomes available to users. Testers are being recruited for the team. And time to launch PR.

Stage V

Release

Now the game can be opened to the general public, and of course many problems will arise here, many edits will appear.

So, we have looked at the stages of creating a game, but before moving on to this stage, you must understand that all games run on flash, which means you either need to know the program yourself or hire a specialist. Also, before creating a game, you need to study the VKontakte API help, which can be found directly on the social network.

In addition, to create VKontakte applications you need to know the Action Script programming language.

Why do you need the VKontakte game?

It’s very simple, many people make money from such games, because most games force their users to top up their account and buy attributes. This is how the creators receive their money, but it is important to remember that the social network Vkontakte takes 50% of the money received. Therefore, in the first stages, you don’t even have to think about profit, because it will be minimal.

If this article helped you or you liked it, don’t forget to like it , this will help other users find it faster. And I can find out what interests you most in order to prepare and write even more interesting and useful articles! Best regards, Vyacheslav.

vkblog.ru

the main problem

create a game in contact

The main problem of a person who wants to create a game is insufficient knowledge in this area or little experience. To write the simplest application, you will have to learn JavaScript, HTML5, SCC, Ajax, and if it is multi-user, the implementation of sockets and a database. It is precisely because of such difficulties that people often give up what they started, without moving beyond the design stage. How to create a VKontakte game without such knowledge? Designers can provide a solution. How acceptable their use is - everyone will decide for themselves. Many such programs do not require programming skills at all. Others use their own scripting languages. And yet, understanding the constructor is much easier than creating something from scratch.

Recipe for success

The main element that guarantees success in almost 100% of cases is the idea. It is the concept of the future game that determines its popularity and, accordingly, the income generated.

Having decided to add your VK game, you should not worry too much about the lack of required knowledge in programming or computer design. Nowadays, you can find hundreds, if not thousands, of job-ready people with the necessary skills. This brings us to the second element that ensures success – funding.

Theoretically, you can create a gaming application for free by doing everything yourself. However, it will take too much time to implement the idea, if it is completed at all. If this situation does not frighten you, then you need to figure out what knowledge in programming languages ​​is required:

  • HTML;
  • CSS, Adobe Flash;
  • Action Script;
  • JavaScript.

Studying even one item on the higher list will require several years of hard work. To master all aspects of creating a game you will have to spend a lot of time. However, by assembling a team of people who are ready to work to achieve a goal, you can achieve results even without investment.

Tululoo Game Maker

The service with a strange name is absolutely free and allows you to create your own HTML5 application (which can then be used on a social network) in a few clicks. It is impossible to create something complex using this constructor, but for the first steps it is suitable in the vast majority of cases. Tululoo Game Maker has a huge Russian-speaking community and, accordingly, a lot of tutorials and documentation. This is good news, since VKontakte will allow you to make your own game in the shortest possible time. After completion of the work, all files will be compiled and transferred to the user.

create a game in contact

Group cover and dynamic cover

Yes, yes, we have moved on to the basis of the modern display of VKontakte groups to covers.

This is such a wide, beautiful group header with which the user first of all comes into contact.

It looks nice when it blends into the background (with white color) and does not have clear boundaries, but here everything seems to be left to the designers.

Dynamic cover


A dynamic cover is a header that is periodically updated and reacts to certain changes in the group.

There are many services, but for example this one has the maximum number of settings.

The main purpose of using dynamic covers is to increase the activity of community users. For example, you can set up your players to earn points by liking posts or commenting on them, and then exchange these likes for in-game goodies.

And many people are pleased to see their avatar on the cover of the group...)

You can use the following widgets:

We won’t go into the settings, you’ll figure it out yourself) or watch this video:

This pleasure costs an average of 100 rubles per month.

The only caveat that dynamic covers impose is that they require the design of the background image to be adjusted to the widgets used. So that your bells and whistles look organic.

Little life hack

Create a training group for yourself, close it from everyone and test all innovations there. New widgets, design and everything you want to use in the main group, try it there first.

BE SURE to see how your new design looks from a mobile phone: this is a very important factor. 70 percent of users access VK from their phone.

VK trims covers at the edges by about 10 percent on each side. Shift the design closer to the center and then there will be no incidents, for example, in the form of the first and last letters of the project name being cut off.

The game has been created. What's next?

  1. After creating an application, you need to post it on a social network. Since a fairly popular resource was chosen, this will not cause any difficulties. First you will have to upload all the game files to any hosting.
  2. Next you need to open the site vk.com. In the lower field of the portal, find the inscription “For Developer” and click on it.
  3. On the page that opens you will be able to find detailed, but not exhaustive, information about game development. Since the application has already been created, click on the “Create application” link, it is located in the top menu.
  4. The page will display an interface with several text fields that you will need to fill out. First, specify the name of the game, and then select its type (IFrame).
  5. After this, you will have to make a short description of your project and choose the genre to which the game belongs to a greater extent.
  6. Further filling out the forms is not so important until a field called “IFrame” appears. It needs to provide a link to the main game file. If it was created in the Tululoo Game Maker, this is the address that points to "index.html".

A few notes on quickly publishing games on social networks. For a couple of weeks, I experimented with popular blogs, social networks, and file clouds and found a lot of useful information that I hasten to share.
As a developer, I was always interested in this aspect, but while I was working on mobile platforms and PC, it somehow escaped attention. Everything changed when I read the bravura success stories of some developers. Why not... To work with browser games, I settled on Blend4Web

, due to its tight integration with
Blender
and optimal support
for WebGL
.
For now, I’m just exploring and experimenting with an open-source game project and talking about it on the gcup pages. But I’m thinking that this engine will also be used for commercial games. It's still a long way to the desired finish. However, it is worth getting acquainted with the peculiarities of the distribution of such games at an early stage. So, for a couple of weeks, in my free time, I experimented with popular blogs, social networks, and file clouds and found a lot of useful information that I hasten to share. In this part we will talk about VKontakte and Facebook, everything else - next time. The main feature of hosting applications on social networks is not the connection and use of the SDK, but the presence of your own server, and with the HTTPS protocol. If popular portals, like Kongregate, allow you to download the game to them, then here this concern is shifted entirely to the developer. Take this point into account in your plans. I managed to find alternatives to my own server, but more on that in a future article. I’ll probably start with BKontakte
, since this social network is much friendlier to developers than Facebook. If you already have a personal account on the network, then consider yourself automatically included in the army of developers. So all that remains is to log in with your login and go to the developers’ page.


This page greets the developer after clicking the “Create an application” button. You need to know that games on VK are always hosted in an IFrame container. And it doesn’t matter what you put there. This could be a custom engine, a copy of your website, a Blend4Web application, or something else. Just select the IFrame/Flash option at this point. After confirmation via SMS, the VK application will be created. I skip filling out the game data, filling the icon, etc. The “Settings” panel is much more interesting.


First of all, pay attention to the IFrame/Flash switch (yes, it is duplicated again on another page). For an HTML5 application, you must select IFrame. And only after selection, fields will appear for entering the address of your brainchild. This could be a single html file if you exported the scene via the Blend4Web (.html) option, or a link to the b4w player, or just the path to the base index.html file. Do not expect to enter the address of a regular, unsecured HTTP protocol in this field. “VKontakte” automatically switches to HTTPS, so it will not be possible to deceive the system. Actually, this completes the setup of the application and you can test it on your page, and if you change the current state to “visible to everyone,” then everyone will see the game (see the figure above). The link to the game is in the Applications list. By the way, it’s interesting that there is no need to send the project for moderation, since it is already visible to everyone. Moderation is necessary in cases where you use advertising and monetization using the system's API or want the game to be placed in the application directory. For testing, debugging or presenting a project on a personal page, this is enough. Now let's move on to the social network Facebook
. Not everything is so simple and unambiguous here. Like VK, on ​​Facebook the user’s login is automatically considered the developer’s login. But registering a new application and setting it up is somewhat confusing. First you need to decide on the target platform. So Facebook offers a choice: iOS, Android, Facebook Canvas, Website. In our case, you need to select Facebook Canvas. In the future, nothing prevents you from connecting several platform options to one project. After a simple procedure for confirming a new project, you will be taken to the settings page. At first glance, there are many more options than on VKontakte, and at first everything looks confusing. So I spent a long time looking for where the path to the game is indicated. It turned out that for some reason unknown to me, the initial choice of platform is purely fictitious and already in the Settings parameters you need to add Facebook Canvas a second time (Add Platform button).


Next, paste
the URL of your application into the Secure Canvas
.
And not a link to a separate file, but a directory (see figure). Please note that there are two more subtleties. First, the file being launched must be named index
.
Secondly, you need a php extension, not an html one. Additionally, on this page you can specify the container size or leave everything as default. The link to the application is located in the Canvas Page field and is the path apps.facebook/id of the project. Now some information about storing files. It is already clear that you need to deploy your own server to work with social networks. I won't go into details about choosing a VDS, configuring Apache, etc. But there is one problem that most novice users face - obtaining an SSL
. In short, SSL is a digital signature of your website, without which you cannot configure the HTTPS protocol. Usually it is bought for a lot of money. However, I was pointed to an interesting article about getting free SSL and setting up Apache to work with it. Unfortunately, the material is in English, but very detailed. As you can see, posting a game on Facebook and VKontakte is not difficult at all. I tried to describe only those “rake” that I personally stepped on. I hope this article saves you some time.

Rating
( 1 rating, average 5 out of 5 )
Did you like the article? Share with friends: