【Unity】円形のゲージを表示する

自機のホーミングレーザー用に円形のゲージを作ってみました。



この円形のゲージですが自分で実装しようとすると結構大変なんですよね。
ところが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を使うと良いです。
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class player_gauge_move : MonoBehaviour { private Image player_gauge; private float gauge; void Start () { player_gauge = GetComponent<image>(); } void Update () { gauge += 0.01; player_gauge.fillAmount = gauge; if(gauge >= 1) gauge=0; } } </image>
UI系を弄る場合は最初にusing UnityEngine.UI;の記述が必要です。
上のスプリクトのように player_gauge.fillAmount = gauge;みたいに書けばgaugeの数値によって変化します。

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

【Unity】数字を画像で表示する

＊この記事は古いので今ならText Mesh Pro使った方が便利で簡単です＊
**********************************************************
スコア表示を実装しました。

数字を表示する時にテキストで表示するとパソコンにインストールされているフォントによってレイアウトが崩れたりしてしまうので自分で用意した数字の画像で表示するようにしたいんですよね。
例えば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でオリジナルのフォントを実装する

Unity のカスタムフォントで数字を表示する

【Unity】回転するオプションの制御方法

自機の周りを回転するオプションを実装したくて色々と試行錯誤してました。
完成したのはコレなのですが↓


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

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

WebGLでビルドしてブラウザで動くようにしたものをGitHubにて公開しています↓

https://xxxx-kt-xxxx.github.io/Option_Rolling/

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.785にある場合は右回転（反時計回り）するようにします。

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

上記を踏まえて作ったスクリプトがコレ↓
Option_move00.cs
using System.Collections; using System.Collections.Generic; using UnityEngine; public class Option_move00 : MonoBehaviour { private float rad = 0;//角度 private float ds = 0;//スピード private float xv;//座標x private float yv;//座標y private float roll;//回転位置 private float roll_speed;//回転スピード private float pox;//座標x private float poy;//座標y private float poz;//座標z public void Create_rad_ds(float direction, float speed)//オプション位置計算関数 { rad = direction;//角度 ds = speed;//スピード xv = Mathf.Cos(rad) * (ds);//移動量x yv = Mathf.Sin(rad) * (ds);//移動量y } // Use this for initialization void Start () { roll_speed = 0.2f; Create_rad_ds(0f, 0.2f); } // Update is called once per frame void Update () { if (Player_move.pxv == -1 && Player_move.pyv == 1)//左上押した時の目標0.785 { if (roll >= 0f && roll < 0.785f) { roll += roll_speed; if (roll > 0.785f) { roll = 0.785f; } } if (roll > 0.785f && roll < 3.925f) { roll -= roll_speed; if (roll < 0.785f) { roll = 0.785f; } } if (roll >= 3.925f && roll < 6.28f) { roll += roll_speed; } } if (Player_move.pxv == -1 && Player_move.pyv == 0)//左押した時の目標1.57 { if (roll >= 0f && roll < 1.57f) { roll += roll_speed; if (roll > 1.57f) { roll = 1.57f; } } if (roll > 1.57f && roll < 4.71f) { roll -= roll_speed; if (roll < 1.57f) { roll = 1.57f; } } if (roll >= 4.71f && roll < 6.28f) { roll += roll_speed; } } if (Player_move.pxv == -1 && Player_move.pyv == -1)//左下押した時の目標2.355 { if (roll >= 0f && roll < 2.355f) { roll += roll_speed; if (roll > 2.355f) { roll = 2.355f; } } if (roll > 2.355f && roll < 5.495f) { roll -= roll_speed; if (roll < 2.355f) { roll = 2.355f; } } if (roll >= 5.495f && roll < 6.28f) { roll += roll_speed; } } if (Player_move.pxv == 0 && Player_move.pyv == -1)//下押した時の目標3.14 { if (roll >= 0f && roll < 3.14f) { roll += roll_speed; if (roll > 3.14f) { roll = 3.14f; } } if (roll > 3.14f && roll < 6.28f) { roll -= roll_speed; if (roll < 3.14f) { roll = 3.14f; } } //roll = 3.14f; } if (Player_move.pxv == 1 && Player_move.pyv == -1)//右下押した時の目標3.925 { if (roll >= 0f && roll < 0.785f) { roll -= roll_speed; } if (roll >= 0.785f && roll < 3.925f) { roll += roll_speed; if (roll > 3.925f) { roll = 3.925f; } } if (roll > 3.925f && roll <= 6.28f) { roll -= roll_speed; if (roll < 3.925f) { roll = 3.925f; } } } if (Player_move.pxv == 1 && Player_move.pyv == 0)//右押した時の目標4.71 { if (roll >= 0f && roll < 1.57f) { roll -= roll_speed; } if (roll >= 1.57f && roll < 4.71f) { roll += roll_speed; if (roll > 4.71f) { roll = 4.71f; } } if (roll > 4.71f && roll <= 6.28f) { roll -= roll_speed; if (roll < 4.71f) { roll = 4.71f; } } //roll = 4.71f; } if (Player_move.pxv == 1 && Player_move.pyv == 1)//右上押した時の目標5.495 { if (roll >= 0f && roll < 2.355f) { roll -= roll_speed; } if (roll >= 2.355f && roll < 5.495f) { roll += roll_speed; if (roll > 5.495f) { roll = 5.495f; } } if (roll > 5.495f && roll <= 6.28f) { roll -= roll_speed; if (roll < 5.495f) { roll = 5.495f; } } } if (Player_move.pxv == 0 && Player_move.pyv == 1)//上押した時の目標0f { if (roll >= 0f && roll < 3.14f) { roll -= roll_speed; if (roll < 0f) { roll = 0f; } } if (roll >= 3.14f && roll < 6.28f) { roll += roll_speed; if (roll > 6.28f) { roll = 0f; } } //roll = 0f; } if (roll > 6.28f) roll = 0; if (roll < 0) roll = 6.28f; Create_rad_ds(roll + 3.14f, 2f); pox = Player_move.px; poy = Player_move.py; poz = Player_move.pz; Vector3 pos = transform.position; pos.x = pox + xv; // x座標加算 pos.y = poy + yv; // x座標加算 pos.z = poz; // y座標加算 transform.position = pos;//自機表示 } }
移動キーを押した方向によって目標座標を設定して現在のオプションの位置によって右回転か左回転化を判断する感じです。
余談ですがrollの値をずっとプラス（もしくはマイナス）していけば自機の周りを勝手に回転するオプションにする事も出来ます。

【Unity】Vector3.Reflectを使用して3Dな反射レーザーを表示する

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
using System.Collections; using System.Collections.Generic; using UnityEngine; public class Laser_move : MonoBehaviour { private float speed = 0.5f;//弾速度 private float moveX = 0f; private float moveY = 0f; private float moveZ = 0f; private Vector3 lastVelocity;//速度ベクトル private Rigidbody rb;//Rigidbody用 private int time = 0; void Start () { rb = GetComponent<rigidbody>(); moveX = Random.Range(-10.0f, 10.0f) * speed; moveY = Random.Range(-10.0f, 10.0f) * speed; moveZ = Random.Range(3.0f, 10.0f) * speed; rb.velocity = new Vector3(moveX, moveY, moveZ);//初期ベクトル } void Update () { time++; if (time > 600)//600フレーム後に弾削除 { transform.DetachChildren();//親オブジェクトから子オブジェクトを解除 Destroy(gameObject);//弾削除 } } void FixedUpdate() { this.lastVelocity = this.rb.velocity;//Rigidbodyを使用した移動用 } void OnCollisionEnter(Collision coll) { if (coll.gameObject.tag == "Cube")//壁と当たった時 { Vector3 refrectVec = Vector3.Reflect(this.lastVelocity, coll.contacts[0].normal);//反射ベクトル計算 this.rb.velocity = refrectVec; } if (coll.gameObject.tag == "Cube_Destroy")//破壊出来る壁に当たった時 { Destroy(coll.gameObject);//壁削除 Vector3 refrectVec = Vector3.Reflect(this.lastVelocity, coll.contacts[0].normal);//反射ベクトル計算 this.rb.velocity = refrectVec; } if (coll.gameObject.tag == "Player_Cube")//プレイヤーと当たった時 { Vector3 refrectVec = Vector3.Reflect(this.lastVelocity, coll.contacts[0].normal);//反射ベクトル計算 this.rb.velocity = refrectVec; Laser_Create.collision = 1;//赤く光らせる用 } } }

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

【Unity】トレイルレンダラーとベジェ曲線で3Dなホーミングレーザーを表示する

一番下に追記あります。
**********************************************

先日作成したトレイルレンダラーでレーザーを表示するプログラムを改良してベジェ曲線を使った3次元的なホーミングレーザーを実装してみました。



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

unitypackageとProjectSettingsのファイルはこちら

ファイルのダウンロード

Unity2018.2.11f1使用

Zipファイルになっていますので展開したらHomming_TEST.unitypackageとProjectSettingsフォルダが入っています。

ファイルメニューのAsset→Import Package→Custom Packageを選択してHomming.unitypackageを読み込みます。

ProjectSettingsフォルダは作成したプロジェクトにあるProjectSettingsフォルダに上書きします。

実行すると左クリックした位置に座標(0,0,0)からホーミングレーザーを発射します。
右クリックしながらドラッグするとカメラアングルが変更出来ます。


先日作成したトレイルレンダラーでレーザーを表示するプログラムからの変更点を書いてみます。
まずベジェ曲線を使った3次元的なホーミングレーザーを実装についてですが、以前2次元なホーミングレーザーについては
http://ktstg.blog.shinobi.jp/Entry/658/
http://ktstg.blog.shinobi.jp/Entry/676/
辺りに詳しく書いていますので参考にして下さい。



上の動画のプログラムは↓でダウンロード出来ます。
ベジェ曲線プログラムのダウンロード
ソースファイルと実行ファイルが入ってます。

動画のP03の位置にレーザーを表示すればホーミングっぽく表示出来ますが3次元で表示する場合はどうするんやろ？と悩みみました。
色々ググってみたりしたのですが良くわからず、とりあえず全ての座標でZ軸を追加して計算してみたら上手くいったので今回はコレで良しとしています。

Laser_move.csを下記のように書き換えます。

Laser_move.cs
using System.Collections; using System.Collections.Generic; using UnityEngine; public class Laser_move : MonoBehaviour { private float DivNum = 40;//分割数 private float Counter = 0f;//レーザー進行フレーム用 private float u = 0f;//ベジェ曲線位置用 private float P0x = 0f; private float P0y = 0f; private float P0z = 0f; private float P1x = 0f; private float P1y = 0f; private float P1z = 0f; private float P2x = 0f; private float P2y = 0f; private float P2z = 0f; private float P3x = 0f; private float P3y = 0f; private float P3z = 0f; private float P01x = 0f; private float P01y = 0f; private float P01z = 0f; private float P12x = 0f; private float P12y = 0f; private float P12z = 0f; private float P23x = 0f; private float P23y = 0f; private float P23z = 0f; private float P02x = 0f; private float P02y = 0f; private float P02z = 0f; private float P13x = 0f; private float P13y = 0f; private float P13z = 0f; private float P03x = 0f; private float P03y = 0f; private float P03z = 0f; public void Create_P3xyz(float x, float y, float z)//目標座標生成 { P3x = x; P3y = y; P3z = z; } void Start() { transform.rotation = Quaternion.Euler(90, 0, 0);//画像回転 P0x = 0f;//ベジェ曲線発生位置x P0z = 0f; P0y = 0f; P1x = Random.Range(-13.0f, 13.0f);//ベジェ曲線下側の目標座標x P1y = Random.Range(-13.0f, 13.0f); P1z = Random.Range(-13.0f, 13.0f); P2x = Random.Range(-13.0f, 13.0f);//ベジェ曲線真ん中付近の目標座標x P2y = Random.Range(-13.0f, 13.0f); P2z = Random.Range(-13.0f, 13.0f); Create_P3xyz(Laser_Create.x, Laser_Create.y, Laser_Create.z);//目標座標（クリックした位置） } void Update() { u = (1.0f / DivNum) * Counter;//ベジェ曲線の位置を移動させる P01x = (1.0f - u) * P0x + u * P1x; P01z = (1.0f - u) * P0z + u * P1z; P01y = (1.0f - u) * P0y + u * P1y; P12x = (1.0f - u) * P1x + u * P2x; P12z = (1.0f - u) * P1z + u * P2z; P12y = (1.0f - u) * P1y + u * P2y; P23x = (1.0f - u) * P2x + u * P3x; P23z = (1.0f - u) * P2z + u * P3z; P23y = (1.0f - u) * P2y + u * P3y; P02x = (1.0f - u) * P01x + u * P12x; P02z = (1.0f - u) * P01z + u * P12z; P02y = (1.0f - u) * P01y + u * P12y; P13x = (1.0f - u) * P12x + u * P23x; P13z = (1.0f - u) * P12z + u * P23z; P13y = (1.0f - u) * P12y + u * P23y; P03x = (1.0f - u) * P02x + u * P13x; P03z = (1.0f - u) * P02z + u * P13z; P03y = (1.0f - u) * P02y + u * P13y; Vector3 pos = transform.position; pos.x = P03x; pos.y = P03y; pos.z = P03z; transform.position = pos;//レーザー表示座標 Counter += 0.5f;//レーザーの速さ； if (u >= 1.0f) { transform.DetachChildren(); Destroy(gameObject); } } }
全ての座標でZ軸の計算を追加しています。座標(0,0,0)からクリックされた位置にレーザーを発射してクリックした位置に来たらトレイルレンダラーを付けた子オブジェクトを切り離してレーザーを消去しています。

今回はクリックした位置にレーザーを移動させますのでLaser_Create.csも下記のように変更します。

Laser_Create.cs
using System.Collections; using System.Collections.Generic; using UnityEngine; public class Laser_Create : MonoBehaviour { public static float x;//クリック位置x public static float y;//クリック位置y public static float z;//クリック位置z public GameObject Laser_prefab;//Laser_prefabをインスペクターに用意 void Start () { } void Update () { if (Input.GetMouseButton(0))//マウスを左クリックした時 { Vector3 touchScreenPosition = Input.mousePosition;//マウス座標を代入 touchScreenPosition.z = 10.0f;//ScreenToWorldPointを使うための呪文 Camera gameCamera = Camera.main;//カメラ取得 Vector3 touchWorldPosition = gameCamera.ScreenToWorldPoint(touchScreenPosition);//マウス座標をワールド座標に変換 x = touchWorldPosition.x;//クリック位置代入 y = touchWorldPosition.y; z = touchWorldPosition.z; Debug.Log("LeftClick:" + touchWorldPosition);//取得座標表示 Instantiate(Laser_prefab, new Vector3(0f, 0f, 0f), Quaternion.identity);//0,0,0にレーザー生成 } } }

Laser_Tail.csについては14行目を下記のように変更します。
if(time>240)

この状態で再生させるとクリックした場所にホーミングが飛んでくると思うのですが、軌跡が綺麗じゃない（トレイルレンダラーが崩れてしまう）時があるんですよね。

画像のような感じで綺麗に描画されない時があります。
どうやら曲がる角度が急になったりすると崩れてしまうようで、マテリアル変えたりトレイルレンダラーの数値を変えたりしたのですが根本的な解決は自分には出来ませんでした。
一応、トレイルレンダラーの幅を狭くすると目立たなくなるので、とりあえずはこの方法で妥協しようかなぁと思いってます。

トレイルレンダラーの数値Widthを0.1に変更してグラフを画像のように変更します。


マテリアルの画像を↓に変更します。



この状態で再生させるとこんな感じ。

トレイルレンダラーの崩れがかなり軽減されています。もうちょっと太くしたいなーと思いつつ綺麗に見える限界がこの辺かなぁと。
他の対策法としては急な角度がつかないようにするのが良いと思うのですが、良い実装方法が思いつきませんでした。

それと、右クリックしてカメラアングルを動かせるようにするスクリプトはコチラ
CameraRotator.cs
using System.Collections; using System.Collections.Generic; using UnityEngine; public class CameraRotator : MonoBehaviour { // カメラオブジェクトを格納する変数 public Camera mainCamera; // カメラの回転速度を格納する変数 public Vector2 rotationSpeed; // マウス移動方向とカメラ回転方向を反転する判定フラグ public bool reverse; // マウス座標を格納する変数 private Vector2 lastMousePosition; // カメラの角度を格納する変数（初期値に0,0を代入） private Vector2 newAngle = new Vector2(0, 0); void Start() { rotationSpeed.x = 0.2f; rotationSpeed.y = 0.2f; } // ゲーム実行中の繰り返し処理 void Update() { // 左クリックした時 if (Input.GetMouseButtonDown(1)) { // カメラの角度を変数"newAngle"に格納 newAngle = mainCamera.transform.localEulerAngles; // マウス座標を変数"lastMousePosition"に格納 lastMousePosition = Input.mousePosition; } // 左ドラッグしている間 else if (Input.GetMouseButton(1)) { //カメラ回転方向の判定フラグが"true"の場合 if (!reverse) { // Y軸の回転：マウスドラッグ方向に視点回転 // マウスの水平移動値に変数"rotationSpeed"を掛ける //（クリック時の座標とマウス座標の現在値の差分値） newAngle.y -= (lastMousePosition.x - Input.mousePosition.x) * rotationSpeed.y; // X軸の回転：マウスドラッグ方向に視点回転 // マウスの垂直移動値に変数"rotationSpeed"を掛ける //（クリック時の座標とマウス座標の現在値の差分値） newAngle.x -= (Input.mousePosition.y - lastMousePosition.y) * rotationSpeed.x; // "newAngle"の角度をカメラ角度に格納 mainCamera.transform.localEulerAngles = newAngle; // マウス座標を変数"lastMousePosition"に格納 lastMousePosition = Input.mousePosition; } // カメラ回転方向の判定フラグが"reverse"の場合 else if (reverse) { // Y軸の回転：マウスドラッグと逆方向に視点回転 newAngle.y -= (Input.mousePosition.x - lastMousePosition.x) * rotationSpeed.y; // X軸の回転：マウスドラッグと逆方向に視点回転 newAngle.x -= (lastMousePosition.y - Input.mousePosition.y) * rotationSpeed.x; // "newAngle"の角度をカメラ角度に格納 mainCamera.transform.localEulerAngles = newAngle; // マウス座標を変数"lastMousePosition"に格納 lastMousePosition = Input.mousePosition; } } } // マウスドラッグ方向と視点回転方向を反転する処理 public void DirectionChange() { // 判定フラグ変数"reverse"が"false"であれば if (!reverse) { // 判定フラグ変数"reverse"に"true"を代入 reverse = true; } // でなければ（判定フラグ変数"reverse"が"true"であれば） else { // 判定フラグ変数"reverse"に"false"を代入 reverse = false; } } }
このスクリプトをメインカメラにアタッチすれば右クリックでカメラアングルを変更出来るようになります。
このスクリプトは下記サイトさまのを、そのまま使わせて頂きました。
Unity:マウスドラッグでカメラを回転して視点を操作するスクリプト

*******************************************************************
追記
トレイルレンダラーが崩れてしまう問題ですが、マテリアルの画像を太いものに変更すると上手く出来ました。
laser_tailの画像を下の画像に変更してみて下さい。

お好みで下の画像でも良いです。

ファイル名はlaser_tailに変更して使用して下さい。

この画像でマテリアル作って表示すると、綺麗に表示されるようになりました。

私は勝手に勘違いしていて、画像は小さく（細く）すれば良いと思っていたのですが、画像は大きく（太く）作っておいてトレイルレンダラー側の設定で太さを調整するのが正解のようです。
マテリアルのShaderの設定もAlpha BlendedよりもAdditiveの方が良い感じな気がします。