読者です 読者をやめる 読者になる 読者になる

Jeffry's 開発記録

楽しく学べるアプリの紹介、モバイルアプリ開発記録等

Unityでホーミングレーザーやってみた 後編

さて、前回はレーザーを撃てたので、今回はこれをホーミングさせます。

先にホーミングな動画を御覧ください。

 


ホーミングレーザー作ってみたテスト

 

自機に見立てた青い三角が左右に移動したときに、レーザーが曲がって襲ってくるという動画でございます。

古い方法ですと、x1 - x2 / d・・・というような計算でやっていたのですが、さすがUnity様は簡単にできます。

 

 

まず、弾自体を前に進ませるという事で、スプライトをTranslateで移動させます。(座標変更での移動ではダメです)以下はY軸だけを変更しているので、上下に直線移動します。(speed は float で 3f とか)

 

f:id:jeffry1461:20170219183452p:plain

 

これに、回転運動を追加すれば追っていくようになります。それにはターゲットとなるゲームオブジェクト(今回の場合は自機)が必要となりますので、TARGETに指定してください。そして以下のコードを呼び出します。

 

f:id:jeffry1461:20170219184941p:plain

 

TARGET(自機)とthis(レーザー)の距離を計算し、それに合わせてthis(レーザー)を回転させるという事をしています。前進と回転を別個にした方が扱いやすいです。

この回転をUpdateから呼べばホーミングし、呼ぶのをやめれば直進で進む事になります。レーザー出現後の2〜3秒間の間は前進と回転を両方行い、その後は前進だけとすると、自機からレーザーがそれるのでプレイヤーが「よーし回避できた!」となって面白いかなと。そうしないと回避不能な気がします・・・。

 

このコードの弱点はレーザーが曲がる角度の限度を決めていないという事です。180度でも曲がってしまいます。本気を出すのでしたら、レーザーが曲がる角度の限度を時間がたつにつれて小さくするという手法をとると、ホーミング性能がすこしづつ甘くなるという事も表現できるかと思います。

 

ちなみに、弾が生成されたタイミングで1回だけ回転を行うようにすれば、狙った場所に向かって一直線にすすむ弾となります。(デモ動画でのオレンジの弾はそうしております)

 

 

f:id:jeffry1461:20170219185422p:plain

はい、Unityによるホーミングレーザー(的な表現)ができました。他にもやり方はあるでしょうけれども、これは2Dレーザーのシンプル版と思っていただければと思います。

 

 

ホーミングレーザーなんていう表現は自分には無理だからせめてホーミングミサイルを作ってみようというところから始まりました。しかし回転で追尾するものにトレイルをつけたらそれっぽくなりそう?? と思い調べてみた次第です。

 

 

Unityでホーミングレーザーやってみた 前編

シューティングゲーム好きなんです。ホーミングレーザーってあるじゃあないですか、あれって実装難しいよねぇ?いくらUnityでも難しいよねぇ? って思っていたのですが、やってみたらまあまあ出来たという事で記録しておきます。2Dのお話です。

 

Unityは5.3.2f1です。開発環境はMacOSX El Captanです。

Unityのバージョンによっては出来ない場合もあるかもしれません。

 

 

【まえがき】

昔の方法ですと、レーザーとして表示する1つ目のパーツを後ろにコピーしてすべてを移動させるという方法もあったのですが、Unity様では「Trail Renderer」という良い機能がございましたのでそれを使用します。

前準備として、弾が移動するところまで作っておきます。(これができないと先に進みません)スプライトが移動すればOKです。

 

【サンプルイメージ】

縦シューのイメージで、三角が自機、四角が飛行する敵、丸が砲台のつもりです。

赤色と紫色の敵が、緑色とオレンジ色の弾を撃ったところです。

f:id:jeffry1461:20170216170811p:plain

 

緑色の丸い弾をレーザー(的な表現)にします。ちなみにこれはプレファブです。

f:id:jeffry1461:20170216172943p:plain

 

【Trail Renderer】

弾のスプライトに Trail Renderer コンポーネントを追加です。

f:id:jeffry1461:20170216171137p:plain

 

【Material作成】

色を付けるためにMaterialが必要なので、新規で作成します。「Shader」をSpritesに変更してください。色は好きに付けてよいです。

f:id:jeffry1461:20170216171247p:plain

 

こんな感じです。

f:id:jeffry1461:20170216171337p:plain

 

Materialができました。

f:id:jeffry1461:20170216173554p:plain

 

それを先程の弾スプライトの「Trail Renderer」にセットします。MaterialsのElement 0のところに New Materialと入りました(名前変更しておけばよかったかな)

あとTimeで長さ、StartWidthで開始時の幅、EndWidthで終わりの方の幅を設定します。変更して試されると良いかと思います。

f:id:jeffry1461:20170216171456p:plain

 

 

さてこれで実行してみますと・・・だめなんですねーなんでかな。

f:id:jeffry1461:20170216171803p:plain

 

しかし、Sceneの方を3Dで見てみますと、レーザー表現になっているではないですか!! でもゲーム画面では表示されないんですよ、なにゆえ?

f:id:jeffry1461:20170216171704p:plain

 

 

【レイヤー】

どうやらレイヤーのせいだったみたいです。SortingLayerをいくつか作って、弾のスプライトをShotというレイヤーにセット。

f:id:jeffry1461:20170216171845p:plain

 

これだけではまだダメなんです。弾のスプライトに次のコードを追加します。つまりは、現状ではTraiRendererのレイヤーはコードでセットするしかないという事のようです。

 

f:id:jeffry1461:20170216172200p:plain

(もしうまくいかない場合、TraiLenderer専用のレイヤーを作って、TR.sortingLayerNameにセットしてみてください)

 

 

 

 

 【レーザー!】

という事でレーザー的な表現が出来ました。弾の色を緑にしたのがアレでしたが、透明にするか、Materialと色を合わせるかしていただければと思います。

f:id:jeffry1461:20170216172830p:plain

 

 

 

まとめると次の2つです。(この数行だけで良かった?)

 

1)スプライトにTrailRendererをセット

2)Materialを作成しTrailRendererにセット

3)MaterialのShaderをSpritesに設定

4)スプライトにTrailRendererのレイヤーを設定するコードをセット

 

ただ、弾の後ろは絵の表示だけですので、頭以外は当たり判定をコライダーではつけられ無いということになります。いわゆる貫通レーザーというものを作りたい場合は別の表現をする必要がありますね。

 

 

次回はこれをホーミングさせます。

 

 

 

(誤字を複数修正・・)

Unity勉強しなおし

いつの間にか冬。そして年末ですね。

 

 今年は人生で色々ありました。実は28年ほど勤めた会社をやめました。仕事としてはコンテンツ制作のプログラム部分を担当しておりました。これは世間で言うがシステムエンジニアとは程遠い感じでございます。(プログラマではあるかもですが)他にも幾つか担当してはいましたが、まあ年齢もアレなのでここ数年ずっと考えていた「独立」という事を実行しました。人生短いのでやりたい事やろうかなと思いまして。

 

 そのため今年は自分なりに色々準備しておりました。営業担当と話して外注さんと仕事をしたり、一緒に新規営業したり、2D、3D、プログラマの知り合いを作ったり、確定申告の勉強をしたり。正直自分のプログラム技術というか知識は大したこと無いと思っておりますので、それ以外のパラメータをアップさせるやり方にしました。(それがいいかどうかわかりませんが)

 

 夏くらいからほとんどプログラム作業はしていなかったのですが、やはりUnityは勉強し直そうとおもい、今月に入ってから「Unityで始めるC# 基礎編」を購入し勉強し直しております。

 

 

そして東京都の板橋区から千葉県の船橋市というところに引っ越しました。なんと高速道路がなく、高層ビルもないので、が見えやすい! ただコンビニまで10分ほど歩くことになります。(板橋区の時は5分歩いたら4軒ほどありました)東京から出たのは人生で初めてでしたが、千葉の人たちのほうが優しい感じがします。東京は誰もが余裕がないのかもしれません。

 

ということで、新しい環境で、新しいMacで、Unityを勉強し直しております。本を読み終わったらオリジナルアプリを開発しますハイ。

 

 

初めてコミケというイベントに行きました!

 今年の夏のコミケには、アプリ開発者仲間が出展するとの事で、これは挨拶したいという事だけではなくコミケというものに興味もあるため、行ってみる事にしました。「混んでいるよ」という噂だけは聞いていましたが・・・。

 

 

f:id:jeffry1461:20160816011012j:plain

土曜日の14時くらいにりんかい線の国際展示場前駅に着いたと思います。駅内はかなり混んでおりました。乗る人(帰る人)も意外に多かったのですが、この時は「みんな撤収早いなw」と思う程度でした。

 

 

f:id:jeffry1461:20160816011132j:plain

土曜日の14時過ぎの東棟はこんな感じでした。東棟に知り合いが出展していましたので、土曜日は東館だけを見ました。思ったより混んでいる感じではなかったですね。やはり混むのは午前中なのかなと。(この時西棟は混んでいたかもしれません)

 

帰りは16時くらいだったのですが、結構混んでいました。国際展示場前駅では移動が制限されていました。ただ、来た電車にすぐ乗る事はできたため、混んではいたものの問題なくコミケを楽しめた土曜日でした、よかったよかった。

 


 

そして日曜日も参戦。日曜日も14時くらいに会場入りだったのですが、土曜日と違いビッグサイトに入る前から移動が制限されておりました。日曜日は西棟のみ行こうと思ったのですが、その道が混みまくっていました。ただ、列は進んでいたのでストレスにはならず「人多いなー」という感じでした。

 

 

f:id:jeffry1461:20160816011810j:plain

 日曜日の14時過ぎの西棟はこんな感じでした。写真は新しいUIの音ゲーを楽しんでいる開発者の方。

 


 

さて、グッズやら本やらを購入し16時になる前に帰ろうと思ったのですが、移動制限がかかっており、決まった道しか進めませんでした。ようやく外に出ましたが、りんかい線にむかってものすごい人数が歩いており「これはやばい!」と思いました。前に進むしかできない現状にとてもストレスを感じた瞬間です。そして駅に着いても人が多くて中に入れないことに驚きました。係員の指示で駅の入り口で待機となったので、これは待っていられないと思いまして駅から離れました。これから数時間お台場で遊んでいくか?とか考えましたが、暑いし、無駄にお金つかうのもなぁと思って立ち止まっておりました。(14時前で帰る方々はこれを知っているのですね)

 

ふと前を見ると、ゆりかもめが通過しました。さぞかしギュウギュウだろうなと思ったらそうでもない感じ。あれー? そして国際展示場前駅あたりから見えるゆりかもめの駅へのエスカレータは人がまばら。あれれ?

 

そう、その駅はたいして混んでいなかったのです! 実はそこは「国際展示場正門駅」ではなく、その1つ前の「有明」という駅でした。到着したゆりかもめもガラガラでした、やったねぇやったねぇ! 当然ながら次の「国際展示場正門駅」からは大勢乗り込んできましたが、運良く座れまして難を逃れることができました。これは「正解」を手に入れたなと(*´Д`*)

 

 


 

 

f:id:jeffry1461:20160816013703j:plain

 二日間での戦利品はこんな感じになっております。本6冊、ゲーム体験版1つ、パフレット3つ、バッジ、シール・・。7月からリトライ中の「フリーダムウォーズ」の漫画あったのが嬉しかったなぁ。

 

 

 

f:id:jeffry1461:20160816013856j:plain

この5つのバッジがレアだなぁと思いながらニヤニヤしております。(なぜか写真が青いような)

 


 

初めてのコミケでしたが、日曜日はあまり行きたくない感じですハイ。移動制限されるだけで怖かったです。ただ土曜日ならいいかなーと。コミケの運営の方々、出展者の方々、楽しいイベントをありがとうございました!