Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Cocos2d-xとSpriteStudioを使った音ゲー開発のお話
Similar to Cocos2d-xとSpriteStudioを使った音ゲー開発のお話 (20)
Recently uploaded
Recently uploaded (9)
Cocos2d-xとSpriteStudioを使った音ゲー開発のお話
- 1. Cocos2d-x と SpriteStudio を 使った音ゲー開発のお話
- 2. 登壇者紹介 髙井 知 ・ 株式会社ウェブテクノロジ R&D部 SpriteStudioチーム アルバイト ・ 東京工芸大学 芸術学部 ゲーム学科 ４年 ・ 遠藤研究室所属(ゼビウスで有名なあの人) プログラミングを専門にゲームデザインについても勉強中 言語：Java,C言語,C#,C++,JavaScript Cocos2d-xでの開発経験はいくつかあり
- 3. 今日のお話について 「学生」がCocos2d-xとSpriteStudioを使って ゲームを開発しましたよ というお話 ■ ポイント ・ SpriteStudioの組込み ・ 学生視点からのCocos2d-xの使い心地
- 5. どんなゲーム？ ■ タイトル Amane☆Dance ■ ジャンル いわゆる音ゲー ■ ゲームコンセプト かわいいダンスアニメ
- 6. ゲームのデモ
- 7. 開発背景 ■ なぜCocos2d-xとSpriteStudio？ ・ C++の学習目的 → C++でのゲーム開発未経験 ・ SpriteStudioの改善 ■ なぜ音ゲー？ 音ゲーに興味があり自分で作ってみたいと思っていた
- 8. 開発環境 ■ Cocos2d-x Ver.2 を使用 → 開発当時、Ver.3はα版だった ■ Microsoft VisualStudio 2010 を使用 ■ windowsで制作 → Macの情報がほとんどで windowsでの環境構築には苦戦 ■ ビルドはwin版とAndroid版
- 10. ゲームの必要要件 ■ SpriteStudioのアニメーション表示 ■ 曲とダンスの同期 ■ 曲とノートの同期 ■ プログレス表示と曲の終了を取得 ※「ノート」とは音ゲーにおける入力判定の タイミングを表すもののこと
- 13. ツールの見た目
- 17. ダンスモーションについて ■ SpriteStudioで作成 ■ モーションは全て１２０フレーム ■ 曲ごとにモーションの順番を設定
- 18. アニメーションの表示 ■ SSPlayerを使って表示している → SSPlayerを使うことで組み込みは楽 → 組込み手順については後に説明 ■ SpriteStudioのアニメーション表示 → 達成！！
- 20. 曲とダンスの同期 ■ 曲ごとにBPMを計測する → データとしてプログラム内に手打ち ■ BPMに合わせてアニメのStepを変更 → SSPlayerのStep関数でアニメーションの スピードを調整することができる ■ 曲とダンスの同期 → 達成！！
- 21. ノートアニメーション ■ SpriteStudioで作成 ■ アニメーションの途中で出現 ■ タップするタイミングで色変更 → 一部プログラムで制御
- 23. ノート出現の順番 ■ １フレーズを１セットで、曲ごとに順番を設定 1 2 321 １フレーズ 曲 ダンス１ ダンス２
- 24. 曲とノートの同期 ■ 出現のタイミングはダンスのStepで調整 ■ 出現のパターンはダンスに依存 → 結果的に曲と同期している ■ 曲とノートの同期 → 達成！！
- 25. Cocos2d-x Ver.2のサウンド ■ Cocos2d-x Ver.2のサウンド事情について ・ サウンド周りの機能が必要最低限しかない → 再生時間の取得ができない → 再生終了のコールバックもない ・ 同時再生数の制限 SE：５個 BGM：１個 → 拡張はCocos2d-xのソースの修正が必要
- 26. 要件に必要なデータ ■ プログレス表示と曲の終了に必要なデータ ・ 曲ごとの再生時間 → BGMが何分何秒で終わるか知りたい → データとしてプラグラム内で手打ち ・ ゲームプレイの経過時間 → 曲がどれくらい進んだか知りたい → updateのたびにかかった時間を加算
- 27. プログレス表示と曲の終了 ■ プログレス表示 → ( 経過時間 / 再生時間 ) の割合で位置を決定 ■ 曲の終了 → ( 経過時間 > 再生時間 ) でスコア画面に遷移 ■ プログレス表示と曲の終了の取得 → 達成！！
- 29. バージョンについてのまとめ ※以降、SpriteStudioとSSPlayerの解説は 旧バージョン、新バージョンという呼び方で説明 名称 旧バージョン 新バージョン Cocos2d-x Ver.2 Ver.3 SpriteStudio SpriteStudio 4 OPTPiX SpriteStudio 5 SSPlayer SSPlayer 4 SS5Player
- 30. SpriteStudioのバージョン ■ Amane☆Danceで使用している SpriteStudioとSSPlayerのバージョンについて ・ 開発段階では旧バージョンを使用 → 旧バージョンしかなかった ・ 完成後、新バージョンへと移行 → 手間や変更点をまとめる目的
- 32. 新バージョン組込み手順２ ■ Ss5Converterでデータを変換 ・ アニメデータから.ssbpファイルを作成 ・ コンバータの使い方はwikiで https://github.com/SpriteStudio/SpriteStudio5-SDK/wiki/コンバータの使い方 .png .ssae .ssce .sspj SpriteStudioで 出力 .ssbp Ss5Converterで 作成 .png .ssbp Resourcesフォルダに 追加
- 33. 新バージョン組込み手順３ ■ サンプルコード // SSDataをResourceManagerに登録 ss::ResourceManager* resourceManager = ss::ResourceManager::getInstance(); resourceManager->addData("sample.ssbp"); // SSPlayerを生成 ss::Player* ssPlayer = ss::Player::create(); // ImageList(png名)の読み込み ssPlayer->setData("sample"); // "ssae名/アニメーション名"で呼び出し可 ssPlayer->play("sample/hoge"); this->addChild(ssPlayer);
- 36. 新バージョンのまとめ ■ ’SS5Player’ ・ 組込みは難しくない ・ アニメーション切り替えが楽！ → ただしアニメ数が増えれば分岐も増える ■ SpriteStudioを手軽に導入できる！ ・SS5Player組込みの詳細wiki https://github.com/SpriteStudio/SS5PlayerForCocos2d-x/wiki
- 37. 新バージョンへの移行 ■ 旧バージョンから新バージョンへの移行 ・ 移行マニュアル https://github.com/SpriteStudio/SS5PlayerForCocos2d- x/wiki/PortingManualFromSSPlayerToSS5PlayerForCocos2dx ・ 旧バージョンからの移行もそれほど苦ではない → 変更点は多いが、理解すれば移行は簡単 ※旧バージョンを拡張して使っている場合は 移行に手間がかかる可能性がある
- 39. Cocos2d-xでのゲーム開発 ■ Cocos2d-xの触り心地 ・ 初心者には少しハードルが高い → 環境構築や作業量の多さ ・ 拡張性は高い → オープンソースで小回りが利く ・ C++に多少の慣れが必要 → C++独特の文法
- 40. 開発過程でつまずいたところ ■ ビルド環境での挙動の違い ・ リソースの大文字小文字 → windowsでは区別しない、Androidでは区別する ・ bool変数の初期化の忘れ → windowsではたまたまうまく動作 ■ 思い込みの怖さ
- 41. 開発で得られたもの ■ Cocos2d-xでの開発で得られたもの ・ C++の知識 → ”ポインタ”の理解 ・ プログラマとしての自信 → 環境構築、コーディングの量 ・ 外部ツールの有用性 → 実装が楽、分業が可能
- 42. Cocos2d-x Ver.3について ■ 様々な機能の改善 ・ サウンド周りが改善 → コールバックがある ・ 環境構築も改善 → フォルダ構造の変更、設定が楽に ・ SS5Playeｒもそのまま使える
- 44. 今後の課題 ■ 今後やってみたいこと ・ Cocos2d-x Ver.3でもゲームを作ってみたい → Ver.2でしか作っていない ・ ADX2 LEを使ってみたい → サウンド周りのツール ・ Cocos2d-JSも触れてみたい → 環境構築が楽らしい
- 45. 最後に 少し個人的なお話を