A field for creativity, - animations and multiplayer games right in the browser

Book One: Creating an Open Source Project

I will continue the topic described in the article “14 Ways to contribute to open source software, not being an Ingenious Programmer or Rock Star” habrahabr.ru/post/147220 , but in a slightly different way!

I think many novice programmers would be interested in investing in some unusual and interesting project, test their skills and learn how to work in a team with other developers! For these purposes, it was decided to launch a sort of sandbox and a block of articles on the Habr, subdivided into topics that describe all the stages of entry into opensourse, from technical techniques to the psychology of teamwork.

Stage One: Idea

Since our project is open and not aimed at gaining profit, we first need to think about what developers need now. Based on the fact that I am more a web developer than a desktop, we will choose from here.

Thanks to the appearance and, for the most part, implementation of the most popular browsers, such things as CANVAS and WEBGL, a huge field for creativity appears.

Let's dream a little! It would be nice if there was such an application thanks to which it would be possible to easily create vector animations for implementation in a browser. Of course, this is not a complete replacement for FLASH, but it would be very useful to create banners, animate some of the page details, create games, and many other multimedia elements controlled by javascript. It would be nice if you draw a character with a skeletal structure, you could pass him some parameters and control him and his behavior on the user’s page. And if you combine all this with the server on node.js, then it is quite possible to organize multi-player games, and arrange unusual communication between the site administration and its customers! For example, through a pretty man. Well how? Impressive !? Then we pass to the second stage.

Stage Two: Skeleton System

There is an idea, now it is necessary to decide how all this will work for us! Since this stage requires a brainstorming session, collecting an opinion from your comments will draw up a basic development plan, a general description of which will be laid out in the next article.

To begin, I will offer my version! What is needed for the system ...

... Blocks and Layers.
All elements should be divided into blocks and layers. Each block can have its own list of layers, and in any layer there can be a block with its own layers. In order to move the block of layers, it would be possible to move all the internal parts.

... Is it worth using jquery or another framework?(translation: a block is a single object within which there may be layers with animation. For example, we make an image in which it rains, we draw a block with flying drops and duplicate it many times in different places, that’s the rain!), and the layers they are in Africa layers!

... bones.
Layers and blocks must be bonded with bones. To manage them through a script

... Basically, all objects are vector , but you can connect images, audio and video, for example, so that you can make some kind of animation, suppose someone runs through and puts a white blot on the wall, and already in this blot the video was playing.

... Data is loaded as when loading the application, and in the course of execution (in advance), so that the overall view is holistic. For example, first the base, that is, the core of the system, is loaded with the first moments of the animation, and then the necessary data is loaded in the course of work. And then suddenly the images themselves will be 200 meters, who will wait for them then !? :(

... What is the best way to store and transfer data? I think it is better through JSON with a direct data stream.
But so far I don’t know what to stop 100 percent, since in what format the data will be stored for generating animations, because there will be two programs , I still do not completely understand.
The first program is an editor through which all this is done, the second is a script that displays everything that has been done in the editor, but for this you need a single format for writing and reading! Apart from JSONa, nothing has come to mind yet.

... It is necessary to create the ability to work with the server , both in automatic mode (that is, the request is the answer, like ICQ), and in direct (that is, by submitting the request to the server, we control the script in the browser, such as the visitor came to us, we he can see that he is now on the site and set up the program gives a command to the little man he is, for example, ran at the top of the page, and the user's greeting, or that he should offer something to the user!

... Editor- This is one of the main parts with the help of which it will be possible to create something in this application. In the editor you can draw, create cartoons, write scripts and so on.

... Main goals:
- minimalistic code size with loading the necessary parts of the script as necessary so that the kernel does not weigh much, since all functions will not be used. If additional functionality is needed, then it is loaded, if additional. functionality is not required, then everything remains in its place.
- if possible, loading a script, animation with multimedia data - in one file! That is, not a bunch of individual, a hundred photos and two music, but one file in which all this is located.
- For rendering, it is worth using a user's video card to increase the capabilities of the script. In order not to strain the browser and cause total freezes, plus, through the map, since there are several times more power there, you can construct full-fledged 3D games, since there is enough power for it.

As a result, you can make a powerful program together for WEBa, such as web4.0 :)))) The

license will be the most open, that is, you can do anything with anyone who wants it and anybody (whatever it is like will be selected in the near future )

Stage Three: Development

For development, github will be most convenient. In terms of functionality, it is most suitable! For beginners, a description of what it is and how it works will be in the next article.

And now the question to the entire habrasociety “What should I call this application?”

All options will be taken into account and the most popular will be chosen! The project is currently located at github.com/xamelion/newproject and is completely empty!