In the previous article, we talked about creating an application for learning English idioms, during which we decided to change the format of the application and turn around. We decided to apply our reasoning about online education and add a much more game component. There was a question about the tool for developing the game.

With this article we open the cycle of posts about the development of the first game for our educational platform Learzing . The first "screenshot" of the game is higher, and soon we will announce the first version of the game.

Working according to lean startup methodology (more about it in articles about the team and business model ), we need to regularly test our product by interested users in it and get feedback from them. The easiest way to test on the web version (without losing cross-platform), you also need the game to work on any modern device. The combination of HTML5 + JavaScript perfectly meets these requirements.
')
The tool for developing HTML5 games Construct 2 seemed like a great choice when starting to develop a new game. A huge community, an active forum, building games for various platforms, JavaScript SDK with a stable interface and a sufficient set of functions, open source game engine, plug-ins from Construct 2 developers (as well as communities and developers of commercial plug-ins), stability, regular free updates and no subscription (~ 135 dollars per license).

In the top HTML5-game engines Construct 2 ranks first . The site is declared 1.5 million downloads. Perhaps such popularity is associated not only with the quality of the engine, but also with the widespread use of WYSIWYG editors. In them lies the problem that we solve in the article.

Visual programming language Construct 2

Sample code in the visual programming language Construct 2

To describe the logic of the game in Construct 2 uses an unusual visual programming language. Let's start with how the program is executed. Recall what a game loop pattern is . The code that we “put” in the editor is executed at each iteration of the game cycle after the user input processing stage. That is, at each step of game time emulation (and evaluation of the state of game objects), the Construct 2 engine executes all the program designs.

The language has variables and constants, cycles and functions implemented through events, conditional operators and the events themselves, and even the scopes of variables. This is almost a set of standard structural PL. C is successfully used in the development of complex projects (such as the Linux kernel). The capabilities of the YAP Construct 2 could be enough for our game, if not:

• Lack of structures (in terms of C). You cannot combine data to describe an entity; you work only with string and numeric variables.
• Bulky visual code.
• Weak applicability of established practices from generally accepted PLs - IDE support, architectural patterns, modularity, refactoring, etc.

Having experimented with Construct 2, I realized that it is convenient for developing simple games, but is not suitable for complex games. For development we needed a much more powerful language. We decided to use Construct 2 and found a way to write JavaScript code using plug-ins to Construct 2.

Construct 2 Plugin Architecture

Architecture of Construct 2 plug-ins using some standard plug-ins and their interfaces to visual PL

The basic component of the execution time of the Construct 2 game is represented by the file c2runtime.js, which we can see after the project is built. c2runtime is engaged in modeling time, calculating collisions, creating / destroying objects, executing the visual code of the game, implements the JavaScript SDK interfaces, etc.

JavaScript SDK defines the notion of a plugin. A plug-in is, as it is not difficult to guess, a JavaScript component that implements additional functionality available from the Construct 2 visual code. Each plug-in, except for the standard description (name, version, site URL, etc.), defines the set of functions it provides and events. The JavaScript code of the plug-in handles calls from the visual code of the game, and also has the ability to send events to the visual code.

Even the basic Construct 2 objects, such as Sprite, Text and many others, are implemented as open source plug-ins. From the point of view of architecture, this approach of developers looks competent. Compact core, to which plug-ins are connected, each of which implements its strictly limited functionality that complements the functions of the core. All kernel interactions are performed through the standard JavaScript SDK interface.

Solving a problem with MVC

MVC pattern

The visual programming language Construct 2 is not well suited for describing complex logic. But it could describe a simple view level logic of the MVC pattern , and implement all the complex logic in JavaScript at the model and controller levels.

To begin, let us highlight what services are necessary for the view level for the functioning of the game. Services written in JavaScript contain all the complex logic and state. According to MVC, they become the model level. Next, create controllers that provide access to the model to the view level. Interfaces to the JavaScript code in Construct 2 are plug-ins, so each controller is implemented as a Construct 2 plug-in. Thus, we get all the MVC components in the Construct 2 game and have the ability to write code of arbitrary complexity.

Now our game contains 15 Construct 2 plugins. Each of them provides a set of services for the visual part of the game. For example, a plugin for recording a game, playing it, working with persistent storage, a plugin for recording player's progress on a level, etc. The solution presented for the Construct 2 problem does not look simple. But apart from the ability to write in JavaScript, we received the MVC approach bonuses: strict separation of the UI code from the main logic and the state of the application.

Total

Approximately 70-80% of the code of our project is at the model level and is written in cross-platform JavaScript. If you need to change the game engine, we need to rewrite less than 30% of the product code. With the successful development of the project, it is likely that it will be rewritten to Unity, as in a much more mature and expensive technology.

Ahead you will find a lot of interesting things about the technical aspects of the development of HTML5 games and engines that run both in browsers and in the form of native applications. Stay with us, soon we will announce the first version of the game.

Poll

We invite all developers to help us create a game for learning English idioms and slang - spend a few minutes and complete a short survey that will affect our development.

First of all, we would like to start from the wishes and needs of users (that is, you), and only then from our own ideas. All survey participants will receive early access to our application.

All articles of the series

1. Startup step by step: the future of online education
2. Startup step by step: team and mentors
3. Startup step by step: first business model
4. How we made the educational platform: first design, landing page and logo
5. How we made the educational platform: the first application
6. Making an HTML5 Quest: Using the MVC Pattern in Construct 2
7. Making an HTML5 quest: creating a character and basic animation