ハイブリットソーシャルゲームの現場

943 views

Published on

第39回 HTML5とか勉強会+日本Androidの会 2013年5月定例会
にて発表した資料。

http://kokucheese.com/event/index/90708/

Published in: Mobile
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
943
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • まずは弊社ポケラボの会社説明用ビデオの方を再生させていただきます。
  • ということで、
    今回、弊社ポケラボからはハイブリッドソーシャルアプリの現場というお題目で発表させていただきたいと思います。
    仕事終わりに来た方や授業が終わってきた方など疲れているかとは思いますがどうぞよろしくお願いいたします。
  • まずは自己紹介から

    の二名で発表させていただきます。
  • 本日は、4点お話させていただければと思います。
    私の方からは会社全体の取り組みとアニメーション周り。
    エンジニア前田からは弊社がAndroidで目指す事を発表させていただきます。
  • それでは会社紹介。
    メインはスマートフォン向けのソーシャルゲームを開発・運営する設立6年目の会社です。
    皆様はご存じでしょうか?
    知っている方がいらっしゃいましたらお手の方を上げていただいてもよろしいでしょうか?
    ですよねー。だと思ってました。
    では簡単に説明させていただきます。

    最近では採用人数が異常に増えて200名となっていますが
    4年前までは日本橋のマンションの一室で4人。
    ガラケー用の勝手サイトと呼ばれるモバイルウェブソーシャルゲームを作っていました。
    トイレがめっちゃ汚かったのが印象的です。
    そして、mixiオープン化、モバゲーオープン化に伴い弊社もそこに乗っかっていったという感じです。

    また、現在ですと、
    GREEさん、SEGAさん、アエリアゲームスさんと業務提携をしていまして
  • GREEさんからはプラットフォーマーならではの知見
    大量ログデータをどうさばくか。
    ドリランド、ツリスタなどでの施策の共有
    技術的なノウハウというものを共有させていただいています。
    また、ポケラボメンバーとGREEメンバー共同で現在アプリを一本作っています。
  • 次にSEGAさんとは
    コンシューマーゲーム業界ならではの世界観の作りこみ、ゲームのコアとなる部分など濃いゲーム制作手法を共有していただいております。

    このCMをみたことありますでしょうか?
    このクランバトルはセガとポケラボ共同企画開発した1本目のアプリです
  • そして最後にアエリアゲームスさんと組むことで
    弊社のアプリを北米を中心に海外へサービスを展開しています。

    お陰様で、ガーディアンバトルをローカライズしたImmoralisというアプリが
    まずまずの成果をだしております!

    フィジー、パナマで1位をとっています。
  • 国内についての運営中アプリは8本/海外は5本で
    iOSでは比較的高いランクにインできています!
    が、Androidについては
    まだまだ課題を多く抱えている状態です。

    運営チームの体制については
    PM1人…スケジュール・予算管理 1名
    PL2〜3人…イベントの企画や既存システムの改修・外注イラストの発注書作成
    PG3〜4人…主にサーバーサイド
    DE2〜3人…ページのモック作成。ページのコーディング。バナーや細かいパーツの作成
    FE1人…最近javascript周りができるフロントサイドのエンジニアをいれているアプリも多くなってきました。

    10人弱のメンバー構成で1アプリを開発運営しています。
    また別軸で演出チーム+カスタマー+デバッグ+サウンドとなっています。
  • というのが簡単な弊社の概要となります。

    では次に、なぜハイブリッドアプリを採用したのか?
    を次に発表させていただきます。
  • まず、弊社はもともと、ガラケーの勝手サイトの頃からソーシャルゲームを作り、mixi、mobageと展開してきましたので
    PHPを使うウェブ開発系エンジニアが大半でしたのでネイティブに強いエンジニアという方はいなかったのが1点目の理由
  • ポケラボがDCMという投資ファンドから増資していただくチャンスがあった時にシリコンバレーに行ったんですが
    その時に議論になったことです。
    なぜiアプリなどのリッチなゲームではなくモバゲーやグリーのゲームがウェブで勝てたのか?
    必ずしもリッチが必要ではないのではないか?
    ウェブこそ端末に左右されない最強のプラットフォームなのではないか?
    そんなことを議論したのが記憶に残っています。

    直近の話題としても任天堂さんがHTML5に本腰を入れてきたり、
    GoogleさんのChrome for Android
    サムスン、インテルの動きも気になる所ですよね。

    ただ共通点としてHTML5としてあげられている点がきになります。
  • そして、ネイティブでよりリッチなゲームを作ろうという以前の話で
    弊社はソーシャルゲーム黎明期から開発運営していたこともあり会社はうなぎ上りに成長していきました。
    ですが、見てくださいこのグラフ。
    外部に出していい資料なのかちょっとグレイな内容ですがw

    11年から12年まではずっと下り坂。
    盛り上がっている市場ということもあり…競合わんさか出てきた所勝負で勝てなかったのが原因です。。。
    そして、この土俵では勝てないなと、
    スマホシフトを視野にたほうがいいなということで開発を始めました。
    システムはガラケーで運営しているアプリそのままでデザインだけリッチにしようというのが目的でした。
    当時のスマホアプリはまだまだ今みたいな市場にはなっておらず、
    各社そこまでクオリティが高くないといった印象でした。
  • で最後にアニメーション演出をどうするかといった際に
    もともとガラケーサービスを開発運営してたのでFlashLite1.1をメインに使用していた為
    iPhoneで展開できないという問題が発生。
  • 結果、初期はswiffyでiPhoneを対応しAndroidはswfで対応していました。

    EnchantJSやEdge,senchaなども試験導入したが工数が予想よりかかってしまったり
    Androidで謎の挙動をしてしまうなどがあり
    現在では完全に1ソースでスピーディーな運営をするためにcreateJSを使用しています。
  • まとめますと以下の様な形となります。
    必然的にこの選択肢を選んだといった感じです。
  • 次に実際、ハイブリッドアプリってどうなのよ?ってことですが、
    大きく3点あると思っております。
  • 1点目は
    HTML5ならiPhoneとAndroidで1ソースで管理できるから楽です。
    iOSのみレティナ判定など細かい部分を入れるなどソース内で分岐はありますが
    あまり複雑な管理はありません。
  • 2点目は、運営のしやすさ。更新のしやすさ。
    ソーシャルゲームは運営が肝となってくるのでスピードを大事にしております。
    例えば、100万人インストール突破イベントを急遽やりたい、新規で考えたゲームシステムを導入したいといった場合
    ネイティブの場合ですと、再審査を提出をしなければいけないので
    狙ったタイミングでリリースできるかどうか調整できないですが、ウェブベースであれば再審査いらずに手軽に実装、運営できる。

    また、演出についてもcreateJSを使用しているのでアニメーションはFlashを用いて開発できますので
    簡単なイベント演出などは1~2日で仕上げ実装することができます。
    インタラクティブなアクションやサウンドを鳴らしたい。ネイティブの機能を使いたいといった場合もjavascriptからネイティブに命令を送ることで実現可能ですので特に問題だとは感じておりません。
  • ただ、直近の問題を上げますと
    複雑なアニメーションはAndroidでまともに動かないといった事象が起きています。

    なので現在では解決方法として、Canvas、CSS、ネイティブにおいて適材適所で対応をしています。
    例えばあまりアニメーションしない部分、簡単なアニメーション部分はzepto.jsを用いてCSSアニメーションに任せる。
    createJSではアニメーションパート毎にremoveChildとaddChildを細かく指定して無駄な処理をさせない。
    更新しない画像はネイティブに内包してしまうなど。
    詳しくはこの後、前田の方から発表させていただきます。
  • では次に弊社で開発している際に発生した問題点について発表したいと思います。

    まずは弊社からリリースしているソードオブファンタジアのアバターシステムにおいて問題が発生しました。
    内容はボーンを使ってアニメーションさせたいということになり
    当初はunity,cocos2dxなども視野に入れたのですが、
    運営時のメンテナンス、更新における問題があるのではないかということで
    HTML5でアバターシステムを実装しました。

    Flashのボーンからcocos2dxへのエクスポートはあったのですが、
    HTML5に変換するツールはなかったので最終的に一から作ることになりました。
    Flashでボーンを組んでアニメーションさせ、最終的に配列として各オブジェクトの位置情報を書き出すといったものになります。
    武器に応じてアバターのモーションを変えられる仕組みとなってます。
  • 同じくソードオブファンタジアというゲーム内にて
    ボスバトルという仕組みがあり、そのシーンにてユーザーの取得したスキルや魔法を使うことができるのですが、
    その種類が100種類を超える数になっていまして
    どうやって管理しようという問題が発生しました。
    ユーザーによってアバターは自由に変えられる。
    +スキルによって武器とモーションのみ変える
    +サウンドデータがものすごい数

    そこで解決策として使ったのが
    スキル読み込み時にRequireJSを使用して
    都度都度スキル演出に必要なファイル(画像・js・SE)を読み込ませてます。
    また一度読み込んだファイルはローカルキャッシュさせて再度読み込みを行うことは無くしてます。

    実際にプレイしていただければ体感できると思いますが
    結構サクサクです。(Androidはまだ未リリース)
  • Android2.X系で処理が遅い
    Android4.Xでも謎の挙動をする端末というものがあり不安定
    その対策として現在、弊社では以下の対策を仕込んでいます。
  • Android2.X系で処理が遅い
    Android4.Xでも謎の挙動をする端末というものがあり不安定
    その対策として現在、弊社では以下の対策を仕込んでいます。
  • Android2.X系で処理が遅い
    Android4.Xでも謎の挙動をする端末というものがあり不安定
    その対策として現在、弊社では以下の対策を仕込んでいます。
  • Android2.X系で処理が遅い
    Android4.Xでも謎の挙動をする端末というものがあり不安定
    その対策として現在、弊社では以下の対策を仕込んでいます。
  • Android2.X系で処理が遅い
    Android4.Xでも謎の挙動をする端末というものがあり不安定
    その対策として現在、弊社では以下の対策を仕込んでいます。
  • Android2.X系で処理が遅い
    Android4.Xでも謎の挙動をする端末というものがあり不安定
    その対策として現在、弊社では以下の対策を仕込んでいます。
  • Android2.X系で処理が遅い
    Android4.Xでも謎の挙動をする端末というものがあり不安定
    その対策として現在、弊社では以下の対策を仕込んでいます。
  • Android2.X系で処理が遅い
    Android4.Xでも謎の挙動をする端末というものがあり不安定
    その対策として現在、弊社では以下の対策を仕込んでいます。
  • Android2.X系で処理が遅い
    Android4.Xでも謎の挙動をする端末というものがあり不安定
    その対策として現在、弊社では以下の対策を仕込んでいます。
  • Android2.X系で処理が遅い
    Android4.Xでも謎の挙動をする端末というものがあり不安定
    その対策として現在、弊社では以下の対策を仕込んでいます。
  • Android2.X系で処理が遅い
    Android4.Xでも謎の挙動をする端末というものがあり不安定
    その対策として現在、弊社では以下の対策を仕込んでいます。
  • Android2.X系で処理が遅い
    Android4.Xでも謎の挙動をする端末というものがあり不安定
    その対策として現在、弊社では以下の対策を仕込んでいます。
  • Android2.X系で処理が遅い
    Android4.Xでも謎の挙動をする端末というものがあり不安定
    その対策として現在、弊社では以下の対策を仕込んでいます。
  • Android2.X系で処理が遅い
    Android4.Xでも謎の挙動をする端末というものがあり不安定
    その対策として現在、弊社では以下の対策を仕込んでいます。
  • Android2.X系で処理が遅い
    Android4.Xでも謎の挙動をする端末というものがあり不安定
    その対策として現在、弊社では以下の対策を仕込んでいます。
  • Android2.X系で処理が遅い
    Android4.Xでも謎の挙動をする端末というものがあり不安定
    その対策として現在、弊社では以下の対策を仕込んでいます。
  • Android2.X系で処理が遅い
    Android4.Xでも謎の挙動をする端末というものがあり不安定
    その対策として現在、弊社では以下の対策を仕込んでいます。
  • Android2.X系で処理が遅い
    Android4.Xでも謎の挙動をする端末というものがあり不安定
    その対策として現在、弊社では以下の対策を仕込んでいます。
  • アンドロイドが社内でも一番の問題だと思っています。
    知恵のある方々お力添えをよろしくおねがいいたします!
  • ハイブリットソーシャルゲームの現場

    1. 1. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential ハイブリッドソーシャルアプリの現場 Social Game Development with HTML5 2013/05/28 クリエイティブ事業部 鈴木 匠太 ソーシャルメディア事業部 前田 翔梧
    2. 2. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential 自己紹介 鈴木 匠太(29) 元Flasher クリエイティブ事業部 部長 主にアニメーション演出部分を担当 CreateJSやAfterEffectsをよく使用する 富士登山、スカイダイビング、マラソンを嗜む 前田 翔梧(29) 元日立Sler ソーシャルメディア事業部 リードエンジニア 主にPHP+Android™ Javaなどで開発 人と繋がることが好き スノボ、サッカー、プログラムを嗜む
    3. 3. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential 今日お伝えしたいこと ◆ポケラボってどんな会社なの? ◆なぜハイブリッドアプリを採用したのか? ◆実際、ハイブリッドアプリってどうなの? ◆ポケラボエンジニアがAndroid™で目指す事
    4. 4. Copyright © POKELABO.inc All Rights Reserved.Confidential ※セガとセガロゴは株式会社セガの登録商標です。 Copyright © POKELABO.inc All Rights Reserved.Confidential 会社紹介 ◆会社名 株式会社ポケラボ Pokelabo, Inc. ◆設立 2007年11月 ◆社員数 200名程 ◆資本金 13億7,290万円 ◆事業内容 モバイル向けソーシャルアプリ の企画・開発・運営 元マンションベンチャー
    5. 5. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential プラットフォームの情報を共有 × GREEさんのノウハウを活かす ※すべての商標は、それぞれの所有者に帰属します 。
    6. 6. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential コンソールの技術を習得する セガさんのノウハウを活かす × このCMをGW中に見ませんでしたか? ※セガとセガロゴは株式会社セガの登録商標です。
    7. 7. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential 海外での展開・運営方法を習得する aeria GAMESさんのノウハウを活かす × ドイツ 5位 / フランス 14位 / US 47位 フィリピン・シンガポール 3位 フィジーパナマ GROSS1位
    8. 8. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential メイン運営サービス紹介 海外にも積極的に進出! GOOD BAD iOSでは比較的高いランキングを叩き出しているが Android™に関しては課題だらけの状況!
    9. 9. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential なぜ、ハイブリッドアプリを採用したのか?
    10. 10. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential And more… 2008年 「Start」 Off deck site apps 2009年 「Get Chance」 Opened Mobile SNS 2010年 「Growing」 Fundraised series A $12M 2011年 「To global」 ■ Tie-up campaign Fuji TV Yomiuri- Giants # of member 3 7 60 100 ガラケー向けソーシャルゲーム開発が中心 webエンジニアが多かった
    11. 11. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential 先人達の教えに共感した Webが最終的には勝つだろう!
    12. 12. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential ポケラボ運営アプリの月別UUと売り上げコイン数 会社全体が危うかったので方針転換
    13. 13. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential ネイティブでのアニメーションが作れなかった
    14. 14. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential 結果としてSwiffyを選択し 現在はCreateJSをメインに使用 変換 変換
    15. 15. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential 1.PHPエンジニアが多かった。 2.先人達の教えに納得させられた。 3.ガラケーの横展開が目的だった。 4.スマホアプリ上でのリッチな演出制作に困難。 なぜ、ハイブリッドアプリを採用したのか?
    16. 16. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential 実際、ハイブリッドアプリってどうなの?
    17. 17. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential iPhone + Android™ 両対応可能
    18. 18. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential
    19. 19. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential WebViewって遅いんじゃないの?
    20. 20. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential FlashでBoneAnime AS⇒JSに めっちゃ動く! HTML5でのアバターシステム開発 問題1 CreateJSはBoneが使えない
    21. 21. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential 問題2 増え続けるスキル演出 現在110個 NEXT+70個以上
    22. 22. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential ポケラボエンジニアが Android™で目指すこと
    23. 23. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential より速く・より快適に・動作すること ユーザ様に楽しんでもらいたい!!
    24. 24. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential 3つのアプローチ iOSとの UUID連携 ハイブリッド 固定メニュー ハイブリッド 高速 アニメーション
    25. 25. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential ハイブリッド固定メニュー アプリに重要なヘッダーフッターの固定メニュー ・overflow: scroll; と position:fixed;で実装 ・・・でも端末によっては動かない。 ・iScrollを使う。 ・・・でも端末によっては遅い。 ならいっそWebViewでの 表示をやめてしまおう!
    26. 26. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential ハイブリッド固定メニュー ヘッダーフッター用のコマンドを用意する。 例) heder://json=[{“type”:”badge”}・・・] Android™ネイティブで上記コマンドのJSONを 解析し、全てAndroid™のViewに変換してあげる。 →重要:ハイブリッドを目指しているので Webとの連携が必須!
    27. 27. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential ハイブリッド固定メニュー コマンドをWebから指定するだけで、 ヘッダーフッターを安定的に表示させる事に成功 !
    28. 28. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential ハイブリッド高速アニメーション ハイブリッド 高速 アニメーション
    29. 29. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential ハイブリッド高速アニメーション もっとスピーディーなアプリリリース、 もっとスピーディーなアニメーション描画をしたい ! …でもそんな完璧な ライブラリはない。 なら自分たちで 作ってしまおう!
    30. 30. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential ハイブリッド高速アニメーション 『実現したいこと』 ・基本はハイブリッド(Web)! ・今あるリソースをそのまま使いたい! ・快速アニメーション!
    31. 31. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential ハイブリッド高速アニメーション 2段階「変換」を行い、 Android™ネイティブでアニメーションを描画! 変換 変換 FLASH JavaScript Android™
    32. 32. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential ハイブリッド高速アニメーション androidnative.setBackColor("000000"); androidnative.setFPS(30); androidnative.loadGraphic("images/touch_screen.png", 1, 1, false); 独自コマンドをAndroidの Canvasに変換し描画する。 canvas.drawBitmap(testbmp0, 220, 10, null); canvas.drawBitmap(testbmp1, 20, 10, null); canvas.drawBitmap(testbmp2, 20, 210, null);
    33. 33. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential ハイブリッド高速アニメーション 従来のCreateJSより高速アニメーションを実現! FPS 10 〜 20 FPS 30 〜 45 約3倍のフレームレートに!
    34. 34. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential iOSとの UUID連携 IOSとのUUID連携
    35. 35. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential IOSとのUUID連携 iOS端末やポケラボアプリ内でコラボ連携し、 多くのユーザ様にアプリを遊んでもらいたい! …でもAndroid™のUUIDは使えない。 こっちでUUIDを 発行してあげよう!
    36. 36. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential IOSとのUUID連携 UUIDとは重複しない一意な値です。 UUIDを作成する方法は簡単。 String uuid = UUID.randomUUID().toString(); ただし、アプリをアンインストールしてしまうと UUIDも同時に削除されてしまい、 別UUIDが生成されてしまう。
    37. 37. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential IOSとのUUID連携 ポケラボネットワークシステム(通称pokenet) 利用して必ず1端末1UUIDを実現。 pokenetで 端末認識 UUID発行 問い合わせ
    38. 38. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential IOSとのUUID連携 端末、アプリ、関係なくコラボ連携可能に!
    39. 39. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential IOSとのUUID連携 さらにこの仕組みを利用して、同じデータが 外でAndroid™端末、家でiPadとして遊べる! 完全ハイブリッドアプリとしての動作を実現!
    40. 40. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential Android™が課題
    41. 41. Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential Thank You! いつも仕掛け人であること

    ×