LoginSignup
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@fnobi(Shin Fujisawa)in面白法人カヤック HTMLファイ部

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

Last updated at Posted at 2014-08-21

こちらの記事は、プログラミング初心者の方が、
ゲーム作成と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.androidとcocos2d/cocos/platform/android/javaをけっこう、Eclipseでimport。

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

Lobiの導入

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

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

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

3
3
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
Sign upLogin
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?