原カバンは鞄のお店ではありません。

Unityを使ったゲーム制作のあれこれを綴っていきます。

アプリをリリースするまでの短く長い闘い

ついに!!

 

昨日、「キューティーサーキット ~どうぶつたちと旅にでよう~」をGooglePlayにリリースしました。!!!

 

f:id:Karvan:20180326204307p:plain

goo.gl

 

 ”Stab Of Bee Project"の記念すべき第一号の作品になります。

当初の目的だったIndie Game Fiestival 2018の応募にも、なんとか間に合って一息つくことができました。

 どうもありがとうございます。

 

振り返り

 

いやー、初めての経験とはいえ、ゲーム1本をリリースする事がここまで大変だとは思いませんでした。

開発当初は「アセットストアに売っている完成プロジェクトをちょっと弄れば簡単にアプリなんて作れる」なんて軽い考えだったんですが、いざ開発を進めていくと思った以上に進まない進捗に増えるバグ、差し迫ってくる締め切り日に増える体重、いや、体重関係ない、と悩み多き日々が続いて一時は「リリースできないかも」と挫けそうになったのですが、twitter等で開発中の画面を投稿すると好意的な反応を返してくれる方々がいたりして、そんなことを励みになんとかここまで辿り着くことができました。

 

なので今回は備忘録もかねてここまでの経緯を振り返ってみたいと思います。(長いです)

 

■10月

 google Japan で「Indie Game Festival 2018」が開催されること知る。締め切りは2018年3月25日23時。ちょうど「キューティーサーキット」の開発に手を付けていたことろで、何かしらの目標を決めようと考えていたところだったので、応募することを決意する。締め切りまで半年近くあるし、余裕っしょ。

 

■11月~12月

 パズル部分は2~3週間でサクッと完成。この調子なら年内にはできるかも、と浅はかな思いとは裏腹に進捗は進まない。ってか作っている途中にアレコレ仕様を思い付きで追加していくので進むわけない。

 

■1月

 元旦に計画を立てる。

  •   1月:仕様を固めてメイン部分(全ステージ)を完成させる
  •   2月:メニューやショップ等の必要な画面を作り、ベータ版テスト実施
  •   3月:バグ改修とレベル調整を行う→Indie Game Festival 2018に応募

と決心するも、やっぱり仕様を追加したくなり(例:ボス戦とかいらんやろ→やっぱりボスがいないと盛り上がらん→作るか)、その度にその誘惑に負けるので進捗が進まない。

ひとまず最初のステージのみ完成する。

 

■2月

 計画を変更する。

  •   2月:とにかくメイン部分の全ステージを完成させる
  •   3月:メニューやショップ等の必要な画面を作り、テスト後にリリース

だから最初、魔法を使う敵とかイラン!って言ってたやん!なんで作ろうとするの?って感じで仕様が増えていくので、作業量は増えるのに進捗が進まないという泥沼にはまる。

 

■3月上旬

 間に合わない!どう考えてもフルスペックは完成しない!

なので全ステージの完成を諦める&ショップ画面の作成も保留することを決める。

いいさ、リリースした後にバージョンアップという形で完成させれば、withパワーアップキット的な考えは世間一般でもあるし大丈夫、と仕上げの作業に入る。テスト?なにそれ?美味しいの?

 

■で、3月中旬~昨日(3/25)

 終わらんし!絶対無理だし!音楽とかどうしよう!課金機能とかどうしよう!

 メニュー画面とキャラクター作成画面を突貫工事で何とか作り終えるも課題が山積みで、ギリギリの段階になっても「メニュー画面でキャラクターを体操させたい、躍らせたい、ゴロゴロさせたい」みたいな誘惑に負けて工数食ってしまうし、自分のバカ、バカ!

それに加えてgooglePlayの100M制限の壁とか、今更AssetBundle勉強する時間ない、とか、googleデベロッパー登録ってどうやるだっけ?とか、ワー!!!っとパニックになりながら完成したのが昨日の16時。それからGooglePlayに掲載されたのを確認して、Indie Game Festival 2018への応募が完了したのが20時。本当にギリギリの戦いでした。どうもありがとう。ってかここまで読んでくれてありがとう。これでやっと一息つけます。

 

これから

 

さて、これからの作業をちょっと挙げてみましょう。

  • 未完成分のステージを作る
  • 未完成のショップ画面を作る
  • ってかイベント処理とかも作ってないし・・・
  • SNSとかの連携機能も必要か・・・
  • もし、Top20に選ばれたら本選は4月28日だからそれまでに・・・

あぁ、暫くは今のペースが続きそうです。。。orz。。。

TextMeshProで困ったこと

お知らせ

twitterにはポツポツ進捗を投稿していたのですが、作成中のゲームアプリ「CutieCircuite」の作成が佳境に差し掛かっており、なかなかブログが更新できずにいました。

 

ここにきて大体出来上がってきたので、自慢がてらにゲーム画面を投稿してみたいと思います。(twitterに投稿した画像を再利用しているとか言わないよ絶対)

 

こんな感じ、

 

f:id:Karvan:20180320234234g:plain

 

メニュー画面とステージ選択画面です。

果たしてIndie game festival 2018の締め切りまでに間に合うのか・・・

 

本題

さて、上の画像はPC上のデバッグ画面をキャプチャしたものですが、これを実際の携帯端末で動かしてみると困った問題が。

 

キャラクターの名前が表示されない

(上の画面の右上部分のカッコ内が空欄で表示される)

 

キャラクターの名前は下のキャラクター選択画面で入力された名前が反映されるはずなのですがPC上では問題ないのに携帯で動かすと上手くいかない(何度目だ)

 

f:id:Karvan:20180320234112g:plain

(ここで入力した名前が反映されない)

 

原因がわからずに頭を抱えていたのですが、色々調べると名前入力時に問題があることが判明。

 InputFieldに入力した内容を、そのまま背後にある表示用フィールド(TexMeshProUGI)へ渡していたのですが、その時SetTextメソッドを使っていました。

 

PC上で動かすと

  1.  InputFieldの入力完了イベントでInputFieldの内容を表示用のTexMeshProGUIへSetText()メソッドを使って設定する。
  2. キャラクター選択画面からメニュー画面遷移時に、名前表示用のTexMeshProGUIのtextプロパティの内容をScriptableObjectに設定する
  3. メニュー画面表示時にScriptableObjectからtextの内容を取得して名前表示用のFieldへ設定する

上記のような処理が上手く行われるのですが、携帯上ではSetText()メソッドを使っても、TexMeshProGUIの画面に表示される内容は更新されても、textプロパティの値は更新されないことが判明。

なのでSetText()メソッドは使わずにtextプロパティを直に設定するように変更すると・・・

 

ちゃんと表示された!!

 

 ハァ、これで3時間ぐらい費やしたし・・・

スプライトマスク(SpriteMask)って便利だね、って話

う~ん・・・

先々週ぐらいにunityrooomの方に意気揚々とパズルゲームを投稿したのですが、これいった反響もないまま一週間ゲームジャムが始まり、あっという間に膨大なゲームリストに埋もれてしまったので、もう一度リンクを載せてみよう。これでも二週間はかかったんだぞ!一週間で出来上がったゲームに負けられないんだから!プンプン!(ウソです)。

 

Cutie Circuit -Training- | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

 

で、本題

さて、ステージクリア型のゲームには、その殆どにおいて終盤にボスキャラと呼ばれる強敵が登場しますが、例によって私が現在製作中のゲームでもボスキャラは登場します。


そしてボスキャラというのは、その登場シーンにおいては特別な演出があって、カットインでムービーが流れるとか、カメラがズームアップして派手なパーティクルと共に姿が現れるとか、 周回を繰り返して悪の親玉を倒すと本来救出するはずのヒロインが襲いかかって来るとか、色々な演出が施されてプレイヤーを楽しませるのですが、反転、それを作る側になると

 

果てしなく面倒くさい・・・

 

わざわざカメラを設置したり動かしたり、

    〃〃∩  _, ,_
     ⊂⌒( `Д´) < ヤダヤダ!
       `ヽ_つ ⊂ノ
              ジタバタ

 

キャラクターにそれ用のアニメーションを追加したり

    〃〃∩  _, ,_
     ⊂⌒( `Д´) < ヤダヤダ!
       `ヽ_つ__つ
              ジタバタ

 

イベント用に新しいシーンを追加するとか

      _, ,_
     (`Д´ ∩ < ヤダヤダ
     ⊂   (
       ヽ∩ つ  ジタバタ
         〃〃

 

面倒くさい、面倒くさい

       ∩  _, ,_
     ⊂⌒(  ゚∀゚) <だがしかし、ボスの登場は知らせたい
       `ヽ_つ ⊂ノ

 


なので、どうしようかと頭をひねって30秒ほど考えた結果
ボスキャラ登場時に「BOSS」と文字を表示することにしました。うん、安直

 

「Boss」の文字は固定でよいのでSpriteで作ることにして
ボスキャラの姿が現れるのと同時に文字が表示されるようにしたいので
以前紹介したspriteMaskを使用する事に

 

表示させたいエリアにSpriteMaskを置いてMaskの位置に「Boss」と表示されたSpriteを移動させれば出来上がり!


ImageのMaskと違ってSpriteMaskとSpriteを親子関係にする必要がないのでiTweenのMoveToとかにSpriteMaskと同じpositionを指定あげれば「Boss」の文字がスライドインして表示されます。

 

 

f:id:Karvan:20180224013126g:plain

 

こんな感じ。

そこからちょっと捻ってボスの名前が表示されるようにしたり

 

f:id:Karvan:20180224013210g:plain

 


うーん、こんなことやってるから制作が遅れる・・・

 〃∩ _, ,_    /)    〃∩ _, ,_    /)
⊂⌒( `Д´)ミ( ⌒ヽつ⊂⌒( `Д´)ミ( ⌒ヽつ
 `ヽ._つ⊂ノ⊂( ,∀、)つ.`ヽ._つ⊂ノ⊂( ,∀、)つ
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄|     ミ
                            |    〃 ∩  。
                            |   ⊂⌒从ヽ从゜o ザバーン
                            | ~~~~~~~~~~~~~~~~
                            |

 

 

ゲームアプリ開発振り返り(4)

お知らせ

unityroomに開発中のゲーム(Cutie Circuit)のトレーニングモードを公開しました。
サークルを使った3マッチパズルです。
ステージクリアとかゲームオーバーとかはないので延々とプレイできます。
暇つぶしにどうぞ。

 

https://unityroom.com/games/cutiecircuit-training

 

これまでの話

  1. ゲーム製作者になりたいのにゲームが完成しない
  2. なんとか手軽にパッパッと作成できる方法はないか?
  3. そうだ!出来合いのゲームを改変すればいい!
  4. 早速、アセットストアから購入して改変しようと試みる
  5. 。。。一から作ったほうが早いな ← イマココ

 

忘れていた事

そうなんですよ。忘れてました。自分が作った1,000stepのコードよりも他人の作った100stepのコードの方が読み辛いってことを。
しかも今回はコメントが全て英語だし。英語なんて訳分からないし。学生時代に担当教授から英語で論文書けといわれて死ぬほど辛かったし。しかも、一生懸命書いた文章を教授に見せたらページ丸ごと×印をつけられて返却されるとか、あああああ・・・・

 

そんな感じでトラウマも呼び起こしてしまうレベルで英語の文章はなるだけ読みたくない
→だがしかし、コメントを読まないとコードの解析が進まない
→進まなくていいから英語読みたくない
→じゃぁ、一から作ってしまおう。 Q.E.D.

 

なるほど、だったらしょうがないと自分に言い聞かせて、結局素材だけを使ってソースは一から製作開始。

 

まるで「PGなんてオフショアしとけばええねん!この会社では上流工程しかやらんで!!」と威勢よく軽い気持ちで立ち上げたはいいものの、オフショア先の中国の会社から反日レベルでバグ満載のコードを返され、結局そのメンテナンスで炎上するといった、絵に描いたようなデスマーチプロジェクトですが、なにぶん作業者は私一人なので誰かに文句を言われるわけでもなく、「あれ?今日あの子来てないね?無断欠勤?」からそのまま永久に欠勤するといった、IT業界ではよくある光景も見ることなく作業を進めたわけです。

 

とりあえず出来上がり

それで二週間ほど掛かってできたのが上で紹介したゲームです。
大事なことなのでもう一回貼っておこう

 

https://unityroom.com/games/cutiecircuit-training

 

あとはこれに広告を貼り付けて、適当にタイトルつければ出来上がり!!
。。。と、思ったのですが、

 

。。。う~ん。。。物足りない。。。。

 

あまりにゲームが淡々とし過ぎていて、山場とか見所とかまったくゼロ。
一、二回やれば飽きてしまうんじゃないかと。

 

近年はパズルゲームでも戦闘要素を加えたり、クエスト要素を取り入れたりで、「パズル+何か」で構成されているゲームが多い。
いくら個人製作のゲームとはいえ、やっぱりここは時流に乗って「+何か」を作り込むべきなんじゃないか。
ただ、自分が作りたいものを作るのではなく、時代にコミットするようなものを作るべきじゃないか。
プレイしてくれるユーザのコンセンサスを得られように新しい潮流を追い求めていくスキームの中でカスタマーとデベロッパーとのシナジーは生まれるのであって、インセンティヴを得ことはジャストアイデアでできることじゃない、しっかりとしたガバナンスとプライオリティを持って、って、アホっぽいのでここら辺でやめますが、とりあえずこれをベースとして、もうちょっと作り込もうと思い立ったわけです。

 

すでにベースはできているので、あとちょっと作りこめばいいだけじゃん!

そんな軽い気持ちで

 

ええ、こんな軽い気持ちだから未だに完成してないんですけどね。

 

Curved World を使ってたら謎の現象が発生…

Curved Worldというアセット

Unityのアセットに「Curved World」とアセットがあります。

assetstore.unity.com

 

その名前の通り「平面状の世界を湾曲した状態に変形させて表示することができる」アセットで、奥行きのある表現が簡単にできるので結構人気のアセットです。

(3DモデルにCurved Worldのシェーダを設定するだけ)

www.asset-sale.net

トラブル発生

私も自作ゲームで使用しているのですが、また例によって「PCではきちんと表示されるのに、実機(Android)になるとうまく表示されない」問題が発生。何度目だ。

 

今度はCurved Worldのシェーダを設定した一部のモデルが真っ白に表示される、という問題で、最初はTextureのせいかと思いTextureの圧縮形式を色々変えてみても解消されない。頼みのGoogle先生を使ってみてもCurved World自体の記事が少ないので当該のトラブルに関する記事が見つからず、もうお手上げ状態に。

 

途方に暮れて見慣れない服を着て外に出ていこうかと思ったのですが、ちょっとその前にCurved Worldのシェーダを設定をもう一度見直してみる…

 

f:id:Karvan:20180203004502p:plain

 

で、Androidでもきちんと表示されているモデルの設定は

 

f:id:Karvan:20180203004736p:plain

 

ん?Emission?

もしやと思って、EmissionをONにしてMapにモデルのTextureを指定してみると・・・

 

f:id:Karvan:20180203005022p:plain

 

実機(Android)でも奇麗に表示された!!!\(^o^)/ (何度目だ)

これもEmissionの設定がデフォルトでONになっているのかな?

 

お知らせ

Twitterの方にはすでに投稿しているのですが、開発中の自作ゲーム(Cutie Circuit)のPlay動画を撮ってみました。

一通りPlayできる状態にはなったと思うのですが、メニュー画面やステージセレクト画面等が手付かずなので、まだまだ先は長いですが今月中には完成させたい(希望)と思っています。

 

www.youtube.com

スプライトマスク(SpriteMask)を使ってみよう、って話

スプライトマスク(SpriteMask)機能

unity 2017.1からスプライトマスク(SpriteMask)という機能が追加されています。

 

これまでもMaskという機能がありましたが、こちらはImageに対して切り抜きを行うための機能で、SpriteMaskは文字通りSpriteに対してMask処理を行うためのものです。

 

一体、何が違うんだよ!という方には以下の記事に詳しく書かれているので参照してください。

tsubakit1.hateblo.jp

kan-kikuchi.hatenablog.com

で、せっかく機能が追加されたのだから、なにかしらで使ってみたくなるじゃないですか、「せっかくだから俺はこの赤を扉を選ぶぜ」的な気持ちで。

 

なので、このSpriteMaskを使ったちょっとした演出を考えてみました。

 

 スプライトマスク(SpriteMask)の機能

 前述のとおり、SpriteMaskはSpriteに対してMaskを行う機能ですが、独自の特徴として

 切り抜きの範囲をMaskの内側か、外側か、指定できる

という機能を持っています。

 

これまでのMask機能は画像(Image)をMaskの形に切り抜くのみでしたが、SpriteMaskの場合は、逆にSpriteをMaskの形でくり抜く(穴をあける)こともできるようになっています。

 

今回はこの機能を利用して、Maskが動くことで画像(Sprite)が切り替わる、みたいな演出を作ってみたいと思います。

 

スプライトマスク(SpriteMask)を使った演出

まずは同じ形で色違いの画像(Sprite)を用意します。

 

 f:id:Karvan:20180127001620p:plainf:id:Karvan:20180127001728p:plain

 

次に二つのSpriteが重なるように同じ位置に設置し、一つのSpriteに対してMask Interactionの設定を「Visible OutSide Mask」(Maskの外側を表示)に指定

f:id:Karvan:20180127002821p:plain

 

もう一方のSpriteに対しては「Visiblie Inside Mask」(Maskの内側を表示)を指定します。

f:id:Karvan:20180127002844p:plain

 

そして、メニューのGameObject→2D Object→Sprite Maskを指定してSpriteMaskを作成し、Mask用の画像をSpriteに設定します。

 

f:id:Karvan:20180127003520p:plain

 

このSpriteMaskはMaskを掛けたいSpriteと親子関係にする必要はないので、Spriteを動かさずにSpriteMaskだけを動かすことができます。(逆も可能)

 

なので、Tween系の処理でSpriteMaskを適当に動かしてみると・・・

 

f:id:Karvan:20180127004846g:plain

 

こんな感じになります。

 

ちなみに同じ方法でパワーゲージっぽいものも作ることができます。

 

f:id:Karvan:20180127005556g:plain

 

まぁ、地味ながら使えるかな?

UIの手前に3Dオブジェクトを表示したい。

冬真っ盛りということで、最近は出社途中に缶コーヒーを購入して飲みながら歩いているのですが、つい先日、女子高生の集団からすれ違いざまに

「ってか、コーヒー飲んでるしwwww」

 と声を掛けられました。モテるって辛いですね。おっさんでもコーヒーくらい飲むわ。

 

ここから主題

 

さて、メニュー画面やショップ画面などでUI(uGUI)より上に3Dオブジェクトを表示したいケースってあると思います。

そんな時は大抵、UIのキャンバスのRender Modeを「Screen Space - Camera」に設定して、UIの前に3Dオブジェクトを置くことで実現できるのですが、例えば下の画像の帽子や杖のように、3DモデルをUIに合わせて画面の端に表示したい場合、その方法ではちょっと難しいです。

 

f:id:Karvan:20180120003038g:plain

 

携帯は機種によって画面のサイズが異なります。

UIはAnchorsを設定することで画面サイズが変わっても相対位置が変わらないようにできるのですが、3Dオブジェクトの場合は画面サイズが変わっても表示位置は変わらないので、上の画面の場合、画面サイズの幅を広くするとUIの枠線だけ画面端に表示されて、3Dオブジェクトは枠線からずれて表示されてしまいます。

 

なので、その対応としてRender TextureとRawImageを使った方法を紹介したいと思います。

 

作成手順

1.3Dオブジェクトを表示するためのTextureを作成する

 

まずはProjectsタブのAssetsフォルダ内で右クリック→Create→Render TextureでRenderTextureを生成します。

 

2.3Dオブジェクトを表示するためのカメラを作成する

 

次に3Dオブジェクトを表示する専用のカメラを作成、そしてカメラのTargetTexrureの設定に先ほど作成したRenderTextureを指定します

 

f:id:Karvan:20180120005247p:plain

 

3.カメラの前に表示する3Dオブジェクトを設置する

 

作成した3Dオブジェクト表示用カメラの前に3Dオブジェクトを並べます。

f:id:Karvan:20180120005804p:plain

 

 こんな感じで

 そうするとRenderTextureにカメラの撮影した画像が表示されるようになります。

 

4.RenderTextureを表示するためのRawImageを作成する。

3Dモデルを表示させたい位置にRawImageを作成し、Textureの項目に作成した

RenderTextureを指定します。

f:id:Karvan:20180120010921p:plain

 

今回の場合、RawImageをUIの子オブジェクトとして作成すれば、UIの上に3Dモデルが表示されるようになるのですが、このままでは余計なものまで表示されてしまいます。

 

f:id:Karvan:20180120011621p:plain

 

5.Maskを使って必要な箇所だけ表示する

MaskをUIの子オブジェクトとして作成し、Maskの子オブジェクトとしてRawImageを定義してあげます。

f:id:Karvan:20180120011657p:plain

 

実際に作成して

この方法によりRawImageのAnchorsを指定することで画面サイズが変わっても相対的な位置が変わることはなくなります。

 

また、アイテムの切り替え等のアニメーションもオブジェクトの位置を横にずらすだけならので実装が簡単になりました。

 

f:id:Karvan:20180120013358g:plain

 

今回は長めでしたね。ここまで読んでくれてありがとうございます。

 

 

◇プライバシーポリシー

●個人情報の利用目的

当ブログでは、メールでのお問い合わせ、メールマガジンへの登録などの際に、名前(ハンドルネーム)、メールアドレス等の個人情報をご登録いただく場合がございます。

これらの個人情報は質問に対する回答や必要な情報を電子メールなどをでご連絡する場合に利用させていただくものであり、個人情報をご提供いただく際の目的以外では利用いたしません。

●個人情報の第三者への開示

当サイトでは、個人情報は適切に管理し、以下に該当する場合を除いて第三者に開示することはありません。

・本人のご了解がある場合
・法令等への協力のため、開示が必要となる場合

個人情報の開示、訂正、追加、削除、利用停止
ご本人からの個人データの開示、訂正、追加、削除、利用停止のご希望の場合には、ご本人であることを確認させていただいた上、速やかに対応させていただきます。

アクセス解析ツールについて

当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。

このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。
この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。

●免責事項

当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。

当サイトのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、誤情報が入り込んだり、情報が古くなっていることもございます。

当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。

●プライバシーポリシーの変更について

当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。

修正された最新のプライバシーポリシーは常に本ページにて開示されます。