はじめに
ELDEN RING NIGHTREIGNのイベント時に出てくる、あの独特な雰囲気のテキスト表示が好きなので任意の文字で再現できたら面白いなと思い、ブラウザ上で動くジェネレータを作ってみた。
環境
Windows 11
HTML5 / CSS3 / JavaScript作ったもの
Nightreign UI Text Generator
https://katsuobushifpga.github.io/web-tools/nightreign-ui-text-generator/
テキストボックスに文字を入力すると、ゲーム内のイベント通知のようなスタイルで表示され、そのまま画像として保存できるツールとなっている。
技術スタック
特別なフレームワークは使わず、HTML/CSS/JavaScriptの基本技術のみで実装している。
- HTML5 / CSS3
- Vanilla JavaScript
- html2canvas: DOM要素を画像化するためのライブラリ
工夫した点
1. CSSによる雰囲気の再現
ELDEN RINGのUIは、暗い背景に青白く光る文字、そして少し透けた背景ボックスが特徴的となっている。
これをCSSで再現するために、以下のプロパティを組み合わせた。
.ui-box {
/* 半透明の背景色 */
background: rgba(20, 25, 35, 0.75);
/* すりガラスのようなぼかし効果 */
backdrop-filter: blur(4px);
/* 上下の青白いボーダー */
border-top: 1px solid rgba(180, 200, 255, 0.6);
border-bottom: 1px solid rgba(180, 200, 255, 0.6);
/* 文字の光彩（グロー効果） */
text-shadow: 0 0 6px rgba(160, 190, 255, 0.4);
/* フォントは明朝体で厳かに */
font-family: 'Noto Serif JP', serif;
}特に backdrop-filter: blur(4px) が重要で、これにより背景が透けているような奥行き感を出すことができる。
また、text-shadow を使うことで、文字自体が発光しているような演出を加えている。
2. 入力時のフェードアニメーション
文字を入力した際、パッと切り替わるのではなく、一度フワッと消えてから新しい文字が浮かび上がるようにしてみた。
これにより、ゲーム内っぽい感じが強調される。
function updateText(value) {
// クラスを削除してフェードアウト（blur効果など）
uiBox.classList.remove("show");
setTimeout(() => {
// テキストを更新
uiText.textContent = value || "悪魔により、罪人が現れる";
// クラスを追加してフェードイン
uiBox.classList.add("show");
}, 400);
}CSS側では transition を設定しており、opacity と filter: blur() を同時に変化させることで、霧の中から文字が現れるようなエフェクトになっている。
.ui-box {
opacity: 0;
filter: blur(6px);
transition: opacity 1.2s ease, filter 1.2s ease;
}
.ui-box.show {
opacity: 1;
filter: blur(0);
}3. 高画質での画像保存
作成したテキストをSNSなどでシェアしやすいよう、画像保存機能を実装した。html2canvas を使用しているが、Retinaディスプレイなどでも綺麗に出力されるよう scale オプションを指定している。
function saveImage() {
html2canvas(uiBox, {
backgroundColor: null, // 背景を透過させる
scale: 2 // 解像度を2倍にして高画質化
}).then(canvas => {
const link = document.createElement("a");
link.download = "nightreign-ui-text.png";
link.href = canvas.toDataURL("image/png");
link.click();
});
}backgroundColor: null を指定することで、生成されたPNG画像の背景が透過され、他の画像と合成しやすくなっている。
おわりに
あの独特なUIスタイルを再現することで、任意の文字でふざけたり、真面目なメッセージを伝えたりと、様々な用途に使えるツールができた。
今後もこうした小さなジェネレータを作っていきたいと思う。