Unity 5で 2Dシューティングのチュートリアルを行う際の注意点(第06回)


Unity公式チュートリアル 2Dシューティング

第06回 背景を作る


上記チュートリアルで、私がつまずいたところ、初心者がつまずきそうなところをピックアップして解説します。

まとめへ戻る≪第05回へ第07回へ≫



6.1 3枚の画像を表示させる

今回は背景をスクロールさせるためにQuadにテクスチャを貼り付けます。
まずは、空のGameObjectを作成し、名前をBackgroundsとします。

メニューから、Game Object -> Create Empty を選択します。
Hierarchyに生成された GameObjectをクリックし、F2キーを押して「Backgrounds」にリネームします。

6.2 Frontを作る

次にGameObject -> Create -> QuadからQuadを作成します。そして、名前をFrontとしてBackgroundsの子要素としましょう。


BackgroundsとFrontのTransformの位置はともにX 0 Y 0 Z 0となるようにしてください。

メニューから、Game Object -> 3D Object -> Quad を選択します。
Hierarchyに生成された Quadをクリックし、F2キーを押して「Front」にリネームします。
Frontをドラッグして、Backgroundsにドロップし、Backgroundsの子要素にします。

ちなみに、Quadというのは、quadrangle(四角形)のことです(たぶん)。


次に、Hierarchyタブの Backgroundsをクリックし、表示される Inspectorの Transform内にある Positionの値を「X 0 Y 0 Z 0」に修正します。
Hierarchyタブの Frontも同様に修正します。

Frontの大きさを変更します。FrontのScaleを X 8 Y 6 Z 1 とします。

Hierarchyタブの Frontをクリックし、表示される Inspectorの Transform内にあるScaleを「X 8 Y 6 Z 1」に修正します。

MaterialsフォルダにあるBackground-FrontをQuadにドラッグ&ドロップします。

Projectタブの Materialsフォルダ配下にある Background-Frontを Sceneの白い四角の領域(FrontのQuad枠)にドロップします。
#HierarchyタブのFrontにドロップしてもたぶん大丈夫です。
ドロップすると、Sceneの白い四角の領域にテクスチャが張り付きます。

6.3 MiddleとBackを作る

Frontを複製してMiddleとBackを作成します。

図の通り、HierarchyタブのFrontを右クリックし、Duplicateを選択します。
すると、Front(1)という名前で複製されるので、F2キーを押して Middleにリネームします。
さらに、もう一度Duplicateし、複製されたものを Backにリネームします。

次に、MiddleとBackそれぞれのマテリアルを変更します。今回は、マテリアルをそれぞれのヒエラルキーの方へドラッグ&ドロップしましょう。

チュートリアルの図の通り、ProjectタブのMaterialsフォルダ配下にある Background-Backを Hierarchyタブの Backへ、ドロップします。
次に、ProjectタブのMaterialsフォルダ配下にある Background-Middleを Hierarchyタブの Middleへドロップします。

6.4 3枚の位置を調整する

FrontのZ位置を0.1、MiddleのZ位置を0.2、BackのZ位置を0.3にします。

HierarchyタブのFrontをクリックし、Inspectorの Transform内にある Position横のZの値を編集します。
MiddleとBackも同様に編集します。

6.5 背景をスクロールさせる

Background.csをScriptsフォルダの中に作成します。

ProjectタブのScriptsフォルダを右クリックし、Create -> C# Scriptを選択します。
生成された NewBehaviourScriptを Backgroundにリネームします。
Backgroundをダブルクリックして、MonoDevelopで開き、Background.csを編集します。
ソースの中身はチュートリアルの内容にすべて置き換えて問題ありません。
置換できたら、Ctrl+Sで保存し、Unity画面に戻りましょう。
ダイアログが表示されるので、「Go Ahead!」をクリックして、ソースを自動修正させます。

Background.csをFront、Middle、Backそれぞれにアタッチします。

Projectタブの Scriptsフォルダ配下にある Backgroundを、Hierarchyタブの Front、Middle、Backへ、それぞれドロップします。

次にテクスチャをスクロールできるようにテクスチャのWrap ModeがRepeatになっていることを確認して下さい。

Projectタブの Texturesフォルダ配下にある background_backをクリック後、background_front、background_middleをCtrlを押しながらクリックして選択し、Inspectorの Wrap Modeが「Repeat」になっていることを確認します。
#なっているはずです。なってなければ「Repeat」に修正しましょう。

3枚のテクスチャそれぞれのスクロールスピードを変更してみましょう。

FrontのSpeedは0.1、MiddleのSpeedは0.08、BackのSpeedは0.02にします。

Hierarchyタブの Front選択し、表示されるInspector上の Background(Script)内にあるSpeedを修正します。
Middle、Backも同様に修正します。


まとめへ戻る≪第05回へ第07回へ≫