チュートリアル４章では、画像の扱い方を学びます。
チュートリアル4章 画像
チュートリアル4章では、MOHO以外のソフトで作成した画像との連携を学ぶ形になっています。
この章では「イメージレイヤー」を使うことが増えました。
4-1 イメージレイヤー
チュートリアル4-1では、イメージレイヤーについて学びます。
ここまでは、主にベクターレイヤーを使う作業を勉強してきました。
この章で登場するイメージレイヤーは、Photoshopなどの別プログラムで作成したアートワークをMOHOに取り込んだり、MOHOのビットマップツールを使ってピクセルベースのアートワークを作成するときに使います。
イメージレイヤーを選択すると、ツールバーにはビットマップツールが表示されます。
イメージレイヤーの使用目的は次のようなものがあげられます。
- 背景として使う
- ベクターレイヤーのテクスチャーとして適用する
- ボーンレイヤーと組み合わせてキャラクターを作成する
イメージレイヤーには
ムービーファイルをソースとして使えるんだって！
残念ながら、MOHOのビットマップツールを使って何かを作成する項目はチュートリアルの中には見当たりませんでした。
表示されるビットマップツールはブラシと塗りつぶしのバケツくらいで、パッと見れば、Windowsの「ペイント」のほうが高機能に思えるほどです。
ブラシの種類は結構あるので、これまでにペイントソフトを使ったことがあれば、それなりにお絵描きはできてしまうと思います。
ただ、実践的な活用方法は言及されていないので、自分なりに見つけていく必要があるようです。
どちらかといえば、巷には優れた画像編集ソフトがあるので、そちらで作成したものをMOHOにインポートして使うのが前提のチュートリアルになってる感じです。
チュートリアル4-1のサンプルは、既に画像をパーツごとに分割したものをインポートする状態から始まります。
パーツごとに分解する作業はPhotoshopなどを使って済ませておいてねって感じみたいです。
取り込んだアートワークには、まだ左手がありません。
そこで、新規イメージレイヤーを作成して、左手画像を読み込みます。
読み込んだ後に、
[レイヤーを変形]ツールを使って、サイズや位置の調整を行います。
最後に、
[レイヤーをバインド]ツールを使って、後から追加した左手のイメージレイヤーを、先に取り込んでおいたアートワークの、既に追加された骨格にバインドします。
バインド、つまり結びつけるということのようです。
これで、アートワーク全体が一体化して動くようになります。
この辺りになると、チュートリアルでの書き方も大雑把になってきた気がします。
これまでのチュートリアルを理解していれば「できるでしょ？」というスタンスのようです。
ここで不思議に思ったのが、[ファイル]メニューにある[インポート]です。
チュートリアルで使うサンプルを引っ張り出す時に必ず使うメニューなので気になってたんですが、この中に[画像]があります。
試しに使うと、画像を複数選択して一気にインポートができます。
他のプログラムで作成した画像をインポートする場合、実用的にはインポートメニューのほうだと思うんですが、チュートリアルでイメージレイヤーから読み込んだ理由ってなんなんでしょう？
後から追加した場合に、しっかりバインドすることの重要性を説明したかったのかな？
ちなみに「画像」の下に「画像シーケンス」というのがありますが、明らかに役割が違います。こちらは連続画像を使う別の機会（６章）でサラッと紹介されます。
4-2 画像ワーピング（変形）
チュートリアル4-2では、画像ワーピング機能について学びます。
この機能を使うと、骨格を使って画像を変形できます。
写真、手書きのアートワークなど、様々なものをアニメーション化できます。
写真などの画像をインポートしてボーンを配置しただけでは、動かすことができません。そこで必要なのが画像ワーピングです。
- イメージをインポートする。
- 新規ボーンレイヤーを作成する。
- ボーンレイヤーの中にイメージレイヤーをドラッグして子レイヤーにする。
- ボーンを配置する。
- イメージレイヤーをダブルクリックして[イメージ設定]ダイアログを開く。
- [イメージ]タブ→[ボーンを使用してワープ]を有効にする→[OK]
4-3 画像テクスチャ
チュートリアル4-3では、画像をテクスチャとして使用する方法を学びます。
チュートリアルでは、「塗り」の無い未完成の動物（ヒョウ）を使います。
豹のカラダ自体は、パーツごとにベクターレイヤーに作られていて、ヒョウ柄模様は別のソフト（Photoshopなど）で作成してからMohoにインポートする、という作業です。
ここで少し疑問が…
「全部Photoshopで作れば良くない？」
そうです。豹のアートワーク自体をテクスチャ込みで全部Photoshopで作ってからMOHOにインポートすればいいのでは？という疑問です。
そしてもうひとつは、
「ヒョウ柄をMOHOのイメージレイヤーで描けば良くない？」
そうです。せっかくイメージレイヤーを紹介してるのに、ブラシを使わずに進むのは勿体ないんじゃないか？と感じるわけです。
チュートリアルでは、
- Photoshopなどを使って胴体、手足の形に位置を合わせたテクスチャ画像を作成
- テクスチャ画像を胴体、手足のパーツごとにファイルを分けて画像形式で保存
- MOHOにテクスチャ画像をインポート
- マスキング設定
という流れを実践します。
試しに、MOHOで各パーツごとのベクターレイヤーの上にイメージレイヤーを作成し、それぞれにビットマップブラシを使ってヒョウ柄模様を描いてみました。
その上でチュートリアルの通りにマスキングしてみたところ、全く同じようにアニメーションを完成させることができました。
つまり、MOHOの中でも完結出る作業でした。
このチュートリアルで大事なのは、テクスチャ画像を用意することよりも、どうやってマスキングするかということかもしれませんね。
テクスチャをベクターレイヤーからはみ出さないように表示する方法を習得することが目的と考えれば、テクスチャ画像は何処で用意しても構わないのかもしれません。
- ボーンレイヤーの中に、関連するベクターレイヤーを入れておく。
- レイヤーパネルで、テクスチャを適用するベクターレイヤーを選択する。
- 新規イメージレイヤーを作成し、テクスチャ画像を読み込む。
- レイヤーパネルでは、ベクターレイヤーの上にイメージレイヤーが配置されます。
- テクスチャは、イメージレイヤーを作成して、MOHOのビットマップツールでテクスチャを作ってもOK。
- ボーンレイヤーをダブルクリックしてレイヤー設定ダイアログを開く。
- [マスキング]タブ→[グループマスク]の「すべて非表示」を選択。
- ベクターレイヤーをダブルクリックしてレイヤー設定ダイアログを開く。
- [マスキング]タブ→[レイヤーマスキング]の「+マスクを消去し、現在のレイヤーを追加」を選択。
- このモードでは、このレイヤーがベタ領域を含む部分を除き、全てのオブジェクトを非表示にします。これでベクターレイヤーが動いた時にテクスチャがはみ出すのを防ぎます。
テクスチャ画像は、表示するベクターレイヤーの上に配置します。
これで、ベクターレイヤーの中に綺麗にテクスチャを収めて、動いた時にはみ出ることもなくなりました。
このアニメーションだけを見ると不気味ですが、テクスチャの項目を学ぶには絶妙なんですよねぇ…
4-4 しゃべっている頭部のアニメーション化
チュートリアルでは人物写真（レーガン元大統領）を使って、音声に合わせて口が動く設定を学びます。
といっても、そのためのボーン配置は既に完了しているサンプルを使うので、チュートリアル内での作業は音声ファイルの読み込みと、任意のボーンに[ボーン音声ウィグル]スクリプトを割り当てるだけです。
[ボーン音声ウィグル]ダイアログでは、先に読み込んだ音声レイヤーを選択し、最大角度とフレーム間隔を指定するだけです。
これで自動的に選択されているボーンのタイムラインにキーフレームが追加されます。
確かに「口が動くぞ！」という仕上がりにはなりましたが、かなり不自然で…
ボーンの配置を工夫すれば、もっとうまく行くのかな？
[スクリプト]－[サウンド]－[ボーン音声ウィグル]
オーディオファイルの音量でボーンの角度をコントロールするスクリプト
まとめ
この4章は、これまでのチュートリアルの内容を身に着けていることが前提で進んでいく内容でした。
そろそろオリジナルのアニメーションを作ってみたほうがいいのかもしれないですね。
