格ゲー配信オーバーレイのカスタマイズ方法

こちらの記事にあるオーバーレイのカスタマイズ方法です。該当するファイルは全て表示側（graphics）のファイルになります。場所は

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

にあります。imgフォルダと各HTMLファイルがあるので開いてみていただければ大体の要素がわかると思います。上記の意味がわからない人は触らない方がいいです。

画像の差し替えで見た目を変える

tmpl.zip

121 KB

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

ダウンロード

上記はガイド付きのpsdファイルと、本番で使用しているのと同じpngファイルを圧縮しています。

kohaku_bg.psd　-　紅白戦の背景画像。kohaku_bg.png と言うファイル名で差し替える
long_board.psd　-　score_long.htmlのスコア部分。long_board.pngと言うファイル名で差し替え
short_board.psd　-　score_short.htmlのスコア部分。long_board.pngと言うファイル名で差し替え

loser.png　-　紅白戦、敗者の背景
inaction.png　-　紅白戦、対戦中の背景
standby.png　-　紅白戦、待機中の背景

不安な方はバックアップを取ってから差し替えてください。nodecgが稼働中でもリロードすれば反映されます。

文字の色や太さを変えたい場合

CSSの変更になります。今回は外部CSSにせず、直接HTMLファイルに記述していますので各自のhtmlを開いてください。紅白戦を例にします。

		.box {
			width: 300px;
			height: 180px;
			margin: 0px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #000000;
			/*  
			下部のプレイヤー名の色を黒から白に変えたい場合、上の
			color: #000000;
			を
			color: #ffffff;　
			に変更してください
			*/
			font-size: 32px;
			font-weight: bolder;
		}

CSSの/* */に囲まれた部分はコメントになります。
コメントにある通り、color: #ffffff;等に変更してください。

WEB色見本 原色大辞典 - HTMLカラーコード

上記のようなサイトを参考にしてお好きな色に変更してください。

font-size: 32px;　//文字の大きさ
font-weight: bolder;　//文字の太さ

同様に変更できます。CSSについては各自調べてください。

CSSに詳しい方が見れば配置等も変更可能だとわかると思います。idやclassの名前を変更せず、<script></script>部分を触らなければ動くはずです。

<script></script>内でも、スコア表示画面で初回読み込み時に降りてくるアニメがいらないと言う方は

  //移動アニメーションここから
 window.onload = function () {
   var scoreboard = document.getElementById("scoreboard");
   scoreboard.style.position = 'absolute';
   scoreboard.style.top = -40 + "px";
   anime({
     targets: '#scoreboard',
     translateY: 40,
     duration: 700,
     easing: 'linear'
   });
   //移動アニメーションここまで

ここをまるっと消すとアニメーションしません。その他のscript部分は触らない方がいいです。

以上です。画像とCSSの変更だけでかなり個性が出せると思いますので、これで楽しいゲーム配信ライフを送っていただければ幸いです。