アドオン作成自動化お試し

アドカレの記事です。
https://adventar.org/calendars/6286

アドオン作成は超エキサイティンですが画像を修正するたびにレイヤーをあれこれして画像を出力、pak化して動作確認...とそこはかとなく面倒な作業が多いです。
若さで乗り越える、札束で叩いて誰かに丸投げするなど世の中には素敵な解決方法がたくさんあります。
今回はそのうちの一つ、自動化して乗り切るという方法を紹介します。
※プログラミングに関する解説はありません。

自動化例

実際にアドオンを作るにあたって４つのめんどいポイントを自動化してみました。
お試しとして作ってみた「それなりにそれっぽいインフラアドオン集」、通称ISSでは300アドオン/2か月という太陽系最速でアドオンが作れました。

書き出し画像の加工

今回はイラストレーターで画像を作成し、その後背景色などの調整をするというフローにしました。
イラレを使ったのは単に持て余していたのと道路のような平面的な形状なら3Dモデルよりお手軽、ドット打ちよりアンチエイリアスがユーザースキルに依存せず使えるためです。
3Dモデルやpictbear、gimpのプロジェクトファイルから画像を書き出す場合も同じ要領になります。

https://github.com/128na/iss/tree/master/src/way/road

画像を背景色なし（透過）、特殊色未考慮の状態で書き出しました。

これを予め作成したdat定義に従って画像を重ねたり、背景色や特殊色を操作します。

https://github.com/128na/iss/blob/master/src/definitions.json

imageSetが画像の加工方法になります。
画像編集ソフトを使って輪郭のアルファチャンネルを調整、shaderで特殊色削除、追加するのと同じ操作をさせます。

way/road/0030.pngを例にして列挙されている画像を上から順に重ねていきます。

way/road/line_lowest.pngまでを画像編集ソフトで重ねてみました。
路面っぽいです。

次に128pxタイルで切り抜く必要があります。
それを行っているのがway/center_ec.pngの画像です。

画像を重ねた状態です。
ファイル名の末尾がec.pngの画像は重ねた後、赤色（#rgba=#f00f）を透過色（#0000）に置き換えるようにプログラムを組んでおきました。

最後に工事用のフェンスを添えて完成です。

ペイントソフトだと特殊色をが残ったままになりますが最終的な画像を出力する際に特殊色、発行色を削除するようにプログラムを組んであります。

一連の画像合成をdatファイルや画像ファイルが更新されたとき自動で実行されるようにしておけば何も考えずアドオン作成できるようになります。

datから翻訳テキスト抽出

翻訳テキストをアドオンに同梱する際にdatベースで管理できれば抜け漏れが分かりやすそうだったのでやってみました。
datには#以降をコメント扱いにする機能があります。
これを使って# @text 言語名:と書いてある行を翻訳テキストにとして扱うようにしました。言語名はja,enなど翻訳ファイルの言語名になります。

アドオン一覧webページ作成

随時追加変更されるアドオン一覧を見やすい形で提供できないかと思い、アドオン一覧を出力したらGithubPagesで自動公開されるようにしてみました。
リストアップは翻訳同様、datから必要な情報を抽出し、アイコン画像と合わせてマークダウン形式で出力するようにしました。

https://128na.github.io/iss/addons/

Githubのマークダウン表示だとアイコン画像のインラインスタイル指定がセキュリティの都合で削除されるようだったのでGithubPagesにしました
https://github.com/128na/iss/blob/master/docs/addons/index.md

リリース用のzip作成、公開

いつも何かしら入れ忘れることに定評のあるリリース用のzip作成も自動化しました。
リリースはGithubActionsを利用し、タグを付けてpushしたときにGithub社のサーバーで勝手にやってもらいます。

画像のマージ、pak化、翻訳テキストの作成、readmeなどを同梱してzipを作成しています。

公開の告知もポータルの記事更新時の自動ツイートでサクッと済ませています。
（ポータル側にAPIを用意して自動更新できるようにしたい）

おわりに