文書/MMMSpriteMaker のバックアップソース(No.3)

MikuMikuMoving用2Dアクセサリ＆エフェクト作成ツール『MMMSpriteMaker』の使用方法マニュアル。

#contents

*この文書について [#about-page]

この文書では、MikuMikuMoving用2Dアクセサリ＆エフェクト作成ツール[[『MMMSpriteMaker』>ダウンロード#mmm-sprmake]]の使い方を解説します。

現在は下記の環境に基づいて記載しています。

-MMMSpriteMaker version 1.0.0
-[[MikuMikuMoving>https://sites.google.com/site/mikumikumoving/]] version 1.2.5.9

過去からの更新箇所については[[更新履歴>#history]]を参照してください。

この文書はツール導入済みの環境を前提に記載されています。~
ツールのインストール手順については同梱のreadme.txtを参照してください。

文書内で使われている画像の一部には、[[はっぷんずげ〜と>http://happen.kotonet.com/]]様の東方ドット絵を利用させていただきました。~
この場を借りて御礼申し上げます。

*ツール概要 [#about-tool]

『MMMSpriteMaker』は、別ツール等で作成したテクスチャアトラスから、MikuMikuMoving上で表示できるスプライト、ビルボード、板ポリゴンを自動生成するツールです。

#ref(MikuMikuMoving上での表示例.jpg,left,nolink,MikuMikuMoving上での表示例);

:テクスチャアトラス（Texture atlas）とは|
--複数のテクスチャ（画像）を1つのテクスチャファイルにまとめたものです。
#ref(テクスチャアトラス説明画像.png,left,nolink,テクスチャアトラス説明画像);
--ゲーム開発では容量削減や描画負荷軽減のためによく用いられており、開発ツールによってはスプライトシートと呼ばれる場合もあります。
--当ツールでは、テクスチャファイルそのものではなく、テクスチャファイルと同時に作成される座標情報ファイルを利用します。
:スプライト（Sprite）とは|
--当文書では、3D空間を用いるムービー作成ツールやゲームなどの上で表示される2D画像のことをさします。
--3D空間上の視点（カメラ）が移動しても位置が変動しません。
--ちなみに「Sprite」を和訳すると「妖精」です。
:ビルボード（Billboard）とは|
--当文書では、常に視線と真逆を向く（つまり常にカメラ目線の）板ポリゴンのことをさします。
--当ツールで作成するビルボードは、視線（カメラ）の角度にのみ追従し、アクセサリ自身の回転は通常通り適用されます。~
そのため、アクセサリ自身を回転させることで、常に斜めや背面を向くビルボードを描画することもできます。

当ツールではテクスチャアトラスの作成はサポートしていません。~
当ツール用のテクスチャアトラスを作成する方法については、[[テクスチャアトラスについて>#atlas]]の項を参照してください。

*基本的な使い方 [#basic]

+~テクスチャアトラスを作成します。~
ここではテクスチャファイル ''&ref(sample.png,noimg,noicon);'' と座標情報ファイル ''&ref(sample.plist,noimg,noicon);'' を作成したものとします。
#ref(sample.png,left,nolink);
--~テクスチャアトラスの作成方法については、[[テクスチャアトラスについて>#atlas]]の項を参照してください。
+~『MMMSpriteMaker』を起動して、アクセサリ＆エフェクトの出力設定を行います。~
詳しくは[[設定画面>#config]]の項を参照してください。
--設定を変更すると自動的に保存されます。
--前回と同じ設定で利用する場合は設定画面を開く必要はありません。
+~座標情報ファイル ''sample.plist'' を下記のいずれかの方法で当ツールに渡します。
--~設定画面にドラッグ＆ドロップする。
#ref(設定画面にドラッグ＆ドロップ.png,left,nolink,設定画面にドラッグ＆ドロップしている例);
--~『MMMSpriteMaker』のプログラムアイコンにドラッグ＆ドロップする。
#ref(プログラムアイコンにドラッグ＆ドロップ.png,left,nolink,プログラムアイコンにドラッグ＆ドロップしている例);
--~『MMMSpriteMaker』へのショートカットを作成し、そのショートカットにドラッグ＆ドロップする。
#ref(ショートカットにドラッグ＆ドロップ.png,left,nolink,ショートカットにドラッグ＆ドロップしている例);
+~自動的にアクセサリ＆エフェクトの作成処理が始まります。
+~処理が成功すると、座標情報ファイル ''sample.plist'' と同じ場所に下記のファイルが出力されます。
--アクセサリファイル ''sample.x''
--エフェクトファイル ''sample.fx''
+~MikuMikuMovingを起動します。
::通常エフェクトとして出力した場合|
+++~先ほど出力されたアクセサリファイル ''sample.x'' とエフェクトファイル ''sample.fx'' を読み込みます。
+++~「ファイル」メニュー内の「エフェクト割り当て」を開き、アクセサリにエフェクトを割り当てます。
~&ref(エフェクト割り当てボタン.png,left,nolink,エフェクト割り当てボタン); → &ref(エフェクト割り当て画面.png,left,nolink,エフェクトを割り当てているところ);
::ポストエフェクトとして出力した場合|
+++~先ほど出力されたエフェクトファイル ''sample.fx'' を読み込みます。
+++~他のポストエフェクトがある場合、「スクリーン」メニュー内の「描画順変更」を開き、他のポストエフェクトよりも後に描画されるようにします。
~&ref(描画順変更ボタン.png,left,nolink,描画順変更ボタン); → &ref(描画順変更画面.png,left,nolink,描画順を変更しているところ);
+~目的の表示が行われていることを確認します。
--エフェクトの ''Index'' を増減させることでテクスチャ表示が切り替わります。（テクスチャアトラスに画像を2つ以上含めた場合のみ）
--その他、アクセサリやエフェクトに対して行えることについては、[[MikuMikuMoving上での操作>#on-mmm]]の項を参照してください。

*設定画面 [#config]

『MMMSpriteMaker』を直接起動することで、設定画面が表示されます。

#ref(設定画面_初期状態.png,left,nolink,設定画面の初期状態);

設定画面で設定できる項目は下記の4つに分類されます。

-[[描画方法>#config-rendertype]]
-[[基準点位置>#config-basepoint]]
-[[画像反転>#config-flip]]
-[[マテリアル>#config-material]]

**描画方法 [#config-rendertype]

MikuMikuMoving上でどのように描画させるかを設定します。~
描画方法は下記の4種類あり、方法ごとに追加の設定項目があります。

-[[スプライト>#config-rendertype-sprite]]
-[[スプライト(dot by dot)>#config-rendertype-dotbydotsprite]]
-[[ビルボード>#config-rendertype-billboard]]
-[[板ポリゴン>#config-rendertype-polygon]]

***スプライト [#config-rendertype-sprite]

視点移動に影響されない2D描画を行います。~
アクセサリのXY位置は2D座標上の位置を表すようになります。

追加の設定項目は下記の通りです。

:ポストエフェクトとして描画|
チェックを付けると、ポストエフェクトとして2D描画を行うようになります。~
描画される内容自体は通常エフェクトの場合と同様ですが、他のポストエフェクトの影響を受けずに描画することができます。~
ただし他の3Dモデルより奥に描画することはできなくなります。~
ポストエフェクトにした場合のMikuMikuMovingへの読み込み手順については[[基本的な使い方>#basic]]の項を参照してください。
:背面を描画|
通常、スプライトの背面は描画されませんが、この項目をチェックすると描画されるようになります。~
スプライト自身を回転させることで背面を向けることができます。
:ピクセル倍率|
実画像の1ピクセルに対応する2D座標上のサイズを設定します。~
後述のビューポート幅とセットで設定します。
:ビューポート幅|
2D描画領域の横幅を設定します。縦幅は出力スクリーンサイズの縦横比から自動的に定まります。~
ピクセル倍率とビューポート幅の設定によって、画像がどれくらいの大きさで描画されるかが決まります。~
例えばピクセル倍率が 0.1 でビューポート幅が 64.0 であれば、2D描画領域の横幅は 64.0 ÷ 0.1 ＝ 640 ピクセル相当になります。
:Zオーダー範囲|
例えば 10.0 であれば、アクセサリのZ位置が 0.0 から 10.0 までの範囲内に収まる場合のみ描画されます。~
10.0 は最奥となり、他の3Dモデルよりも奥に描画することができます。（ポストエフェクトにした場合を除く。）

***スプライト(dot by dot) [#config-rendertype-dotbydotsprite]

基本的には[[スプライト>#config-rendertype-sprite]]と同じですが、常にドットバイドット（2D座標上のサイズ 1.0 ＝ 実画像の 1 ピクセル）となるように描画されます。~
つまり、ピクセル倍率に 1.0 、ビューポート幅に描画領域の横方向ピクセル数が常に設定されているようなものです。~
その他の設定項目については[[スプライト>#config-rendertype-sprite]]と同じであるため、そちらの説明を参照してください。

描画領域のサイズに依存せず常に固定サイズであるため、編集時のスクリーンサイズと出力スクリーンサイズが異なる場合、編集時と出力時で見栄えが異なってしまいます。~
編集時と出力時のスクリーンサイズを揃えないと非常に編集しづらい描画方法です。

編集時と出力時の見栄えを揃えつつドットバイドットで出力したい場合、描画方法は[[スプライト>#config-rendertype-sprite]]にして、ピクセル倍率とビューポート幅の設定を出力スクリーンサイズに応じたものにすることを推奨します。~
例えば出力スクリーンサイズの設定が 854x480 である場合、ピクセル倍率を 0.1 、ビューポート幅を 85.4 などとすることで出力がドットバイドットになります。

***ビルボード [#config-rendertype-billboard]

常にカメラ目線の板ポリゴンを描画します。~
常にカメラ目線である以外はただの板ポリゴンであり、描画位置は3D座標系に従います。

追加の設定項目は下記の通りです。

:背面を描画|
通常、板ポリゴンの背面は描画されませんが、この項目をチェックすると描画されるようになります。~
当ツールで作成するビルボードは視線（カメラ）の角度にのみ追従するため、アクセサリ自身を回転させることで背面を向けることは可能です。~
また、背面側からライトが当たった場合に影が描画されるか否かにも影響します。
:ライト|
ライトとマテリアル設定による色の変化を有効にするか否かを設定します。~
「MMM上で選択する」を設定した場合は、MikuMikuMoving上の[[エフェクトパラメータ>#on-mmm-effect]]で有効状態を切り替えてキーフレーム登録できます。
:ピクセル倍率|
実画像の1ピクセルに対応する3D座標上のサイズを設定します。

***板ポリゴン [#config-rendertype-polygon]

単純な板ポリゴンを描画します。~
設定項目については[[ビルボード>#config-rendertype-billboard]]と全く同じであるため、そちらの説明を参照してください。

**基準点位置 [#config-basepoint]

表示される画像のどの位置を中心点とするか否かを設定します。~
設定した位置を基準として移動や回転といった座標変換を行うことになります。

**画像反転 [#config-flip]

表示される画像を左右反転および上下反転させるか否かを設定します。

「MMM上で選択する」を設定した場合は、MikuMikuMoving上の[[エフェクトパラメータ>#on-mmm-effect]]で反転状態を切り替えてキーフレーム登録できます。

**マテリアル [#config-material]

アクセサリの材質（マテリアル）を設定できます。

ほとんどの値はライトかセルフシャドウが有効でなければ意味を成しません。~
よくわからなければ既定値のままでも問題はないでしょう。

:面の色|
板ポリゴン面の色をRGBAそれぞれ 0.0 から 1.0 までの範囲で設定します。~
ライトが当たっている部分の色に影響します。~
またAの値は不透明度を表し、 0.0 なら完全透明、 1.0 なら完全不透明となります。~
Aだけはライトやセルフシャドウが無効であっても常に適用されます。
:拡散光|
エミッション色をRGBそれぞれ 0.0 から 1.0 までの範囲で設定します。~
ライトが当たっていようがいまいが一様に表示される色に影響します。
:反射光|
スペキュラ色をRGBそれぞれ 0.0 から 1.0 までの範囲で設定します。~
ライトが当たった時の光沢の色に影響します。
:反射強度|
スペキュラ強度を 0.0 以上の値で設定します。~
数値が大きいほど、ライトが当たった時の光沢が強くなります。

*MikuMikuMoving上での操作 [#on-mmm]

MikuMikuMovingで読み込んだアクセサリ＆エフェクトに対して、MikuMikuMoving上で様々な操作を行うことができます。

**エフェクトパラメータ [#on-mmm-effect]

描画方法などの状態に応じて、いくつかのエフェクトパラメータが設定およびキーフレーム登録可能になります。

#ref(エフェクトパラメータ.png,left,nolink,エフェクトパラメータ);

:Index|
テクスチャアトラス内に2つ以上の画像が入っている場合のみ設定できます。~
各数値が1つの画像に対応しており、数値を増減させることで好きな画像を表示させることができます。
:Light|
描画方法に[[ビルボード>#config-rendertype-billboard]]や[[板ポリゴン>#config-rendertype-polygon]]を選択し、ライトの設定を「MMM上で選択する」にした場合のみ設定できます。~
チェックを付けることでライトとマテリアル設定による色の変化が有効になります。~
なお、地面影やセルフシャドウの描画はライトの設定とは独立しており、[[アクセサリ操作>#on-mmm-accessory]]で設定できます。
:Flip_H|
[[画像反転>#config-flip]]の設定で左右反転を「MMM上で選択する」にした場合のみ設定できます。~
チェックを付けることで画像が左右反転します。
:Flip_V|
[[画像反転>#config-flip]]の設定で上下反転を「MMM上で選択する」にした場合のみ設定できます。~
チェックを付けることで画像が上下反転します。

**アクセサリ操作 [#on-mmm-accessory]

通常のアクセサリと同様に、表示状態、影、拡大率、アルファ、位置、回転等々の設定を行うことができます。~
いくつか注意すべき点を以下に記します。

:影|
--描画方法が[[ビルボード>#config-rendertype-billboard]]および[[板ポリゴン>#config-rendertype-polygon]]の場合、チェックを付けることで地面影もしくはセルフシャドウが有効になります。
--描画方法が[[スプライト>#config-rendertype-sprite]]や[[スプライト(dot by dot)>#config-rendertype-dotbydotsprite]]である場合は無視されます。
--セルフシャドウについては、アクセサリ自身に落ちる影は問題なく描画できますが、アクセサリが他のモデルに落とす影は単一ライトにしか対応していません。~
2個以上のライトを有効にした場合、他のモデルには影を落とさないようになります。
:位置|
--描画方法が[[スプライト>#config-rendertype-sprite]]や[[スプライト(dot by dot)>#config-rendertype-dotbydotsprite]]である場合、XY位置は2D座標上の位置を表し、Z位置は奥行きを表します。~
その際にも編集スクリーン内のボーンハンドルは3D座標基準で表示されるため、スプライトに対して直感的な座標操作を行うことはできません。~
アクセサリの座標設定タブで直接数値入力するようにしてください。
:回転|
--どの描画方法であってもアクセサリ自身の回転は適用されます。~
そのため、斜めや背面を向けた[[スプライト>#config-rendertype-sprite]]や[[ビルボード>#config-rendertype-billboard]]を描画することも可能です。
--[[スプライト>#config-rendertype-sprite]]を初期位置のままX軸回転やY軸回転させると画像が欠けたような表示になりますが、これは回転によって手前に出た部分のZ位置が 0.0 未満になるためです。~
Z位置を 0.0 より少し大きい値にすることで回避できます。

ポストエフェクトの場合はエフェクト自体の設定からアクセサリと同等の各種操作を行えます。~
通常エフェクトの場合はアクセサリ側の操作のみが適用され、エフェクト側を操作しても無視されます。

*テクスチャアトラスについて [#atlas]

**当ツールがサポートする形式 [#atlas-support]

テクスチャアトラスには様々な形式が存在しますが、当ツールは現時点で下記の形式に対応しています。

-cocos2d形式（format 1, 2, 3）
-Unity JSON形式

これらの形式でテクスチャアトラスを作成できるツールはいくつか存在しますが、最も有名なツールの1つに『TexturePacker』があります。

-[[TexturePacker - Create Sprite Sheets for your game!>http://www.codeandweb.com/texturepacker]]

英語のツールですが、それほど難しい操作は無く、また[[Google等で検索>Google:TexturePacker 使い方]]すれば日本語の解説サイトもたくさん見つかります。~
機能をフルで使いたい場合は購入する必要がありますが、無料でも制限付きで使うことは可能です。

**TexturePackerによる作成方法 [#atlas-texturepacker]

TexturePackerの基本的な使い方は次のサイトが参考になります。

-[[TexturePackerの使い方 - ブレイブソフト 技術研究Blog>http://www.bravesoft.co.jp/blog/archives/272]]

基本的には上記サイトを参考にして作成すればよいですが、当ツールおよびMikuMikuMovingに適した形式で出力するためには下記の項目に注意する必要があります。

:Data Format|
下記のいずれかを選んでください。
--cocos2d
--JSON (Hash)
--Unity - JSON Data (.txt)
:Texture format|
MikuMikuMovingがサポートしている画像形式を選んでください。~
TGA形式がオススメです。
:Size constraints|
''「POT (Power of 2)」にすることを強く推奨''します。~
「Any size」でも読み込むことはできますが、画像がぼやけた感じになる場合があります。
:Algorithm|
無料版を使う場合は「Basic」にしないと出力テクスチャに余分な画像がくっつけられてしまいます。
:Trim mode|
どれを選ぶかによってMikuMikuMoving上での表示位置に影響します。
::None|
元画像の余白を削らずにそのまま出力します。~
無料版を使う場合はこれを選択しないと出力テクスチャに余分な画像がくっつけられてしまいます。
::Trim|
元画像の余分な余白が削られて出力されますが、MikuMikuMoving上では元画像のサイズを基準として描画されます。
::Crop, flush position|
元画像の余分な余白が削られて出力され、MikuMikuMoving上でも余白が削られたサイズを基準として描画されます。
::Crop, keep position|
当ツールではサポートしていません。描画はされますが、おかしな位置に配置される可能性が高いです。
:Enable auto alias|
無料版を使う場合はチェックを外さないと出力テクスチャに余分な画像がくっつけられてしまいます。

*FAQ [#faq]

ありがちな（ありそうな）疑問点とそれに対する答えをまとめています。

:起動できない。|
--そもそもMikuMikuMovingを起動可能な環境であるかどうかをご確認ください。~
MikuMikuMovingが起動可能であれば、当ツールの起動に必要な環境にはなっているはずです。
--『MMMSpriteMaker』本体は妖精のアイコンが目印です。~
''MMMSpriteMaker.exe.config'' というファイルが同梱されていますが、こちらは本体ではありません。
--それでも起動できない場合はreadme.txtに書かれている連絡先までご連絡ください。~
エラーメッセージが出ている場合はその内容をご報告ください。
:画像単体だけを表示したい。|
--当ツールはあくまでテクスチャアトラスを入力とする自動生成ツールです。~
画像単体だけ表示したい場合であっても、画像単体を含むテクスチャアトラスを作成してそれを渡してください。
:「テクスチャアトラスを読み込むためのプラグインが見つかりませんでした。」というエラーが出て作成に失敗する。|
--配布パッケージに同梱されている ''ruche.datas.textureAtlas.loaders.dll'' というファイルが紛失したか破損しています。~
配布パッケージをダウンロードしなおしてください。
:画像がぼやける。|
--3D描画の仕様上、たとえドットバイドットであろうとも多少はぼやけてしまいます。
--3D描画の仕様上、基となるテクスチャ画像の縦横幅が2の累乗サイズ（64、128、256など）でない場合、描画処理時に2の累乗サイズになるように画像が引き伸ばされるため、ぼやけ発生の原因になります。~
基となるテクスチャ画像の縦横幅を2の累乗サイズにしておくことでこの処理が行われないようにできます。~
[[TexturePackerを使う場合>#atlas-texturepacker]]であれば、 ''Size constraints'' の設定を ''POT (Power of 2)'' にして出力してください。
:ポストエフェクトのスプライトが表示されない。|
--例えばポストエフェクトファイル ''foo.fx'' を表示したい場合、同じフォルダ内にアクセサリファイル ''foo.x'' とテクスチャファイルが置かれている必要があります。~
エフェクトファイルとアクセサリファイルのファイル名は揃える必要があります。
--他のポストエフェクトがある場合、それらよりも後に描画されるようにする必要があります。~
[[基本的な使い方>#basic]]を参照してください。
:セルフシャドウの表示がおかしい。セルフシャドウが表示されない。|
--アクセサリ設定の「影」にチェックを入れないと、自分に落ちる影も他のモデルに落とす影も一切描画されません。
--[[スプライト>#config-rendertype-sprite]]はそもそも影を一切描画しないようになっています。
--ライトとの角度によってジャギが発生するのは板ポリゴンの宿命なので諦めてうまいこと回避してください。
--他のモデルに落とす影は単一ライトにしか対応していません。~
複数のライトを有効にした場合、他のモデルには影を落とさないようになります。
:○○というツールが出力するテクスチャアトラス形式にも対応して欲しい。|
--まずはreadme.txtに書かれている連絡先までご連絡ください。ただし対応を約束することはできません。
--有料ツールの場合、こちらでデータを作成して検証することができませんので、サンプルデータをいくつかアップローダ等でご提示下さい。

*更新履歴 [#history]

:2014-05-04|
--MikuMikuMoving上での表示例画像を追加。
:2014-05-04|
--初版。