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


こちらの記事は、プログラミング初心者の方が、
ゲーム作成と`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](https://itunes.apple.com/us/app/xcode/id497799835)
   - Apple先生のおかげで覇権をとっているIDE(統合開発環境)
   - iOSアプリの出力に必要 (**Unity・Cocos2d-xを用いる場合でも**)

 - [Android Developer Tool (Eclipse)](http://developer.android.com/sdk/index.html)
   - Androidアプリを開発するためのいろいろなツール群
   - IDEとしてはEclipseというやつを使う
   - **Androidアプリを出力するときに必要。**
      - Eclipseについては、UnityやCocos2d-xを用いる場合は、必ずしも必要ではない。

 - [Unity](http://japan.unity3d.com/unity/download/archive)
   - 3Dのすごいものが、コード書かずに作れたりする、すごいツール
   - Lobi SDK導入は、他の環境と比べて **圧倒的に簡単です**。
 - [Cocos2d-x](http://www.cocos2d-x.org/download)
   - C++でごりごりと書くタイプのゲームエンジン
   - その名の通り2Dが専門 物理演算も得意
   - けっこう機能が違うので、`v3.x`以上がおすすめ
   - [Cocos2d-JS](http://qiita.com/fnobi/items/056187ce2cf3ceda79d6)ってやつも、さいきん布教してます

 - [Lobi SDK](https://github.com/kayac/Lobi)
   - すべてのゲームをおもしろくする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すると動かない)

 - だいたいこちらの記事参照してます
   - [Unity4の「Animation」でオブジェクトをプログラミング無しで動かしてみる！ - Unity不定期便](http://0310unity.hateblo.jp/entry/unity_animation_basic)

### 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()`という部分へ、以下のものをコピペしてみてください。(そんなに大きくはいじってないです)

```cpp: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;
}
```

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

```cpp:HelloWorldSheen.h
// 一行追加
bool onTouchBegan(cocos2d::Touch *touch, cocos2d::Event *event);

```


```cpp: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.android`と`cocos2d/cocos/platform/android/java`をけっこう、Eclipseでimport。

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

### Lobiの導入

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

 - [iOS implement LobiRecSDK Cocos2d x · kayac/Lobi Wiki](https://github.com/kayac/lobi/wiki/iOS-Implement-LobiRecSDK-Cocos2d-x)

   - 必要なframework等をxcode projectに追加
   - Info.plistの編集
   - 依存ライブラリの追加 (普通新しく何かをDLする必要はなし)
   - `AppController.mm`にいろいろ書き足す


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

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