カスタムタンク設定ガイド

リアクションタンク プラス — 自分だけのオリジナルタンクを作ろう

リアクションタンク プラスでは、プリセットのタンク以外に、自分で用意した画像を使ったカスタムタンクを設定できます。このガイドでは、カスタムタンクに必要な画像の仕組み、用意の仕方、設定方法をわかりやすく解説します。

1 カスタムタンクの概要

カスタムタンクを使うと、水槽、花瓶、ポーション瓶、試験管、バケツなど、好きな容器のデザインでリアクションタンクを表示できます。

最大3枚の画像で構成されます。必ず必要なのはマスク画像で、あとは背面画像前面画像を組み合わせます。

2 レイヤー構造を理解する

下(奥)から順に重なっています。

最前面前面画像ガラス面、ハイライト、光の反射など。透過率を設定できる。
エフェクト類湯気、炭酸泡、ビール泡、氷などの演出レイヤー
中間液体リアクション量に応じて上昇。マスクで容器の形に切り抜かれる。
(参照)マスク画像直接描画されない。液体の表示範囲を決める「型抜き」。
最背面背面画像容器の外形、色、模様など。
背面画像
液体
(マスクで型抜き)
前面画像
(透過率で重ねる)

3 用意する画像

背面画像
back.png
背面画像
任意 容器の全体像。液体の後ろに表示される。
前面画像
front.png
前面画像
任意 液体の手前に重なる。ガラスの光沢や縁の質感。
マスク画像
mask.png
マスク画像
必須 白い部分=液体が見える領域。

4 画像の組み合わせパターン(ライブデモ)

スライダーを動かして違いを確認してみてください。

パターン背面前面マスク向いている容器
背面+前面+マスク使う使う必須ガラスコップなど。おすすめ。
背面のみ+マスク使う必須陶器カップ、バケツなど。
前面のみ+マスク使う必須透明容器。OBSの背景が透ける。
80%
0.35
背面のみ
不透明な容器向き。
前面のみ(透過背景)
OBSの背景が透ける。
前面のみ(暗い背景)
液体の色が映える。
背面+前面(推奨)
もっともリッチ。おすすめ。
「前面のみ+マスク」パターンのポイント

背面画像を使わないため、OBSのブラウザソース越しに背景が透けて見えます。ゲーム画面の上にガラス容器が浮いているような演出が可能です。

5 前面画像の透過率設定

タンク前面の透過率」は 0(透明)〜 1(不透明)。デフォルト 0.3

3つの透過アプローチ

方法A: 画像自体を透過させておき、設定は 1.0 で使う。

方法B: 不透明な画像を使い、設定の透過率で半透明にする。手軽。

方法C: 画像にある程度透過を入れ、さらに設定でも微調整。

6 前面画像の活用テクニック

ガラスの質感・光沢

ハイライトだけを白い半透明で描き、他は完全透過に。

容器の縁・フチ

液面が上がっても縁が手前に見えるように。

装飾・模様のオーバーレイ

ラベルや模様を液体の上に浮かべる。

透明容器として背景を活かす

前面+マスクだけでOBSの背景を透かす。

7 設定手順

画像を用意する

mask.png は必須。back.png / front.png は任意。すべて同サイズの PNG。

settings.html を開く
「カスタム」を選択して画像をアップロード
前面の透過率を調整

「詳細設定」→「タンク前面の透過率」(0〜1)

液体・エフェクトを設定
ZIPをダウンロードしてわんコメに適用

8 画像作成のコツと注意点

マスク画像の作り方

液体を入れたい部分だけを白で塗り、それ以外は完全透過に。容器の内壁より少し内側に寄せると液体がはみ出ません。

背面と前面に同じ画像を使う

もっとも手軽。プリセットのタンクもこの方式。透過率 0.3 程度でガラス越し感が出ます。

前面のみ+マスクで透過容器

背面なしで前面とマスクだけ使うと、OBSの背景が透ける透明タンクに。

注意点

PNG形式必須 — JPEGは透過をサポートしていません。

画像サイズを揃える — 異なるとマスクの位置がずれます。

ファイルサイズ — 数MB以下に最適化してください。