UnityのImageマスクでマスク側だけサイズを変える

行楽シーズンなので・・・

コンサートを観にいったら斜め後ろに頭に鉢巻を巻いたセーラー服姿のオッサンがいて、めっちゃ気になるけど見ちゃいけない、いや、やっぱり気になるけれど万が一、目が合ったら怖い、、云々で、ステージより斜め後ろのオッサンの動向のほうが気になって仕方ない、みたいな集中力が散漫になる週末を過ごしたのですが、終演後に振り返ったらそのオッサンの姿はどこにもなかったのであれは幻だったのかもしれない。

まぁいいでしょう

UIデザインについて

元よりデザイン系の才能については全般的に自信がないのでキャラクターやオブジェクト、イメージに関してはほぼ購入したものを使っている(前作はロゴも発注したし)のですが、特にUIのデザインについては毎度頭が痛いです。

色々と試行錯誤を繰り返して、作っては変え、作っては変え、とゲームのメイン部分のコーディングよりも時間が掛かったりします。

現在製作中の「Dull Things No Life」でも同様でステージ選択の画面とかどうやっても厨二病っぽい仕上がりになっちゃう。

仕方ないので画面を表示する時にお洒落っぽいアニメ動作を入れて誤魔化そう、と考えて、前々回でも照会したUIアニメーションのテンプレートアセットを使用することに

www.karvan1230.com

で、今回は

こんな感じでメニュー画面を表示するようにしました。

アニメ動作的には簡単な動作で、メニュー画面の親となっているマスクのサイズを変えているだけなのですが、そこでちょっとしたヒントを発見。

Spriteマスクと違ってImageのマスクは、マスクをかけるImageはマスクの子オブジェクトでなくてはいけません。

このため、マスク側のサイズをScaleで変更しようとすると当然、子オブジェクトのImage側もサイズが変更されてしまいます。

なので、これまではマスク側は不動で、Image側を動かして表示するようにしていたのですが、今回のアニメ動作の場合はImage側(メニュー画面)は不動で、マスク側のサイズが変更される動作となっています。

マスク側のサイズを変える

これはAnimation画面をみればわかるのですが、マスク側のDeltaSizeの値を変えています。

今回の場合、マスクのサイズは520*360なので、最初のDeltaSizeには「-520,-360」を指定、それを徐々に変えていくことでマスクのサイズを大きく＝メニュー画面が徐々に表示される、仕組みとなっています。

これが

これに代わる

ただ、マスクやImageのサイズはAnchorsPositionも関ってくるので一概にDeltaSizeの値だけ注目すればいい、ということもないので注意が必要です。

ここら辺の話はRectTransfromについて纏めた以下の記事が参考なると思います。

tsubakit1.hateblo.jp

Unityオブジェクトを表示したり非表示したりラジバンダリ

スパイダーマン

今秋最後の三連休は台風が来たり行楽日和だったりと天候がめまぐるしく変わる休日でしたが、私は安定した休日ニートなので部屋に引き篭もって過ごしていました。台風で公共交通機関ガー、とか、行楽日和で各所で渋滞ガー、とか、運動会で早朝から場所取りガー、とか、アベガー、とか、まったく関係なくスパイダーマンとして街の平和を守っていました。楽しすぎてヤバイ。

サクッと閑話休題

以前、Koreographerを使ったLaunchPadみたいなオブジェクトを製作中のゲームに搭載してみたら、実機動作が重くなってニッチモサッチモ、みたいな話をしたのですが、元来もったいない精神溢れる人間なので何とか使える方法がないか探っていました。

動作が重くなる最大の要因はBatch数の増加で、通常は複数のオブジェクトが同じマテリアルを使用しているとBatch数は1となりますが、各オブジェクトがマテリアルのColorをそれぞれで変更したりすると、その分Batch数は増加するみたい(当然といえば当然)

なので、キューブが6*12で構成されているオブジェクトを一気に表示すると最大で72増加することになるので、100前後が目安らしいモバイルでは致命的な数になります。

このため、各キューブを必要な時にだけ表示するようにして、通常は非表示状態とするように対応したかったのですが、それをSetActiveを使って実装しようとするとちょっとした問題が発生しました。

SetActiveによる非表示化

オブジェクトを非表示化する最もスタンダードな方法はSetActiveにfalseを設定して、オブジェクトを非アクティブ化する方法ですが、これはあくまでも非アクティブ化ということなので、ちょっとした制約を受けます。

例えば

• GameObject.Find()で検索して取得することが出来ない
• Animatorのステート(状態)がリセットされる
• 動作中のコルーチンが停止する

などがあります。

その中でも「動作中のコルーチンが停止する」は面倒くさい問題で、コルーチンでの処理中にSetActiveをfalseにしてしまうと、処理中の状態は破棄されてしまうので重大なバグの原因になります。

この辺の話とその対処法は別の記事でも書いたのですが、今回のケースでは非表示状態でも内部処理のコルーチンは動作してもらう必要があったので、SetActiveによる非表示化は使えないなぁ、という結論に。

www.karvan1230.com

ん～、では、どうするか

Rendererのenabledによる非表示化

オブジェクトを非表示化するもう一つの方法がオブジェクトのRendererのenabledにfalseを設定する、という方法です。

要はオブジェクトの描画をしない、ということなので、コンポーネントの内部処理はコルーチンを含めそのまま動作します。

ソース的にはこんな感じ、SetActiveを使用する方法と比べると1ステップ増えるだけ。

Renderer rend = gameObject.GetComponent<Renderer>();
rend.enabled = false;

で、これがBatch数の増減に有効なのか分からなかったのですが、実際に試してみるとアッサリ削減されました。(まぁ、これも当然といえば当然か・・・)

内部処理を行ったまま非表示化するには有効な方法かと思いますが、ただSetActiveを使った方法と違って子オブジェクトに対しては非表示化の状態が適用されないことに注意が必要です。描画されないのはあくまで当該のオブジェクトのみ。

つまり、複数のオブジェクトで構成されるモデルをRendererで非表示化しようとすると、そのすべてのオブジェクトのRendererに対してenabledにfalseを設定する処理が必要になります。

その辺は用途に応じて使い分ける必要があります。

で、結局こんな感じになったよ

Android端末(Nexsu6p)でも動作させてみましたが、それほど遅延することはありませんでした。

ただ、この演出が本当に必要なのかどうかはまた別の話で・・・

UIアニメーションをAnimationを使って実装

風邪引いた

ここ最近はKoregrapherに関する記事ばかりを書いていて、それなりに成果を挙げたものを記事にしたと思っていたのですが、特にこれといった反応もなく、せっかく作った動画も視聴回数は一ケタ台で、記事の中で「スクリプトでKoregrapherにて使用する楽曲を変更する方法があれば教えてください！」と書いてもPCに送られてくるメールは「【警告】アダルトサイト視聴料の請求について」とかだったりするので、日本は滅びればいいのにと思っていたら、この土日は風邪を引いて自分が滅びそうになる始末。人を呪わば穴二つ、とはこの事ですね。反省します。

UIのアニメーション

さて、前作の「CuiteCircuit」ではUI系のアニメーションは主にiTweenを使って実装していたのですが、毎日拝見している「Unity AssetStoreまとめ」にてスタイリッシュなUIアニメーションのアセットが紹介されてて、安いこともあって(無料版あり)購入してみました。

www.asset-sale.net

こんな感じのUIアニメーションが10種類用意されています。

まぁ、スタイルテンプレート集なのでそのまま使用するというよりは、これをアレンジ(色、素材を変えたり、フォントを変えたり)しながら使用するという使い方が正しいかと思います。

ただ、テンプレートからサイズを変更しようとするとアニメーション側の設定もそれに併せて変えなくてはいけないのでちょっと面倒くさいです。

「Dull Things No Life」では以下のような感じで使用してますが、元のテンプレート(中央にドン)から所定の位置(画面左上に小さく)に変更するまで結構時間が掛かりました。しかしその分、UIアニメーションの作り方について勉強になったと思います。

アニメーションの逆再生

UIをアニメーションさせる場合、アニメ動作完了後には元の位置、サイズに戻ってほしいケースが多々あります。

なので、これまではiTweenのFrom系を使ってアニメ動作を実装し、その旨の記事を書いたりしたのですが、アニメーションを逆再生させて元の位置、サイズに戻す、という方法もあることを知りました。

www.karvan1230.com

アニメーションを逆再生させるのは簡単で、該当するAnimationのSpeedの設定をマイナスに設定するだけです。

つまり、再生用のAnimationを一つ作ったら、それをCtl+Dで複製を作ってSpeedの設定を-1にすれば逆再生用のAnimationが出来上がります。

後はAnimatorにて再生⇒逆再生の状態に遷移するようにすれば、UIをアニメーションさせ、かつ、元の位置、サイズに戻ることができます。こんな感じで

上の図では再生の後に、状態を保持するAnimationが挟んであります。

個人的にAnimationを作るのは苦手なんですが、複数のオブジェクトが絡むようなアニメ動作の場合にはiTweenじゃなくて、Animationで実装したほうが簡単かもしれません。

進捗報告

週末は寝込んでいたのであまり進捗がないのですが、幸いにも今週末はまた三連休なので取り戻せるようにがんばります！

でもなぁ・・・スパイダーマンが面白すぎて・・・

Google Adwordsでのゲームアプリ広告出稿の成果まとめ

中秋の名月

つい先日までの猛暑はどこへやら？という感じで、ここ最近は過ごしやすい気候が続いていて正に行楽シーズンとでもいうべき季節ですね。

まぁ、休日ニートの私には関係ないんですけどね。近くの公園では「中秋の名月」とやらでお祭りが開催されていましたが、私は花火の音だけ聞いてお祭りを満喫していました。いや、してない。

1000DLを達成

リリースからほぼ半年経ってようやくCutieCircuitがGooglePlayで1000DLを達成しました。パチパチ、ありがとう、どうもありがとう。

goo.gl

自分がアプリをリリースするまではGooglePlay等で1000DLのアプリとか見ると「1000DL?へ、しょっぼ」とか思っていたのですが、いざ自身がアプリを開発する側となると1000DL達するだけでも相当苦労するんだなぁ、ということを実感しました。これまでの自分、反省しろ。

まぁ、1000DLといっても口コミとかではなく、ほぼGoogle Adwordsによる宣伝のお陰なので気分的にはDL数をお金で買った気分です。

なので、今回はこれまで掛かった費用とDL数を纏めてみたいと思います。
(前にもやったけど今回は最終報告みたいな感じ)

Google Adwords報告

広告出稿の開始が6/23で現在(9/25)までの集計をとると

• 総広告表示回数：28.1万回
• 総広告クリック数：1.71万回
• 総ダウンロード数：1210DL
• 総費用：6.97万円

となっています。この数字からクリック数とダウンロード数の単価を計算すると

• クリック単価：4.03円
• ダウンロード単価：57.60円

となります。

CutieCircuitが初リリースアプリなのでこの数字が高いのか低いのかは分かりませんが、以前(8月上旬)の記事で計算したときにはダウンロード単価は104.5円だったので、かなりコストダウンしていることが分かります。
つまり、ダウンロード数が一定数ずっと伸びているんです。

以前の記事では夏休み期間に重なったこともあってDL数が伸びている、と書いたのですが、夏休み期間を過ぎた現在でも一日あたり20件近くダウンロード数が増えています。夏休み期間云々はあまり関係なかったのかもしれません。う～ん・・・。

ただ所詮1000DLなので、ダウンロード数が伸びる＝それほど世間の目に触れていない、ということで、これがリリース当初から数千DLを達成するようなアプリならダウンロード数の推移もずいぶん違うものになるのではないでしょうか。

ちょっとした相関関係？

数字を纏めてみて気づいたのですが、広告表示回数によるクリック率が6%、クリック数によるダウンロード率は7%とほぼ近い数字になっています。

ようは、広告を表示すると100人中6人が広告をクリックしてくれてGooglePlayへ飛んでくれる、そのGooglePlayへ飛んでくれた100人中7人が実際にダウンロードしてくれる、ということで、つまり、一つ一つ(Adwords広告、GooglePlay)の広告効果は6～7%を目処に考えれば良い、ということでしょうか。

Adwords広告⇒GooglePlayなら6～7%×6～7%=0.36～0.49%の広告効果を見込む、とか

この辺はサンプル数(アプリ数)を増やして検証する価値はありそうです。

なるほど・・・

この記事を書いているときにアプリの宣伝に関してこんなブログ記事を発見

qiita.com

個人で100万円も赤字を出したら開発を続けられないと思いますが、ちょっと納得出来る部分もあります。
まぁ、どう感じるかは人それぞれだと思いますが・・・

検証のサンプル数を増やすために

あまり進捗報告とかしてませんが、Stab of Bee Project 第二弾「Dull Things No Life」は鋭意製作中です！！

だがしかし、これからPS4の新作ラッシュ・・・

Koreographerで使用する楽曲をスクリプトから変更する

3連休⇒3連休、１つ飛ばして3連休

今年は暦の関係上、シルバーウィークと呼ばれるような大型連休はありませんが、その代わり3連休が二週連続で続き、さらに一週空いて3連休が控えるという、ちょっとした秋休みっぽい日程となっているわけですが、日ごろの行動を漢字で表すなら起⇒勤⇒寝の三文字しか思い浮かばないような日常を過ごしている人間としては、急に増えた余暇時間をどう過ごすがちょっと頭を痛めていたりします。

きっと世間一般の、行動を表す漢字に『遊』『飲』『楽』みたいな文字も思い浮かぶであろう方々は、「今週は旅行に行って、来週はBBQでもして、その次は・・・」みたいに充実した休暇を過ごしているに違いないのでしょうが、私は部屋に閉じこもってゲーム制作をしていました。

勿体無い精神を発揮してみたが・・・

前回の記事で「Koreographer」を使って音楽と同期するLanchPadライクなモジュールを作ったのですが、デモ用に作ったにしては時間が掛かっていて、書いたコードの量も結構なボリュームとなっていたので、このまま破棄してしまうのは非常に忍びない、なんとか活用できる方法はないだろうか、と5分ぐらい考えて、現在製作中のゲーム「Dull Things No Life」の背景素材として使用することを試してました。

こんな感じで

高速道路やバイパスを走っていると道路横で掲げられているネオン看板みたいなイメージ、BGMもEDM系にする予定なのでそれに併せてピカピカ光るのもカッコイイかなぁ、と思っていました。

だがしかし、、、、

モッサリ

PC上で動かしている分にはスムーズに動いていたのですが、いざ実機で動作させてみるとゲーム全体の動作がモッサリ気味になってします、画面をタップしてもすぐに反応せず、ちょっと間をおいて反応するように。ん～。

どうやらこのモジュールを表示させることでBatchの値が140オーバーとなるようで、こうなると携帯では重過ぎるみたい。

各CUBEのマテリアルには全て同じものを使用しているのですが、音に併せる形でCUBEのマテリアルの色を各々で変えていくとSetPass Call が跳ね上がる。

CUBEは6*12で78個あるので最大+78となり、余裕で140オーバーとなります。
つまり、このままでは使えない、困った困った。

『Batch』『SetPass Cal』って何？と思った方は以下のリンクを参照してください。

light11.hatenadiary.com

やっと本題

と、いうわけで前置きが長いですが今週もしつこくKoreographerネタとなります。

Koreographerを購入すると、使い方が分かるようにサンプル用のSceneが何種類か付いてくるわけですが、そのどれもが使用できる楽曲が固定となっています。

どういう事かと言うと、KoreographerにはAudioCilp(楽曲)に対してイベントを定義するKoreographyというものを作成し、Koreographer専用の音楽Playerで再生する必要があるのですが、サンプル用のSceneではこの音楽Playerで再生するKoreographyが最初から指定されていて、Scriptで動的に変更する術がどこにも示されていません。

つまり、同じSceneでも場面によって楽曲を変えたい場合にどうするのか？と言った方法がサンプルSceneだけでは分かりません。
なので今回は私が見つけた方法を紹介したいと思います。

やり方は単純

まずはUnity側の操作

• HierarchyウィンドウからKoreographerがアドオンしているAudioSourceをドラッグしてScriptで取得する

• 音楽PlayerのAutoPlayOnAwakeのチェックをオフにする

次にスクリプトでの処理

• KoreographerのLoadKoreographyに使用するKoreographerTrackを設定する
• AudioSourceに使用する楽曲を設定する
• AudioSourceのPlayをコール

ソースコードはこんな感じ

public class KoreographerTestEvent : MonoBehaviour {
    public AudioSource audioCom;
    public AudioClip[] audioClip;
    public Koreography[] playingKoreo;
    
    public void Play_Music()
    {
        // LoadKoreographyに使用するKoreographerTrackを設定する
        Koreographer.Instance.LoadKoreography(playingKoreo[0]);
        
        // AudioSourceに使用する楽曲を設定する
        audioCom.clip = audioClip[0];
        
        // AudioSourceの再生
        audioCom.Play();
    }
}

AudioSourceのPlayをコールすると自動的にKoreographer専用の音楽Player側に対象のAudioClipが設定され、KoreographerTrackに設定しているイベントが発行されるようになります。

今回は私が試行錯誤しながら見つけた方法なので、他にもこんな方法があるよ、とか、もっと効率的な方法があるよ。と言う方は教えて頂けると幸いです(是非!)

Koreographerを使って何か作ってみた

季節が急に・・・

8月を過ぎると一気に季節が変わったようで、朝夕などはそれまでの猛暑がウソのように涼しく感じられ、幾分と過ごしやすくなった気がします。

私の会社の社長も、この過ごしやすい気候に触発されたのか、つい先週末には「休日にBBQ大会をして社員の士気を高めよう！」とか有難迷惑な企画を立ち上げたりして、しかも「家族同伴でもOK」とか独身者の心を切り裂くようなオプションまでつけてきたのですが、大雨によりあっさりと中止。秋雨前線ありがとう、心置きなく家に閉じこもっていれました。

Unity1week

Unityを使用しているゲーム開発者界隈ではUnity1weekで一盛り上がりしていて、Twetter上では進捗報告などのツイートが頻繁にあがっていたので、私も「よーし、パパはりきっちゃうぞ！」とばかりに(子供いないけど)、Koreographerを使って何か出来ないかとこんなものを作っていました。

ドン！

一見、何か分からないと思います。

私の構想としては、6×12で並んだCUBEが音楽に合わせて光り、プレーヤーはそれに合わせて光ったCUBEをタッチしていくという、それって何てjubeat?みたいなゲームを考えていたのですが、音楽に合わせて光る、という部分を作っただけで1週間が過ぎる、という大失態。あと、「あつい」というお題を全く無視していたり。

たった一週間でゲームを完成させて投稿している方は凄いなぁ、と実感する結果となったわけです。チャン、チャン

とはいえ、もったいないので

せっかくここまで作って勿体無いので、作ったモジュールをデモディスプレイみたいな形で仕上げてみました。一応は手間が掛かっているので見てください。m(_ _)m

www.youtube.com

音楽はザイオンさんの『夜明けの前に』を使用しています。

dova-s.jp

このデモでKoreographerに設定しているイベントはこんな感じ。見づらいですが赤い線がイベントが発行される箇所です。

途中CUBEをJobSystemを使って動かしているのですが、動画の通り、実機(Nexsus6P)で動かすとディレイが発生しています。
PCでは大丈夫なんですが、ここらへんは未だ調整が必要ですね。

ってか、これを何に使おう・・・

Koreographerを使って出来る事

よー、分からん

GoogleAdwordsへ広告を出稿しているとコンバージョン数（＝インストール数)が逐一チェックできるのですが、そのコンバージョン数とGoogleConsoleで確認できるインストールユーザ数に300以上の開きがあって、インストールユーザ数は未だ500に達していないのですが、その一方、GooglePlayで「Cutie Circuit」を確認してみると「500回以上のダウンロード」と書かれていたりして、何が正しのかもうサッパリ。

まぁ、DL数が500前後で一喜一憂しているようでは開発者としてダメダメなんでしょうが・・・

そんなこんなでKoreographer

定期的にブログを更新していても特にコメントとかリアクションとかを頂いたことがないので、需要があるのかないのか分からないのですが、今回も「Koreographer」のお話。

「Koreographer」とは音楽に同期してイベントを発行してくれるアセットのことで、音ゲーとか音楽に合わせてオブジェクトを動かしたい場合などには有用なアセットです。

が、まぁまぁなお値段がします。(Lite版で$36.0、Professional版だと$116.0(どちらも税抜額))

私は夏の猛暑に頭をやられたのか金欠なのにProfessional版を購入してしまったので、今回はProfessional版だけで出来ることを自慢半分に書いていきたいと思います。

RMS解析とFFT解析が使えるよ

Professional版では楽曲の波形に対してRMS解析とFFT解析を行うことができます。
それぞれの説明は面倒くさいので省くとして、この解析を使って何ができるのかというと、楽曲データの音の強弱等を線形データ化することができます。

実際に楽曲データをRMS解析した結果がこちら

 中央の緑のウネウネした線がRMS解析で作成したデータになります。

で、これを使うと例えばステレオのグラフィックイコライザーみたいに楽曲の強弱に沿って表示が変化するものが作れます。

今回は前回使用したCUBEに対してグラディエントカラーが変化するものを作ります。

まずはグラディエントカラーを用意して

KoregrapherからSpanイベントを毎フレーム発行してもらい、線形データの値を取得するようにします。
(Spanイベントとは何か？は前回の記事を参照してください)

後はその値から色を決定して、マテリアルのcolorへ設定

ソースコードはこんな感じ

動かしてみよう

youtu.be

データに併せて色を変化させるだけだと余りに地味だったので、ブレイクの箇所で色が順次変更される処理を実行しています。

ちなみに楽曲はglitchさん作曲のDance With Powderを使用しています。

dova-s.jp
今回は色の変更だけでしたが、解析データを利用してオブジェクトの大きさを変えたり、AddForce等で動かしたりすると、音に併せたオブジェクトの動作を実現することができます。まぁ、アイデア次第ですね。

前回と今回で「Koreographer」の基本的な動作は学習できたので、次回はちょっと応用したものを作ってみたいと思います(たぶん)。