2018年9月5日水曜日

「Space Evaders」開発後記

月島ファクトリープログラマーのLeeです。

このたびFacebook Instant Gameを開発したので、簡単にまとめます。

「Space Evaders」紹介

はじめに、今回開発した「Space Evaders」を紹介いたします。


左右にタップして落ちてくる隕石をよけてハイスコアを目指すゲームです。
隕石の数が増えればよけるのが難しい時がありますが、そういう時はバリアを活用して乗り切ることができるようになっています。

ゲーム自体はよくある避けゲーなのですが、難易度調整をシビアにしてあるのと、隕石どうしのあたり判定をつけることで予測しづらく、緊張感があって他と差別化できたんじゃないかと思っています。

50点で出現する巨大隕石が現れてからは、バリアをうまく活用しないと厳しくなりますので、だいたい70点あたりを目安に遊んでみてください。

フレームワークについて

Facebook Instant GameはHtml5での開発になるため、必然的にjsのフレームワークから選ぶ必要がありました。

Facebookでは対応しているフレームワーク一覧を掲載しているので、この中から気に入ったものを選ぶだけで特に問題ありませんでした。

今回は、「Phaser」という、2Dゲーム特化のフレームワークを選定しました。
理由としては、コミュニティーが調べた中では最も活発で(英語のみですが)今後もサポートが長続きしそうと判断したためです。
また、公式のサンプルも相当な数用意されていたびで開発が容易にできると考えました。

実際、開発においてフレームワークの問題でつまったところはほとんどありませんでした。

・シーン管理

game.state.add("scenename", scene.scenename);
scene.scenename = function () {};
scene.scenename.prototype = {
         preload: function() {
         },
         create: function () {
         },
         update: function() {
         },
}
game.start("scenename");

上記のテンプレートを追記していくだけでシーン管理を行うことができます。
基本関数として、下記3つを利用することができ、新規関数もここに追記していくだけで実装できます。

preload - 素材の読み込み
create - シーンのはじめに一度実行
update - 毎フレーム実行

・画面表示

デバイスの大きさに合わせてゲーム画面を表示したい場合、ゲーム初期化時に下記を実行することにより勝手に合わせてくれます。

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
 game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
 game.stage.disableVisibilityChange = true;

ゲーム画面内でオブジェクトを適切に配置したい場合は、
game.world.centerX
game.world.centerY
ワールドの中央値を取得できるので、そこからどのあたりに表示するか設定することで異なる大きさの画面でも適切に配置することが可能となります。

苦労した点について

最も苦労したのはレベルデザインでした。

避けゲーは一歩間違うと退屈になるので、個人的には難易度高い方が面白いとおもうのですが、絶対に不可能な箇所ができてはまずいためその間をとる調整が大変でした。

隕石同士のあたり判定を実装したところ、予測不能な点は面白かったのですが、真横からのスマッシュがたまに発生して無理ゲーになることもあり...

結局、隕石同士のあたり判定は実装し、バリアでしのぐことのできる機能でバランスを取りました。

まとめ

実装に関して、やりたかったことがほとんど公式のサンプルの組み合わせと、少しのコミュニティの調査で済んだためコストもかからずうまくいったと感じています。
Phaserはコミュニティがほとんど英語なのが玉に瑕ですが、チュートリアルがしっかりしているため初めてのHTML5ゲーム開発にとても向いていると感じました。
一度使ってみて基本的な部分は慣れたので、次に開発する際はより早くうまく開発できそうです。



最後まで読んでいただき、ありがとうございました。


                

2018年8月31日金曜日

Facebookインスタントゲーム「Fruit Paradise」開発ブログ

こんにちは、月島ファクトリープログラマのOgaです。

今回はFacebookのインスタントゲームを作成しましたので、ご紹介します。

ゲーム名は「Fruit Paradise」
ゲーム仕様はフルーツをタップして高スコアを目指す単純なものです。
フルーツ以外の物(肉・魚等)をタップするとゲームオーバーになります!

アプリページのURLはこちら→Fruit Paradise
プレイ動画はこちら↓


スコアが上がってくるとゲームスピードが速くなりフルーツの個数アップ、フルーツ以外の個数がアップして難しくなってきます。
時間つぶしの他に動体視力と集中力を測定することもできるかと思います!

クリアはありませんが、スコア目安は120~150くらいです。
これくらい取れれば動体視力と集中力は死んでいないと思います!
時間制限は無いので、高スコアを目指してみてください(=゚ω゚)ノ

今回はゲームリリースまでの手順と苦労した点を書いていきますφ(・ω・ )

必読な公式ドキュメントは下記です。
https://developers.facebook.com/docs/games/instant-games/

【おおまかな開発手順】

  1. Facebookアプリ開発用にアカウントを作成(既にある場合は不要です)
  2. アプリを作成する(WEB上で設定をするだけ)
  3. デモアプリをダウンロードする
  4. デモアプリを元にアプリを開発
  5. ローカル環境で動作確認
  6. アプリをアップロード
  7. Facebook申請
  8. 公開

【開発詳細】

1.Facebookアプリ開発用にアカウントを作成

https://www.facebook.com/
上記にアクセスし、Facebookのアカウントを作成します。
リアルなフレンドと繋がったアカウントを使いたくない場合、開発用のアカウントを作成します。

ただし、Facebookが複数アカウントを容認していないため、変なプロフィールにするとアカウントが凍結される場合はあります。
私は名前を英語表記にしていたら凍結されました。。

2018年1月に複数アカウント使用が緩和されたらしいですが、私はBANされました(ꐦ°д°)クソガー

2.アプリを作成する

https://developers.facebook.com/apps/
上記にアクセスし、アプリを作成します。
これはゲームロジックをアップロードする場所を作成するようなイメージです。
後に作成したソースコードをアップロードします。

3.デモアプリをダウンロードする

私が開発しているときは「tic-tac-toe」というデモアプリがzipでダウンロードできました。中にREADME.mdがあり、ミドルウェアのインストール方法、実行手順が書かれています。

tic-tac-toeというアプリは三目並べで、実行するにはフレンドが必須なようです。
開発アカウントなので、フレンドいないからプレイできない(ꐦ°д°)クソガー

とりあえずデモアプリの起動自体はできたのでOK。

4.デモアプリを元にアプリを作成

今回はjavascriptのフレームワークとして、CreateJSを使ってみました。
選定理由としては..
  1. フレームワークが軽量であること
  2. 直観的なAPIで学習コストが低いこと
Flash開発者の方の会社が作成していることもあり、API名がFlashとほぼ一緒なので、Flash開発を行ったことがある方はスムーズに開発に入れると思います。
私はFlash知らないけどな( ゚∀゚)エヘッ

最初はenchant.jsをカスタマイズしたものを作成して動かそうとしましたが、Facebookと相性が悪いらしく動かなかった(ꐦ°д°)クソガー

おとなしくFacebookが対応しているフレームワークを使用しましょう。。
https://developers.facebook.com/docs/games/instant-games/compatible-engines

(・´д)開発で苦労した点(д`・)
1.BGMがバックグラウンドで流れてる・・!

iPhone6s以前とAndroidで発生
アプリを起動中にホームボタンを押してバックグラウンド実行にしても音が鳴り続ける・・
iPhone7以降は端末側の制御で勝手に止まるっぽい(ꐦ°д°)クソガー

対応方法は下記になります。
document.addEventListener("visibilitychange", handler);
function handler() {
    if (document.visibilityState == "visible") {
        // 見えているときの記述
        createjs.Sound.muted = false;
    } else {
        // 見えていないときの記述
        createjs.Sound.muted = true;
    }
}

これを書けば意図的に音をミュートにできます(◎´∀`)b

2.クリックイベントが無限に作成される・・!

addEventListenerのコールバック関数を即時関数にしてしまうとクリックイベントが無限に追加されてしまいました。。
実行しているとメモリがどんどん減っていきます。
hogeObj.addEventListener('mousedown', function() {
    console.log('hoge');
} );
下記のようにすると問題ありません。
function hogeFunction(event) {
    console.log('hoge');
}

hogeObj.addEventListener("mousedown", hogeFunction, false);

コールバック関数に即時関数を使用するのはやめましょうφ(・ω・ )

5.ローカル環境で動作確認

「yarn mock」というコマンドでモック実行ができます。
「yarn test」というコマンドで実際のFacebook上に近い環境で実行できます。
注意点:デバッグをたくさん行いますが、「yarn test」を実行しすぎると「利用しすぎです」のようなFacebookエラーが返される事がありました(ꐦ°д°)クソガー

ローカルテストはなるべく「yarn mock」で行うことをお勧めします。
また、「yarn test」を実行後、立ち上がったブラウザに何も表示されないことがあります。
テストブラウザとしてChromeを使用している場合、「http://localhost:8000」にアクセスして例外を許可しないとページが表示されないようです(ꐦ°д°)クソガー

この設定は時間が経つと元に戻るので、2日に1回くらい「http://localhost:8000」の例外許可を実施してください。

6.アプリをアップロード

ローカルから「yarn push」というコマンドでアップロードします。
アップロードが成功した後、ウェブホスティングページが立ち上がるので、☆マークをクリックして状態をスタンバイからプロダクションにします。

プロダクションになったらFacebookのMessengerアプリで動作確認できます
ε=ε=ε=┏(*´∀`)┛

7.Facebook申請
https://developers.facebook.com/apps/%APP_ID%/review-status/
「アイテムを審査に送信」を行います。

申請後1日でフィードバックがありました。

リジェクト(゚∀゚;)

内容はアプリの説明文が日本語だったことでした。
英語にして再申請したらあっさり通過しました(´∀`艸)

公式ドキュメントにある禁止事項さえしなければ大丈夫そうです!

8.公開

https://developers.facebook.com/apps/%APP_ID%/review-status/
「%APP_NAME%を公開しますか?」で「はい」に変更します。

ゲームの一覧にはしばらく出てこないようなので、直接ゲームにアクセスします。
https://developers.facebook.com/apps/%APP_ID%/settings/basic/
「FacebookウェブゲームページのURL」にあるURLにアクセスすれば直接ゲームができます!

- 総括 -

端末別の問題点が少しありましたが、全体的にはサクサク開発できました。
CreateJSは中規模以上の開発には向かなそうですが、学習コストが低いので小規模ゲームの開発には良いのではないでしょうか。

ある程度人気があれば広告を仕込んで広告収入も得られるようなので、気軽にゲームを出してみたい方はやってみてはいかがでしょうか。

最後まで読んでいただき、ありがとうございました。

2015年8月25日火曜日

Rinkaが「AndroidView」で紹介されました!

Rinkaがアンドロイドアプリ紹介サイト「AndroidView」にて紹介されました。ゲームの遊び方や、おすすめポイントなども詳細に掲載されています。ぜひチェックしてみてくださいね!

詳細記事はこちら
http://androidview.jp/archives/13567

2015年8月21日金曜日

Rinkaがアプリ紹介サイト「Appliv」に紹介されました!

Rinkaがアプリ紹介サイト「Appliv」に紹介されました。
プレイ写真とともに、詳しい操作感や遊んでみたレビューが掲載されています。

Rinka (iOS版)
Rinka Android版)

詳細記事はこちら
ホタルの光を見てる気分。ゆったり癒される洞窟探検の旅に出かけよう

2015年7月30日木曜日

「Rinka」リリース開始!

皆さまお待たせいたしました。カジュアルゲームアプリ「Rinka」は、本日7月30日(木)にリリースいたしました!

Rinkaは、タップして光の妖精を導く浮遊系アクションゲームです。妖精の源となる光のオーブを獲得しながら最高得点を目指します。ゲームの面白さは得点を狙うだけでなく、妖精の光の大きさや色がさまざまに変化したり、ステージが進むにつれて海底や古代遺跡といった世界をさまようことができます。
今年の夏は、家族や友人と一緒に「Rinka」をプレイしてみよう!

ゲームのダウンロードはこちらから!


【ゲーム概要】
アプリ名称       :Rinka(りんか)
提供先ストア :iTunes Store / Google Play Store
登録カテゴリ :カジュアルゲーム
利用料金   :無料
開発者名   :TSUKISHIMA FACTORY Inc.

ウェブサイト :http://moonisland.jp/
Facebook             : https://www.facebook.com/moonisland.co.jp
Twitter                  : https://twitter.com/moonisland_f

2015年7月27日月曜日

小さな光の妖精の、果てしない試練の旅「Rinka」


* 新作アプリのお知らせ *

この度 月島ファクトリーでは、iOS / Android 用カジュアルゲームアプリ「Rinka」の事前予約を受付中です。夏休み中は、家族や友達と「Rinka」で遊んで、楽しい思い出をつくろう!
▽ 予約トップ10 ▽


【ゲーム説明】
Rinka(りんか)は、タップして光の妖精を導く浮遊系アクションゲーム。妖精の源となる光のオーブを獲得しながら最高得点を目指します。真っ暗で危険な洞窟を、どこまで進むことができるかチャレンジです。

"うつろいゆく景色"
妖精はオーブを獲得することで、様々な色の光に輝きます。やわらかな光は周囲を照らし、洞窟や森の風景を映し出します。さらに妖精が探検を進めると、景色が徐々に変化していきます。バリエーション豊かな美しい世界をご堪能ください。

 " 特徴 "
・危険な洞窟を進み続けることで、ハラハラドキドキする緊張感が味わえます。
・シンプルな操作で、子どもから大人まで幅広い年代の方にお楽しみいただけます。
・何度も挑戦できるので、時間を忘れて熱中してしまいます。
・美しい光に心が安らぎ、癒されます。



アプリ名    :Rinka
配信開始予定日 :20157月下旬
販売価格    :無料
対応機種       iOS6.0以降, Android 3.2 HoneyComb以降対応
公式サイト      :http://rinka.moonisland.jp/

Twitterアカウントhttps://twitter.com/Moonisland_F