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

Jeffry's 開発記録

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

1週間ゲームジャムに参加しました 後編

後編です。

 

メインプログラムをしゃんぐりらクリエイトさんに渡してあったのですが、私は仕事であまり動けず。タイトル画面も作れずに降りました。

しゃんぐりらクリエイトさんから上がってきた修正版のプログラムには、ピンボールでミスったあと下の画面でトランポリンが待っており、運がいいと戻せる機能がついておりました、しゃんぐりさクリエイトさん、グッジョブです、このお陰ですごくゲームらしくなりました。ピンボールのシミュレーターではないのでこういう演出が必要なんですよね。

 

f:id:jeffry1461:20170504171645p:plain

 

 

この後恐れていた自体が起こります。GITで競合がありプル(プログラムファイルのダウンロードみたいな)できない状態になりました。うわーやばい、と!

 

ですが、数時間ああでもないこうでもないと試した結果、なんとかマージできました。よかった!この後しばらくの間マージ恐怖症になりました(T_T) 更にその後Unityのバージョンが3人で合っていなかったという事が判明。先にやっておかないといかんですね。4月28日の夜にはいろいろうまく行き、プロジェクトが進むようになりました。残り約2日

 

29日(土)になり、しゃんぐりらシステムさんのアカウントで出すのかと思っていたのですが、話し合った結果私のアカウントで出すことになりました、すいませんです、そしてありがとうございます。チーム名は「JGS-Games」になりました。まだゲーム名も決まっていませんでした。

 

f:id:jeffry1461:20170504172759p:plain

(その時のchat)

 

 

たしかストリートファイターのどれかのシリーズでアッパーというタイトルがあったなーと思いまして「アッパー」をつけることにしました!

この日に「はずみネコ」を玉にしたのですが、ボツになりまして女の子の絵に変えました。同じように缶詰の絵をお菓子に、崖の絵をチェックの淡い色の背景に変えました。そしてお菓子を画面上に散りばめてもらいました。

 

f:id:jeffry1461:20170504171333p:plain

 

 

29日15時。明日はリリース日なので、もう収束させないとやばいです。

リザルト、スタッフ一覧の画面、タイトルロゴ、マニュアルなどを作っていきました。

 

f:id:jeffry1461:20170504172039p:plain

f:id:jeffry1461:20170504172004p:plain

 

 

この日の夜またGITで競合でがありまして焦りましたが・・・

 

f:id:jeffry1461:20170504172256p:plain

(その時のchat)

 

さすがGreenBitさん、ガチャで直すとは・・(・∀・)

 

 

いろいろありましたが、4月30日(日)の14時40分にサイトにアップできました、一応リリースできたと行っていいでしょう(実際は20時からオープン)

 

 オープンの20時を忘れており、21時位に見に行きましたところ、あまり遊ばれておりません・・・。う・・ピンボールだめか、地味だったか、操作感悪かったか、とか思いましたが、その後徐々に遊ばれる回数も増えていきまして、新着の5位くらいに入ったところでようやく安心できました。他の方も面白いゲームを制作されておりましたねぇ、本当にいろいろ勉強になる1週間でした。

 

 

今回ゲームを制作できたということより、3人チームで作れたということが大きかったと思います。もしお互いに「ここは(面白いから)俺がやるから!」とか「ここ面倒だからだれかやってよ!」となっていたらダメだったかと思うのです。うまく協力し譲るところは譲れたかなと思います。

逆に、ゲームはできないは、3人でケンカになるは、という結果もありえたなと気づきました・・・怖!!

 

 

 

1週間ゲームジャムという楽しいイベントを考えてくれた ”naichi"さん 、3人でゲーム作ろうと提案してくれた ”しゃんぐりらクリエイト"さん、地味な部分をキッチリしあげてくれた "GreenBit"さん 、ありがとうございました!

 

 

 

 

制作したゲームはこちらです

f:id:jeffry1461:20170501133909p:plain

 

1週間ゲームジャムに参加しました 前編

 unityroom というサイトでは、Unityで作成したゲームをWeb形式で公開できる場所なのですが、そこで「1週間ゲームジャム」というイベントが開催さるという告知を見かけました。

開発仲間である”しゃんぐりらクリエイト”さんから「1週間でチームで1作品を作って公開も面白そう」という話が出まして、さらに彼はパワポでのプレゼンまで行ってくれました。わたくし”じぇふ”と、”GreenBit”さんは燃えてきましたね、やってやろうじゃないか、と!

 

 

とはいえ、何を作ろう・・? 複数人数でつくれるのかな・・? 絵は? 音は?

などと瞬時にネガティブ思考になります。しかしそこはしゃんぐりらクリエイトさんも事前に考えてくれていたようで、こんな事がプレゼン資料に書いてありました。

--------------------------------------------------------------------------------------------------

f:id:jeffry1461:20170501111738p:plain

 

さすがです!

 

お題が出たのが4月24日(月)でした。4月30日の20時から公開するそうなので、それを締め切りと考えました(実際は締切は過ぎても問題ないですけど)

 

チャットのおかげか、その日の夜には作ろうという事で3人の心が一つになりました。実は私と、GreenBitさん、しゃんぐりらクリエイトさんは chatwork を使用して、毎週ゲーム開発の進捗報告などをしておりました。ですので連絡のやり取りに関しては大丈夫でした。

 

いったんソースファイルを共有するためにGITというヤツを使ってみようという事になりました。今流行の(?)分散型バージョン管理システム。複数人数で開発する時に便利なしくみです。それを使えるアプリ sourceTree を使うことにしました。最初はどう使うんだこれぇ〜! となりましたが、やはり実践で使うのが一番覚えようとする気持ちが強いんですね、私もGreenBitさんもプッシュ、プル、チェックアウトなどは覚えました。その日は4月25日(火)。残り約5日。

 

1週間ゲームジャムのお題が「跳ねる」でしたので、玉が跳ねる、キャラが跳ねるというゲームが良いという話になり、ピンボールがいいかなとという事になりました。

私、やはり痩せても枯れても(痩せてませんけど)数十年プログラムぽいことを仕事にしております。後で「あそこどうだっけ」とならないように仕様書をインスタントで作りました。細かいことは自分でやってねという感じでしたけど、文書化する事は重要と思っています。

 

f:id:jeffry1461:20170501113810p:plain

(適当)

 

 

ゲーム制作に着手したのが4月27日(木)。今日を入れて残り4日、やばい!

しかし私はフリーランスでして、さらにその日はあまり仕事もなかったことも有り、雰囲気遊べるくらいまでは一気に組みました。(ピンボールのシミュレーターにはなっていませんけど、遊べる程度には)

そして28日からはしゃんぐりさクリエイトさんにバトンタッチ、GreenBitさんにはリザルト画面を作ってもらうことにしました。私はタイトル画面を作成。

 

f:id:jeffry1461:20170501114300p:plain

 

当初は私の作成したゲーム「はずみネコ」の素材を使っておりました。しかしさすがのUnityピンボール的な動きはすぐできちゃうんですねー。素材があれば3Dでしたが、無かったので2Dになってます。

 

 

 

後半に続きます。

 

 

 

制作したゲームはこちらです。

f:id:jeffry1461:20170501133909p:plain

ピンボール アッパー | ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

 

 

 

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のレイヤーを設定するコードをセット

 

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

 

 

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

 

 

 

(誤字を複数修正・・)