強制横スクロールゲーム 手順２
最終更新：
orika_ex_miyako 2022年07月15日(金) 16:02:20履歴
以下の内容で順番に実装を進めていきます。
手順２ ーアセットのインポートー
３．アセットをダウンロードしてインポートする
ゲームの製作に使用するアセット(資材の意。広く、ゲームに利用する素材を指します。キャラクターの画像や背景の画像、音源、フォントなど)をUnityにインポートして利用出来るようにします。
今回のゲームはすべて無料のアセットを利用してゲームを製作しています。
アセットの入手方法にはいくつか方法がありますが、ここでは順番に説明をしていきます。
なお、アセットをインポートした際に含まれているスクリプトでエラーが表示される場合、こちらの手順を確認してください。
１．プレイヤー用のキャラクターをインポートする
まずはキャラクターの画像をインポートしますので、以下のサイトへアクセスしてください。
Unitychan公式
https://unity-chan.com/
サイト トップ画像
このサイトはUnity公式キャラクターであるUnityちゃんのサイトです。このサイトでは、キャラクターのアセットを無料で入手できます。
サイトの画面の右上に「DATA DOWNLOAD」のボタンがありますので、そちらをクリックしてください。次の利用規約の同意ページへ移動します。
利用規約の同意ページではデータのダウンロードの前に、利用規約に同意するようにメッセージが表示されます。
利用規約を確認後、ページの一番下にチェックボックスがありますので、そちらにチェックを入れるとデータのダウンロードボタンが有効になります。
ダウンロードボタンを押して、次のDOWNLOADページへ進んでください。
ダウンロード 手順動画
https://gyazo.com/bacf62d2e3a566caadeb0e3de414d22a
DOWNLOADページからキャラクターのデータがダウンロードできます。３Ｄモデルもありますが、今回利用するのは２Ｄのデータです。
タブで２Ｄを選択すると２Ｄのデータだけ画面に抽出されますので、その中から、【ユニティちゃん ２Ｄデータ】と
【『コーゲンシティ・オールスターズ！』ユニティちゃんピクセルアートパック for アクションゲーム Vol.2】の２つをダウンロードしてください。
【ユニティちゃん ２Ｄデータ】
【『コーゲンシティ・オールスターズ！』ユニティちゃんピクセルアートパック for アクションゲーム Vol.2】
ダウンロードしたファイルは圧縮されていますので解凍をしてください。
解凍したファイルにはそれぞれ拡張子が [.unitypackage] のファイルが格納されています。
解凍された unitypackage ファイルの画像
このファイルをUnityのAssetsフォルダへドラッグアンドドロップしてください。
ファイルのインポート手順動画
https://gyazo.com/a60549bb31aa09866aa695b00c3ef660
ドラッグアンドドロップすると自動的に読み込みが始まり、インポートするファイルの一覧がウインドウ表示されますので
ウインドウの右下にある「Import」ボタンを押してください。この読み込みが終了すればインポート完了です。
インポートが完了すると、スクリプトの内容に旧式の書式が含まれていることによる警告やエラーが表示されます。
エラーについては解消しないとゲームが実行できませんので、こちらの記事を参考にして修正をしてください。
=> スクリプトの旧式エラーが表示される場合の解消方法
【ユニティちゃん ２Ｄデータ】の方でも旧式エラーが発生する場合がありますが、下記のサイトに修正方法がまとめられていますので、参考にして修正を行ってください。
＜Unityちゃん2Dのインポートのエラー解決＞
インポートファイルの選択��
インポートファイルの選択��
順番に同じ手順を行ってください。
２つのアセットをインポートすると、Assets フォルダ内に、それぞれのフォルダが生成されてファイルが追加されます。
Unity内のAssetsフォルダ内の画像
これでキャラクターのアセットについては利用可能な状態になりました。続いて、他のアセットのインポートを行います。
２．Unityアセットストアから無料のアセットを順番にインポートする
続いて、Unityの公式のアセットストアから、無料のアセットを１つずつ順番にダウンロードしてインポートしていきます。
インポートするアセット一覧
すべて同じ手順でインポートできますので、ここでは【１】のSunny Land アセットを使って手順を示します。
アセットストアへ移動する
Unityのメニューから Window => Asset Store を選択します。AssetStoreビューがSceneビューの隣に作られます。
Search online ボタンを押してアセットストアのサイトへ移動してください。(2020.1バージョンからこのような形式に変更になりました)
AssetStoreビュー
もしもサイトへ移動できない場合には、以下のリンクから直接移動してください。
アセットストアでインポートするアセットを検索する
最初に「Sunny Land」アセットをアセットストアで見つけます。
アセットストアのサイト上部にある検索窓に sunny あるいは、 sunny land と入力して検索を行います。
検索結果 画像
Sunny Land という無料のエフェクト用アセットが見つかりますので、こちらをクリックします。
Sunny Land
このアセットをクリックするとアセットの詳細が画面に表示されますので、 画面の右側にある Add to My Assets という青いボタンを押します。
Unityのアカウントでのサインインを求められますので、自分のアカウントを利用してストアへサインインしてください。
再度ページが読み込まれて、先ほどのボタンのメッセージが変わり、 Open in Unity となりますので、またこの青いボタンを押します。
(サインイン済の際には最初から Open in Unity と表示されています)
自動的にUnityのエディター画面に遷移します。サイトはまた後で他のアセットのダウンロードに利用するので、そのままにしておいてください。
アセットをUnityにインポートする
エディターのPackageManagerビューが開いて、対象のアセットが表示されますので、右下にある Download ボタンを押します。
Download が終了すると左隣にある Import というボタンが押せるようになりますので、そちらを押します。
PackageManagerビュー
インポートするアセットの一覧がポップアップウインドウとして表示されますので、そのまま右下にある Import ボタンを押します。
先ほどのUnitychanのモデルをインポートした際と同じ操作です。
Import確認のポップアップ
待機するようにプログレス表示が出て、しばらくするとアセットのインポートが終了します。
Project内を確認しましょう。Sunnyland という新しいフォルダが追加されていれば無事にインポートされています。
フォルダを順番に開いていくとたくさんのフォルダとファイルが追加されています。
Sunny Land
これで１つ目のアセットのインポートは完了です。
続いて、２つ目のアセットをアセットストアで見つけてダウンロードしてください。Nature pixel art base assets とアセットの名前で検索すると見つかります。
なお他にも無料のアセットを検索したい場合には、最初に free と入力し、その後、2d や audio のように利用したいアセットの種類を入力すれば検索できます。
Nature pixel art base assets
詳細画面 青いボタンを押してUnityエディターへ移動する
その後の手順は先ほどのアセットの手順と同じです。UnityのPackageManagerから Download => Importを選択して、インポートしてください。
PackageManagerビュー
Import確認のポップアップ
最後に、３つ目のアセットをインポートして終了です。
３．DoTweenをインポートして設定する
DoTweenはUnityのアセットストアにて無償で公開されている、Tween系(アニメ用)アセットです。
アセットストアにサインインして、検索でDoTweenと入力すれば見つかります。Pro版（有償）もありますが、無償版で問題ありません。
直接のリンクアドレスはこちらです。
https://assetstore.unity.com/packages/tools/animat...
ダウンロードしてUnityにインポートしてください。インポート設定はそのままで問題ありません。
インポートされるとProject内にDemigiantというフォルダが追加されます。こちらがDoTweenアセットのフォルダになります。
Demigiant/DOTween
インポート後、DOTween Utility Panelという、DoTweenの設定用のポップアップウインドウが自動的に開きますので、Setup DOTweenボタンを押して実行しましょう。
もしも自動で開かない場合には、Unityの左上のメニューより Tools => Demigiant => DOTween Utility Panel を選択すればウインドウを開くことが出来ます。
準備用のポップアップがさらに開いて、準備が完了するとApplyボタンが押せるようになります。
これでDoTweenの準備が完了し、Unityで利用できるようになりました。先ほどのDOTween Utility Panel ウインドウは閉じてしまって問題ありません。
なおDoTweenには様々な機能がありますが、今回の製作ではその一部を利用していきます。
詳しい説明は公式リファレンス、あるいは多くの使用方法の紹介記事がありますので、ご自分で調べてみてください。
公式サイトのリンク（ドキュメント）
http://dotween.demigiant.com/documentation.php
以上でこの手順は終了です。
次は 手順３ −背景の作成− です。
手順２ ーアセットのインポートー
３．アセットをダウンロードしてインポートする
３．アセットをダウンロードしてインポートする 
ゲームの製作に使用するアセット(資材の意。広く、ゲームに利用する素材を指します。キャラクターの画像や背景の画像、音源、フォントなど)をUnityにインポートして利用出来るようにします。
今回のゲームはすべて無料のアセットを利用してゲームを製作しています。
アセットの入手方法にはいくつか方法がありますが、ここでは順番に説明をしていきます。
なお、アセットをインポートした際に含まれているスクリプトでエラーが表示される場合、こちらの手順を確認してください。
１．プレイヤー用のキャラクターをインポートする
まずはキャラクターの画像をインポートしますので、以下のサイトへアクセスしてください。
Unitychan公式
https://unity-chan.com/
サイト トップ画像
このサイトはUnity公式キャラクターであるUnityちゃんのサイトです。このサイトでは、キャラクターのアセットを無料で入手できます。
サイトの画面の右上に「DATA DOWNLOAD」のボタンがありますので、そちらをクリックしてください。次の利用規約の同意ページへ移動します。
利用規約の同意ページではデータのダウンロードの前に、利用規約に同意するようにメッセージが表示されます。
利用規約を確認後、ページの一番下にチェックボックスがありますので、そちらにチェックを入れるとデータのダウンロードボタンが有効になります。
ダウンロードボタンを押して、次のDOWNLOADページへ進んでください。
ダウンロード 手順動画
https://gyazo.com/bacf62d2e3a566caadeb0e3de414d22a
DOWNLOADページからキャラクターのデータがダウンロードできます。３Ｄモデルもありますが、今回利用するのは２Ｄのデータです。
タブで２Ｄを選択すると２Ｄのデータだけ画面に抽出されますので、その中から、【ユニティちゃん ２Ｄデータ】と
【『コーゲンシティ・オールスターズ！』ユニティちゃんピクセルアートパック for アクションゲーム Vol.2】の２つをダウンロードしてください。
【ユニティちゃん ２Ｄデータ】
【『コーゲンシティ・オールスターズ！』ユニティちゃんピクセルアートパック for アクションゲーム Vol.2】
ダウンロードしたファイルは圧縮されていますので解凍をしてください。
解凍したファイルにはそれぞれ拡張子が [.unitypackage] のファイルが格納されています。
解凍された unitypackage ファイルの画像
このファイルをUnityのAssetsフォルダへドラッグアンドドロップしてください。
ファイルのインポート手順動画
https://gyazo.com/a60549bb31aa09866aa695b00c3ef660
ドラッグアンドドロップすると自動的に読み込みが始まり、インポートするファイルの一覧がウインドウ表示されますので
ウインドウの右下にある「Import」ボタンを押してください。この読み込みが終了すればインポート完了です。
インポートが完了すると、スクリプトの内容に旧式の書式が含まれていることによる警告やエラーが表示されます。
エラーについては解消しないとゲームが実行できませんので、こちらの記事を参考にして修正をしてください。
=> スクリプトの旧式エラーが表示される場合の解消方法
【ユニティちゃん ２Ｄデータ】の方でも旧式エラーが発生する場合がありますが、下記のサイトに修正方法がまとめられていますので、参考にして修正を行ってください。
＜Unityちゃん2Dのインポートのエラー解決＞
Qiita @kyo-k さま
Unityちゃん2Dのインポートのエラー解決（error CS0619）[ver.2017.2.1f1]
https://qiita.com/kyo-k/items/b72579c2ca4246770dd4
インポートファイルの選択��
インポートファイルの選択��
順番に同じ手順を行ってください。
２つのアセットをインポートすると、Assets フォルダ内に、それぞれのフォルダが生成されてファイルが追加されます。
Unity内のAssetsフォルダ内の画像
これでキャラクターのアセットについては利用可能な状態になりました。続いて、他のアセットのインポートを行います。
２．Unityアセットストアから無料のアセットを順番にインポートする
続いて、Unityの公式のアセットストアから、無料のアセットを１つずつ順番にダウンロードしてインポートしていきます。
インポートするアセット一覧
１．Sunny Land(背景画像、床や家などの画像が入っているアセット) ２．Nature pixel art base assets(地面、床、敵などの画像が入っているアセット) ３．DoTween(アニメ演出用のアセット)
すべて同じ手順でインポートできますので、ここでは【１】のSunny Land アセットを使って手順を示します。
アセットストアへ移動する
Unityのメニューから Window => Asset Store を選択します。AssetStoreビューがSceneビューの隣に作られます。
Search online ボタンを押してアセットストアのサイトへ移動してください。(2020.1バージョンからこのような形式に変更になりました)
AssetStoreビュー
もしもサイトへ移動できない場合には、以下のリンクから直接移動してください。
UnityAssetsStore 日本語ページ
https://assetstore.unity.com/?locale=ja-JP
アセットストアでインポートするアセットを検索する
最初に「Sunny Land」アセットをアセットストアで見つけます。
アセットストアのサイト上部にある検索窓に sunny あるいは、 sunny land と入力して検索を行います。
検索結果 画像
Sunny Land という無料のエフェクト用アセットが見つかりますので、こちらをクリックします。
Sunny Land
このアセットをクリックするとアセットの詳細が画面に表示されますので、 画面の右側にある Add to My Assets という青いボタンを押します。
Unityのアカウントでのサインインを求められますので、自分のアカウントを利用してストアへサインインしてください。
再度ページが読み込まれて、先ほどのボタンのメッセージが変わり、 Open in Unity となりますので、またこの青いボタンを押します。
(サインイン済の際には最初から Open in Unity と表示されています)
自動的にUnityのエディター画面に遷移します。サイトはまた後で他のアセットのダウンロードに利用するので、そのままにしておいてください。
アセットをUnityにインポートする
エディターのPackageManagerビューが開いて、対象のアセットが表示されますので、右下にある Download ボタンを押します。
Download が終了すると左隣にある Import というボタンが押せるようになりますので、そちらを押します。
PackageManagerビュー
インポートするアセットの一覧がポップアップウインドウとして表示されますので、そのまま右下にある Import ボタンを押します。
先ほどのUnitychanのモデルをインポートした際と同じ操作です。
Import確認のポップアップ
待機するようにプログレス表示が出て、しばらくするとアセットのインポートが終了します。
Project内を確認しましょう。Sunnyland という新しいフォルダが追加されていれば無事にインポートされています。
フォルダを順番に開いていくとたくさんのフォルダとファイルが追加されています。
Sunny Land
これで１つ目のアセットのインポートは完了です。
続いて、２つ目のアセットをアセットストアで見つけてダウンロードしてください。Nature pixel art base assets とアセットの名前で検索すると見つかります。
なお他にも無料のアセットを検索したい場合には、最初に free と入力し、その後、2d や audio のように利用したいアセットの種類を入力すれば検索できます。
Nature pixel art base assets
詳細画面 青いボタンを押してUnityエディターへ移動する
その後の手順は先ほどのアセットの手順と同じです。UnityのPackageManagerから Download => Importを選択して、インポートしてください。
PackageManagerビュー
Import確認のポップアップ
最後に、３つ目のアセットをインポートして終了です。
３．DoTweenをインポートして設定する
DoTweenはUnityのアセットストアにて無償で公開されている、Tween系(アニメ用)アセットです。
アセットストアにサインインして、検索でDoTweenと入力すれば見つかります。Pro版（有償）もありますが、無償版で問題ありません。
直接のリンクアドレスはこちらです。
https://assetstore.unity.com/packages/tools/animat...
ダウンロードしてUnityにインポートしてください。インポート設定はそのままで問題ありません。
インポートされるとProject内にDemigiantというフォルダが追加されます。こちらがDoTweenアセットのフォルダになります。
Demigiant/DOTween
インポート後、DOTween Utility Panelという、DoTweenの設定用のポップアップウインドウが自動的に開きますので、Setup DOTweenボタンを押して実行しましょう。
もしも自動で開かない場合には、Unityの左上のメニューより Tools => Demigiant => DOTween Utility Panel を選択すればウインドウを開くことが出来ます。
準備用のポップアップがさらに開いて、準備が完了するとApplyボタンが押せるようになります。
これでDoTweenの準備が完了し、Unityで利用できるようになりました。先ほどのDOTween Utility Panel ウインドウは閉じてしまって問題ありません。
なおDoTweenには様々な機能がありますが、今回の製作ではその一部を利用していきます。
詳しい説明は公式リファレンス、あるいは多くの使用方法の紹介記事がありますので、ご自分で調べてみてください。
公式サイトのリンク（ドキュメント）
http://dotween.demigiant.com/documentation.php
以上でこの手順は終了です。
次は 手順３ −背景の作成− です。
コメントをかく