３Ｄスライダーゲーム 手順１７
最終更新：
orika_ex_miyako 2023年08月16日(水) 18:47:27履歴
この手順では通過すると得点を獲得できるゲームオブジェクトを作成します。
また次の手順では得点の加算処理を実装します。
＜実装動画＞
https://gyazo.com/2ce61d2b5353e64f0b80630ec9cdcaec
手順１７ −得点獲得用ゲームオブジェクトの作成−
新しく学習する内容
２９．アセットをインポートする
１．設計
キャラが通過したら得点を獲得できるゲームオブジェクトを作成して実装したいと思います。
下記の無料のアセットをインポートして、そちらに用意してあるプレファブを利用して作成します。
２．アセットストアにて無料アセットを探してインポートする
アセットストアへ移動して、上記のいずれかのアセットの名前(FX Magic Circle Free か Magic Effects FREE)で検索をしてください。
対象のアセットが見つかります。どちらでも構いませんし、両方インポートしても構いません。
「通過したら得点が入る」というイメージに沿うものであれば、他のエフェクト用のアセットでも問題ありません。
FX Magic Circle Free
Magic Effects FREE
インポートの手順は同じになりますので、ここでは FX Magic Circle Free を使って説明します。
このアセットをクリックするとアセットの詳細が画面に表示されますので、 画面の右側にある Add to My Assets という青いボタンを押します。
Unityのアカウントでのサインインを求められますので、自分のアカウントを利用してストアへサインインしてください。
再度ページが読み込まれて、先ほどのボタンのメッセージが変わり、 Open in Unity となりますので、またこの青いボタンを押します。
あるいは、画面の上部にウインドウが表示されて、その中に Open in Unity のボタンがありますので押します。
自動的にUnityのエディター画面に遷移します。サイトは閉じてしまって問題ありません。
エディターのPackageManagerビューが開いて、対象のアセットが表示されますので、右下にある Download ボタンを押します。
PackageManagerビュー� �Download
Download が終了すると左隣にある Import というボタンが押せるようになりますので、そちらを押します。
PackageManagerビュー�◆�Import
インポートするアセットの一覧がポップアップウインドウとして表示されますので、そのまま右下にある Import ボタンを押します。
Import確認のポップアップ
待機するようにプログレス表示が出て、しばらくするとアセットのインポートが終了します。
Project内を確認しましょう。FX_Kandol_Pack という新しいフォルダが追加されていれば無事にインポートされています。
（ダウンロードした際のアセット名とインポートされる際のフォルダ名が同一であるとは限りません。）
フォルダを順番に開いていくと、FX_magic circle_effects_free フォルダがあり、その中にたくさんのフォルダとファイルが追加されています。
FX_Kandol_Pack
以上でアセットをインポートは完了です。
３０．サークル(得点用ゲームオブジェクト)を作成する
１．設計
フロアに障害物を設置しましたので、それらと合わせてユーザーがゲームをクリアする際の目的となるボーナス用のゲームオブジェクトも用意をします。
先ほどインポートしたアセットを利用して、サークル型のゲームオブジェクトを作成し、キャラが滑りながら通過できたら得点を獲得できるオブジェクトにします。
また次の手順では新しくスクリプトを１つ作成して、それを利用してサークルのゲームオブジェクトを制御させます。
ここではサークルのゲームオブジェクトを作成して設定を行う部分までを実装します。
２．Floor ゲームオブジェクトの子オブジェクトとして Circles ゲームオブジェクトを作成する
最初に得点獲得用のゲームオブジェクトであるサークルをまとめて管理するためのゲームオブジェクトを作成します。
Floor ゲームオブジェクトを選択して右クリックをしてメニューを開き、Create Empty を選択します。
新しい空のゲーオブジェクトが作成されますので、名前を Circles に変更します。
このゲームオブジェクトをフォルダ代わりに利用して、得点関連のゲームオブジェクトをこちらの中に配置します。
ヒエラルキー画像
インスペクター画像
それではこのゲームオブジェクトを活用して、サークルのゲームオブジェクトを設置していきましょう。
３．Circles ゲームオブジェクトの子オブジェクトとして、Circle ゲームオブジェクトを作成する
Circles ゲームオブジェクトの子オブジェクトとして、Circle ゲームオブジェクトを作成します。
対象となるゲームオブジェクトをフォルダから探して、ヒエラルキー上の Circles ゲームオブジェクトにドラッグアンドドロップして作成します。
以下の Prefabs の中には fx_Magiccircle_a 〜 fx_Magiccircle_p までの異なるエフェクトのゲームオブジェクトがありますので、どれを利用しても構いません。
今回は、fx_Magiccircle_p.prefab を利用しています。
パス
フォルダ画像
名前を Circle に変更します。
ヒエラルキー画像
インスペクター画像
Sceneビュー画像
続いて、設定を行います。
４．Circle ゲームオブジェクトの設定を行う
Circle ゲームオブジェクトの設定を行います。
最初にプレファブの状態を解除します。Circle ゲームオブジェクトの上で右クリックをしてメニューを表示し、
Prefab => Unpack Completely を選択します。これでプレファブ状態ではなく、通常のゲームオブジェクトになります。
ヒエラルキーの青いアイコンや名前が黒い状態に戻ります。
３つの手順がありますので、順番に設定をしていきます。
最初に、Transform コンポーネントを操作して、位置を調整します。回転情報とサイズは変更せずに問題ありません。
下記のインスペクター画像や、Sceneビュー、Gameビューも見ながら、適宜な位置に調整してください。
Circle ゲームオブジェクト インスペクター画像
Sceneビュー画像とGameビュー画像
続いて、ParticleSystem コンポーネントを設定します。
Sceneビュー内にある ParticleEffect の Play ボタンを押すと、エフェクトが再生されます。
インスペクター画像
もしもサイズが小さい場合には、3D Start Size の項目にチェックを入れます。
下に３つの軸の情報が追加されますので、それぞれの設定値を X = 5, Y = 5, Z = 5 などに変更します。
Sceneビュー内にある ParticleEffect の Play ボタンを押してみてください。エフェクトのサイズが大きくなっています。
設定後インスペクター画像
こちらを調整することでサイズを変更できます。
Scale を変更してもエフェクトの大きさが変わらない場合にはこの設定を行います。
Sceneビュー画像
それ以外の設定部分はそのままで問題ありません。
ParticleSystem は設定項目がたくさんあります。
自由に変更して、どの部分が変更になるか、確認してみてください。
最後に、BoxCollider コンポーネントを追加します。
インスペクターの一番下にある Add Component ボタンを押して、BoxCollider コンポーネントを追加します。
インスペクター画像
Sceneビュー画像
まずは最初に、 IsTrigger のチェックを入れてください。
つついて、サークルのゲームオブジェクトのエフェクトの部分に対してコライダーを作成します。
このエフェクトは 2D であるため、大きさについては見た目に合わせるのが難しいため、自由な設計になります。
この部分をキャラが通過することで得点を加算するようにしますので、それを念頭に置いた上で設定をしてください。
Edit Collider ボタンを押して、Sceneビューを確認しながら適宜に調整をします。
下記のインスペクター画像などを参考にしてください。(細かい数字をそのままにする必要はありません)
コライダーの調整が難しければ、エフェクトの縁とコライダーの縁が一致するようにしてみてください。
参考
インスペクター画像
Sceneビュー画像� ‐紊�ら見た場合
Sceneビュー画像�◆＿�から見た場合
Sceneビュー画像�� 斜め上から見た場合
以上で設定は完了です。
５．ゲームを実行して動作を確認する
設定がすみましたので、ゲームを実行してキャラがサークルに侵入(通過)できるか、エフェクトが再生されたときに見えるかを確認しておきます。
侵入出来ない場合には、サークルの BoxCollider の IsTrigger のチェックが入っているかを確認します。
エフェクトは繰り返し再生されるように設定してありますので、回転しながら点滅するエフェクトを繰り返します。
＜実行動画＞
https://gyazo.com/8cca5d5618b13cf1bf31c2d60b6eaab0
６．＜応用 ーオリジナルのエフェクトの作成ー＞
ゲームオブジェクトの親子関係を利用すると、複数のエフェクトを重ね合わせて１つのエフェクトを作成できます。
単純に重ねて表示するだけでもいいですし、サイズを変えたり、位置や回転方向をずらして配置してもよい形になります。
色々なものを作ってみましょう！
参考画像��
参考画像��
参考画像��
以上でこの手順は終了です。
次は 手順１８ −キャラとサークルの接触判定を実装− です。
サークルにキャラが侵入した際に得点を加算する処理を実装します。
また次の手順では得点の加算処理を実装します。
＜実装動画＞
https://gyazo.com/2ce61d2b5353e64f0b80630ec9cdcaec
手順１７ −得点獲得用ゲームオブジェクトの作成−
２９．アセットをインポートする ３０．サークル(得点用ゲームオブジェクト)を作成する
新しく学習する内容 
・ParticleSystem
２９．アセットをインポートする
１．設計
キャラが通過したら得点を獲得できるゲームオブジェクトを作成して実装したいと思います。
下記の無料のアセットをインポートして、そちらに用意してあるプレファブを利用して作成します。
・FX Magic Circle Free ・Magic Effects FREE
２．アセットストアにて無料アセットを探してインポートする
アセットストアへ移動して、上記のいずれかのアセットの名前(FX Magic Circle Free か Magic Effects FREE)で検索をしてください。
対象のアセットが見つかります。どちらでも構いませんし、両方インポートしても構いません。
「通過したら得点が入る」というイメージに沿うものであれば、他のエフェクト用のアセットでも問題ありません。
FX Magic Circle Free
Magic Effects FREE
インポートの手順は同じになりますので、ここでは FX Magic Circle Free を使って説明します。
このアセットをクリックするとアセットの詳細が画面に表示されますので、 画面の右側にある Add to My Assets という青いボタンを押します。
Unityのアカウントでのサインインを求められますので、自分のアカウントを利用してストアへサインインしてください。
再度ページが読み込まれて、先ほどのボタンのメッセージが変わり、 Open in Unity となりますので、またこの青いボタンを押します。
あるいは、画面の上部にウインドウが表示されて、その中に Open in Unity のボタンがありますので押します。
自動的にUnityのエディター画面に遷移します。サイトは閉じてしまって問題ありません。
エディターのPackageManagerビューが開いて、対象のアセットが表示されますので、右下にある Download ボタンを押します。
PackageManagerビュー� �Download
Download が終了すると左隣にある Import というボタンが押せるようになりますので、そちらを押します。
PackageManagerビュー�◆�Import
インポートするアセットの一覧がポップアップウインドウとして表示されますので、そのまま右下にある Import ボタンを押します。
Import確認のポップアップ
待機するようにプログレス表示が出て、しばらくするとアセットのインポートが終了します。
Project内を確認しましょう。FX_Kandol_Pack という新しいフォルダが追加されていれば無事にインポートされています。
（ダウンロードした際のアセット名とインポートされる際のフォルダ名が同一であるとは限りません。）
フォルダを順番に開いていくと、FX_magic circle_effects_free フォルダがあり、その中にたくさんのフォルダとファイルが追加されています。
FX_Kandol_Pack
以上でアセットをインポートは完了です。
３０．サークル(得点用ゲームオブジェクト)を作成する
１．設計
フロアに障害物を設置しましたので、それらと合わせてユーザーがゲームをクリアする際の目的となるボーナス用のゲームオブジェクトも用意をします。
先ほどインポートしたアセットを利用して、サークル型のゲームオブジェクトを作成し、キャラが滑りながら通過できたら得点を獲得できるオブジェクトにします。
また次の手順では新しくスクリプトを１つ作成して、それを利用してサークルのゲームオブジェクトを制御させます。
ここではサークルのゲームオブジェクトを作成して設定を行う部分までを実装します。
２．Floor ゲームオブジェクトの子オブジェクトとして Circles ゲームオブジェクトを作成する
最初に得点獲得用のゲームオブジェクトであるサークルをまとめて管理するためのゲームオブジェクトを作成します。
Floor ゲームオブジェクトを選択して右クリックをしてメニューを開き、Create Empty を選択します。
新しい空のゲーオブジェクトが作成されますので、名前を Circles に変更します。
このゲームオブジェクトをフォルダ代わりに利用して、得点関連のゲームオブジェクトをこちらの中に配置します。
ヒエラルキー画像
インスペクター画像
それではこのゲームオブジェクトを活用して、サークルのゲームオブジェクトを設置していきましょう。
３．Circles ゲームオブジェクトの子オブジェクトとして、Circle ゲームオブジェクトを作成する
Circles ゲームオブジェクトの子オブジェクトとして、Circle ゲームオブジェクトを作成します。
対象となるゲームオブジェクトをフォルダから探して、ヒエラルキー上の Circles ゲームオブジェクトにドラッグアンドドロップして作成します。
以下の Prefabs の中には fx_Magiccircle_a 〜 fx_Magiccircle_p までの異なるエフェクトのゲームオブジェクトがありますので、どれを利用しても構いません。
今回は、fx_Magiccircle_p.prefab を利用しています。
パス
Assets/FX_Kandol_Pack/FX_effect_sprite_image01_02/FX_magic circle_effects_free/Prefabs/fx_Magiccircle_p.prefab
フォルダ画像
名前を Circle に変更します。
ヒエラルキー画像
インスペクター画像
Sceneビュー画像
続いて、設定を行います。
４．Circle ゲームオブジェクトの設定を行う
Circle ゲームオブジェクトの設定を行います。
最初にプレファブの状態を解除します。Circle ゲームオブジェクトの上で右クリックをしてメニューを表示し、
Prefab => Unpack Completely を選択します。これでプレファブ状態ではなく、通常のゲームオブジェクトになります。
ヒエラルキーの青いアイコンや名前が黒い状態に戻ります。
３つの手順がありますので、順番に設定をしていきます。
最初に、Transform コンポーネントを操作して、位置を調整します。回転情報とサイズは変更せずに問題ありません。
下記のインスペクター画像や、Sceneビュー、Gameビューも見ながら、適宜な位置に調整してください。
Circle ゲームオブジェクト インスペクター画像
Sceneビュー画像とGameビュー画像
続いて、ParticleSystem コンポーネントを設定します。
Sceneビュー内にある ParticleEffect の Play ボタンを押すと、エフェクトが再生されます。
インスペクター画像
もしもサイズが小さい場合には、3D Start Size の項目にチェックを入れます。
下に３つの軸の情報が追加されますので、それぞれの設定値を X = 5, Y = 5, Z = 5 などに変更します。
Sceneビュー内にある ParticleEffect の Play ボタンを押してみてください。エフェクトのサイズが大きくなっています。
設定後インスペクター画像
こちらを調整することでサイズを変更できます。
Scale を変更してもエフェクトの大きさが変わらない場合にはこの設定を行います。
Sceneビュー画像
それ以外の設定部分はそのままで問題ありません。
ParticleSystem は設定項目がたくさんあります。
自由に変更して、どの部分が変更になるか、確認してみてください。
最後に、BoxCollider コンポーネントを追加します。
インスペクターの一番下にある Add Component ボタンを押して、BoxCollider コンポーネントを追加します。
インスペクター画像
Sceneビュー画像
まずは最初に、 IsTrigger のチェックを入れてください。
つついて、サークルのゲームオブジェクトのエフェクトの部分に対してコライダーを作成します。
このエフェクトは 2D であるため、大きさについては見た目に合わせるのが難しいため、自由な設計になります。
この部分をキャラが通過することで得点を加算するようにしますので、それを念頭に置いた上で設定をしてください。
Edit Collider ボタンを押して、Sceneビューを確認しながら適宜に調整をします。
下記のインスペクター画像などを参考にしてください。(細かい数字をそのままにする必要はありません)
コライダーの調整が難しければ、エフェクトの縁とコライダーの縁が一致するようにしてみてください。
参考
インスペクター画像
Sceneビュー画像� ‐紊�ら見た場合
Sceneビュー画像�◆＿�から見た場合
Sceneビュー画像�� 斜め上から見た場合
以上で設定は完了です。
５．ゲームを実行して動作を確認する
設定がすみましたので、ゲームを実行してキャラがサークルに侵入(通過)できるか、エフェクトが再生されたときに見えるかを確認しておきます。
侵入出来ない場合には、サークルの BoxCollider の IsTrigger のチェックが入っているかを確認します。
エフェクトは繰り返し再生されるように設定してありますので、回転しながら点滅するエフェクトを繰り返します。
＜実行動画＞
https://gyazo.com/8cca5d5618b13cf1bf31c2d60b6eaab0
６．＜応用 ーオリジナルのエフェクトの作成ー＞
ゲームオブジェクトの親子関係を利用すると、複数のエフェクトを重ね合わせて１つのエフェクトを作成できます。
単純に重ねて表示するだけでもいいですし、サイズを変えたり、位置や回転方向をずらして配置してもよい形になります。
色々なものを作ってみましょう！
参考画像��
参考画像��
参考画像��
以上でこの手順は終了です。
次は 手順１８ −キャラとサークルの接触判定を実装− です。
サークルにキャラが侵入した際に得点を加算する処理を実装します。
コメントをかく