【Unity】GUIを使った超シンプルな集中線の作り方 その1【Gimp2】

 以前に作った「伸縮性の高い石頭少女いしあたまーるちゃん」で集中線の演出がありました。こんな感じです。

       \ててーん/
 いしあたまーるちゃん集中線
 集中線以前に画像の意味がわからないと思うかもしれませんが、そういうゲームです。


 この間公開した「逼迫性の高いだんごむし少女だんごむしむしむしむっしちゃん」でもこの集中線を使いました。せっかくなのでその制作過程を載せていきます。

 集中線の作り方は、Gimp2で集中線の画像の作り方、Unityでの集中線演出の作り方、の二回に分けて説明していく予定です。
 今回はGimp2で集中線の画像の作り方について説明していきます。


用意するもの

Unity5(使用したバージョンは5.3.1)
Gimp2(使用したバージョンは2.8.14)

だけです。


Gimp2で集中線の画像を作る

 まずGimp2で集中線の画像を作成します。幸いなことにGimp2には、デフォルトで集中線を作るフィルターが入っているので、それを利用して作成します。


準備

①はじめに、集中線を使うゲームの解像度に合わせて適切なサイズの画像を新規作成します。今回は640*480にしました。(ファイル->新規作成)

②次に、レイヤーにアルファチャンネルを追加します。集中線以外の部分を透明にするためです。(レイヤー->透明部分->アルファチャンネルの追加)

③アルファチャンネルが追加されたらDeleteキーを押します。すると、作成した画像が透明になります。

 ここまででこのような状態になっているかと思います。
集中線作り方スクショ1


集中線フィルターの適用

 ここから集中線を作っていきます。

④集中線フィルターを選択します。(フィルター->下塗り->集中線)

 すると、このような集中線の設定ダイアログが開きます。
集中線作り方スクショ2


 4つ設定項目がありますが、「線数」と「鋭さ」はそのままの意味なのでおそらく問題無いでしょう。

 「オフセット半径」は集中線を作成した時に、中心がどれくらい空くかを表しています。オフセット半径を大きくすると、中心の空白は大きくなって集中線は短くなり、オフセット半径を小さくすると、中心の空白は小さくなって集中線は長くなります。
 「複雑度」は集中線の長さのばらつき度合いです。大きいほど集中線の長さがばらばらになり、逆に小さいほど均一になります。

 今回は「線数」を50、「鋭さ」を2.0、「オフセット半径」を120、「複雑度」を30に設定しました。「OK」を押せば集中線が生成されます。

集中線作り方スクショ3


色の変更

 最後に、集中線の色を白にします。白にしておくことで、Unity側のマテリアルの設定で集中線の色を替えることができます。

⑤色交換ダイアログを開きます。(色->カラーマッピング->色交換)

⑥そして「元色」を黒に、「交換色」を白にし、「OK」を押します。

 これで完成です。
集中線作り方スクショ4


完成

 最後にPNGファイルとしてエクスポートしましょう。

 完成した画像がこちらです。白い背景と被って見えなくなるため、画像の背景色を黒くしています。
集中線作り方集中線
この画像はどんな用途にでも自由に使っていただいて構いません。報告や権利表記は不要です。


 次回はUnity側での設定について解説します。
スポンサーサイト



コメント

コメントの投稿

非公開コメント

プロフィール

Cdec

Author:Cdec
情報系修士出身のIT系企業会社員。趣味で変なゲームを作ったり、気まぐれにゲームしたりしています。

■メインPC
Win11Pro, Core i7-13700K, DDR5-6000 32GB*2, SSD 512GB, HDD 2TB*2, RTX4070
■サブPC1
Win11Pro, Core i5-11400H, DDR4 16GB, SSD 512GB, RTX3050 Laptop
■サブPC2
MacBook Air M2(2022年)
■ファイルサーバー
WinServer2016Standard, DDR4-2133 2GB*2, Corei5-6500, SSD 128GB, HDD 1TB*2+2TB
■趣味制作
ゲームを作ってます。
・C#(Unity):
・C++(DXライブラリ)
・Python
■仕事
主にWebサービス開発をしてます。
・Pythoh/JavaScript/TypeScript