屋根裏

コードを書いたりします

以前作ったアイコン生成ソフトをリメイクした

このブログの開設と同時にGitHubのアカウントも用意していたのですが、上げれそうなものがなかったので1年くらい前にOpenSiv3Dで作ったソフトをリメイクしてみました。今回はそのソフトの紹介です。

Sprator

Spratorは10x10のドット絵のアイコンを生成できるソフトです。GitHubReleaseページからダウンロードできます。

名前はSprite + generatorから取りました。私の使っているアイコンもこのソフトで作っており、シード値を80072997にすると右上に出てきます。

f:id:yurkth:20200206033222p:plain

使い方

ソフトを起動すると、上の画像のように7×7個のスプライトがランダムに生成されます。アイコンとしてエクスポートしたいものをクリックして選択し、右下にあるSaveボタンを押すとダイアログが表示されるのでpngで保存できます。

スプライトの色はランダムに決定されていますが、Base Colorからカラーコードを指定することもできます。輪郭線はBase Colorをもとに自動で決められています。背景色もBG Colorから指定可能です。

アイコンの大きさはSizeから設定できます。スプライトの大きさは、Twitterのような円形のアイコンでも見切れないように自動で調整されます。

右上のテキストボックスから任意のシード値を指定してロードできます。Refreshボタンを押すと、スプライトが新たに生成されます。

実装

各スプライトはランダムに生成されますが、GitHubのアイコンのように完全にランダムな点にしてしまうと、ドット絵のサイズが大きくなったときに見栄えがよくありません。そこで、スプライトの生成には2次元セル・オートマトンを用いていることにしました。2次元セル・オートマトンというとライフゲームが有名ですね。

スプライトがどのように生成されるかを確認してみましょう。10x10のスプライトを作りたいのですが、スプライトは左右対称にするため5x10の二次元配列を用意します。上辺、左辺、下辺のセルは輪郭線以外に使われないため、それ以外のセルにランダムに0(白)と1(黄)を割り当てたものが下の図になります。

f:id:yurkth:20200307152217p:plain

これを初期状態とし、二次元セル・オートマトンを使って次の状態を決めます。今回は各セルについて、そのセル自身と上下左右の4つのセルの状態から次の状態を決定していきます。今回設定したルールは以下の3つです。

  • 0のセルに隣り合う1のセルが1個以下なら、次は1になる
  • 1のセルに隣り合う1のセルが2個または3個なら、次も1になる
  • 上の2つ以外の場合は、次は0になる

このルールから、上の画像について次の状態を考えてみます。例えば①のセルは、現在の状態が0で隣り合う1のセルが1つなので、次の状態は1になります。同様に②のセルは、現在の状態が1で隣り合う1のセルが0個なので、次の状態は0になります。これをすべてのセルについて行うと下のようになります。

f:id:yurkth:20200307152245p:plain

同じ処理をもう一度行うと下のようになります。

f:id:yurkth:20200206033229p:plain

今あるものは最終的なスプライトの左半分なので、右にも対称なものを用意して輪郭線を付けたら完成です。0のセルが1つ以上の1のセルと隣接しているときに、そのセルを輪郭線としています。

f:id:yurkth:20200206033220p:plain

プログラムでは./Sprator/Sprite.cppinit関数で初期化を、grow関数でルールに則って状態の変更を、grid2image関数で状態が1のセルと輪郭線の用意を行っています。

デフォルトでは、grow関数は2回実行されるようになっていますが、右クリックすることで2→3→1→2→…と回数を変えることができます。現在、grow関数を実行している回数はウィンドウのタイトルバーにあります。

スプライトは10x10の大きさで生成されますが、./Sprator/Sprite.hにある変数spriteSizeから設定できます。4以上の偶数で設定できますが、いい感じの見た目になるのは8~12くらいです。Spratorのアイコンは8x8で作成しました。ルールを変えると他の大きさでもいい見た目になるかもしれません。

スプライトの大きさの変更と、ルールの設定は後のバージョンでGUIから行えるようにする予定です。

まとめ

もともとはゲームの敵を自動生成しようとしていたのですが、これアイコンに丁度いいなと思い今の形になりました。OpenSiv3DのSimpleGUIは簡単にボタンやテキストボックスを付けれるのでいいですね。

yurkth/sprator - GitHub

ちなみに以前作っていたものはこんな感じでした。

f:id:yurkth:20200206033233p:plain