Playable
banners

HTML5

Creating a playable banner always begins with thinking through the scenario, idea, and mechanics. As a rule, this is interesting and addictive gameplay, simple. Our team of creatives and marketers created the script with extensive experience in the gaming industry. There are many factors to consider when writing a script:
1. Convenience and usability. Users should understand the task of the playable banner; it was clear where to press and what would happen when the button was pressed.
2. Originality. The banner should not be boring and mundane; it should captivate and involve a potential lead in the game.
3. Restrictions. Both of a technical nature (site requirements, restrictions on gestures and actions) and of a moral character (to create scenarios that do not offend people’s feelings, without humiliating their dignity, without the content of immoral content, etc.)

The stage of creating graphics comes. If the client does not have a clear vision of a playable banner’s style, we offer graphics examples and discuss the class. We are looking at two main paths to develop this stage:
1. Our skilled artists and illustrators create images from scratch, completely exclusive and original graphics.
2. Designers select graphics from specialized stocks and assemble a solid static layout.
3. The client himself provides all the graphics for animation. Whichever option is chosen at this stage, the playable banner will be assembled with high quality, if necessary, including the rendering of several frames to understand and visualize the mechanics written in the script.

The animation stage of a playable banner is one of the longest and most labor-intensive. After agreeing on the graphics and approving the layout, the source code is transferred to our motion department. Here, animation specialists bring our design to life and create all states of banner elements, animate characters, their physics, and movements, which will be shown during various user actions. All banner outcomes (successful and unsuccessful) and final pop-ups (whether you win, a bonus, a promo code, etc.) with a target transition button are animated. After the animation of all elements and outcomes of the playable banner, a video preview is created for the client.

After the end and approval of the animation, the files are transferred to the programming department. We usually use pixiJS and spineJS libraries to create playables. The first stage is writing the skeleton/engine for the banner. Such engines are individual for each project and are tailored exclusively for a specific game. Then we get the animation sources from the motion designer and fill the banner with game elements. Further, the conditions under which this animation is launched are prescribed. All game outcomes and final pop-ups are connected. After implementing all the logic, the game goes to the testing stage.

One of the most critical stages is banner testing. It checks the consistency of the result with the original layouts, their complete identity on all popular platforms (including mobile and desktop solutions), correctness, and synchronization of processing animations of text, images, and other elements. The correctness of banner adaptation on mobile devices is tested. Dynamic adaptation is necessary without re-downloading the banner from the server when the user changes the screen orientation to a more convenient one for viewing. The entire performance of the playable banner is checked, all scenarios and outcomes are played, and the correspondence of texts, buttons, the correctness of animation, and other vital processes are reviewed.

Many ad networks and platforms have specific requirements for ad creatives. Requirements for a playable banner must be provided immediately when setting up an assignment since late submission of requirements may result in a complete reassembly of the banner. The playable is initially assembled according to the structure of the site requirements, and at the final stage, after assembly, it is finally adjusted to all TT points. Adaptation can include almost any action related to the wishes of the advertising site or its technical features. A complete but not an exhaustive list of banner adaptations:
1. Minification of the amount of code.
2. Converting images to base64.
3. Adaptation by banner weight.
4. Flashing the banner for the target transition.
5. Spacer marks and pixels.