ゲームをしたよログ

goma氏がやったゲームをゆるゆる書くブログ

「え、今何色が喋ってんの？」を無くしたいamong usハック

オンライン

この記事は オススメのゲームの話をする Advent Calendar 2020 の記事として投稿しています。

早速ですが、今わたしはamong usというゲームにドハマリしています。

人狼系ゲームと呼ばれ、
プレイヤーとの会話とタスクと呼ばれるミニゲームによって進行していきます。

わかりやすい記事はこちら
ururu-felstalker.hatenablog.com


対応ハードが、スマホアプリ(iOS/android)とsteamとなっていて
クロスプレイも可能であることから
人も誘いやすくて最高です

このゲームは現在、日本語の対応がされていないのですが
近々日本語対応するぞーという情報が出てきているので
vtuberのゲーム配信と相まって今後さらに人気になるだろうなと思っています




さて、ゲーム概要はそんなところにして

among usを音声通話ありでやっているときに
私はある問題に出くわします

それは「え、今何色が喋ってんの？」問題です


among usのプレイヤーは様々な色キャラクターを操作しています
そしてディスカッション時に度々話題に上がるのはキャラクターの色の話

「赤色が怪しい動きをしてきた」
「視界の端に黄色がいた」
「青色が緑色をサックリやってた」


さらに、会話に出てくる色の話も大事なんですが
何色が発言していたのかというのもゲーム中の大きなヒントになります


じゃあ、何色が喋っているかゲーム中で分かる画面があるのか？というと
それが存在しません

f:id:gomayumax:20201210135001p:plain
ディスカッション中はこういう画面が固定で表示される

名前とキャラクターのリストが表示されるだけで
発話者は誰か分からないです

仮にdiscordの音声通話部分を見ても
何色のキャラクターを操作しているか分からないですね
(ニックネームに現在のキャラクターの色を書いておくというハックもあります)



あ〜〜〜〜ひと目で何色が喋っているか分かるようにしたいよぉインターネットォ

ということで解決法です↓

discordの音声通話アイコンをamong usのアイコンに差し替える技

Image from Gyazo
こういうのを作る

TRPGとかの動画でよく見る
立ち絵が発話に応じてピコピコ光る方法にamong usのアイコンを当てています

やり方

この記事が全てだっ！！（ドンっ

manten-do.net

記事にも書いてあるんですが
Discord StreamKit Overlay から
[OBS] -> [VOICE WIDGET] -> [Server/channelの設定]をすると
音声通話の表示部分が取得できます

その表示画面に対してCSSで上書きを行い
ピコピコハックを実現しています

適用するCSS

プレイヤーごとに設定をしていきます(大変、たぶんもっと良い書き方ある)

参考記事のCSSとほぼ一緒ですが
サイズや名前の表示箇所などが
後述するアイコンに合うように調整しています

li.voice-state:not([data-reactid*="discordのuser_id"]) { display:none; }
.avatar {
  content:url(among usアイコンの画像URL);
  height:200px !important;
  width:200px !important;
  border-radius:0% !important;
  filter: brightness(50%);
}

.speaking {
  border-color:rgba(0,0,0,0) !important;
  filter: brightness(100%);
}

li.voice-state{ position: static; }
div.user{ position: absolute; left:100px; top:110px; }

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
アイコン

ここから作らせてもらっています
picrew.me
※2020年12月10日現在、個人/非商用利用のみ許可されています (詳しくはhttps://support.picrew.me/faq/1116)

discordのユーザID取得

これ最初私も悩みましたが
公式記事の通りにやると取得できました
ユーザー/サーバー/メッセージIDはどこで見つけられる？ – Discord

ハックに至ったモチベ的なもの

このアイコンを光らせる手法(以下、ピコピコハック)にたどり着いたのは
そもそも、OBSの配信で発話を視覚的に見せたいという気持ちからでした

そして超参考記事にたどり着き
今もゲームのプレイ動画で利用させてもらっています(限定公開/非商用)

記事中にはOBSでのやり方が記載されていますが
ブラウザでも可能です。

「別に配信したいわけじゃないんだよなぁ」という人は
以下のブラウザでのやり方で実現すると良さそうです。

余談: ブラウザでピコりたい

streamkit.discord 上での設定を終えると、
音声通話画面を表示するURLが発行されます

f:id:gomayumax:20201210142826p:plain

そのURLにアクセスして開発者ツールを開き
上記で紹介したCSSをstyleタグを使うなど適応してみてください
among usアイコンでピコピコできます

原理はOBS上で行っていることと何ら変わりありません
(OBSも指定URLに対してCSSを上書きをして出力している)

最後に言いたいこと

among usは
自分以外のプレイヤーによる他視点ゲーム配信が最も楽しい！！！！！！！