168
88

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.

ドワンゴAdvent Calendar 2016

Day 8

Slackで多人数オンラインアクションゲームを作る方法

Last updated at Posted at 2016-12-07

この記事はドワンゴ Advent Calendar 8 日目の記事です。
昨日は @mokumoku さんの 「サーバサイド Swift でウェブページを運用している話
」 でした。
実は僕も仕事ではSwiftを書いていて(クライアントサイドですが)、Swiftは好きな言語の一つです。サーバーサイドSwiftはまだ書いたことがないため、記事を読んで挑戦しようと思いました。
今日のお話はSwiftは全く関係ない、SlackとBotとPythonのお話です。

あるおやすみの日のはなし

ある日、弊社プロダクトのニコニコ動画を見ていると面白い動画と出会いました。
面白い実況者が爆弾を使うゲームを自作し、プレイして実況しているのをみて、僕はこう感じました。
「あぁー、僕も爆弾を置いて敵と戦うゲームやりて〜〜」
でも、その時はゲーム機を持っていなくやることができないのが心残りでした。

前置きが長くなりましたが、これは僕が環境に依存しないマルチプラットフォームで動く爆弾を置くゲームを手に入れるまでの物語です。

Slackというプラットフォーム

Slackはとても良いプラットフォームだということを以前Slack上で将棋を実装した時に書きました。
Slackは非常に優れたプラットフォームで、前回作った将棋のようにゲームを作ることはもちろん、最近流行っているChatOpsに見られるように、メッセージ上に新しいインターフェースとしてのBotを作ることもできます。
他のサービスへのインターフェースとして動くBot、Siriのような人工知能として動くBot、チームメンバーやコミュニティの仲間などが入り混じってコミュニケーションを取ることができるプラットフォームはとても素晴らしいと感じています。その中でもSlackは優れたUIとBotの作りやすさ_(それと少し癖のあるAPI)_ を兼ね備えており、現在何か新しいことをメッセージプラットフォームに載っけたい!と考える人にとっては最適なプロダクトだと考えています。

今回もゲームを実装するプラットフォームとしてSlackを採用しました。

Slack上でオンラインゲームを作る方法

グラフィックス

当然ですが、Slackはゲームエンジンではないため、pixelを描画することや任意の画像、ポリゴンをレンダリングすることはできません。
前回作った将棋では、独自の絵文字を登録することにより、複雑な盤面をわかりやすく表示しました。

今回実装したい画面を見てみましょう。この画像は先程の動画のある一場面です。
Screen Shot 2016-12-01 at 1.29.33 AM.png

一般的な二次元マップになっています。マップチップ1つを絵文字1つで表現することができそうです。また必要なチップは壁、ブロック、爆弾などで、Unicode標準の絵文字だけで全て表現できそうですね。独自絵文字の登録は必要なさそうです。実際に絵文字を並べてMapを作ったものがこちらになります。
Screen Shot 2016-12-01 at 1.38.51 AM.png
うん、いい感じですね。
これは、このようなテキストをSlackに投稿することでレンダリングされます。

また、ゲームの状態が変化すると画面の再描画が必要になります。これはSlackの chat.update APIを使うことで解決できます。Slackでゲームを作るときのバイブルであるSlack as a Game platformにも書かれていますが、APIを呼び出しすぎるとAPI Limitに引っかかってしまうためご注意ください。

プレイヤーからの入力を受け付ける方法

一般的なプログラムと同じように、ゲームでは入力を受け取り、ゲームロジックに沿った処理をしたあとに出力することを繰り返します。Slack上での出力部分は先程述べましたが、入力はどうすればよいでしょうか。
一般的なゲームであればコントローラーから入力を得たり、PCゲームではキーボードの入力を直接取得できますが、Slack上でそれは実現できません。
これを実現するためにはいくつかの選択肢があります。

  1. チャットを使って入力を受ける
  2. リアクションを使って入力を受ける
  3. Web上などSlackプラットフォーム外に入力を受け付ける機構を用意する

今回のようなリアルタイム性が要求されるゲームでは2のリアクションを使う方法か3のSlackプラットフォーム外で入力を受け付ける方法が適しています。
今回はSlack上ですべてを完結させたいため、2のリアクションを使う方法を採用します。

今回のゲームは、上下左右へ移動、爆弾を置くためのAボタンの5つのボタンがあれば実現できます。
マップに対してBot自身が入力可能なリアクションボタンを置くことにより、ユーザーにリアクションを使うことで入力ができることを示します。
Screen Shot 2016-12-04 at 8.51.17 PM.png

SlackのRTM(Real Time Messaging)APIを使うことにより、リアクションの追加削除のメッセージを受け取ることができます。これはどちらもボタンが押されたことを意味します。このどちらかのメッセージを受け取ったときに、リアクションを追加(または削除)したユーザーの入力とし、ゲームロジックに反映させることで操作しやすいUIをSlack上に提供できます。

実装してみた

さて、ここまででSlack上にオンラインアクションゲームを作る方法を出力と入力に分けて見てきました。
ここで紹介してきた方法を使って実際に実装したゲームがこちらになります。
https://github.com/setokinto/slack-bomber

実際に使ってみたい方はDockerを使うことで簡単に試すことができます。
DockerがインストールされたPCで
docker run --env API_TOKEN="<Your Slack Bot Token>" setokinto/slack-bomber
API_TOKENのところを実際にSlackから取得したBot Tokenに置き換えた上で実行してください。
そのボットがいるチャンネルで
@bot-name start with @username (usernameには一緒に参加させたいユーザー名)
とすることで開始します。
Screen Shot 2016-12-05 at 12.21.32 AM.png
ぜひいろんなSlackチームで動かしてほしいです。

ゲームを進めて行くとこのような感じになっていきます
Screen Shot 2016-12-05 at 12.34.55 AM.png

実装にあたって

Slackでオンラインゲームを作ると、ネットワーク部分はすべてSlackが肩代わりしてくれるので、自分で実装することはゲームロジックだけに集中できるためとても楽に開発できます。作り方はほぼ一般的なゲームと同じなのですが、描画性能が著しく低いことだけは気をつけなくてはいけません。
一般的なゲームでは1秒間に30回や60回も画面を更新することが普通ですが、Slackで作るとそれは実現できません。今回は0.6秒または0.7秒に1度くらいに1度画面を更新しています。グラフィックスの項で書いたように、API Limitがあるからです。そこの部分だけは気をつけてコーディング、設計していく必要があります。

また、fpsが低いせいで操作ミスが多発してしまい、POOR MANと同じように1度爆発すればゲーム終了にしてしまうと戦いが始まる前に終わってしまうので、ライフ制を導入しました。

この記事を見て、Slack上にオンラインゲームを作りたいと思った方も、Slackの特徴を考えSlackならではの使いやすい特徴を考えて行くと良いでしょう。

まとめ

Slackは素晴らしいプラットフォームでチャットもできるしゲームもできます。それにAPIが広く公開されているために発展も考えられ、メッセージと言う誰もが使うソフトウェアに色々な機能やサービスがインテグレートされていくこれからには非常に未来を感じます。
他のメッセージサービスでもAPIを公開しているものが多くなってきています。Bot Platformは2017年も熱いものになると思われるので、皆さんいろんなものを作ってみましょう。
色々なサービスの中でもSlackは特にエンジニアに対して機能が開放されていて、APIも充実しています。APIは少し癖がありますが、機能は十分なので、まずはSlackをプラットフォームとして自分の思う何かを作ってみてはいかがでしょうか。

168
88
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
168
88

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?