nalulululuna
fanbox
NalulunaWatchのウォッチフェイス画像の作り方
🕑 Added 2025-03-31 12:34:34 +0000 UTCはじめに
今回はNalulunaWatch modという、Beat Saberにアナログ時計を表示するmodを作りましたが、プログラミングの時間と同じくらい、ウォッチフェイス画像の作成が大変でした。たとえば、秒針が指す目盛り60個をマウスで1個1個描くなんてやってられませんし、どうすれば効率的に作ることができるか、その方法論…というほどのものではありませんが、いろいろと考えたので、ここで共有しておきます。
SVGで描く
SVGというのは、簡単に言えばテキストで図形を表現したものです。たとえば下記のテキストをメモ帳で入力し、circle.svgとして保存し、これをSVGに対応した画像編集ソフトで開くと、図のような円になります。
順に解説すると
1行目: 2048x2048のキャンバス
2行目: (x,y)=(1024,1024)の地点(キャンバスの中心)を中心とする半径1024の円形で、黒塗りつぶし
3行目: (x,y)=(1024,1024)の地点(キャンバスの中心)を中心とする半径500の円形で、白塗りつぶし
4行目: おわり
上から順に実行されるため、黒塗りつぶしの上に白塗りつぶしで、結果、円形の太線になります。
SVGを使うことで何がうれしいかというと、テキスト形式なので、各文がひとつの描画に相当するので、簡単に調整、やり直しが可能であったり、大量の目盛りを描くといった単純な繰り返しはAIを利用することで楽に生成することができます。
SVGビューアー
SVGを編集するにあたって、いちいちファイルに保存して、画像編集ソフトで開いて確認、という流れで作業する必要はありません。編集中にプレビューを表示してくれるサイトがあるので、そちらを利用させてもらいましょう。
SVG Viewer Online | View, Edit, & Download - Site24x7 Free Tools
https://www.site24x7.com/ja/tools/svg-viewer.html
こちらでプレビューを見ながら作業し、最終的な完成版を画像編集ソフトにもっていくと良いと思います。それでは次のセクションから、実際にウォッチフェイスを作っていきます。
外枠
まず外枠を作ってみます。シルバーの楕円と黒の円を描きました。
分目盛り
分目盛りは、幅5の白線を、(x1,y1)=(1024,400)から(x2,y2)=(1024,440)、つまり12時の位置に長さ40で用意し、それを6度ずつ回転させるのを60繰り返します。6ずつ増やして60行書くのは面倒なので、AIなりExcelなりに任せます。
(中略)
時目盛り
12時間の時目盛りは、(x,y)=(1024,415)、つまり12時の位置に半径20の円を用意し、それを30度ずつ回転させるのを12繰り返します。
数字
数字のテキストをSVGで入力することも可能なのですが、文字の扱いはSVG表示ソフトによって異なる部分があり、それによって微妙なズレが生じるので、SVGではなく画像編集ソフトで入れたほうが良いです。ということで、ここまでできたSVGを保存し、画像編集ソフトで開きます。
画像編集ソフトでは、SVGファイルを画像として扱う際、画像のサイズを選択することになりますが、あとで小さくすることは可能なので、ここでは大きめに2048x2048の画像に展開しました。
画像編集ソフトで、12、3、6、9の数字を入れ、background.pngとして保存します。
短針・長針・秒針
位置合わせのため、背景画像を残したままで針を作ります。
最後に、各針それぞれ別のSVGファイルに分けて、さきほどと同じように画像編集ソフトで読み込み、透過PNGとして保存します。
完成
background.png 背景
hour.png 短針
minute.png 長針
second.png 秒針
これらのファイルを
(Beat Saber Dir)\UserData\NalulunaWatch
に格納するとこの通り。Beat Saber内にどこかで見たような時計が表示されました。
今回作ったSVGファイルとPNGファイルをまとめておきます。使用は自己責任で。
おわりに
今回は一から作りましたが、NalulunaWatchの説明ページに置いている白地背景のテンプレートに好きな絵を入れるなど、改変であればもっと簡単にできると思います。自分の好みにあったカスタムを楽しんでいただけたら幸いです。
