モーリーのメモ

アプリ開発等（プログラミング、CG作成）、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

Blenderで2Dのロゴが光るアニメーションを作る

Blender Mac

　Blenderで2Dのロゴがきらっと光るアニメーションを作成します。
　全てをBlenderで作るのではなくて、読み込んだ2Dのロゴ画像を加工して光るアニメーションを作成します。
　f:id:mmorley:20160301175439p:plain
　2D画像に光る効果を追加できる無料ソフトが見つからず、ふとBlenderで出来ないかなと思い、試してみることにしました。

目次

使用環境

作成手順

1.使用するロゴ画像を用意

下のロゴ画像を右クリックして、適当な名前を付けて保存して下さい。
f:id:mmorley:20160216110318p:plain
画像のサイズは、85×34ピクセルです。

2.Blenderを起動

　下記のファイルを読み込んで、カメラ・照明・グリッド等の設定を流用します。
https://github.com/githubmorley/blog-files/blob/master/160106/blender.blend
　リンク先のページ内の『Raw』を右クリック後、『リンク先を別名で保存』をクリックしてダウンロードして下さい。
　設定に付いては下記の記事で説明しています。
mmorley.hatenablog.com

  1. Blenderを起動
  2. キーボードの『command + o』を押下
  3. 上記の『blender.blend』を選択し、『Open Blender File』をクリック

3.オブジェクトの削除

　最初から配置しているオブジェクトは不要なので削除します。

  1. オブジェクトを右クリックして選択
  2. キーボードの『x』→『d』を順に押下して削除

4.Plane（平面）を配置

  1. キーボードの『shift + a』→『m』→『p』の順に押下

5.Planeの縦横比を使用する画像と合わせる

　画像サイズが85×34ピクセルなので、同じ比率にします。

  1. Planeを右クリックして選択
  2. キーボードの『s』を押下して拡大縮小を開始
  3. キーボードの『return』を押下
  4. 画面左下の『Resize』の『Vector』に下記のように入力
    • X：0.85
    • Y：0.34
    • Z：1.0
      f:id:mmorley:20160216112945p:plain

6.Planeのサイズをカメラの視野角に合わせる

　Planeの縦横比はそのままでサイズを視野角いっぱいになるようにします。

  1. キーボードの『s』を押下して拡大縮小を開始
  2. マウスを動かしてサイズを変更後、右クリックで確定f:id:mmorley:20160216121539p:plain
  3. キーボードの『control + a』→『s』の順に押下して拡大縮小を適用

7.Planeにロゴ画像をUVマッピング

  1. 『Viewport Shading』で『Material』を選択
    f:id:mmorley:20160227101155p:plain
  2. 画面レイアウト選択で『UV Editing』を選択f:id:mmorley:20160216142932p:plain
  3. マウスカーソルを左側の画面内に置いて、キーボードの『option + o』を押下
  4. 最初にダウンロードしたロゴ画像を選択し、『Open Image』をクリック
  5. 右側の画面でPlaneを右クリックして選択
  6. キーボードの『tab』を押下して、エディットモードにする
  7. キーボードの『u』→『u』の順に押下して『Unwrap』
  8. 画面レイアウト選択で『Default』を選択
  9. キーボードの『tab』を押下して、オブジェクトモードにする
  10. 画面右の『Properties』ウインドウの『Material』タブの『New』をクリック
    f:id:mmorley:20160216171345p:plain
  11. 『Properties』ウインドウの『Material』タブの『Shading』の『Emit』を0.8に設定
  12. 『Properties』ウインドウの『Material』タブの『Transparency』にチェックを入れ、下記のように設定
    • Alpha：0
    • Specular：0
      f:id:mmorley:20160216173623p:plain
  13. 『Properties』ウインドウの『Texture』タブの『New』をクリック
    f:id:mmorley:20160216174929p:plain
  14. 『Properties』ウインドウの『Texture』タブの『Image』の『リンク済み画像の閲覧』ボタンをクリックし、ロゴ画像を選択
    f:id:mmorley:20160216211650p:plain
  15. 『Properties』ウインドウの『Texture』タブの『Image Mapping』の『Extension』で『Clip』を選択
    f:id:mmorley:20160216221138p:plain
  16. 『Properties』ウインドウの『Texture』タブの『Influence』の『Diffuse』の『Alpha』にチェックを入れる
    f:id:mmorley:20160216222824p:plain

8.Lamp（照明）の設定

  1. Lampを右クリックで選択
  2. キーボードの『n』を押下し、数値パネルを表示
  3. 数値パネルの『Transform』の『Location』に下記のように入力
    • X：0
    • Y：0
    • Z：10
      f:id:mmorley:20160216225111p:plain
  4. キーボードの『n』を押下し、数値パネルを隠す
  5. 『Properties』ウインドウの『Data』タブの『Lamp』の『Spot』をクリックし、下記のように設定
    • Energy：20
    • Distance：10
      f:id:mmorley:20160217003447p:plain
  6. 『Properties』ウインドウの『Data』タブの『Spot Shape』を下記のように設定
    • Size：20°
    • Brend：1
    • Square：チェックを入れる
      f:id:mmorley:20160217003458p:plain

8.Emptyでカメラの向きの制御

　Empty（レンダリングされないオブジェクト）を作成し、カメラにトラッキング（追跡）させることで向きを制御します。

  1. キーボードの『shift + a』→『e』→『p』の順に押下して、Emptyを配置
  2. 画面左下の『Add Empty』の『Location』を下記のように設定
    • X：-6
    • Y：0
    • Z：0
  3. Lampを右クリックで選択
  4. キーボードの『shift』を押しながら、Emptyをクリックして追加選択
  5. キーボードの『control + t』→『t』の順に押下して、トラッキングを設定

9.光を移動させるアニメーションを作成

  1. Emptyを右クリックで選択
  2. キーボードの『i』→『l（エル）』の順に押下して、1フレームにEmptyの位置情報を登録
  3. 現在のフレームに8を入力
    f:id:mmorley:20160301160452p:plain
  4. キーボードの『n』を押下し、数値パネルを表示
  5. 数値パネルの『Transform』の『Location』に下記のように入力
    • X：6
    • Y：0
    • Z：0
  6. キーボードの『i』→『l（エル）』の順に押下して、8フレームにEmptyの位置情報を登録
補足：選択中のオブジェクトとTimeline、プロパティの表示

下図の"(8)Empty"は、3DViewでEmptyを選択し、Timelineで8フレーム目を選択していることを示しています。
キーフレームが登録されていると文字の色がオレンジ色になります。
下部のTimelineウインドウで、黄緑色のラインが現在のフレームで、黄色のラインがキーフレームです。
f:id:mmorley:20160301161314p:plain
キーフレームに登録されているプロパティは黄色で表示されます。
f:id:mmorley:20160227114909p:plain
アニメーションに使用されているプロパティは黄緑色で表示されます。
f:id:mmorley:20160227115141p:plain

補足：キーフレームの削除
  1. 3DViewで対象のオブジェクトを選択
  2. Timelineウインドウで、対象のキーフレームを選択
  3. マウスカーソルが3DView内にある状態で、キーボードの『option + i』→『d』を順に押下

10.解像度とフレーム範囲の設定

  1. 『Properties』ウインドウの『Render』タブの『Dimensions』を下記のように設定
    • Resolusion：解像度（出力サイズ）
      • X：85px
      • Y：34px
      • 100%
    • Frame Range：フレーム範囲
      • Start Frame：1
      • End Frame：8
      • Frame Step：1
    • Frame Rate：フレームレート
      • FPS：16（custom選択後入力）
      • /：1
        f:id:mmorley:20160301161819p:plain
補足：アニメーションのテスト
  1. マウスカーソルが3DView内にある状態で、キーボードの『option + a』を押下し、アニメーションを再生
  2. 再度、キーボードの『option + a』を押下し、アニメーションを停止

または、画面下部の下図のコントロールパネルで操作
f:id:mmorley:20160227175303p:plain

11.出力設定

　ここでは、cocos2d-xで使用するのでPNG形式で出力します。
　AVIやMPEG形式等の動画ファイルとして保存することも可能です。
　フレームごとに1枚の画像ファイルで保存されます。

  1. 『Properties』ウインドウの『Render』タブの『Output』を下記のように設定
    • 出力先のパスとファイル名を入力
    • 出力フォーマット（ファイル形式）：PNG
    • BW（白黒）/RGB/RGBA：RGBA
      f:id:mmorley:20160227225009p:plain

12.レンダリング

  1. 『Properties』ウインドウの『Render』タブの『Render』の『Animation』をクリック

f:id:mmorley:20160301162050p:plain

今回の成果物

　作成したBlenderファイルです。
https://github.com/githubmorley/blog-files/blob/master/160301/blender.blend
リンク先のページ内の『Raw』を右クリックして、『リンク先を別名で保存』をクリックするとダウンロードできます。
　レンダリングで出力された8フレーム分の画像です。
　cocos2d-xのプロジェクトに

f:id:mmorley:20160301165841p:plain new0001.png
f:id:mmorley:20160301165956p:plain new0002.png
f:id:mmorley:20160301170016p:plain new0003.png
f:id:mmorley:20160301170044p:plain new0004.png
f:id:mmorley:20160301170055p:plain new0005.png
f:id:mmorley:20160301170112p:plain new0006.png
f:id:mmorley:20160301170122p:plain new0007.png
f:id:mmorley:20160301170234p:plain new0008.png
補足：テクスチャ画像のBlenderファイルへのパッキング

　下記の設定によりテクスチャ画像がBlenderファイルに含まれた状態て保存されます。
　箱が空のアイコンの場合は、Blenderファイルにはリンク情報だけで、テクスチャ画像は含まれません。

  1. 『Properties』ウインドウの『Texture』タブの『Image』のファイル名の前のアイコンをクリックして、下図のアイコンに変更
    f:id:mmorley:20160301221158p:plain

あとがき

　考えていたものに近い、きらっと光る効果を加えることが出来ました。
　欲を言えば、ライトの形状を簡単かつ自由に変更できたら良いのですが、Spot光源を円と正方形にする方法しかわかりませんでした。