検索
ホームページウェブフロントエンド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 までご連絡ください。
< datalist>の目的は何ですか 要素?< datalist>の目的は何ですか 要素?Mar 21, 2025 pm 12:33 PM

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

< Progress>の目的は何ですか 要素?< Progress>の目的は何ですか 要素?Mar 21, 2025 pm 12:34 PM

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

< meter>の目的は何ですか 要素?< meter>の目的は何ですか 要素?Mar 21, 2025 pm 12:35 PM

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか?ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか?Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?Mar 20, 2025 pm 06:05 PM

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素?HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素?Mar 12, 2025 pm 04:05 PM

この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか?HTML5のクロスブラウザー互換性のベストプラクティスは何ですか?Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

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衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

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

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

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

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

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

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません