pcapバトラーZ

「パケモン　ゲットだぜ！」
pcapで戦え！pcapバトラーZ
ミラーポートからtcpdumpでパケットをキャプチャ
自慢のpcapでオンライン対戦だ！
俺より強いやつに会いにいく...

• オンラインヒーロー by 一般社団法人MAヒーローズ・リーグ オンライン2020
• Monaca賞 by アシアル株式会社ヒーローズ・リーグ オンライン2020

動画

開発素材

ツール

Monaca

Onsen UI

API

WebRTCプラットフォーム SkyWay

クラウド

Firebase Hosting

デバイス

M5Stack

システム構成

1. 開発環境：Monaca
2. UIライブラリ：Onsen UI
3. 公開サーバ：firebase hosting
4. WebRTCオンライン通信：SkyWay

音楽:　魔王魂

仕組み

1. パケット解析

• pcapファイルの形式に従いパケットヘッダを解析
• 特定パケットの場合はさらに内容を解析
• パケットの統計や特定パケット検出からモンスターのステータスを決定

1. バトルシステム

• ターン制バトルを採用
• 攻撃の順序は素早さによって決定する。
• ダメージ計算はポケモン方式を参考にした

1. オンラインバトル

• 通信対戦の仕組みにはWebRTCのDataChannelを利用した。
• ゲームロジックはホスト側で実行
• クライアント側はコマンドの送信と画面描画のみ
• 対CPU戦から対人用にバトルシステムを若干調整

1. パケモンGO

• お気に入りのパケモンを召喚
• WebBluetoothでM5Stackに転送
• M5StackのWi-Fi機能でWi-Fi APのMACを収集
• MACを元にパケモンのパラメータを強化
• 強化したパケモンを取り込んで(WebBluetooth使用)バトルに挑む！

ストーリー

遊び方

1. pcapファイルを準備

• wireshark/tcpdumpなどを使ってパケットキャプチャする
• お試し用のpcapファイル sample1 sample2 sample3 sample4 sample5

1. https://pcap-battler.web.app/ にアクセス
2. pcapファイルからパケモンを召喚しステータス確認

ステータスの見方

• タイプ: ３種類(炎、水、草)あり、タイプには相性があります。
• HP: 体力...これが0になると負け
• MP: 技を使うときに消費する
• こうげき: 攻撃力が強いほど、相手に与えるダメージが大きくなります。
• ぼうぎょ: 防御力が強いほど、相手からうけるダメージが小さくなります。
• 素早やさ: 素早さが高い方が先に攻撃できます。

ストーリーモード

魔王タウルから世界を救うお話です。
パケモンマスターとして頑張って世界を救って下さい。

1. パケモン召喚後「ストーリー」を選択する。
2. ストーリーが始まり、敵が出てくるのでCPUと対戦してください。
3. 最後の魔王を倒すと、エンディングを見ることができます。

CPUバトルの戦い方

1. こうげき、ぼうぎょ、その他パケモンがもつわざを使えます。
2. わざを使うとMPが減ります。
   • MPは回復しないので要注意
3. どちらのHPが0になったらバトル終了

オンラインモード(パケモン道場)

パケモンマスター同士の力比べです。
最強のパケモンマスターを目指しましょう。

オンライン上でのマッチングシステムは実装しないので
リアルなお友達と遊びましょう。

ホスト側

1. パケモン召喚後「どうじょう」を選択する。
2. ホストになる場合、自分のIDをコピペして対戦相手にIDを通知（SlackでもSkypeでもなんでも良い）
3. 「たいきする」を押して相手からの接続をまち、クライアントが接続したらバトル開始

クライアント側

1. パケモン召喚後「どうじょう」を選択する。
2. 対戦相手から通知されたIDを「あいてのID」に入力
3. 「もうしこむ」を押してホストと繋がればバトル開始

オンラインバトル

• こうげき、ぼうぎょ、その他パケモンがもつ技を使えます。
• わざを使うとMPが減りますが、MPは回復しない
• 相手が防御すると、技も効果が減るのでタイミングが重要
• どちらのHPが0になったらバトル終了

パケモンGo

お気に入りのパケモンを持ち出して街角でWi-Fiスキャン！
パケモンのステータスを強化してバトルに挑め！

持ち出し

1. M5Stackの「てんそう」を押す。
2. パケモン召喚後「もちだし」を選択する。
3. ペアリングが始まるのでM5Stackを選択する。
4. パケモンがM5Stackの画面に表示されたら持ち出し完了！

パケモン育成

1. M5Stackの「そだてる」を押す。
2. 周辺のアクセスポイントのスキャンが始まる。
3. 今までスキャンしていないAPを検出したら「デンパのミ」をゲット！
4. APのMACアドレスに応じてステータスが強化される。

取り込み

1. M5Stackの「てんそう」を押す。
2. pcapバトラー側でパケモン召喚画面で「とりこみ」を選択する。
3. ペアリングが始まるのでM5Stackを選択する。
4. パケモンが召喚されたら取り込み完了、いざバトル！

パケットキャプチャの仕方(PC)

パケットキャプチャ、コワクナイヨ

1. [wireshark]をインストール
2. Menu->Capture->Optionsでオプション画面を表示
3. 通信しているインターフェースを選択
4. Startボタンでキャプチャ開始
5. １分ほどキャプチャを実施 大量の通信をしている場合は短めに
6. Stopボタンを押してキャプチャ停止
7. File->Save as..で保存ダイアログ表示
8. 保存形式をpcap(Wireshjark/tcpdump)にして任意の名前をつけて保存
9. これでpcapバトラーで遊ぶ準備ができました。

技の出現に関して

ARPをみてNW上の機器から技を作っています。
例えば、BUFFALOのルータなどがあればそのまま「バッファロー」
NEC製のルータの婆は、「バザール・デ・ゴザール」など。
その他、通信プロトコルなどもみていますので、ZOOMやファイル共有(SMB)など
いろいろな通信をキャプチャしてみると多彩な技が発見できるかも

なぜ作ったのか

昔、バーコードバトラーってあったよねー

なぜpcapなのか

お世話になっております

なぜバトルなのか

ゲームは楽しい

実際作ってみて

普段、パケットの解析をwiresharkさんに任せっきりにしていますが
今回、自前で解析ロジックを作ることで、いろいろと勉強になりました。
みんなpcapバトラーやるべき！
というかオープンソースなのでパケット解析ロジックを拡張して
もっと多くの技を作って面白くしましょう。
あと、ゲーム作るのって難しいね

Wow

ネットワークエンジニアの嗜みです

メンバー

NETS

• 

  川島直人 @naoto_kawashima

  • story
  • online
  • pakemon go

• 

  rita @rita1118

  • pcap analyze

• 

  togawa @togawa

  • waza design

• 

  iizawa @chataro0313

  • main program

• 

  yoshino @totoro19

  • character design
  • illustrator

• 

  天島 武文 @tk6904

  • graphic design
  • voice actor
  • movie

関連イベント

• ヒーローズ・リーグ オンライン20202020-09-07 開催
• HLオンライン オレトク賞オンライン決勝2020-11-28 開催
• HLオンライン2020 決勝2020-12-12 開催
• ProtoPediaの時間：紹介作品①（第1回〜50回まで）2020-11-04 開催
• 「祝！100回記念」ProtoPediaの時間2022-11-09 開催
• 【20th 記念展示会】Mashup Award & #ヒーローズリーグ2024-12-07 開催

同じニオイがする作品

• VRMEditorTools
• M5StickC + Joystick HAT + Obniz OS なシューティングゲーム
• Alexaスキル "ペンギンのおつかい"
• ミミ子のただいまプリンター