ねこバタ会議

スマホアプリ制作に関するブログです。

カテゴリ: アプリ開発

unityroomさんの主催されている一週間ゲームジャム、#unity1weekに参加しました。
投稿した作品は以下のものです。よかったら遊んでみて下さい。
パンダが回れば地球が回る
スクショ1
なお、以下の文章は作品のネタバレを含みますので、未プレイの方はご注意下さい。

タイムテーブル
5/22(月)お題発表
5/24(水)Twitterのタグから刺激を受け、参加を決意
5/25(木)試作とモチーフの見直し
5/26(金)ゲーム部分の作成
5/27(土)ストーリーとタイトル画面作成・UI調整
5/28(日)画面遷移とBGMの処理・作品公開

25・26・28日がお休みでフルに時間を使えたのが大きかったです。

参加の経緯
前週のBitSummitツアーや嫁との名古屋旅行等、スケジュールが詰まりまくっていたので参加を見送ろうかと思ったのですが、BitSummitとメガビットコンベンションで面白い作品や作者さんに出会い刺激と感銘を受けたため、自分もやってみようと思い立ちました。

お題と作品モチーフ
Unity 1週間ゲームジャムではテーマが決められており、今回は「転がる」。
参加を決めたのが水曜日で、あまり時間もかけられないため、時間の節約も兼ねて現在制作中の「War is Over 今日も静かに爆弾の雨が降る」用の素材を使い回すことに。
また、あわよくば新作の宣伝になればという不純な気持ちもありました。

作品モチーフの見直し

苦労しながら試作してみましたが、動かしてみるとあまり面白くない…。
この時点だと様々なアイテムを回収して新しいアイテムを作るというのを繰り返す、テラリアやローグライク的な要素を考えていましたが、いちいち動かすのが面倒なのと、敵が出てきても塊をぶつけて倒すわけではないので、自分のやりたいこととつながらない感じでした。

また、こんな感想もいただきました。


ところにょりさんは「ひとりぼっち惑星」などで大人気の開発者さんですね。

すごく率直に言うと私はもともとパタポンが大好きで、「TapNums!」や「ワーズ・アンド・マジック」のタイトル画面などを見てもらえれば分かる通り、モノクロ画面やシルエット画像、アイコン等を以前から愛用しています。
そのためパタポンを引き合いに出されるのは全然構わないのですが、ところにょりさん風と言われるのは若干心外だったりします。

ただ、これもすごく率直に言うと、アイテムがたくさん重なっていく絵面は、確かにところにょりさん風でした。
きちんと指摘してくれた2人には感謝しています。

ということで、この2人を処刑リストに入れてモチーフの変更を考えることにしました。

shokei


パンダにした理由
元作品のWar is Overをモノクロの画面で作っていたため、今回もモノクロで作ろうと思っていました。
白黒でも映えるキャラクタということで思い浮かんだのがパンダでした。
他にもネコやペンギンなども考えましたが、今回のお題の「転がる」という点から考えた時に、パンダがでんぐり返しで転がっている様子が私の中では最もしっくり来たため、パンダにすることにしました。
また、キャラをロボからパンダに変えることで絵的に可愛くて楽しい感じを演出でき、作成したスクリプトにあまり手を加えなくて済むのではないかと考えました。

使用素材について
素材はFreepikを利用することにしました。
無料で利用するためにはクレジット表記が必要なのと、Freepik公式チーム以外のイラストは時々他人の著作物というケースもあるようなので少し注意は必要ですが、とてもありがたいサービスですね。
音楽はみんな大好き魔王魂さんでピアノの曲を聴いて決めましたが、残り時間が数十分だったのでタイトル画面の曲はWar is Overで使わせていただいているのと同じ曲になってしまいました。


ゲーム内容とストーリー
今回自分の中で決めていたのは「一本の作品として完結させる」ということです。
私はゲームとして楽しいかどうかよりも、自分の作品として誰かの心に残る物が出来ればいいと思っているので、今回は最初から最後までで一本の作品として見てもらえるものを作ろうと決めました。

また、そもそも高度なスキルを要するものは作れないので、ゲーム部分は削れるだけ削りました。
最初は障害物を用意してクリッカー風にして乗り越えていくという要素も考えていたのですが、時間的にも厳しいのと、無理にゲーム要素を入れることでお話を最後まで見る前に投げ出されてしまう可能性が高いと判断し、バッサリ切り捨てました。

また、色々試してみたのですが塊を綺麗な円にしても見た目が大きくなっていくだけで、あまり面白いものではなかったため、あえて歪なままにして、遊ぶ度に違った形(それも歪な形)になるという要素に合致したストーリーを入れることにしました。
ちょうど、Unityのエディタ上でカメラを引いてみたら歪な形のパンダの集合体が地球を回している感じに見えたので、「パンダが地球を回す」というストーリーができました。

演出とエンディング
全体的に絵本をイメージして作っていたのですが、テレビ画面のアセット(OLD TV Filter 2)を通して見ていると、昔の教育テレビの番組のような雰囲気に見えたので、エンディングにそれっぽく見えるようなパロディを追加しました。
これにより作品全体が締まった感じで、個人的にはとても気に入っています。
ぬくもりのある感じの画面にしたかったため「やさしさゴシックボールド」を使用することにしました。

end3


書き出しとアップロード
WebGLで書き出す際に思いのほか時間がかかってしまい苦労しました。
フォント未指定の部分は文字が表示されないということを知らなかったため、直前であたふたしてしまい手間取りました。
ただ、unityroomさんに書き出し等についても詳しい情報が掲載されており、非常に助かりました。
また、最初は画面サイズを横幅960pxで投稿しましたが、自分でブラウザ上で遊んでみたところ回転に酔ってしまい気持ち悪くなったので横幅640pxに抑えることにしました。

公開後の反応
ゲーム的な要素をほとんど切り捨てたため、ほかの人に受け入れてもらえるかは未知数でしたが、おかげさまで1位を獲得し(5月29日午前時点)、思っていた以上に多くの方に遊んでもらうことが出来たようで、大変感謝しております。

GameJam

特にじぇふさんの以下の感想は、「作品を通してプレイヤーに体験を提供したい」という私の思っていた通りのものだったので、とても嬉しく思いました。
Jeff

Twitterでの感想
ゲーム性をほぼ切り捨てたことで、ゲームとしては面白くも何ともないという感想が寄せられましたが、目的としていたユーザー体験の提供については達成できたように感じます。
※一応書いておくと、私自身にとっては自分なりに納得のいく「ゲームとしての面白さ」を実現しています。












感想を頂いた皆様、そして遊んで頂いた皆様、ありがとうございますm(_ _)m

ゲームジャムに参加してみた感想
自分自身のスキルの足りなさを思い知りましたが、とても勉強になる体験でした。

通常のゲームジャムだと時間や場所的な制約が大きく、加えてコミュニケーションスキルやプログラミングスキルのない自分には参加しづらいのですが、ユニティ1週間ゲームジャムの場合は自分自身で決められるので、参加しやすいように感じました。
うまくいかないときにはTwitterで他の方の進捗状況を見ることで自分を奮い立たせたりと、「一人で開発しているけど一人じゃない」と感じられる、とてもありがたいイベントでした

なお、今回公開した「パンダが回れば地球が回る」は少し手直ししてからスマホ用アプリとしてリリースしようと思っています。
最後までご覧いただきありがとうございました。



※記事タイトルには5.2と入れていますが、5.1でも起きるようですし、そもそもUnity 5以降の問題かもわかりません。

おはようございます。

せっかくNexus 5を購入したので、Androidで快適に操作できるようにしようと思ってCanvas設定などをいじっていたら、オブジェクトをタップできないという事態に…(;´Д`)

コンソールには以下のようにInvalid AABB inAABBという、見たことがないエラーが出ています。

invalid_aabb

設定を変更する前の状態に戻してみましたが、エラーは変わらず。

色々調べてみると、どうやらUnityのバグらしく、対処方法も状況に応じて変わるようです。
Unityの再起動またはPCの再起動で直る場合もあるとのことで試してみましたが、再起動後も発生したままでした。

これは困ったと思っていたところ、以下のページがヒットしました。

Fixing Invalid AABB error : plyoung forum

書いてある内容はあまりよくわかりませんが、スクロールバーを作り直せ、みたいな感じの文が見えますね。
ということで、元々あったスクロールバーをデリートして、新しくスクロールバーをつくってアタッチし直したところ、正常に動作するようになりました。

スクロールビューを割と多く用意していたので 、全部のスクロールバーを削除して修正するのは面倒ですが、背に腹は代えられませんね(^_^;)

なお、先に書いた通り状況によって変わるので、「今回の場合は」 スクロールバーが原因となっていたものと思われます。
スクロールバーをアタッチし直せば解決するよというものではありませんで、ご注意下さいm(_ _)m 

久しぶりの更新となります。
今回はUnityで直面した問題について書いていこうと思います。

私の持っている古い端末だとLolipopもMushroomMarshmallow(完全に勘違いしてました…)も試すことができないので、OSのサポートがされているNexus 5を購入することにしました。
本日届いたため、早速動作確認をしてみました。

まず、Android 5.1で動作確認を行ったところ特に問題なく動きました。

次に、Android 6.0にアップデートして、こちらも特に問題なく起動…と思ったら、どうも様子が変です。
以下の図のように、本来は円形のマスクが設定されているのですが、マスクが効かず四角になってしまっています。

unity_mask_disable


設定やマスクの指定方法が間違っているのかと思い確認してみましたが、原因がわかりません。

そこで、以下のように新規プロジェクトにマスクするためのオブジェクトと画像だけを置いて試すことにしました。
画像はroom6のここっとダンジョン(予約受付中 iOS / Android)より。

unity_mask_editor

ビルドしてNexus 5の実機に転送してみると…

Screenshot_20151129-205429

見事にマスクが効いていません。

仕方ないので色々調べてみると、以下のトピックがヒットしました。

Unity 5 UI Mask issues Android : stack overflow

 I searched a long time for the answer to this but I fixed this problem in Unity 5 by unchecking the "Disable Depth and Stencil*" Box.

Build Settings -> Player Settings -> Resolution and Presentation -> Disable Depth and Stencil

After that you need to re-launch unity (you will not see working mask if you dont) 
ということで、Project SettingでDisabel Depth and Stencilのチェックを外せばいいようです。

unity_mask_depth
 
再度書き出して実行してみます。

Screenshot_20151129-210039
 
今度はきちんとマスクが有効になっています…!

制作中のアプリもこの通り。

Screenshot_20151129-210422


円形のマスクが有効になっていますね。

原因は私にはよくわかりませんが、5.1の時は確実に問題がなかったことが確かで、stack overflowの別のトピックでも、Nexus 5でマスクが有効にならないと報告している人がいました。
確かそのトピックではUnity 5.1.4だと問題なく動作するとかなんとか…。

端末の問題か、Android 6.0の問題か、Unityのバージョンの問題かよくわかりませんが、もしマスクが有効にならない時は一度お試しいただくといいかもしれません。
なお、2DRectMaskは問題なく動作していました。

また、今回の副産物ですが、Unityのエディタ上でメインカメラを設定し直したところ、Gameウィンドウでマスクが効かなくなる現象が発生しました。
これについてはGameタブをCloseしてから再度開いたところ、無事に反映されました。
もしかしたらUnityを再起動でもよかったのかもしれませんが(^_^;)

というわけで、現在作成中のゲームはワーズ・アンド・マジックで実現出来なかったことを全部詰め込む予定です。
面白いものになるように がんばります!

以前以下の記事を書きました。
AndroidでViewの枠線と背景色を動的に変更する 

上記記事はres/drawableに用意したborder.xmlを用いて、背景色や枠線の色を動的に変化させるというものです。
ただ、この方法だと、画面内に複数のViewがあって、それぞれを変化させたい場合には一工夫必要です。

その場合は、対象のViewのBackgroundResourceに対して、GradientDrawableを生成してセットすることで実現できます。

GradientDrawable bgShape = new GradientDrawable();
bgShape.setStroke(1, Color.parseColor("#FFFFFFFF"));
bgShape.setCornerRadius(2);
bgShape.setColor(Color.parseColor("#000000FF"));
if(sdk < android.os.Build.VERSION_CODES.JELLY_BEAN) {
    targetView.setBackgroundDrawable(bgShape);
} else {
    targetView.setBackground(bgShape);
}

要はborder.xmlで定義したシェイプと同じものを動的に生成する、という感じですね。
私の場合はカスタムしたViewのメソッドとして組み込んで使用していました。

pubilc void setBorder(float width, float radius, int borderColor, int backColor){
	GradientDrawable bgShape = new GradientDrawable();
	bgShape.setStroke(width, borderColor);
	bgShape.setCornerRadius(radius);
	bgShape.setColor(backColor);
	
	if(sdk < android.os.Build.VERSION_CODES.JELLY_BEAN) {
	    setBackgroundDrawable(bgShape);
	} else {
	    setBackground(bgShape);
	}
}

という感じですね。

なお、同様のことをiOS向けにXCodeで書く場合についても書いておきます(Objective-Cです)。

[view setBackgroundColor:[UIColor blackColor]];	// 背景色
[view.layer setBorderColor:[[UIColor whiteColor] CGColor]];	// ボーダー色
[view.layer setBorderWidth:1.0];	// 太さ
[view.layer setBorderRadius:2.0];	// 角丸

のような感じで普通に設定できると思います。
記憶が定かで無いので間違っている部分もあるかもしれませんが、Androidよりだいぶ手軽にできると思います。
なお、Swiftは全く知りませんm(__)m

以上、「続・Viewの枠線と背景色を動的に設定する Android&iOS(Objective-C)」でした。

Unity5 Personalでは、Unity4まではPro版のみ使用可能だった機能が使用できるようになっています。
今回はそれらの機能の一つ、非同期ロードを使用してシーン間のローディング画面を作りたいと思います。

例によって参考ページを挙げておきます。



ローディング中は進捗バーとテキストによって状況を表示します。
進捗バーはImage TypeをFilled、Horizontalに設定しています。
完了を待って処理をしたかったのでロード完了を待とうとしたところ、上記参考ページの二つ目に記載されているように、async.isDoneにならずに0.9までしか進まないという状態になりました。
原因はよくわかりませんが、参考ページと同じく0.9でループを抜けるという強引な解決方法をとっています(シーンのロード自体は問題なく行われます)。
よくわかりませんし、動けばいい派なのであまり気にしないことにします…(^_^;)

IEnumerator LoadScene(){

    AsyncOperation async = Application.LoadLevelAsync("Game");
    async.allowSceneActivation = false;    // シーン遷移をしない

    while (async.progress < 0.9f) {
        Debug.Log(async.progress);
        loadingText.text = (async.progress * 100).ToString("F0") + "%";
        loadingBar.fillAmount = async.progress;
        yield return new WaitForEndOfFrame();
    }

    Debug.Log("Scene Loaded");
    
    loadingText.text = "100%";
    loadingBar.fillAmount = 1;
    
    yield return new WaitForSeconds(1);
    
    async.allowSceneActivation = true;    // シーン遷移許可
    
}
 
シーンのロードが完了してから1秒後に遷移を行なっています。
動画にしてみましたが、実機ではないので読込が一瞬で終わってますね(^_^;)



スプラッシュやタイトルなどは一応完成ということで、現在の完成度は80%くらい…というところです!

↑このページのトップヘ