ケース練習！ Tencent NARUTO ゲームの背後にあるデザイン ストーリーを明らかにする Html 5_html/css_WEB-ITnose

あっという間に1年以上、『NARUTO -ナルト- ヒナタの結婚式』からモバイルゲームのクリエイティブデザインを担当してきました。 「木の葉の村に戻る」 サンドボックス プロジェクトでは、NARUTO モバイル ゲームのさまざまなスタイルの H5 とインタラクティブ ステーションを試しました。この実践的なレビューを見てみましょう。 ！

プロジェクトの背景:

春節が近づき、「NARUTO THE MOVIE - BORUTO」が2.18に中国で公開されることがわかりました。この映画は主にナルトとその父親についてのものです。息子ボルトの息子の物語。 NARUTO -ナルト-モバイルゲームマーケットデザインチームとして、『BORUTO』、NARUTO -ナルト-モバイルゲームプロジェクト、そしてNARUTOファンのために何かできることがあれば、NARUTOファンの皆様にサプライズを提供できると考えています！特別な視覚言語を使用して、NARUTO の父と息子の感情を NARUTO ファンに伝えます。このとき、たまたま携帯ゲーム「NARUTO-ナルト-」の正月紅包発行のための市場運営活動があり、通信事業者としてH5が必要でした。そこで私たちは H5 を作ることにしました。この H5 のデザイン上の 3 つの主要な要求は次のとおりです。

01 映画『BORUTO』の公開 - ナルトとボルトの父子関係の物語を語る (感情的な)

02 春節に赤い封筒を配る - (機能的および雰囲気的な要求)

03 NARUTO -ナルト- IP - コミック (ビジュアルコンテンツの要求)

クリエイティブプロセス:

ご存知のとおり、赤い封筒 (お年玉) は近親者間の感情を表現する方法です。ナルトとその父親、そしてナルトにおけるナルトと息子の転生した親子関係が私たちのものです。 「Lucky Money」をシリーズとして、父と息子の一般的な関係についての物語として使用する予定です。これは、1980 年代生まれの人々の共感を呼ぶ可能性が高い感情的な物語です。このような親子の輪廻転生の関係性はより深いものを感じるので、物語の主軸は父子愛の輪廻転生であると判断しました

の三大要素を配置しました。私たちが伝えたい内容を考えると、父と息子の関係をお正月風の切り絵アニメーションで表現し、お年玉を心の手がかりとして紅包活動を行うのが最適であることが分かりました。 、そして紙彫りのスタイル H5も誰もやったことがありません。中国では旧正月に切り絵を貼り付ける習慣があるため、切り絵風デザインの方が新年の雰囲気がより反映され、春節の雰囲気を出しやすくなります。そこで私たちは、春祭りの切り絵スタイルを使用して、ナルトと息子の感動的な物語を伝える漫画本をデザインすることにしました。

クリエイティブの実行:

01 コピーライティングと脚本

合計 5 つのシーンが設定されました。各シーンのキャラクターやシーン要素には詳細な設定が存在します。 (下の写真はスクリプトのイラストの一部です)

02 クリエイティブな視覚効果とスタイルの実行

私たちのオリジナルのアイデアは、単一のライトを備えたページめくりの H5 です。効果 紙の彫刻ライトボックスと同じ画像効果に加えて、いくつかのマイクロアニメーションがあります。紙彫刻アーティストのNair & Hariが制作した紙彫刻と同様に、手でカットした紙の彫刻を何層にも重ねて箱の中に組み上げ、背後または下からLEDで照らすことで立体的な光と影の投影を作り出します。効果。これに基づいて、実際の撮影後に H5 を作成したいと思います。携帯電話のジャイロスコープを使用して、携帯電話を振ることでマイクロ視差のインスタント 3D 効果を生成し、いくつかのシーンのマイクロアニメーションを追加します。ただし、この方法の視覚体験は滑らかでも斬新でもありません。実行コストはわずかに高く、春節までのカウントダウンには十分な時間がありません。

そこで私たちは、電気で回転する円盤を作り、紙の彫刻を挿入し、ライトを使用して、円盤の回転によって仮想と現実の光と影のダイナミックな効果を生み出す、より良い方法を考えました。これには、影絵のような雰囲気と少しのゾートロープ効果があり、テーマの年輪のコンセプトによりよく適合し、H5 の動的遷移の問題も解決します。コンセプトの概略図は次のとおりです。

03 撮影とポストプロダクション

ありがたいことに、TGIDEAS には独自の専門スタジオがあり、スタジオに残ってすぐに驚きました。3日間のハードワークを経て、ついに撮影が完了しました。その過程で多くの問題に遭遇し、何度も組み立てとデバッグを繰り返しながら、紙の密度、ライトやレンズの調整、降る雪や降り注ぐ金粉の人工的な現実感を作り出すことを試みました。最高のリアリティを実現するために。

H5最終発表

さらに、これらの材料を使用して、ナルトの紙彫刻の赤い封筒をデザインして作成しました。

プロジェクトの概要:

多くの困難と課題、継続的な最適化を経て、このプロジェクトは昨年ついに成功裏に開始されました。この期間中に、私は少しの経験を積みました。 H5 プロジェクトを共有したいと思います。

1. 愛を持ってください

プロジェクト全体を完了した後、私はとても幸せな気持ちになり、ナルトへの愛で満たされました。創造的な H5 を作成したい場合は、まずプロジェクトに関わる全員を動かして、チームメンバーがこれは楽しいプロジェクトだと感じ、情熱と愛情を込めて取り組む意欲を感じるようにする必要があります。

2. 何か違うものをプレイする

最近、私たちはさまざまな H5 のスタイルに洗脳されてきましたが、一夜にして、イラストレーターや漫画家は、新しいスタイルを見つけたようです。私たちデザイナーも、創造性を表現するためのユニークなビジュアルデザイン言語を探しています。豊かな創造的な表現言語を持ちたいなら、自分の専門外の分野にもっと関わる必要があります。世界はとても広く、芸術を表現する方法はたくさんあります。デザイナーとして、もっと外に出るべきです。 、もっと見る、そしてもっと見る いくつかの伝統芸術や伝統工芸品を理解することは、創造性を表現する能力を高め、さまざまな創造的なテーマに適した視覚芸術表現言語を見つけることになります。

3. 積極的に行動する

このプロジェクトは、私たちが積極的に開始し推進した興味深いプロジェクトです。デザイナーは、タイムリーにプロジェクトを率先して提案し、推進することをお勧めします。良いアイデアがある。

【時代の最先端を行くTencent HTML 5の高品質記事】

DNFの実践をまとめた素晴らしい記事です！

「Tencent ゲームが稼働中!」 DNF 生まれ変わる HTML5 プロジェクトの概要」

HMTL 5 ページを最適化するための 6 つのヒント!

「テンセントのベスト記事!」 HTML5 モバイル ページの最適化に役立つ 6 つのヒント》

HTML5 ページ デザインの実践的なまとめ!

「春雨の予言者！」 Tencent モバイル HTML5 ページ デザインの実践共有」

元のアドレス: tgideas.qq

[Ushe.com 元の記事投稿メール: 2650232288@qq.com ]