2021-05-06

TRPG用のオンセツールを作ったので試運転した

TRPG

TRPG(テーブルトーク・ロールプレイング・ゲーム)のセッション(複数人プレイ)をオンラインで行うための身内用ツールを作ったので、友人に協力してもらってテストプレイしてもらったよという記事。

Github - tsrkzy/hiace
作ってる最中にvue3が出た。2からマイグレーションするか考え中。

データの共有はfirebase。
キータイプ(Slackなどで〜が入力中のアレ)はGCP + websocket。
本当はwebsocketじゃなくてRTCで実装したかったけど、https越しのハンドシェイクがどうしてもうまくできず断念。
GCPだと毎月缶コーヒーが数本買えてしまうお金がかかるので将来的にRTCにしたい。

氷丼についてあれこれ

神我狩(PL)、SW2.5(KP,PL)としてオンセを行った。
つらかった。非常につらかった。思い出せる限りで以下の不具合がある。

ルームの入室が安定しない
チャットを全てレンダリングしてるので2000行程度でチャットが重くなる
作成したコマ(キャラクタ)の説明を編集できないので再作成する必要がある
部屋に接続中の人数が2人以上の場合、部屋データやチャットデータをDL出来ない

ルーム接続時のどう考えても非同期処理をしてる際に
window.confirm()叩いてスクリプトの実行をブロックしている時点で嫌な予感はしてたけど。

開発を取り巻く環境

HillTop_TRPG氏による開発。
amazon越しにカンパも募っており、どどんとふ作者のたいたい竹流さんも(どの程度かはさておき)サポートしてるらしい。

この記事の執筆時点(2021-05-06)で、公式の更新履歴は以下の通り。

2020/07/23 どどんとふ公式鯖のQuoridornリメイク版リンク追加
2020/09/04 「リリース時期について」を追記

リリース時期についてのセクションには

Quoridornは2020年9月時点で未だにα版です。今のQuoridornでも限られた機能に限り利用することが可能ですが、どどんとふを使っていた方々が求めるクオリティに仕上げるのは、少なくとも年内には不可能であると見込んでいます。

の記載があり、少なくともmasterブランチへのコミットは行われているようだった。

github.com

作者氏のTwitterを見に行ったところ、最新のツイートに某ココフォリアでオンセをしたスクリーンショットが載っており、もう開発諦めてるんじゃないかと心配になったけど杞憂らしい。

中途半端な文章になっちゃった。眠いので寝ます。

2021-05-06

ImagemagickでTRPGの背景用の画像を作る

TRPG

便利な時代になったもので、「廃墟倉庫」「坂道夜」とかで画像検索すれば、風景画像は簡単に手に入る。
それらを身内で行うTRPGオンセの背景画像に使えるように加工するって記事。

先に言ってしまうと、PhotoshopかClipStudioのイラスト調フィルタ使ったほうが早い。
この記事で書いてる方法のメリットはバッチ処理ができるようになるぐらいだと思う。
あと自己満。

要件

別にそのままでも使えるんだけど、普通の風景写真だとキャラの立ち絵がイラストなので浮く。
なので風景画像をイラスト調にしたい。

自分の理解としてはイラスト調 ≒ ディフォルメなので、
結論から言ってしまうと以下の処理を行ってそれっぽくする感じになった。

減色処理
彩度を下げる(きらびやかな背景だとコマが見づらいので下げた)
メディアンフィルタ

Imagemagickについては、前の記事のpython3 + ffmpeg用の使い捨てdockerコンテナを作るに入れた。
というか入ってた。
ffmpegを入れる時に一緒に入ってるんですかね。調べても良かったんだけど本筋から外れるし無視。

使い方

公式……が読みづらかったので主に下記サイトを参考にした。

減色処理 ImageMagick の減色処理 - Qiita
彩度を減らす imagemagick 画像加工２（-modulate -contrast） | 丸ノ内テックブログ

+dither -colors 96 で96色まで減色。その際にかなり賢いアルゴリズムを使っているようで、
相当カラフルな画像を使わない限りは、見た目に違和感はでなさそう。

-modulate 100,30,100 で彩度減。HSVで伝わる人には分かりやすいかも。
Sは2つ目の引数なので、元を100としたら30まで下げてる。

-median 8 でメディアンフィルタ。
引数の名前がradiusなので、おそらく半径8pxの円で中央値取ってるんだと思う。

  convert \
  "${INPUT_PATH}" \
  +dither -colors 96 \
  -modulate 100,30,100 \
  -median 8 \
  "${OUT_PATH}"

結果

比較用に2枚。Google画像検索で引っ張ってきたやつ。
ボタッと厚塗りしたような見た目になっているはず。
想像してたのと違ったらごめん。

フィルタ前

f:id:tsrkzy:20210506024040j:plain

フィルタ後

f:id:tsrkzy:20210506024019j:plain

2021-03-15

python3 + ffmpeg用の使い捨てdockerコンテナを作る

ffmpegを動かしたかったが、ffmpegがpythonを利用しているせいか、
OSXに直接インストールするとOSXのpythonの生態系が破綻する。(経験済み)

うまく入れてやれば棲み分けできるのかもしれないけど、
めんどいので表題の通り、使い捨てのpython3+ffmpegのコンテナを作る。

参考

dockerで簡易にpython3の環境を作ってみる - Qiita

偉大な先人に感謝。これにffmpeg入れるだけの記事です。

構成

# コンテナの/root/opt/にopt/を割り当て
./
 - Dockerfile
 - docker-compose.yaml
 - opt/  # => /root/opt

Dockerfile

FROM python:3
USER root

RUN apt-get update
RUN apt-get -y install locales && \
  localedef -f UTF-8 -i ja_JP ja_JP.UTF-8
ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL ja_JP.UTF-8
ENV TZ JST-9
ENV TERM xterm

# -- 追加 -- #
RUN apt update
RUN apt -y upgrade
RUN apt install ffmpeg
# -- ---- -- #

RUN apt-get install -y vim less
RUN pip install --upgrade pip
RUN pip install --upgrade setuptools

docker-compose.yaml

version: '3'
services:
  python3:
    restart: always
    build: .
    container_name: 'python3'
    working_dir: '/root/'
    tty: true
    volumes:
      - ./opt:/root/opt

チートシート

# コンテナ再作成して起動
docker-compose up -d --build

# コンテナのbashを実行
docker-compose exec python3 bash

# コンテナ削除
docker-compose down

tsrkzy blog

JavaScriptしか書けない人の備忘録