MeshCreateの使い方｜ブラウザでエフェクト用メッシュを作ってUnityへ

エフェクトのテクスチャを作ったとき、「帯や輪に貼るとどう見えるだろう」「この形に沿って流してみたい」と思うことがあります。

その形づくりと確認を、ブラウザ上で行えるツールが MeshCreate です。プリセットから形を選び、テクスチャを貼って、曲げたり流したりしながら見た目を調整できます。以前のMeshFlowを改良し、名前も新しくしました。

どんなものを作れる？

MeshCreateは、ゲームのエフェクトに使うメッシュを作るためのツールです。メッシュは、画像を貼り付けるための「形」と考えると分かりやすいと思います。同じテクスチャでも、帯、筒、輪など、貼る形を変えることで印象が変わります。

たとえば、弧を描く斬撃、一直線に伸びるビーム、地面に広がる衝撃波、上へ流れるオーラ、カーブに沿った軌跡などを試せます。「レシピ」には形・画像・動きを組み合わせた完成見本があるので、まずは気になるものを選び、少しずつ調整してみてください。

左上で「3D」と「2D 平面」を切り替えられます。立体的なエフェクトに加え、2Dの斬撃、きらめき、星形のヒット表現などにも使えます。2Dでは正面から平面の形を編集できるので、奥行きを気にせず作業できます。

まずはレシピから試す

画面の左側は形とレシピ、中央はプレビュー、右側は細かな設定です。下には再生操作と、テクスチャを流す速さがあります。

1. 左側の「レシピ」から「斬撃」などを選びます。初回の案内では「レシピから始める」も使えます。
2. 中央の表示を見ながら、右側の「形」で大きさや幅を調整します。
3. 「画像」でサンプルを変更するか、手持ちのPNG・JPG・WebPを中央へドラッグ＆ドロップします。
4. 下のU・Vの速さを変え、画像の流れを確認します。Spaceキーで再生・停止できます。

黒背景の光の素材は、画像の「重ね方」を「加算」にすると試しやすくなります。透明部分のある画像では「アルファ」を選びます。素材に合わせて切り替えてみてください。

TextureCreateで作った画像をすぐに試す

TextureCreateと連携しているので、作ったテクスチャをそのままMeshCreateへ渡せます。テクスチャの作り方は、TextureCreateの使い方でも紹介しています。

1. TextureCreateでテクスチャを作ります。
2. 「MeshCreateで試す」を押します。
3. 別タブで開いたMeshCreateに画像が読み込まれます。
4. メッシュの形、貼り方、流れる速さを調整します。
5. TextureCreateへ戻って画像を変更し、「MeshCreateへ更新」を押します。

再送すると、開いているMeshCreateの形やUV、重ね方を保ったまま、画像だけが更新されます。形を作り直さずに、模様の太さや色の違いを比較できます。画像を作る画面と、エフェクトとして見え方を試す画面を行き来する使い方です。

連携には、同じブラウザで両方のサイトを開いてください。画像の受け渡しは端末内で行います。直接連携が使えない環境では、TextureCreateからPNGを保存し、MeshCreateへ読み込んでも使えます。「画像の受信を一時停止」で更新を止めることもできます。

線を描いて形にする

用意された形だけでなく、「線を描いて作る」から自分でカーブを描けます。画面をなぞった線がメッシュになり、帯、両端の細い斬撃、筒状のチューブへ切り替えられます。

描いた後は「カーブ」モードで点を動かし、曲がり方を整えます。幅、始点と終点の太さ、ひねりも調整できるので、剣の軌跡や、うねる光の帯などの形を考えるときに使えます。

さらに右側の「変形」では、ねじる、曲げる、波うち、ゆらぎ、ミラー、並べるなどを重ねられます。順番を変えたり、一時的に無効にしたりしながら、見た目を比べられます。

細部を触りたいときは、「頂点」で点を動かす、「スカルプト」で面をなでる、「ペイント」で色や透明度を塗る方法もあります。最初からすべてを使う必要はなく、形のプリセットと数個の設定だけでも始められます。

テクスチャの貼り方と流れを調整する

UVは、メッシュのどの場所に画像のどの部分を貼るかを決める座標です。「UV・動き」では、画像のくり返し、ずらし、回転、反転を調整できます。中央のUVビューを開くと、画像とメッシュの対応を見ながらUVを直接編集できます。

下のU・Vの速さを変えると、形の上をテクスチャが流れます。カーブで作った帯なら、「線の長さ方向を」で「Uにする」を選び、U方向の速さを調整すると、線に沿った流れを試せます。

たとえば光の帯なら、まず形に合う画像のくり返しを決め、次に流れる方向と速さを調整すると確認しやすくなります。流れ続ける動きのほか、行って戻る動きや、スプライトシートを使うフリップブックも設定できます。

保存と書き出しの使い分け

続きから編集したいときは、上部の「保存」から .meshflow ファイルを保存します。画像、形、カーブ、変形、設定などをまとめた再編集用のファイルです。自動保存もありますが、別の端末へ持ち運ぶ場合や作業を残したい場合には、ファイルで保存しておくと便利です。

Unityへ渡すときは「書き出し」から「Unity用 ZIP」を選びます。

1. ZIPを展開し、中のMeshFlowフォルダをUnityプロジェクトの Assets/MeshFlow に配置します。
2. Exports内の mesh.meshflow.json を選択します。
3. Assets > MeshFlow > Build Prefab From Mesh Data を実行します。
4. 生成されたPrefabをシーンに配置します。

Unity用ZIPには、メッシュやテクスチャに加え、マテリアル、UVスクロール、フリップブックなどを扱うためのファイルが含まれます。既存の Assets/MeshFlow がある場合は同じ場所に統合し、スクリプトを重複させないようにしてください。

ファイル拡張子の .meshflow とUnity側のフォルダ・メニュー名は、以前のMeshFlowとの互換性のため、そのまま残しています。

そのほか、形とUVを渡す OBJ、テクスチャなどをまとめる GLB、現在の見た目を画像にする プレビューPNG、UV展開図のPNGも書き出せます。OBJには頂点カラーや動きが含まれず、GLBの加算合成やUVスクロールはメタデータとして保存されるため、読み込み先での設定が必要です。

まずはレシピを一つ開き、画像と流れる速さを変えるところから触ってみてください。TextureCreateで作った素材も、平面の画像で見るときとは違う表情を試せます。