Tencent game Team Puzzle "Naruto" H5 creative whole process!

January 8, "Naruto" Hand tour ushered in the not-grid, twinkling in charge of the fire shadow hand travel creative design work more than a year, in this period of time from "Naruto Young Tian Wedding" to "return to the wood leaf Village" Sand table project we have tried many styles of H5 and interactive station for the fire shadow hand, during the spring Festival we have tried a paper-cut style H5.

　　Project background:

At the advent of the Spring Festival, we learned that Naruto theater version-Bo 2.18 will be released in China, the film is mainly about Naruto and his son Bo-man story of the world. As the fire Shadow Hand tour Market design team, we think we can for "Bo people Biography", for the Fire Shadow Hand Tour project, for the fire fans to do something, to the fire fans to a little surprise! A special visual language is used to convey the feelings of the father and son in the fire movie. And at this time just have a fire shadow hand tour of the New Year red envelopes market operation activities need a H5 as a carrier. So we decided to make a H5, and the three major designs of this H5 are:

01. "Bo People biography" movie release---Tell the people and Bo People's father and son Love (emotional content appeal)

02. The Spring Festival hair red envelope----(function and atmosphere appeal)

03. Fire Shadow IP---Comics (visual content appeal)

　　Creative process:

It is well known that red envelopes (lucky money) are expressions of affection between loved ones, Naruto and his father and Naruto and his son in the reincarnation of the parent-child relationship, is our intention to pass "lucky Money" as a series, telling a pan-public relationship between father and son, so more likely to resonate with the public, and as we , there have been most parents, this relationship between father and son, feel deeper, so we determine the main line of the story: Reincarnation of the father and son love

Spread out we want to carry the three elements of content, we found that with rich years of paper-cut animation to tell the story of the father and son, with lucky money as a clue to pick up the emotional red envelopes is the most appropriate choice, and paper carving style of H5 also no one has done. Chinese New Year in China have stickers paper-cut pictures of the custom, so the paper-cut style of design more can reflect the annual taste, more easily create the atmosphere of the Spring Festival. So we decided to use the Spring Festival paper-cut style to design a story about Naruto and his father's feelings of comic books.

　　Creative implementation:

01. Copywriting and Scripting

A total of five scenarios were set. The role of each scene, scene elements are set in detail. (The following figure is a partial script diagram)

Click on the picture to see the large HD image

02. Creative visual efficiency and style of implementation

Our original idea is a piece of page H5, Danjangguan effect is like paper carving light box The same picture effects, plus some micro-animation. Just like the paper carving artist Nair &hari couple do the paper carving works, through multi-level handmade paper-cut sculpture, layered assembled in the box, from behind or under the LED lighting, showing a 3-dimensional stereoscopic feeling of light and shadow projection effect. We would like to on this basis, after the actual film made H5, you can use the phone gyroscope, hand-held mobile phone shaking produces micro-parallax of the visual 3-D effect, plus some scenes micro-animation. But the visual experience of this way is not smooth, also not novel, the execution cost is also slightly high, and the Spring Festival countdown time is not enough. So we thought of a better way to do an electric rotating disk, insert paper carving, use the light, the rotation of the disc to form the actual shadow of the dynamic effect. A bit of the feeling of shadow, and a bit of the effect of the Western mirror, this can better fit the concept of the theme rings, but also a good solution to the problem of H5 dynamic transition. The schematic diagram is as follows:

03 Filming with late

Fortunately Tgideas has its own professional studio, we stay in the studio is a whole day, after three days of bitter, finally completed the filming work. Encountered a lot of problems in the middle, through repeated assembly and debugging, try to bring the density of the visual effects of paper, lighting and lens debugging, try to make artificial snow, dust falling effect, in order to achieve the best true lighting effect!

The final H5 presentation

In addition, we also use these materials designed to create a fire shadow paper carving red envelopes!

Project Summary:

After many difficulties and challenges, continuous optimization, the project finally in the year before the smooth on-line, during the accumulation of a little H5 project experience, share with you.

1, to have love

The whole project to do down, the mood is incomparably happy, full of our love of the Fire shadow. If you want to do a creative H 5, first of all to be moved to participate in the project everyone, so that team members feel that this is a fun project, are willing to pay all the passion and love to work.

2, to play something different

Recently we are various styles of H5 brainwashing countless times, H5 style more and more rich, one night, illustrator, cartoonist also seems to find a new living space, our designers are also looking for a unique visual design language to express their ideas. To have a rich language of creative expression, need to go to some of the areas that are not their own professional, the world is very large, the art of expression is also a variety of, as designers should go out more to see, more to understand some traditional arts, traditional crafts, which will increase our ability to express creativity, Find the right visual art expression language for different creative themes.

3, to take the initiative

This project is an interesting project that we initiate and drive, suggesting that designers have a good idea to proactively propose and drive projects.