フリーで使えるフォントを調べる

Unity5で毛筆フォントを使ったのでついでにいくつかフリーフォントを調べてみました。Unityの場合は、OpenTypeフォントをフォルダーに配置すればすぐ使えるので、どんどん使っていけそうです。

フォント情報などを調べると、アクセス稼ぎの大した情報もないサイトがたくさんありますが、いくつかよさそうなサイトを見つけたので情報共有です。

http://switch-box.net/free-japanese-writing-brush-fonts.html

2015年版!漢字が使えて無料日本語フォント50種

武蔵システム – OpenType.jp 前回使った、「青柳隷書しも」フォントなどがあります。

あと日中韓に対応するGoogle Noto Fontなどもいい感じです。

 

Unity5のParticleSystemでテクスチャを使う

Unity5のParticleSystem(Shuriken)について調べていたら、毛筆フォントをテクスチャ画像に使って、パーティクルを作ると面白い効果があるので、実際に作ってみました。この記事では簡単作り方の説明と、ソースコードとプロジェクトも配布をします。

a01
毛筆フォントを使って、パーティクルを作成!

作り方のポイント

上記GIFを見るとなんかUnity初心者には作れない凄いパーティクルに見えますが、たいしたことはありません。

  1. フリーの毛筆フォント(青柳隷書しも あおやぎ・れいしょ・しも)をWindowsにインストール。
  2. GIMPなどで512×512の「火」「滝」などの毛筆1文字画像を作成
  3. Unityで上記画像から、Particle用Materialを作成
  4. ParticleSystemで炎のように

※隷書体(れいしょたい):漢字の字体の1つで、昔の文字に使われている。

作り方のポイントは、Unityのパーティクルではなく、単純にGIMPなど画像処理ソフトでテクスチャ画像を用意することです。

フォントのインストール

武蔵システム – OpenType.jp – 青柳隷書しも から、フォントがダウンロードできます。Windows版をダウンロード、展開して、Windows10の場合はフォントファイルを右クリックして、コンテキストメニューからインストールが可能です。フォントをインストールする理由は画像編集ソフトで使うためです。

GIMPで毛筆1文字画像を作成

背景を透明にして、512×512で作成しました。特にサイズの意味はなく1024でも64でも問題ありません。今回配布するプロジェクトに私が作成したGIMPのプロジェクトファイルもAssets/Textures/KanjiAoyagi.xcfとしてあります。

002

Particle用Materialの作成

003

Materialを新規作成し、Shaderを[Particles/Additive]に変更し、上記画像のように画像ファイルを割り当てます。これでParticleSystemでこのマテリアルを使えるようになります。

ParticleSystemの作成

Hierarchyビューで、新規にParticleSystemを作成し、以下のように各モジュールの項目を設定します。

004

ParticleSystemモジュールでは、Start Size、Start Rotationで2つの値の範囲内で生成させるようにしています。またGravity Modifier(重力)を-0.8にして、上に早く移動するようにしています。

Velocity over Lifetime (生存期間中の速度)

005

右の▼をクリックすると、[Random Between Two Curves]が選択できます。これを選択すると、以下のような2つの曲線を使うことができます。

006

座標の味方

この座標の見かたですが、横軸0.0から1.0は時間で、0.0が開始時、1.0が終了時です。つまりパーティクル開始時から終了時になります。Velocity over Lifetime(生存期間中の速度)の場合、縦軸は、2.0から-2.0とありますが、2.0だとX軸に2.0の速度がかかるため、X軸方向に曲がっていくことになります。逆に-2.0だったら逆方向に曲がっていきます。曲がっていく感覚は文章では分かりづらいですが、実際にこの曲線を動かしながら、パーティクルをSceneビューで見てみると直感的に分かります。

今回の炎はちょっと独特で、最初X軸に1.5の速度で曲がっていたものを、途中で、-2ぐらいに変化させて、最後は-1.5にします。つまり、揺らいだ感じになります。

また、曲線が2つですが、パーティクルはこの赤い範囲内の値をランダムで取るので、パーティクル1つ1つの動きが異なるため炎のようになります。

座標の使い方

曲線上で、ダブルクリックすると、キー(曲線上の点)が新規作成され、それをドラッグアンドドロップすることで、曲線を動かせます。また曲線上で右クリックして[Add Key]からも作成できます。キーを削除する場合は、キーを右クリックして、[Delete Key]で削除できます。

a02
線をドラッグ
a03
線上をダブルクリックして、キーを作成
a04
キーをドラッグアンドドロップで移動

a05

 

Force over Lifetime (生存期間中の力)

生存期間中の力もX,Y,Z軸個別に設定しますが、この値はVelocityほど影響がないので、有効にすると柔らかい変化があります。Y軸、Z軸の画像キャプチャーを取ってませんが、適当でよいです。勉強のために設定して変化を見てみましょう。(微々たるもので他のモジュールを無効化しないとわからないです。)

007

 

Color over Lifetime (生存期間中の色)

008

Color項目の右の図をクリックすると、[Gradient Editor]が表示されます。上側に矢印と、下側に矢印がありますが、以下GIFのように、ダブルクリックで、矢印を追加できます。削除はDeleteキーです。

a06

上側はアルファチャンネルで、下側は色を変更します。上側で説明すると、

パーティクル開始から、50%付近までは、アルファチャンネルが255で色が表示されています。最後(100%部分)の矢印で、アルファチャンネルを0で、色が表示されていないので、パーティクル開始後、50%から100%で色が消える事になります。

下側も同様で、色を細かく変化するようにしています。今回のパーティクルは下から上に進むので、最初は白、黄色となり、最後は濃い赤から黒になります。実際にはアルファチャンネルで黒くなった状態は見えません。

Size over Lifetime (生存期間中の大きさ)

大きさもだんだん小さくするようにしました。今回は勉強のために2つの曲線ですが、別に1つの曲線でも問題ありません。

009

Rendererモジュールの設定

010

最初に作成した、Particle用のMaterialを設定します。

完成

これで炎のパーティクルが完成しました。滝のパーティクルも同じ要領です。ShapeをConeにして、90度回転し、そこから強めの重力を設定すれば、下に流れていきます。プロジェクトを配布しますので参考に作ってみてください。

このプロジェクトの配布

Unity5.4

https://hajimete-program.com/games/ParticleByNullpro.zip

Assets/Scenes/Main.unityをダブルクリックでシーンがUnityで起動できます。