パズルゲーム 発展９
最終更新：
orika_ex_miyako 2022年03月24日(木) 16:30:19履歴
スキル機能を設計・実装する�� 
設計ロジックを考える
スキルの機能について全体の設計し、以下のようなシステムを考えてみます。
１．干支を消すとスキル用のポイントが加算される。 ２．スキルポイント(ゲージが満タン)になるとスキルボタンが押せるようになる。 この状態で干支を消してもスキルポイントは加算されない。 ３．スキルボタンを押すと、ゲーム内にある一番数の多い種類の干支がすべて消える。 ４．スキルポイントが0に戻って再度溜まり始める。
これを手順・工程に区切って、順番に実装を行っていく方法を検討します。
・スキルボタンの準備 ・スキルポイントの準備 ・スキルポイントの加算処理 ・スキルポイントとスキルボタンの連動 ・スキルの実処理
実装動画
https://gyazo.com/3803e5737f669aadd1542e42d2982441
新しく学習する内容になります。
・ImageコンポーネントのImageTypeの設定を Filled に変更して利用する
スキル用ボタンを作成する
Canvas内にスキル用のボタンを作成していきます。BottomUI内にあるButtonsゲームオブジェクトの子オブジェクトとして作成します。
完成時のヒエラルキーの画像です。
ヒエラルキー画像
Buttonsゲームオブジェクトの子オブジェクトとしてButtonゲームオブジェクトを作成し、btnSkillに名前を変える
Buttonsゲームオブジェクトの上で右クリックしてメニューを表示し、UI => Button を選択します。
Buttonゲームオブジェクトを作成されますので、btnSkillに名前を変えます。
このゲームオブジェクトはスキルを発動するためのボタンの役割を持っています。また設定する画像は、スキルポイントの蓄積用ゲージの外枠の画像になります。
ヒエラルキー画像
btnSkillゲームオブジェクトを選択してインスペクターを確認します。
RectTransformコンポーネントのPositionを調整し、Sceneビューを確認しながら適宜な位置へ配置します。
下記のインスペクター画像�，�Sceneビュー画像�，鮖温佑靴討�ださい。
インスペクター画像��
Sceneビュー画像
次にImageコンポーネントのSourceImageの部分にSprite画像をアサインします。ここではUnityのKnob画像を設定しています。
この画像はボタンであるとともに、スキルのゲージの外枠部分にもなります。
下記のインスペクター画像�△鮖温佑靴討�ださい。
インスペクター画像��
以上でこのゲームオブジェクトは完成です。
btnSkillの子オブジェクトとしてImageゲームオブジェクトを作成し、imgSkillPointに名前を変える
btnSkillゲームオブジェクトの子オブジェクトの上で右クリックしてメニューを表示し、UI => Image を選択します。
Imageゲームオブジェクトを作成されますのでimgSkillPointに名前を変えます。
このゲームオブジェクトはスキルボタン用のゲージ画像になります。スキルポイントの値に合わせてゲージが上昇し、
満タンになったらスキルボタンが押せて、スキルを発動できるようになるという目印の役割を持っています。スキルを発動後にはゲージが下降し、0に戻ります。
ヒエラルキー画像
＜ImageコンポーネントのImageTypeの設定を Filled に変更して利用する＞
imgSkillPointゲームオブジェクトを選択してインスペクターを確認します。
最初にImageコンポーネントのSourceImageに画像を設定します。画像については、丸いボタン用画像をネットで探してUnityにインポートして利用してください。
ここでは青い色の丸い画像を使用しています。
画像を設定後、ImageType を Filled に変更します。すぐ下に追加の設定項目が表示されますので、
Fill Method は Vertical、Fill Origin は Bottom、Fill Amount は 0 に変更してください。
この設定を行うと、Fill Amountの値を操作することによって設定した画像の表示する割合を変更できます。
この機能によって、画像の一部を表示したり、全部表示したり、全部非表示にすることできるため、さながら画像をゲージの増減のように扱うことが出来ます。
Fill Method はゲージの増減する方向、Fill Origin は Fill Amount が 0 の際の画像の起点の位置です。
今回は上下方向に画像の操作を行い、起点位置を下位置にするように設定しています。他にも色々な設定がありますので、調べてみてください。
忘れずにRaycastTargetのスイッチを切っておきます。
Unity公式スクリプトAPI
ImageType
https://docs.unity3d.com/2019.1/Documentation/Scri...
TECH Projin様
【Unity uGUI】Imageコンポーネントを徹底解説
https://tech.pjin.jp/blog/2017/01/26/unity_ugui_im...
画像の設定後、RectTransformコンポーネントのPositionとWidth、Heightを調整し、Sceneビューを確認しながら適宜な位置へ配置します。
大きさについては、btnSkillゲームオブジェクトの画像よりも内側になるように配置し、ゲージがたまるような形式になるようにしてください。
下記のインスペクター画像とSceneビュー画像を参考してください。
インスペクター画像
Sceneビュー画像
Fill Amountを操作してみる
設定後に Fill Amount の値を 0 => 1 へ向けてスライドしてみてください。Sceneビューに設定した画像が上下へ増減するのが分かります。
この部分とスキルポイントとを連動させて、スキルポイントを獲得するごとに、ゲージのように画像を上方向へと徐々に見えるようにしていきます。
スキルを発動後には初期位置へと画像を戻して、ゲージがなくなったように見えるようにします。この機能を上手く活用していきます。
検証動画(ImageコンポーネントのFill Amount の値を動かして、画像がゲージのように変化するのを確認する)
https://gyazo.com/caec7b734251580a43fad9413389db61
以上でこのゲームオブジェクトは完成です。
スキルボタンの確認をする
完成したスキルボタンの配置を確認しておきます。
Gameビュー画像
Sceneビュー画像��
Sceneビュー画像�◆�GameGroundゲームオブジェクトを非表示にした場合
以上でこの手順は終了です。
次は 発展１０ です。
次の手順では各スクリプトを修正していきます。
コメントをかく