Edited at

ゲームを作って撮ってみよう! - Lobi Rec SDKお試しメモ

More than 5 years have passed since last update.

こちらの記事は、プログラミング初心者の方が、

ゲーム作成とLobiRec SDKを使ったプレイ動画録画を体験するために、必要な知識をまとめたものです。

(※まだ記事名に偽りあり・情報そろってない)


LobiSDKが対応する環境

以下のOSと、ゲームエンジンに対応している。


  • Android


    • Android native (Java)

    • Unity Android (C#など)

    • Cocos2d-x Android (C++)



  • iOS


    • iOS native (Objective-C)

    • Unity iOS (C#など)

    • Cocos2d-x iOS (C++)




ゲームエンジンってのは結局なんなのか



  • ひとつの環境でつくれば、iOSにもAndroidにも書き出せる、っていうような環境

  • ゲームが作りやすい仕組みがいろいろ組み込んである

  • 最終的には、iOSでもAndroidでも動かなきゃいけない。LobiのUnity版やCocos2d-x版SDKにも、 Android・iOS用のSDKがそのまま含まれている

  • そのため、Unity版SDK・Cocos2d-x版SDKと言っても、実際はAndroid・iOS版のSDKを仕立て直して、繋ぎこむための追加のコード(ブリッジと呼んだりする)をつけたもの。


軍備を揃えよう



  • Xcode


    • Apple先生のおかげで覇権をとっているIDE(統合開発環境)

    • iOSアプリの出力に必要 (Unity・Cocos2d-xを用いる場合でも)




  • Android Developer Tool (Eclipse)


    • Androidアプリを開発するためのいろいろなツール群

    • IDEとしてはEclipseというやつを使う


    • Androidアプリを出力するときに必要。


      • Eclipseについては、UnityやCocos2d-xを用いる場合は、必ずしも必要ではない。






  • Unity


    • 3Dのすごいものが、コード書かずに作れたりする、すごいツール

    • Lobi SDK導入は、他の環境と比べて 圧倒的に簡単です




  • Cocos2d-x


    • C++でごりごりと書くタイプのゲームエンジン

    • その名の通り2Dが専門 物理演算も得意

    • けっこう機能が違うので、v3.x以上がおすすめ


    • Cocos2d-JSってやつも、さいきん布教してます




  • Lobi SDK


    • すべてのゲームをおもしろくするSDK

    • ゲームにいろいろ機能を追加したり、Lobiのコミュニティと連携して盛り上げたりできます

    • LobiChat・LobiRanking・LobiRecとバリエーションがあります

    • 今回はこのうちLobiRecを念頭に置いてます




Recできるゲームをつくる (Unity編)


環境のセットアップ


  • Unityをインストール

  • ユーザー登録とかする


最初のプロジェクトをつくる


  • [File] -> [New Project...] する。

  • 何もない世界ができた!

  • [GameObject] -> [Create Other] -> [Cube] を選ぶと、なんか四角いのができる。

  • カメラとの位置調整


ちょっと動かす


  • さきほどのCubeを選んで、[Add Component] -> [Miscellaneous] -> [Animation]

  • 下段の「Animation」タブから、[Create New Clip]。



    • なんとか.animっていうファイルを作ることになる



  • さっきCubeの側に作った「Animation」さんに、いま作った.animファイルをわりあてる

  • グラフをなんかいい感じにいじって、アニメーションつくる

  • 右側のやつで、「Play Automatically」を付けておくことを忘れない。(animationのタブで動いても、プロジェクトをrunすると動かない)



  • だいたいこちらの記事参照してます




Lobiの導入


  • LobiCoreのclient idを修正 (とりあえずは任意)

  • 「LobiRec」prefabを、最初に起動されるSceneに設置


    • このprefabが、Rec周りの面倒な処理をまとめてやってくれている

    • prefabの中の処理は、何度も呼んでも大丈夫



  • ためしにRecしてみるsceneをひらいてもらって、LobiRecScene.csをattachしてみる


トラブルシューティング


  • 端末はネットワーク繋がってる?


    • つながってないないと、対応端末データが取れず、suportedかどうかの判断がつかないので、Rec自体できない



  • 画面等も全く開かない場合:初期化が上手く行っていないかも 適切なSceneにPrefabが入っているか再度確認


Recできるゲームをつくる (Cocos2d-x編)


環境のセットアップ


  • cocos2d-xをダウンロードして、いい感じの位置に展開

  • (ここから、基本的にはREADMEに書いてあるとおりに進める)


  • setup.pyを実行


    • いろいろ環境変数を設定しておかないとコケるはず




  • bash.profileとかに、cocos consoleを使うための設定など書き込んでくれるので、反映する。

  • セットアップはコレで完了!!


最初のプロジェクトをつくる

以下のコマンドが、Cocos2d-xの新しいプロジェクトをつくる際に叩くもの。

cocos new MyGame -p com.example.mygame -l cpp -d /path/to/projects

これで、/path/to/projects/MyGameというディレクトリができているはず。

とりあえず動かしたいですね!! 作成されたディレクトリに移動すると、proj.xxxみたいな名前のディレクトリがいっぱいできてると思うので、

まずはこの内、proj.ios_macというのを開いてみましょう。中にあるMyGame.xcodeprojというのを開くと、XCodeが起動するはず。

いろいろ待機しないといけないけれど、このまま左上の「▶(Run)」を叩けば、なんか起動します!!


ちょっと動かす

さて、これだけだとゲームを作っている感もうすいし、Recしても何も動いてなくて悲しいので、ちょっといじってみましょう。

いまのサンプルコードから、bool HelloWorld::init()という部分へ、以下のものをコピペしてみてください。(そんなに大きくはいじってないです)


HelloWorldScene.cpp

bool HelloWorld::init()

{
/* ========================================= *
* このあたりは基本的な設定
* ========================================= */

if ( !Layer::init() ) {
return false;
}

Size visibleSize = Director::getInstance()->getVisibleSize();
Vec2 origin = Director::getInstance()->getVisibleOrigin();

/* ========================================= *
* よくわからない画像を設置
* ========================================= */

auto sprite = Sprite::create("HelloWorld.png");
sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
this->addChild(sprite, 0);

// あとから見つけられるように、タグをつける
sprite->setTag(1);

/* ========================================= *
* タッチイベントの準備
* ========================================= */

auto listener = EventListenerTouchOneByOne::create();
listener->setSwallowTouches(true);
listener->onTouchBegan = CC_CALLBACK_2(HelloWorld::onTouchBegan, this);
this->getEventDispatcher()->addEventListenerWithFixedPriority(listener, 100);

return true;
}


さらにさらに、「画面をタップしたときの処理」というのを追加してみます。


HelloWorldSheen.h

// 一行追加

bool onTouchBegan(cocos2d::Touch *touch, cocos2d::Event *event);



HelloWorldScene.cpp

// タップ時の処理

bool HelloWorld::onTouchBegan(Touch *touch, Event *event)
{
// 座標の取得
Point location = touch->getLocation();
CCLOG("x:%f, y:%f", location.x, location.y);

// initで作った画像をとってくる
auto sprite = this->getChildByTag(1);

// タップされた座標に、アニメーションする
MoveTo* move = MoveTo::create(0.2f, Vec2(location.x, location.y));
sprite->runAction(move);

return true;
}


タップした位置に画像が動く、それっぽいものができました。


Android向けにも書き出す

というか、既に書き出されているのだ!!

proj.androidcocos2d/cocos/platform/android/javaをけっこう、Eclipseでimport。

これまたしばらく待ったのち、MyGameをrunすれば、iOSと同じように動くはず。


Lobiの導入

iOSの場合は、基本的にはドキュメントを見て実装進めればよい。

注意するのは、導入の実装は cppではなくObjective-C側の作業になるということ。

ゲーム実装時にいじっていたClasses以下での作業ではなく、iosの方に入っているコードの方に組み込んでいくことになります。