Secret love Eliminate + Little Prince clay style animated HTML 5 make the whole process

Hello everyone, I am Tencent tgideas Animation division Eva, lucky to participate in this joint "Little Prince" film launched love to eliminate the small Prince game version of the World Outlook promotion H5, at the same time we also did another version, as the game embedded worldview, respectively, after the National Day holiday, in micro-letter, hand Q, and public relations and other platforms to promote, The data feedback is also great, so let's share this painful and loving process.

　　First, the early creative

1. Purpose: Daily love to eliminate with the "little Prince" film Cooperation, the launch of the small Prince game version, need a warm-up promotion H5.

2. Creative Main participants: Game marketing, creative support, visual design, multimedia design and other principals.

3. The question of the elimination of love and the combination of the little prince:

Cultural background differences: household names in foreign countries, mainly in the field of literary and artistic youth is well known;

Different tone: love to eliminate leisure and happiness, the Little Prince melancholy deep;

Common lack: The little prince and love to eliminate the game play the law of the coincidence point less;

Different art styles: Love eliminates the Q version of the minimalist style, the little Prince Clay literary style.

Creative Script

We set up a Meow planet in the story, the core of the elimination of love play, built into the world view of the planet, hoping to borrow the little prince's perspective, explore the mysteries.

According to the young Prince of the original from the perspective of children to praise the truth, we hope to combine the elimination of love, to "eliminate the trouble" as the key entry point, connect the little prince of the pure world, the feeling of growth.

5. The choice of adjustment

According to the script originality, we plan the early stage animation, the music, the dubbing all is walks the little Prince's tune sex. Because the copyright reason did not direct use "The Little Prince" the movie soundtrack, then consults its mystery and the story, decided by the team original, the dubbing unanimously chooses the son. However, in the end, music and dubbing still appear to be unexpected changes, as detailed below.

6. Style Selection

The Little Prince film Party initially does not allow us to create the image of the film, so two characters two styles, need to choose a kind of neutralization style, and clay style just can combine with love to eliminate and small Prince childlike commonness, let two kinds of painting wind together, and team also have high color value clay talent made ( Below will do detailed introduction not anxious ha, so this plan is so pleasant to set up.

　　Second, the production process

Say so much, what exactly does a clay animation H5 should prepare? The following more content, first put a general sketch of the Division of labor.

Copy confirmation within 3 weeks of H5 DEMO, but also to reserve the later optimization time, if the above work step by step to do, daily overtime also do not finish, must each division of labor synchronization overlap. For example, in the preparation of the copy, clay test and background music production are in progress, in the clay production at the same time, dynamic story board is also in sync, the work with good can speed up the overall progress.

　　Copy (Creative Support)

The first is the script copy, the core of the story. The process must be validated as early as possible so that the next step of the work unfolds. To say a digression, in the early days of our classmates and the copy of the script, the scene everyone incredibly moved himself to cry, must have gone heart, regardless of the final delivery to the audience there can receive a few, but the original creation to full, first to impress themselves, and in the process of achieving as much as possible to retain the move.

　　Sub-mirror/dynamic Story Board (multimedia design)

With the script, the next animator and the visual designer (that is, Clay's talent) are sketching out the mirror, and the little partners in the process need to know what we're going to do.

It is estimated that only we can read this sketch (~￣▽￣) ~

After the shooting agreed, the animators need to be based on the script and the drafting of the mirror, the production of a dynamic story board, that is, dynamic version of the shooting, the plot of each scene with a concise animation series, the story to understand.

This is a very important step, although the process according to the regular H5 page, there is no mirror this step, but also only in the Kingdom of great film Giant Valley H5 animation project design, and the designer to discuss the steps of the mirror, but there is no time really out of a version of the dynamic story board. This time is different from the past, need to complete the length of nearly 3 minutes long animation, you must use the dynamic storyboard to control the overall rhythm. (Animated story Board fragment GIF)

Third act dynamic diagram is too large, right stamp visible: www.uisdc.com

　　Clay making (visual design)

The dynamic story board is determined after our clay talent, and we start making clay shapes that need to be used. This link is very important and determines the visual effect of the whole H5.

Clay uses both soft and lightweight clay materials, soft pottery to make parts that need to be carved, and light clay to make round, soft parts, such as roles. After the kneading system is finished, the clay is photographed in many angles, the process of filming needs to unify the light source, the picture material is placed in the PS to simulate the frame effect, then the material PSD is provided to the animator.

Now come and enjoy the clay of Meng Meng.

　　Canvas Animation (Multimedia design)

In H5 environment, do long frame-by-step animation is not realistic, the page will collapse because of the volume of material, unless made into video format, but video compatibility is poor, can not meet all types of platform.

So we chose to simulate the clay animation scheme. The need to do the animation of the material is disassembled into parts in flash reorganization, duplicate the material can be used many times, reduce resource consumption. Refer to the production of one of the mirrors, the whole animation is basically done in this way. But in the film so many shots, designers in a limited time can only be important to the screen design, the rest of the mirror, need to complete the animation material. After the production of the animation to canvas front-end development, make it into H5, can be in the mobile phone page preview.

　　Canvas script (Multimedia development)

This H5 is mainly for high-end configuration of mobile devices, however, the amount of material is also quite alarming, plus animation when the length of 2 minutes, there is a circular background music, the corresponding subtitle narration, animation in the middle part of the interaction, in order to save resources, part of the depth of the effect of using code All of this makes our scripting Brother's later optimization cost a lot of effort, not to mention the most abusive repetitive changes.

　　Little Prince 3D model (Yigaxu Multimedia Design Group)

H5 Small Prince's modelling was originally planned to use clay to make, but the film side about the little Prince modelling copyright problem more tangled, plus the role needs to do run, jump, bending and other actions, if the use of clay material dismantling method, it is difficult to restore the correct body shadow, so we use the project team to provide 3D model, The action footage of the little clay Prince was rendered by another animator.

Also consider the lighting problem, where light is emitted from the cage:

　　Music & Dubbing (multimedia design)

The arrangement is actually Eva's hobby, although amateur, but every time has the opportunity to use to work all will redouble the intention, for instance this year first half had the honor to 3.30 Conference H5 creation background music.

The music was played using garage band's piano, and a string combination was added to the emotional sublimation part. In order to make this music slightly French poetic fairy tale flavor, the first use of the mixed-Modes Church mode, which originated in the ancient European Christian Hymns, the use of this mode will make the music sound with a faint mystery and story. Unfortunately, the last piece was not adopted.

Garage Band iphone Version interface

As mentioned earlier, throughout the H5 animation, music demo after the completion of the project team suddenly put forward an unexpected change, from the love to eliminate the brand from the point of view, requirements of the original plan, in favor of the "little Prince" to change the heart of the changes into love to eliminate the joy of adjustment, dubbing also required from the boys into white-collar girls.

Modification of the tone for us is a more serious matter, in the communication is ineffective, we have to do a new version. The time reason, the music had to go to outsource the heavy system, the dubbing also has recorded several editions again. The first edition of that kind of reading will make people nose root an acid feeling has gone, now everyone see the online version, is modified after the happy end of the version.

　　Refactoring/Development testing (front-end refactoring)

Because this H5 also involves the game welfare to receive, therefore also needs the backstage development Union to adjust. When the main content of H5 is ready, it is released by our refactoring package. Embedded version of the game also needs to play the game development test, in the daily love to eliminate the new version of the game online.

Finally on the line, the process is difficult, whether it is the limit of the production cycle, the complexity of the production process, or the hardships of the late optimization, are a new challenge, hard to participate in each of the students, look forward to the next cooperation.