Floor796: Creating a Pixelated Intersection of Famous Universes

Introduction

I am from Belarus. I graduated from University extramurally majoring in telecommunications engineering. For the last 16 years, I have been working in the web development industry, namely in full-stack development. In recent years, I have been the CTO of Pikabu.

I got into animation when I was into programming at school making my first online game in Macromedia Flash 8. I have been developing it for 3 years and in around 2008 I had to postpone work on the game. Nevertheless, I have several screenshots of the game saved, from them it would be clear what kind of drawing and animation it was. It was a multiplayer MMORPG with battles of magicians and knights, quests, farming, and much more.

After this game, there were many small projects in Flash, where, apart from development, I was also doing animation. And then I switched to drawing small narrative gifs that were posted on Pikabu. Here is some of them:

Looking at them, it is immediately clear that I am an amateur at drawing, but I liked the reaction of users to my works. Though I did not like that for each gif, it took me several weeks or even a month to draw just one story. So not to lose interest, I switched between drawing gifs and making small games with character animations.

Floor796 Project

After a series of narrative gifs, which I had been drawing for a long time, I came up with an idea that I needed to draw small narratives, which would take only a day or two, and then put them together into one big scene. This is how a lazy amateur artist like me would switch from story to story and not get tired. Also, I have always wanted to draw something like Find Waldo or this cool project:

As a result, I thought, what if to implement a web-based animation editor similar to Adobe/Macromedia Flash, which will be specially adapted for a certain style (perspective, color palette, etc.)? In the past, I had experience developing similar editors for business projects, so it was easy to get started. However, I ran into a number of problems: vector or raster, which animation duration and fps, which perspective to choose, which palette to use, in which format to save, how to reduce network traffic when saving works, what tools are needed for drawing. In the end, after much trial and error, I settled on what we have now:

• I have chosen raster since it is easier to draw in it, add noises, make all sorts of small details;
• The animation lasts 5 seconds at fps 12, i.e., a total of 60 frames in total. Previously, I often used fps=12 in gifs and games, so I had experience with such low fps. And there is a problem with it – with fast movements, every step is visible, but it can be visually hidden if there is a lot of movement in the scene, this will distract the viewer. Fps=12 has an advantage – fewer frames, which means less drawing and less size for the final scene;
• I chose a perspective similar to isometry, but with slightly different angles, angle of inclination along with the height of the walls, I took 20% of the height of the entire canvas. Here is a rough scheme for better understanding:

• Palette was made by the uniform division of the HSB color model (33 hue divisions * 11 saturation divisions * 12 brightness divisions, for a total of 4356 colors in the palette). I also decided to simplify and made only 5 levels of transparency and bound them to keys 1-5. This is an important step, since it the drawing procedure easier, there is no need to switch transparency levels with the pen when drawing gradients and all kinds of glow and gases;
• Each animation frame of each separate layer is saved as a png, and then all frames of the scene are saved into one file. On the main page of the project, everything is already compressed, in a bunch of mp4 videos. It had its own great difficulty – it was necessary to synchronize all video fragments with each other. I have tried many ideas and stopped at the best one: when compressing to mp4, I make every 10th frame the key one (total 6 keyframes per video), and it is at these frames that all videos loaded in the browser stop for a split second and are synchronized with each other. If this is not done, then each video will have its own lag and the entire animation will begin to break down during playback. For reference, the main page with all the current animation is approximately 22 MB, while in its original form all the animation is 4.7 GB;

• I managed to reduce traffic by using the latest API of browsers, which allows saving and uploading files to the user's local disk. Thus, only what the user is ready to publish is sent to the server, and saving large data sizes (some scenes are 60 MB) happens almost instantly. Unfortunately, this API does not support Firefox yet.
• I spent a lot of time refining the drawing tools as I created the first scenes. From the start, there were only basic tools: brush, fill, erase, highlight, etc. Luckily, after the first 3 mini-scenes, I realized that I was missing a very important tool – a brush that paints not on top of the current layer, but under it. The introduction of such a brush greatly quickened the drawing process and improved the quality of painting, since it became easy to overlay backgrounds on objects with no artifacts along the outline, as with a regular fill. Then, as I was drawing, I built in the display mode of the previous frame (very important when drawing animation), various tools for distorting the layer for a non-standard perspective of the scenes, etc.

Creating a Scene

I have immediately chosen the project subject – it should be a space station, as it reveals many possible narratives and does not practically limit anything. Next, I have chosen the story of the first scene – a laboratory that produces soldiers. Such a narrative made it possible to create a workshop where it was easy to loop over each independent stage of the soldier "assembly". I wanted this assembly procedure to be as long as possible so that the viewer could follow many different stages.

But of course, there were failures as well. Since the editor was developed only by me and gradually, it had bugs, due to which I had lost a very large scope of work a couple of times. There were also errors when I chose the wrong scale of objects and, as a result, I had to redraw them. Here is one such example:

This mech had to be redrawn since I made it tiny by mistake, so it did not look very canonical. Since everything is drawn in raster in full-scale, unfortunately, there is no possibility to make the object bigger.

Most Memorable Scene

So far, the most memorable scene for me is a compartment with screens. Here is its initial state before I started drawing screens:

Initially, I could not imagine what would happen when I fill the entire scene with animation, so I was thrilled to make it as soon as possible and see how it would look when a bunch of screens is showing something at the same time. There were difficulties with the choice of what to draw for the screens. I decided that I would draw what I remember from the 90s and early 2000s. As a result, work on all screens took about 2 months, 5-10 screens per weekend.

If to take ordinary scenes, I personally try to come up with a funny story that can be looped for 5 seconds. Sometimes, as a character, I take someone who is well known to the general public and try to fit them into the context of the narrative in the scene. But drawing only famous characters is boring, so sometimes I come up with my own ones. There are still several videos where only a small part of the current animation is implemented. They show almost the whole process of work.

Time-Management

It takes about 2 months to create one story-filled scene if to draw only on weekends and sometimes on weekday evenings. In general, everything is equally difficult to draw, be it walls or characters. For the whole time, the most difficult thing was to draw Tentacle from Half-Life (at the top, green, with three heads). I tried to reduce the number of frames of animation, but so it still looks good. However, I had to draw around 120 frames of his movement anyway.

It is also difficult to draw faces. Since a person's face on such a scale is only about 20-30 pixels, it is sometimes difficult to make normal facial expressions). But this, in my opinion, gives its own charm to the project.

Becoming a Part of the Project

Anyone can offer their own animation to add to the main scene. The animation can be something small, or it can be a whole compartment filled with lots of mini-scenes. But it is important that the animation is about the same style as I have already created. I think the style is not complicated, realistic, you can easily recreate it. The style has a couple of features: everything should have a low-contrast outline, the light should fall from the top-right corner, and everything should have a shadow side and cast a shadow. And the most important thing is not to draw something that can greatly harm the project, for example, pornography.

Future Plans

The plans are ambitious – jointly create the world's largest animation scene, which can be viewed for a very long time and many times, and so what each time you can find something new in it. And so that anyone who participated in its creation could boast, for example, that they added their own idea to Floor796. For me personally, this project is a platform where I can take my mind off programming and draw something interesting in my free time, and everyone who is interested in the project.

0x00, Chief Technical Officer at Pikabu, Creator of Floor796

Interview conducted by Arti Sergeev