NalulunaWatchのウォッチフェイス画像の作り方

はじめに

今回は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

おわりに

今回は一から作りましたが、NalulunaWatchの説明ページに置いている白地背景のテンプレートに好きな絵を入れるなど、改変であればもっと簡単にできると思います。自分の好みにあったカスタムを楽しんでいただけたら幸いです。