1216 パワーゲージを表示しよう！ - mishimatsu/AdventCalendar2014 GitHub Wiki

前回は、円柱にボールが当たると飛んで行くところまで作成しました。 今回からボールを投げるときの強さを設定したいと思います。 その前に、ボールを投げるときのバワーゲージの表示を行いたいと思います。 まず、完成形の画面を見てみましょう。 画面の上部に表示されている赤いゲージを今回作成します。 画像(Texture)を登録 画面上部に表示されている赤いゲージは、画像ファイルを使って表示しています。 まずは、その画像ファイルをUnityに登録する必要があります。 画像ファイルは、こちらで用意してあります。 Webからダウンロードしてください。 パワーゲージ画像 ダウンロードしたファイル(gauge.png)をProjectにドロップします。 これで、画像登録は完了です。 画像(Texture)ファイルを確認してみましょう。 Projectにあるgaugeをクリックします。 画面右のInspectorに画像の詳細が表示されます。 画像を表示しよう！ 画面に画像を表示するには、スクリプトを使います。 Ballスクリプトをダブルクリックして、MonoDevelopを開きます。 今回追加したのは、2箇所です。 順番に見て行きましょう。 6行目 public Texture gauge; 今回、新しいTextureクラスが出てきました。 このTextureクラスは、画像を管理するクラスです。 今回は、パワーゲージの画像の管理に使います。 先頭にpublicが付いているので、この変数は、UnityのInspectorからアクセス可能です。 24行目 void OnGUI() これは、GUI(Graphical User Interface)を描画する際に呼びだされる関数です。 パワーゲージは、GUIの画像を描画する機能を利用して、表示します。 GUI.DrawTexture(new Rect(10, 10,256,32), gauge); GUI.DrawTexture()は、指定された位置に、指定されたテクスチャを描画する関数です。 第一引数のnew Rect(10, 10,256,32)が画像を描画する位置と大きさを指定しています。 第二引数のgaugeは、描画するTextureです。 今回は、Gauge.pngを描画します。 新しくRectクラスが出てきましたね。 Rectは、矩形の領域を表すクラスです。 X座標、Y座標と幅、高さを管理しています。 new Rect(10, 10,256,32)は、X座標10、Y座標10、幅256、高さ32の領域を設定しています。 画像の設定 スクリプトは、完成したので、パワーゲージの画像をスクリプトに設定します。 HierarchyのBallをクリックして、Inspectorを確認しましょう。 BallのScriptにGaugeが追加されています。 まだ、画像が設定されていないので、Noneになっています。 ProjectにあるGauge画像をスクリプトに設定します。 設定は、簡単で、GaugeをBall ScriptのGaugeへドロップします。 実行してみましょう。 左上にパワーゲージが表示されましたね。 サイズが気になりますが、後々調整していきましょう。 今回新しく出てきたTexture、Rectクラスは、Unityのマニュアルページに説明があります。 Texture Rect ただ、ここだけみても初心者の人は、まったく意味がわからないと思います。 その場合には、検索エンジンで、Unity Textureなどのキーワードで調べてみるとよいでしょう。 使い方などが詳しく書かれているサイトが見つかると思います。 練習問題 1.パワーゲージの位置を変更してみましょう。 2.パワーゲージのサイズを変更してみましょう。 3.パワーゲージの画像を変更してみましょう。 明日は、パワーゲージをアニメーションさせてみます。 それでは、楽しいUnity Lifeを！