検索
ホームページウェブフロントエンドhtmlチュートリアルケース練習! 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 ]

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTMLドキュメントのルートタグは何ですか?HTMLドキュメントのルートタグは何ですか?Apr 29, 2025 am 12:10 AM

Theroottaginanhtmldocumentis.itservesStop-levellementThateChationCothercontent、ProperDocumentsTurcuteRuctureAndBrowsingを保証します。

HTMLタグと要素は同じものですか?HTMLタグと要素は同じものですか?Apr 28, 2025 pm 05:44 PM

この記事では、HTMLタグは要素を定義するために使用される構文マーカーであり、要素はタグやコンテンツを含む完全なユニットであると説明しています。彼らは協力してWebPages.Characterカウントを構築するために協力します:159

< head>の重要性は何ですかおよび< body> HTMLのタグ?< head>の重要性は何ですかおよび< body> HTMLのタグ?Apr 28, 2025 pm 05:43 PM

この記事では、< head>の役割について説明します。および< body> HTMLのタグ、ユーザーエクスペリエンスへの影響、およびSEOの影響。適切な構造化により、ウェブサイトの機能と検索エンジンの最適化が強化されます。

< strong>< b>の違いは何ですかタグと< em>< i>タグ?< strong>< b>の違いは何ですかタグと< em>< i>タグ?Apr 28, 2025 pm 05:42 PM

この記事では、HTMLタグの違いについて説明します。、、、、、、、およびプレゼンテーションの使用とSEOとアクセシビリティへの影響に焦点を当てています。

HTMLのドキュメントで使用されている文字セットを示す方法を説明してください。HTMLのドキュメントで使用されている文字セットを示す方法を説明してください。Apr 28, 2025 pm 05:41 PM

記事では、UTF-8に焦点を当てたHTMLでのキャラクターエンコーディングの指定について説明します。主な問題:テキストの正しい表示を確保し、文字化けされたキャラクターの防止、SEOとアクセシビリティの強化。

HTMLのさまざまなフォーマットタグは何ですか?HTMLのさまざまなフォーマットタグは何ですか?Apr 28, 2025 pm 05:39 PM

この記事では、Webコンテンツの構築とスタイリングに使用されるさまざまなHTMLフォーマットタグについて説明し、テキストの外観に対する影響とアクセシビリティとSEOのセマンティックタグの重要性を強調しています。

「ID」属性とHTML要素の「クラス」属性の違いは何ですか?「ID」属性とHTML要素の「クラス」属性の違いは何ですか?Apr 28, 2025 pm 05:39 PM

この記事では、HTMLの「ID」属性と「クラス」属性の違いについて説明し、一意性、目的、CSS構文、および特異性に焦点を当てています。それらがWebページのスタイリングと機能にどのように影響するかを説明し、のベストプラクティスを提供する

HTMLの「クラス」属性とは何ですか?HTMLの「クラス」属性とは何ですか?Apr 28, 2025 pm 05:37 PM

この記事では、スタイリングとJavaScriptの操作の要素をグループ化するHTML「クラス」属性の役割を説明し、一意の「ID」属性とは対照的です。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン