【Unity】2D空間ログインゲーム開発入門チュートリアル(前編)

Unity は、サポートされているプラ​​ットフォームとデバイスの長いリストを備えた、非常に人気のある多用途のゲーム エンジンです。Unity について考えるとき、おそらく 3D ゲームが最初に思い浮かぶでしょう。このエンジンはかつて Unity 3D と呼ばれていたこともあります。ただし、ほとんどのモバイル、コンソール、デスクトップ ゲームは 2D で表現されるため、2D ゲームを構築するために Unity が提供する機能を理解することが重要です。

このチュートリアルでは、2D スペース ランダー ゲームを構築し、その過程で次のスキルを学びます。

  • スプライトとカメラの使い方。
  • _物理 2D_ コンポーネントと、衝突とゲームプレイの処理方法についてのすべて。
  • 2D アニメーションと状態を設定する方法。
  • レイヤーとスプライトの順序が 2D ゲームに与える影響。

このチュートリアルのマテリアルは Unity バージョン 2020.3 で構築されました。

始める

シーン フォルダー内の Lander シーンを開きます。ゲーム ビューに次のような内容が表示されるはずです。

チュートリアル冒頭のゲームビュー

スプライトの並べ替えにより、まったく同じ画像が表示されない場合があります。これについてはチュートリアルで後ほど説明します。スターター プロジェクトは機能的な 2D スペース ランダー ゲームですが、実際に完成させるには解決する必要がある問題がいくつかあります。

離陸して最寄りの着陸パッドまで危険な旅をする準備はできていますか? さあ、始める時が来ました!

: Unity の 2D ゲームは、当然のことながら、Unity エディターの2D モードを使用します。プロジェクトを最初から作成する場合は、2D モードまたは 3D モードを選択できます。このオプションはスターター プロジェクトですでに設定されています。

中央で2Dモードを選択します

Unity のスプライト

大まかに言えば、スプライトは単なる 2D グラフィックス オブジェクトです。これらは基本的に、通常 3D オブジェクトに使用する標準のテクスチャです。ただし、Unity には、ゲームでの超効率的なパフォーマンスと便利な開発エクスペリエンスを実現するために、これらのスプライト テクスチャを組み合わせて管理するための特別なテクニックがあります。

つまり、優れた 2D ワークフローと組み込みエディターのおかげで、Unity ではスプライトを簡単に使用できます。

スプライトをゲームに追加するには、プロジェクト フォルダーからシーンビューにスプライトをドラッグ アンド ドロップします。このプロセスがいかに簡単かを自分の目で確認するには、まずScene_ ビューを選択します。次に、Player スプライトをSpritesフォルダーから Scene ビューにドラッグします。

スプライトをシーンビューにドラッグします

階層内で、Unity が作成したプレーヤーをクリックし、インスペクターでその詳細を表示します。Unity は、プレーヤー スプライトを含む sprite_renderer_component をゲーム オブジェクトに自動的にアタッチすることに注意してください。

スプライトインスペクタ

必要なのはそれだけです!_Sprite Renderer_ を使用すると、2D および 3D シーンでイメージをスプライトとして表示できます。

次に、_Player_ を階層から削除します。

エルフモード

「Assets/Sprites」フォルダー内のスプライトをクリックします。インスペクターには、スプライトを操作するための 3 つの異なるモードがあります。

2Dスプライトモード

  • シングル: 単一画像のスプライト。
  • マルチプル: 複数の要素 (アニメーションなど) を含むスプライト、またはキャラクターのさまざまな部分を含むスプライト シート。
  • ポリゴン: さまざまなタイプのプリミティブ形状の作成に使用できるカスタムのポリゴン形状のスプライト。例: 三角形、正方形、五角形、六角形。

スプライト シート (アトラス) は、次のような多数の小さな個別の画像を含む単一の画像です。

スラスタースプライトシート

スプライト シートを使用する理由は、ゲームで使用するすべての画像が描画呼び出しを必要とするためです。スプライトが数十個ある場合、これは大したことではありませんが、ゲームの複雑さと範囲が増大するにつれて、潜在的な問題になる可能性があります。

スプライト シートを使用すると、多数のスプライトに対して 1 回の描画呼び出しを行うことができ、ゲームのパフォーマンスが向上します。もちろん、スプライト シートの構成はスプライト シートを使用することと同じくらい重要ですが、それは別のチュートリアルです。

エルフ編集者

複数のグラフィック要素を 1 つの画像に詰め込むことは、多くの可動部分を持つアニメーションやオブジェクトにとって非常に便利です。Unity では、組み込みの 2D スプライト エディターを使用してこれらのスプライト シートを簡単に管理できます。

このゲームでは 2 つのスプライトシートを使用します。1 つは着陸船のスラスター アニメーション用、もう 1 つは爆発アニメーション用です。どちらのアニメーションも複数のフレームで構成されており、スプライト エディタを使用して編集したりスライスしたりできます。

Assets/Sprites/Explosion/explosion-spritesheet.png はスライスされてアニメーション用に準備されましたが、Assets/Sprites/thruster-spritesheet.png にはまだ注意が必要です。

爆発するスプライトシート

スプライトシートをスライスする

プロジェクト ウィンドウで _Assets/Sprites/thruster-spritesheet.png_ をクリックします。インスペクターでは、スプライト モードはすでに [複数] に設定されています(そうでない場合は、変更して [適用] をクリックします)。

次に、_Sprite エディターをクリックします。

スプライトエディタを開く

Unity の新しいバージョンでは、スプライト エディターはデフォルトではインストールされず、パッケージ システムに移動されているため、追加する必要があります。

スプライトエディタはデフォルトではインストールされません

この警告は、初めてスプライト エディターを開こうとしたときに表示されます。

[ウィンドウ] ▸ [パッケージ マネージャー] に移動します。[パッケージ]ドロップダウン リストから [Unity Registry] を選択し、2D スプライトを見つけます。「Install_」をクリックしてツールをプロジェクトに追加します。

パッケージマネージャーを使用して 2D スプライトを追加する

thruster-spritesheet.png に戻り、もう一度 [スプライト エディター] をクリックします。新しいウィンドウがポップアップし、スプライト シートが個々のフレームに自動的にカットされて表示されます (番号は説明のために追加されており、スクリーンショットの一部ではありません)。

スプライト内の単一フレームをスライスする

ウィンドウの左上隅にある _Slice_ をクリックします。_これが自動的にデフォルトのスライス操作になることに注意してください。

Unity はスプライト シートを自動的にスライスします

これは、Unity がスプライト シート自体を最大限に配置してスライスしようとすることを意味します。この場合は問題なく動作しますが、セル サイズまたはセル数でスプライト シートをスライスすることもできます。

カスタムスライス

[セル サイズ] オプションを選択すると、ピクセル寸法を使用してスプライト シート内の各フレームのサイズを指定できます。

ウィザード エディターの [スライス] メニューの下にある [セル サイズによるグリッド] をクリックします。

スライス オプション: セル サイズによるグリッド

[ピクセル サイズ] で、Xに9 を入力しY32 を入力します。他の値は0のままにし、PerspectiveをCenter設定します。次に、「_スライス_」をクリックします。

スライド&ダイス

ウィザード エディター ウィンドウで [適用] をクリックして、変更を適用します。

スプライトエディターアプリケーションボタン

これで完了です。これでスラスター スプライト シートを使用する準備が整い、スプライト エディタを閉じることができます。

ランダーにスプライトを割り当てる

さて、ゲーム内では実際に着陸船を見ることはできません。これは、スプライト レンダラー コンポーネントがアタッチされていないためです。派手な着陸や墜落はありません。– 着陸船が画面に表示されない場合。

これを修正するには、階層内の Lander ゲーム オブジェクトをクリックします。インスペクターで、 「コンポーネントの追加」をクリックし、検索テキストバーに「Sprite Renderer」と入力し、最後に「Sprite Renderer Component」を選択します。

次に、コンポーネントのプロパティでスプライト フィールドの横にある小さな円のアイコンをクリックし、_playership スプライト_を選択します。

[レイヤー内の順序] を1に設定します。それについては後ほど詳しく説明します。

次の仕事は、着陸装置のスプライトを割り当てることです。

Lander Game Objects の下にあるLanderFeetゲーム オブジェクトをクリックします。次に、 「 Sprite Renderer」コンポーネントのプロパティの「 Sprite 」フィールドの横にある小さな円のアイコンをクリックします。最後に、以下に示すように、「エルフの選択」ウィンドウで「Landing Foot_Elf_Elf」を選択します。

ランダーフィートを選択してください

[_Play_] をクリックすると、ゲーム ビューで着陸船が表示されます。WASDまたは矢印キーを使用して、画面上を移動します。

ヒューストン、空挺中です!

私たちは空輸中です!

着陸船が目に見えない力によって停止された場合、前述のスプライト分類の問題により、目に見えない小惑星の近くを飛行しようとしている可能性があります。さあ、あなたが到達できる(そして見ることができる)宇宙の一部を探索してみましょう。:]

2D カメラとユニットあたりのピクセル数

デフォルトでは、Unity 2D プロジェクトには正投影カメラ ビューがあります。通常、2D ゲームではパースペクティブ カメラ ビューを使用するのではなく、これに固執する必要があります。それらの違いについては、「Unity の概要」チュートリアルの第 2 部で詳しく学ぶことができます。

次の画像は、シーンのメイン カメラのデフォルトのカメラ設定を示しています。

Lander のデフォルトのカメラのオルソ設定

前述したように、Projectionプロパティは Orthogonal に設定されています。_

プロジェクト ウィンドウでプレイヤー キャラクターを選択し、インスペクターでそのインポート設定を表示します。現在、「単位あたりのピクセル数」プロパティはデフォルト値の100に設定されています。

プレイヤーユニットごとにスプライトピクセルを発送

それで。この文脈での 100 は何を意味しますか?

単位あたりのピクセルに関する言葉

Unity の単位は、必ずしも画面上の実際のピクセルに対応するとは限りません。代わりに、通常は、任意のスケール (たとえば、1 単位 = 1 メートル) に基づいてオブジェクトのサイズを変更します。スプライトの場合、Unity は単位あたりのピクセルを使用して、スケールされていないサイズを単位で決定します。

幅 500 ピクセルの画像からインポートされたスプライトを考えてみましょう。次の表は、単位あたりのピクセル値のさまざまなスケールを使用してスプライトをレンダリングしたときに、X 軸上のゲーム オブジェクトの幅がどのように変化するかを示しています。

ピクセル幅計算行列

まだわかりませんか? 次のシナリオは、単位変換で何が起こっているかを理解するのに役立ちます。

静的カメラを使用し、コンピューターのデスクトップの壁紙に似た背景のスプライトを全画面表示するゲームを考えてみましょう。

Assets/Sprites/backdrop.png の高さは 2048 ピクセル、デフォルトのピクセル/ユニット比は 100 です。計算してみると、階層内の Background Game オブジェクトの高さは 20.48 ユニットであることがわかります。

ただし、正投影カメラのサイズ プロパティは画面の高さの半分しか測定しないため、背景ゲーム オブジェクトの正確な高さを画面全体に表示するには、正投影サイズ 10.24 を使用する必要があります。

単位あたりのピクセル数の説明

ただし、ゲーム内の移動カメラには現在のサイズ5が機能するため、プロジェクト内のカメラを変更する必要はありません

誇り高き銀河

スプライトのインポート設定の最大サイズ プロパティを使用すると、スプライトの最大サイズをピクセル単位で定義できます。この設定は、対象とするプラットフォームごとにオーバーライドできます。

水色の銀河を持つシーン ビューの背景を拡大します。少しぼやけていることに注意してください。スプライトをインポートするとき、「最大サイズ」プロパティはデフォルトで 2048 になります。Unity はデフォルトのテクスチャ サイズに合わせて画像を縮小する必要があるため、画質が低下します。

画像の問題を解決するには、プロジェクト ウィンドウで背景スプライトを選択します。次に、[インスペクター] ウィンドウで、[PC、Mac、および Linux のスタンドアロン設定を上書きする] (コンピューターのモニターのように見えるタブ) を選択します。

次に、PC、Mac、Linux の独立したカバレッジを確認し、最大サイズを4096に変更します。[適用] をクリックし、Unity がシーン ビューの背景を再度インポートするまでしばらく待ちます。背景が突然鮮明になるのがわかります。

テクスチャの最大サイズを変更する

最大サイズを 4096 に設定すると、Unity は 4096 x 4096 のテクスチャ全体を使用するように指示され、元の画像の詳細を確認できるようになります。

サイズの拡大

ただし、この忠実さには代償が伴います。インスペクターのプレビュー領域は次のようになります。背景テクスチャのサイズは、以前の 1.0 MB から 4.0 MB になりました。

テクスチャファイルのサイズ

テクスチャのサイズを増やすと、メモリ フットプリントが 4 倍に増加します。

Unity は、いくつかのオーバーライド設定を使用して、他のプラットフォーム向けのビルドをサポートしていることにも言及する価値があります。他のプラットフォーム用にゲームを構築する予定があり、異なるサイズとフォーマット設定を設定したい場合は、これらのオーバーライド設定を使用できます。

: 4096 x 4096 はかなり大きな画像ファイルです。特にモバイル ゲームではこのサイズの使用を避けてください。このプロジェクトでは、例として大きな画像のみを使用します。

テクスチャ

次のようにテクスチャの _format_ を変更することもできます。

書式設定

一部のテクスチャのサイズを変更して、品質を向上させたり、サイズを小さくしたりすることもできますが、これにより、画像のメモリ使用量が増加したり、テクスチャの忠実度が低下したりする可能性があります。これらの設定を調整する最善の方法は、各設定がどのように機能するかを調べ、テストし、結果として得られるテクスチャの品質とサイズを比較することです。

「Tight」形式を使用して、Tight_Quality スライダー値を設定します。圧縮値が 50% の場合、圧縮に時間がかかりますが、ファイル サイズは可能な限り小さくなり、さらに調整できます。

バックグラウンドでのインポートを、フォーマットと圧縮品質の設定を使用する前の状態に戻します。次に、「適用」をクリックします。

最終的な背景テクスチャ設定

独自のゲームを開発する場合は、圧縮設定を使用して、必要な品質を維持しながらテクスチャ サイズを最小にする組み合わせを見つけることができます。

このチュートリアルの資料を入手するには、公開アカウント「Unity Game Workshop」を検索してフォローし、「002 」と返信してください。

つづく…

おすすめ

転載: blog.csdn.net/weixin_72715182/article/details/130509113