LoginSignup
7
9

More than 3 years have passed since last update.

CocosCreatorでFacebookインスタントゲームを作る~準備編~

Last updated at Posted at 2018-04-21

始めまして、やわらーと申します。
今日からQiitaを始めていきたいと思います。

さて最初の投稿はCocosCreatorでFacebookインスタントゲームを作る準備です。

ダウンロード

何はともあれ、まずはCocosCreatorのダウンロードをしましょう。ここからダウンロードできます。
Facebookインスタントゲームのビルドに対応したのはバージョン1.9からなのでそれ以降をダウンロード、インストールしてください。

アカウント作成

CocosCreatorを使用するにはアカウントが必要になります。
ここからアカウントを作成してください。設定したメールに認証メールが届くので確認してください。登録が完了すると何やら中国語のページが開きますがこれでアカウント作成完了です。
CocosCreatorを起動するとアカウント情報の入力を求められるので先ほど作成したアカウントを入力してください。

HelloWorld作成

早速最初のプロジェクトを作成してみます。
NewProjectからHello Worldを選択し、Createを押します。
bandicam 2018-04-21 21-46-04-312.jpg
。シーンフォルダからhelloworldシーンを選択するとすでに準備されているシーンが開きます。

ビルド

project→buildを選択し、ビルドウインドウを開きます。
PlatformをFacebook Instant GamesにしBuildを選択します。bandicam 2018-04-21 21-52-15-309.jpg
ビルドが完了したら、完成したfb-instant-gamesフォルダをzipファイルにします。

Facebook for Developersの準備

次はfacebook側の準備です。
まずはここからfacebookアカウントを使ってfacebook for developerにログインしてください。
ログインしましたら右上のマイアプリから新しいアプリを追加を選択。好きな名前を入力しアプリを追加してください。
自分のアプリ用ページが開いたら製品を追加の項目にインスタントゲームがあるので設定を選択。デフォルトでインスタントゲームを使用するがオンになっていると思いますが、もしオフになっていたらオンにしてください。このページからアイコンの選択などもできます。

ゲームのアップロード

facebookの準備が終わりましたらいよいよゲームのアップロードです。アプリページのプロダクト欄のタブを開き、ウェブホスティングを選択してください。bandicam 2018-04-21 22-06-02-503.jpg
ページが開きましたら、+新しいバージョンをアップロードを選択し先ほど作ったfb-instant-games.zipを選択、アップロードしてください。
しばらく待つとアップロードされたゲームのステータス欄が処理中からスタンバイに変わります。
スタンバイに変わったらアップロードしたものにマウスカーソルを合わせ、ステータス欄の星を選択。facebookのパスワードを聞かれるので入力してください。
ステータスがスタンバイからプロダクションに変われば成功です。bandicam 2018-04-21 22-15-39-324.jpg

確認してみる

さっそく確認してみましょう。スマートフォンならfacebookのメッセンジャーアプリを開き右下のゲームを選択してください。開発中の中に先ほど作成したアプリ名のものがあります。
29138BD7-5DE7-4DB5-B398-C9E71F285B18.jpg
PCからなら自分のページの左側のショートカットに表示されていると思います。
CocosCreatorのロゴとHelloWorldが表示されたら成功です。

2019/08/30追記
いつの間にかメッセンジャーからゲームが消えていました。検索欄で先ほどのApp名を入力すれば出てくるかと思います。


これでCocosCreatorでFacebookインスタントゲームを作る準備が整いました。あとはCocosCreatorでガンガン作っていきましょう!

7
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
9