itemstore BLOG

アプリ内課金(IAP)の実装・運用にかかる時間を大幅に削減してアプリの収益性を高めるサービス「itemstore(アイテムストア)」が、アプリ内課金に関する様々な話題や企画をお届けする公式ブログです。

「マスコットアプリ文化祭2018」にアイもエントリーしてみました!

f:id:cayto_pr:20181226191734p:plain

こーんにーちはーー!

JKデベロッパーのアイです!

 

みなさん、「マスコットアプリ文化祭2018」にはエントリーしましたか?

クリスマスも過ぎて、締め切りが迫ってきましたよー!

 

私も参加してみたくなったので(協賛側なんだけど)、ゲームを作ってエントリーしてみました!

今回はその作品について紹介したいと思います!(応援してくださいっっっ!)

 

▼「マスコットアプリ文化祭2018」についてはこちら

「マスコットアプリ文化祭2018」にキャラクター協賛中!

 

エントリー作品『MASCOT BREAKER』

f:id:cayto_pr:20181226191718p:plain

https://mascot-apps-contest.azurewebsites.net/Works/422

 

今回作ったゲームは名付けて『MASCOT BREAKER』!

「マスコットアプリ文化祭2018」に協賛しているマスコットキャラクター達をブロックに見立てて、次々と破壊?していく「ブロック崩し」ならぬ「マスコット崩し」となっています。

 

実は作ったと言っても、ちょっとカスタマイズしただけなんだけど…。

以前、このブログの連載記事として、さくらくらうど(@SakuraCrowd)さんに書いていただいた「いますぐ始めるアプリ内課金」で公開された教材ファイルを元にしています…!

 

▼「いますぐ始めるアプリ内課金」についてはこちら

いますぐ始めるアプリ内課金 カテゴリーの記事一覧 - itemstore BLOG

 

ただ、私なりにカスタマイズを頑張ったつもりなので、作り変えた箇所をいくつか紹介したいと思います!

 

①ブロックをキャラクターに変更!

f:id:cayto_pr:20181226191715p:plain

とりあえず、ブロック崩しを元に何か作ってみようと思っていたので、キャラクターをどこで使うか考えました。

と言っても、そこしかないよねって感じで迷わずブロックの代わりにキャラクターを使うことに決定!

 

これは簡単でした。

それぞれのキャラクター素材から3種類の画像をピックアップして、3段階のレベルごとにファイルを用意。

[Assets]→[Import New Asset...]で各ファイルを読み込んだら、それぞれのステージのSceneに配置、プレハブ化して、ブロックに適用されていたコンポーネントをコピーすれば完了。

ブロック崩し」から「マスコット崩し」に生まれ変わりました!

 

②ステージを追加!

f:id:cayto_pr:20181226191712p:plain

続いて、せっかくだから少しでも多くのキャラクターを使ってみたいと思って、ステージを増やしました。

 

これは元々カスタマイズ要素として想定されていたので、以下の記事を参考に作業を進めたら、簡単に増やすことができました。

 

▼参考記事はこちら

qiita.com 

ステージ数はなんとなく元ファイルの倍で6つにしています。

私以外に使わせていただいたキャラクターは以下の5名!

 

  • 東北ずん子
  • イミズちゃん
  • ジスたん
  • すのこタン
  • プロ生ちゃん

 

選んだ理由は…直感!他のキャラクターのみなさん、ごめんなさい!(むしろ、破壊されることになった5名のキャラクターの方がごめんなさい?)

 

とにかくご協力いただいたみなさん、ありがとうございました!

 

③ステージごとに背景色を変更!

f:id:cayto_pr:20181226191710p:plain

ステージごとに登場するキャラクターを変えたわけですが、キャラクターにはそれぞれ個性がありますよね。

せっかくだから、それぞれの個性に合った背景色に変えたいじゃないですか!(つか、みんなと同じ色なんて私がイヤ!)

 

と言っても、これはカスタマイズ要素として想定はされていませんでした。

なので、UnityもC#も勉強中なんですけど、なんとなくコードを眺めながら、検索しながら、トライ&エラーを繰り返して、無事実装することができました!

 

具体的には、各ステージ固有の情報を管理しているスクリプトファイル StageCommonConfig.cs に、ステージ別の背景色が設定できるよう以下を記述。

 

public Color bgColor;

 

かつ、ステージ共通シーン StageCommon に配置されている StageCommonScene コンポーネントに、ステージ固有の情報を設定する関数があるので、背景色の情報も設定されるよう以下を追記します。

 

coStageCommon.bgColor = bgColor;

 

また、ステージの共通処理を管理しているスクリプトファイル StageCommonScene.cs にも同じく、背景色の設定を格納するために以下を記述。

 

public Color bgColor;

 

あとは、初期化時に受け取った背景色が設定される処理を加えると完了です。

 

Camera.main.backgroundColor = bgColor;

 

一応これでステージ別に設定した背景色が反映されるようになりました!

各ステージの背景色は、各ステージのシーンに配置されているStageCommonConfig コンポーネントで設定できます。

 

④カーソルキーで操作できるように変更!

f:id:cayto_pr:20181226191707p:plain

最後に、PCでプレイすることが多くなりそうなので、カーソルキーで操作できるようにしたいと思いました。

 

これも検索したら色々な記事が見つかるし、なんとかなるんじゃないかなという安易な気持ちで作業を進めてみたのですが…ちゃんと理解した上で実装を試みた方が良いとは思います!(当たり前だけど)

 

でも、検索からのトライ&エラーで、これもなんとかなりました。

 

具体的には、バーを制御しているスクリプトファイル Bar.cs で、入力がある度に移動処理が実行されるよう以下を追記しています。

 

Vector3 pos = this.transform.position;
 
// 右カーソルキーが押されている
if (Input.GetKey(KeyCode.RightArrow))
{
        // 移動距離を加算
        pos.x += 0.1f;
 
        // 移動先を確定
        Vector2 vecPosition = new Vector2(pos.x, pos.y);
 
        // 当たり判定を行いながら指定した量だけ移動
        rb.MovePosition(vecPosition);
}
// 左カーソルキーが押されている
else if (Input.GetKey(KeyCode.LeftArrow))
{
        // 移動距離を減算
        pos.x -= 0.1f;

        // 移動先を確定
        Vector2 vecPosition = new Vector2(pos.x, pos.y);

        // 当たり判定を行いながら指定した量だけ移動
        rb.MovePosition(vecPosition);
}

 

正直、万全じゃない気がするし、マウスやタップでの操作を残してはいるので、上手く制御をまとめた方が良い気もするけど、とりあえず動いたので一旦OK!

これから勉強します!

 

まとめ

以上、あやしいところもあったり、なかったりですが、とにかく作品を完成させて、「マスコットアプリ文化祭2018」にエントリーすることができました!

 

やっぱり完成度は低くても、完成させることやコンテストに応募してみることはとっても大事だなと思いました。

充実感があって、次も進めてみようという気になるし、周りとの話も弾むようになる気がします。

 

この記事を読んでくれている方で、つい手が止まってしまう方がいたら、是非諦めずに、ハードルを上げすぎずに、まずはどんな形でも完成させてみることをオススメします!

もし、手をつける前から諦めてしまっている方がいたら、是非ブロック崩しの教材ファイルを使ってみてください。Unityのファイルをダウンロードできます!

 

締め切りまで残りわずかですが、「マスコットアプリ文化祭2018」にエントリーして、素敵な賞品をゲットしましょう!(アイは選考外だとハッキリ釘を刺されました。。。)

 

 

アプリ内課金を今すぐ始められる簡単実装サービス「itemstore(アイテムストア)」