格ゲーライフポイント制対抗戦のカスタマイズ方法

前回記事のカスタマイズ方法についてです。

通常の対抗戦同様、graphics内のファイルを変更することになります。

fg_layout/nodecg/bundles/fighting-game-layout/graphics/

img/lifepoint.png が今回の背景画像になります。単純に同名ファイル差し替えで変わります。

通常の対抗戦での記事はこちらになります。参考までにご覧ください

nodeCG上で画像を変更する

ガイド付きのPSDファイルを置いておきます。大体の位置合わせに使えると思います。

lifepoint.psd

153028 Bytes

ファイルダウンロードについて

ダウンロード

nodeCGの背景をオフにし、OBS上で組み合わせる

画像を作るのがだるいとか、OBS上で手っ取り早くカスタマイズしたいという場合には、背景画像をオフにして透過させることで凝ったものは出来ませんがお手軽にできると思います。やり方です

fg_layout/nodecg/bundles/fighting-game-layout/graphics/lifepoint.html

こちらの21行目のあたり、背景画像を設定している部分をコメントアウトして無効にします。（行の先頭に//を記入するだけ）

		#board {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 1280px;
			height: 720px;
		//	background-image: url('img/lifepoint.png');
		}

このようにブラウザ上では真っ白な背景になりますが、実際には透過しています。

OBS上で組み合わせてみます。

色ソースを作成して画面サイズだけ合わせて、任意の色に設定します。もちろんここで画像ソースでも大丈夫です。

色ソースが一番下になるように配置すると完了です。他のロゴやチーム名などの要素もOBSで配置しても問題ないでしょう。デフォルトで暗い地に明るい文字が映えるようにしていますのでご了承ください。（文字の色を変えたい方は後述）

ライフポイントの形状について

★の表示になっていますが、変えることが出来ます。lifepoint.htmlの160行目あたりです。ここの★部分を他の記号に変えることで変更可能です。

const symbol = '★';

ライフポイントの色やサイズも変更可能です。

.pointplace{
	width: 50px;
	display: inline-block;
	text-align: right;
	color: #fffb00;
	font-size: 20px;
	font-weight: bolder;
	line-height: 0.9;
}

こちらのcolorやfont-sizeで色、大きさを変更できます。

各項目のCSS

.standby 　待機中のチームメンバー
.inaction　現在対戦中のチームメンバー
.loser　　負けてしまったチームメンバー
.pointbox　下部の残りライフポイント
.box　　下部に表示される現在対戦中の名前

詳細は書きませんが、cssで文字色や大きさ、間隔等も調整できます。ぜひオリジナリティのある画面を作ってみてください。