Tutorial 4.4

イメージテクスチャ

はじめに

このチュートリアルでは作成したキャラクタのディテールを整えるために、テクスチャを付け加える方法を学びます。

サンプルファイルから開始

このチュートリアルを始める前に、アートワークを含んだプロジェクトを読み込んでください。それは"Tutorials/4 - Images"フォルダに"Tutorial 4.4"と名づけられて保存されています。 ワークスペースには以下のように表示されるはずです。

ここからチュートリアルを開始

内容を確認するため一度アニメーションを再生してみてください。確認が終わったら巻き戻してフレーム0にします。それではキャラクターのテクスチャを手作業で塗って見ましょう。

テクスチャを塗る

最初のステップとして、キャラクタを塗るためのテンプレートを作成しましょう。メニューからFile->Renderを選択して、現在のフレームのレンダリング結果をフル品質で得られるようにします。

レンダリングされたキャラクタ

レンダリング結果の一番下のボタンから"Copy To Clipboard"を選択してください。次にペイントツール(Adobe Photoshopを推奨します)を起動し、新しいファイル(この場合は320x240)を作成してクリップボードにコピーされた内容をペーストします。

ペイントツールに新規レイヤーを作成して、そこにキャラクターのテクスチャを描いてください。ペーストされた画像に直接ではなく、レイヤーを使用して描くことが重要です。もし、Photoshopを使用しているなら、レイヤーは以下のような構成になると思います。

Photoshopのレイヤー構成

どのようなイメージを描いても構いませんが、例を示すと以下のようになります。このときテクスチャが輪郭からはみ出ていますが、気にしないで大丈夫です。

描かれたテクスチャ

テクスチャを描き終わったら、透過イメージになるように背景レイヤーを全て削除してください。

背景を削除

最後に、作成したテクスチャを三つの部位(右の手足、胴体、左の手足)に分割してファイル化する必要があります。このときファイル形式としてPNGを使用すると、透明色をファイルに含めることができます。ファイル名は、"back_tex.png"、"body_tex.png"、"front_tex.png"としてください。以下に三つの部位の例を示します。

右の手足テクスチャ back_tex.png


胴体テクスチャ body_tex.png


左の手足テクスチャ front_tex.png

以上でテクスチャイメージの作成は完了ですので、以下の作業はAnimeStudioで行います。

【メモ】 もしテクスチャを作成することが面倒なら、"Tutorials/4 - Images"フォルダにある"Tutorial 4.4 Texture.psd"ファイルをPhotoShopで開いて見てください。また、同じフォルダには完成したテクスチャのサンプルとして、"back_tex.png"、"body_tex.png"、"front_tex.png"が登録されています。

テクスチャの読み込み

AnimeStudioに戻り、新しいイメージレイヤーを作成して"back_tex.png"をソースとして使用してください。ボーングループの中の、"Back Legs"レイヤーの上にイメージを移動します。次に"body_tex.png"のイメージレイヤーを作成し、"Body"の上に移動します。最後に"front_tex.png"を"Front Legs"レイヤーの上に移動してください。

作成された三つのイメージレイヤー

この時点で、以下のようにキャラクタの輪郭から少しはみ出ていますが、テクスチャの読み込みは終了です。

読み込まれたテクスチャ

輪郭を綺麗にするためマスクを使用

このステップでは、輪郭を綺麗にするためマスクを設定します。"Skeleton"をダブルクリックして、Maskingタブを表示してください。オプションから"Hide all"(全てを隠す)を選択します。

グループのマスクを有効にする

次に"Back Legs"ベクターレイヤーをダブルクリックして、Maskingタブを表示してください。ここでは"+ Clear the mask, then add this layer to it"(マスクを消去してから、このレイヤーをマスクに追加)を選択します。

胴体レイヤーのマスクモードを変更

このマスクモードは、このレイヤーのオブジェクトが占有する領域以外を見えなくする働きをします。このため、"back_tex.png"イメージは"Back Legs"ベクターレイヤーの領域内に留まって、オブジェクトに直接テクスチャを描いたように見えます。以上のように、"Body"と"Front Legs"に対しても、"+ Clear the mask, then add this layer to it"を設定してください。

マスクによってクリーンナップされたテクスチャ

もう一度アニメーションを再生して、イメージレイヤーがボーンに連動して、ベクターレイヤーと共に変形することを確認してください。