忍者ブログ
まったくのプログラミング素人の筆者がC++/HSPを使用してSTG(シューティングゲーム)を作っていく過程を書くブログでしたが最近は脱線気味。プログラミング以外にも、ゲーム関連の記事、日々の戯言など。
ゲーム画面で変数の値を確認したいなーと思って色々と検索してみたのですが良い方法がなかなか見つからなかったのでメモ。
画面の左側に出しているような感じで変数を表示させるにはGUI.Labelを使うとわかりやすかったです。
GUI.Label(x,y,width,height,String)と定義するようなので例えば・・・
GUI.Label(new Rect(0, 180, 500, 100), "Player_pos: " + pos.ToString());
のように書けばxが0、yが180の位置に横幅500、縦幅100の文字列を表示するって感じになります。
"Player_pos: "はPlayer_posの文字を表示
+ pos.ToString()はposの値を文字列に変更して表示となります。
GUI.LabelはOnGUI()関数の中に書かないと駄目なので、表示したい変数のあるスクリプトに
private void OnGUI()
    {
        GUI.Label(new Rect(0, 180, 500, 100), "Player_pos: " + pos.ToString());
    }
こんな感じで書いてやれば自分が表示したいと思っている変数の値がゲーム画面に表示されますのでビルド後の実行ファイルで変数の値を確認したい時などに良いかと思います。
Unityエディタ内で変数を確認する場合はエディタ右上の三本線の所をクリックしてDebugモードにすればInspector内で確認出来ます。
PR
自機のホーミングレーザー用に円形のゲージを作ってみました。



この円形のゲージですが自分で実装しようとすると結構大変なんですよね。
ところがUnityには円形のゲージを表示するための関数が用意されていてとても簡単に表示する事が出来ました。

まずは画像のような丸い画像を用意します。

ボヤけた画像みたいな作り方はこの辺で書いてますので参考にして下さい。
画像は白色で作った方が後でUnity側で色が変更出来るので便利です。

画像をプロジェクトの任意のフォルダに入れたらゲージを表示させたいオブジェクトにUI→CanvasでCanvasを追加します。

Rect TransformのScaleで大きさを整えてInspectorのCanvasにあるRender ModeをWorld Spaceに変更します。これで画面上を自由に動かせるようになります。
逆に動かないゲージならOverlayで良いと思います。

先程追加したCanvasの子としてUI→Imageを追加します。

InspectorのImageにあるSource Imageに作製したゲージ画像を指定してImage TypeをFilledに。
Fill MethodをRadial 360にしてFill Amountのバーを左右に動かすとゲージ的に円が動きます。
Radial 360を180にすれば半円になりますしFill Originを変えればゲージのスタート地点を変更出来ます。
Clockwiseは時計回りか反時計回りかの選択。色々といじってみると楽しいです。

スプリクトから弄る場合はfillAmountを使うと良いです。

UI系を弄る場合は最初にusing UnityEngine.UI;の記述が必要です。
上のスプリクトのように player_gauge.fillAmount = gauge;みたいに書けばgaugeの数値によって変化します。

今回のゲームは3D表示の2Dで作っているのであまり恩恵はありませんが、3Dで作ってる場合はゲージを表示してるキャラが後ろを向いても、ちゃんとゲージだけはプレイヤーの方に向いて表示されるので細かい事を考えなくても何となく良い感じに表示してくれて便利ですよ。
スコア表示を実装しました。

数字を表示する時にテキストで表示するとパソコンにインストールされているフォントによってレイアウトが崩れたりしてしまうので自分で用意した数字の画像で表示するようにしたいんですよね。
例えば1230点というスコアを表示しようと思ったらスコアの変数から数字の桁数を調べて、一の位が0だから0の画像を一の位の位置に表示、十の位は3だから3の画像を十の位の位置に表示・・・と言った感じで結構面倒くさい処理を行わないと駄目なんです。

ところがUnityの場合、カスタムフォントという機能?があって自分で用意した画像でフォントを作ることが出来るんです。この方法を使うとテキストを表示するときに自分で用意した画像を表示できるので、普通に画像変換するよりも簡単に表示することが出来ました。

まずは数字の画像を用意します。

今回は一文字の大きさを64x64で作るので512x128で作製しました。
この画像の横幅は2のべき乗にする必要があるようで32、64、128、256、512、1024、2048、4096、8192からサイズを選ぶ感じになります。
後から出てくるのですが、一文字の文字サイズを全体のサイズで割る必要があるので(今回の場合は64÷512と64÷128)ちゃんと割り切れる数字で作製する方が良いです。

画像をプロジェクトフォルダに入れたら
Texture TypeをDefault
Max Sizeは512にしてApplyを押します。


ProjectタブでCreate→Materialでマテリアルを作成
ShaderはUnlit/Textureを選択


Assets→Create→Custom Fontでカスタムフォントを作成します。
設定はこんな感じ。

Indexは対応するAsciiコードを入力します。0のAsciiコードは48ですので本来なら48と入力するのですが
Ascii Start Offsetに48と入力しておくと0のIndexが0になるのでわかりやすくて良いです。

UvのXとYですが、この値は画像のどこで区切るか?の指定となります。
Xは画像一文字の横幅÷画像全体の横幅、Yは画像一文字の縦幅÷画像全体の縦幅になります。
上記画像の場合は全体画像サイズが512x128で一文字のサイズが64x64ですのでXは64÷512で0.125、Yは64÷128で0.5となります。
Xは最初が0、次が0.125、次が0.25・・・と続きます。Yは0~7までは0になりそうですがY軸は逆に考えるみたいで0~7までは0.5で8~9までが0になります。

WとHは画像の大きさですので、そのまま0.125と0.5と入力します。

VertのWとHは想定したドット数を入れるので64x64の画像を作る場合はXは64、Yは-64を入力すればOK
Advanceは文字幅を指定するので64を入れます。

ここまで指定すれば設定は終了
後はテキストを表示する時に作製したフォントを指定すると作製した画像で数字を表示出来るようになります。
数字だけじゃなく文字も同じように作製出来るので頑張れば文字もフォント化出来るのですが、それをやるくらいなら普通にフォント作った方が良い気もしますね。

下記の記事を参考に扠せて頂きました。
【Unity5】uGUIでオリジナルのフォントを実装する
自機の周りを回転するオプションを実装したくて色々と試行錯誤してました。
完成したのはコレなのですが↓


自機の移動方向と反対の方向を向いて自機の周りを回転する動き。
コレの実装が凄く難しくて悩んだので忘却録的に書いておきます。

とりあえず簡単に動きだけ再現出来るプロジェクトを作ってみました。

WebGLでビルドしてブラウザで動くようにしたものをGitHubにて公開しています↓
unitypackageとProjectSettingsのファイルはこちら
Unity2018.2.11f1使用
 
Zipファイルになっていますので展開したらOption_Rolling.unitypackageとProjectSettingsフォルダが入っています。
ファイルメニューのAsset→Import Package→Custom Packageを選択しOption_Rolling.unitypackageを読み込みます。
ProjectSettingsフォルダは作成したプロジェクトにあるProjectSettingsフォルダに上書きします。
カーソルキーで自機移動出来ます。スマホ操作には対応してません。

悩んだのがオプションの回転方法。
操作キーをグリグリ回転させるとオプションもグリグリ回転出来るようにしたかったのですが、その場合は操作キーを押した時にオプションが右回転するのか左回転するのかを考えなくてはななりませんでした。

例えば現在の位置が3.14、移動させたい位置が5.495だったとします。
この場合オプションは移動距離の短い方、右回転(反時計回り)して欲しいです。
それを判断する為には現在の位置がどこにあるのかを判断する必要があります。
移動させたい位置が5.495の場合は2.355~5.495の位置にオプションがある時は右回転(反時計回り)するようにし、0~2.355、5.495~6.28にある場合は左回転(時計回り)するようにします。


現在の位置が5.495、移動させたい位置が0.785だったとすると、0.785~3.925の位置にオプションがある時は左回転(時計回り)、3.925~6.28、0~0.785にある場合は右回転(反時計回り)するようにします。

このような感じで移動させたい位置によってオプションを右左回転させる方向を決める必要があります。上下左右斜めの8方向で入力位置によってオプションの移動方法も変更する感じです。

上記を踏まえて作ったスクリプトがコレ↓
Option_move00.cs

移動キーを押した方向によって目標座標を設定して現在のオプションの位置によって右回転か左回転化を判断する感じです。
余談ですがrollの値をずっとプラス(もしくはマイナス)していけば自機の周りを勝手に回転するオプションにする事も出来ます。
R-TYPEの反射レーザーみたいなのを作りたいと思って実装してみました。
作っている時に3Dなブロック崩しみたいなの作れそうだなーと思ってちょっと作ってみましたが、奥行きの距離感が全く掴めなくて上手くまとめれませんでしたので出来た所まで版です。


WebGLでビルドしてブラウザで動くようにしたものをGitHubにて公開しています↓
https://xxxx-kt-xxxx.github.io/reflect_laser_test/

unitypackageとProjectSettingsのファイルはこちら
Unity2018.2.11f1使用

Zipファイルになっていますので展開したらReflect_test.unitypackageとProjectSettingsフォルダが入っています。
ファイルメニューのAsset→Import Package→Custom Packageを選択しReflect_test.unitypackageを読み込みます。
ProjectSettingsフォルダは作成したプロジェクトにあるProjectSettingsフォルダに上書きします。
左クリックで弾発射、右クリックで壁生成、マウスでプレイヤー移動です。

実装方法書いてみます。
反射レーザーを作る時に大変なのが反射する角度の計算なんですがUnityにはVector3.Reflect(2Dの場合はVector2.Reflect)という便利な関数があって、この関数を使うと簡単に反射角度の計算が出来ます。
Vector3.Reflectを使用するためにはオブジェクトをRigidbodyにて動かす必要があるのでRigidbodyをアタッチしてIs Kinematicのチェックを外しておきます。
3D表示の2Dゲームの場合はConstraintsのFreeze Position(ゲームの向きによってx,y,zを選択)もチェックを入れておかないと反射した時に変な方向に飛んで行ってしまします。

反射するスクリプトはこんな感じ↓
Laser_move.cs


Vector3 Reflect の説明を見てみると・・・
 Vector3 Reflect (Vector3 inDirection, Vector3 inNormal);と書いてあります。

inDirectionは現在の進行ベクトルです
inNormalは法線ベクトル(面に対して垂直方向のベクトル)
Resultが反射ベクトルとなります。

Vector3 refrectVec = Vector3.Reflect(this.lastVelocity, coll.contacts[0].normal);
this.rb.velocity = refrectVec;
の部分で反射ベクトルの計算をしているのですが、たったこれだけで反射ベクトルを求められるのは簡単で良いです。
尚、このスクリプトを実装するに当たって下記のサイト様の記事を大変参考にさせて頂きました。
http://pafu-of-duck.hatenablog.com/entry/2017/09/02/233158


当初、反射ベクトルの計算方法がわからなかったので反射角度を直接指定するやり方で実装していたのですが、この方法だと斜めの壁に対応出来ないんですよね。


Vector3 Reflectを使用するとこんな感じに


動きとしてはVector3 Reflectを使用した方が正しい動きなのですが、ゲームとしてみると角度指定した方法の方が反射レーザーっぽい気もしますね。
この辺は実際のゲームに合わせて実装するのが良さそうなので、今のところはコレで良しとしておきます。

カウンター
Twitter
カレンダー
07 2019/08 09
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
最新コメント
[11/24 kt.]
[11/24 kt.]
[11/24 NONAME]
[11/23 NONAME]
[10/05 tejas]
プロフィール
HN:
kt.
HP:
性別:
男性
自己紹介:
STG大好きな45歳。
プログラミング経験は昔ファミリーベーシックでちょっとさわったくらい。
好きなSTGは、怒首領蜂大往生、エスプガルーダ(2)等の弾幕STGやら雷電シリーズなんかの非弾幕、バトルガレッガ、グラディウスシリーズ、R-TYPE等、STGなら何でも好きです。
音楽がカッコイイSTGが特に好きで、並木学氏は最高!
ブログ内検索
忍者ブログ [PR]