Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Duel Shooting Online #TechLunch

Duel Shooting Online #TechLunch

2012/06/06(水) @ Livesense TechLunch
発表者:春日 太志

E60aa4f80303f3f386898546ddb3686a?s=128

Livesense Inc.
PRO

April 23, 2014
Tweet

Transcript

  1. @bar_̲row  2012年年06⽉月06⽇日 Duel  Shooting  Online Livesense  Inc. 1

  2. ⽬目次 Livesense  Inc. 2 1.  開発のきっかけ 2.  ゲームの仕様 3.  使った技術・サービス

    4.  開発作業⼯工程 5.  C/Sの通信内容 6.  苦労した点 7.  デュエルスタンバイ!
  3. ⽬目次 Livesense  Inc. 3 1.  開発のきっかけ 2.  ゲームの仕様 3.  使った技術・サービス

    4.  開発作業⼯工程 5.  C/Sの通信内容 6.  苦労した点 7.  デュエルスタンバイ!
  4. 1.  開発のきっかけ Livesense  Inc. 4 9leapで付いたコメントにモヤモヤしたから

  5. ⽬目次 Livesense  Inc. 5 1.  開発のきっかけ 2.  ゲームの仕様 3.  使った技術・サービス

    4.  開発作業⼯工程 5.  C/Sの通信内容 6.  苦労した点 7.  デュエルスタンバイ!
  6. 2-‐‑‒1.  ゲームの仕様(機体) Livesense  Inc. 6 White  Demon Red  Comet VS

  7. 2-‐‑‒2.  ゲームの仕様(機体) Livesense  Inc. 7 ???

  8. 2-‐‑‒2.  ゲームの仕様(全体) Livesense  Inc. 8 1.  アクセスが2名単位でたまると即決闘 2.  どちらかのHPが0になったら終了了(画⾯面が固まる) 3. 

    操作している機体のみ効果⾳音(mp3)が鳴る 4.  同じ⾊色の機体同⼠士で対戦することはない 5.  ⾃自機は下に、敵機は上に表⽰示される 6.  フィールドの⾼高さと幅は  480*720  固定とする 7.  推奨ブラウザは  Chrome※ ※Smart  Device  でも動くが最適化されていない ※IE8  でも動くがCSS3が適⽤用されずにレトロな感じ
  9. 2-‐‑‒3.  ゲームの仕様(コマンド⼀一覧) Livesense  Inc. 9

  10. ⽬目次 Livesense  Inc. 10 1.  開発のきっかけ 2.  ゲームの仕様 3.  使った技術・サービス

    4.  開発作業⼯工程 5.  C/Sの通信内容 6.  苦労した点 7.  デュエルスタンバイ!
  11. 3.  使った技術・サービス Livesense  Inc. 11 ※Audioのみ ※routingのみ

  12. ⽬目次 Livesense  Inc. 12 1.  開発のきっかけ 2.  ゲームの仕様 3.  使った技術・サービス

    4.  開発作業⼯工程 5.  C/Sの通信内容 6.  苦労した点 7.  デュエルスタンバイ!
  13. 4.  開発作業⼯工程 Livesense  Inc. 13 1.  前作レガシーコードの解体(2⼈人⽇日) 2.  サーバーサイド  Javascript

     の把握(0.08⼈人⽇日) 3.  PaaS  の把握(0.04⼈人⽇日) 4.  オンライン⽤用処理理の実装(3⼈人⽇日) 計  5.12⼈人⽇日
  14. ⽬目次 Livesense  Inc. 14 1.  開発のきっかけ 2.  ゲームの仕様 3.  使った技術・サービス

    4.  開発作業⼯工程 5.  C/Sの通信内容 6.  苦労した点 7.  デュエルスタンバイ!
  15. 5-‐‑‒1.  C/Sの通信内容(ゲーム開始まで) Livesense  Inc. 15 Server Client Http:  Request Http:

     Response Opening  画⾯面表⽰示 双⽅方向通信開始 WS:  Connection 決闘者Queueに接続者ID追加
  16. 5-‐‑‒2.  C/Sの通信内容(ゲーム開始まで) Livesense  Inc. 16 Server Client WS:  ⾃自機敵機⾊色情報 ⾃自機と敵機の⾊色情報を元に画⾯面作成

    ゲーム開始 WS:  ⾃自機敵機⾊色情報くれ マッチングしてたら「⾃自機敵機⾊色情報」を返す していなかったら「待て」を返す WS:  待て 5秒後に「⾃自機敵機⾊色情報くれ」を再送信
  17. 5-‐‑‒3.  C/Sの通信内容(ゲーム中〜~終了了) Livesense  Inc. 17 Server Client  A WS:  ⽩白が撃つ

    Client  B WS:  ⽩白が撃つ WS:  ⽩白が撃つ WS:  勝利利 WS:  disconnect ⾃自機が撃つEffect 敵機が撃つEffect 通信停⽌止 画⾯面更更新停⽌止 You  win 通信停⽌止 画⾯面更更新停⽌止 You  lose
  18. ⽬目次 Livesense  Inc. 18 1.  開発のきっかけ 2.  ゲームの仕様 3.  使った技術・サービス

    4.  開発作業⼯工程 5.  C/Sの通信内容 6.  苦労した点 7.  デュエルスタンバイ!
  19. 6.  苦労した点 Livesense  Inc. 19 レガシーコードいくない ・前作オフライン版のコードは拡張性が皆無だった ・⾚赤いのを動かせるようにするまで時間を要した オフラインの操作性とオンラインの整合性とを保つ ・操作性を求めるとレイテンシが整合性の邪魔をする

    ・厳密なゲーム進⾏行行のために同期を強めると   動きがモッサリし過ぎてストレス ・最⼩小限の同期で操作性と整合性とをトレードオフ
  20. ⽬目次 Livesense  Inc. 20 1.  開発のきっかけ 2.  ゲームの仕様 3.  使った技術・サービス

    4.  開発作業⼯工程 5.  C/Sの通信内容 6.  苦労した点 7.  デュエルスタンバイ!
  21. 7.  デュエルスタンバイ! Livesense  Inc. 21 http://duelshooting-online.herokuapp.com/ デバッグにご協⼒力力をお願いいたします。 http://duelshooting-pocapocaunty.dotcloud.com/ Websocket Comet