iPhoneで使える3Dファイル“PODファイル”の書き出し設定のメモ

  • 2010-09-13
  • 3D

8月は6年ぶりくらいで3Dソフト使う仕事ができる機会に恵まれましたよ。

内容はiPhoneアプリで使うアニメーション用のファイルをPODというiPhoneで使える3Dファイルで用意するというもの。その時の書き出し設定がシビアでかなりはまったので忘れないようにメモ。
　
結論からいくと、以下がうまくいったときの設定画面のキャプチャ。


　

  • 大事なのは右真ん中のPrimitive TypeとTriangle Sort。
    これ以外だとiPhoneでうまく読み込めない
  • 右上のExport skin modifiersはボーンアニメーションなどを書き出したいときにチェックする
  • 左のExport　animationはアニメーションがないときはチェックしなくて良い

　
続きで少し解説します。
　
Read more »

メグとジョー


　
シオノギ製薬 ポポンピュメリスペシャルサイト「メグ＆ジョー」サイトを会社の仕事で制作しました。

8月もあっという間に終わり、明日から9月だというのに、5月に公開されたサイトに関するエントリー。今更感ありすぎですが、会社のサイトのWorksに載せてもらえたのと、個人的にとても楽しくてやりがいのあった仕事なのでやはりブログに載せておこうと。
私はFlashを担当しました。デザインはyuuri。

タイムラインアニメーションが見所のサイトです。線がぷるぷるしているのもスクリプトですか？と良く聞かれましたがタイムラインです。線を少しずらした2コマの絵を入れ替えています。スクリーンセーバーはとても気に入っていておすすめ。今でもノートパソコンで使っています。
　
シオノギ製薬 ポポンピュメリスペシャルサイト「メグ＆ジョー」
http://www.pumeri.jp/
　

ホネホネ・クロック JS がJAMでSilverをいただきました

wonderflと、wonderflのjavascript、HTML5、css版であるjs do it共同でJAMというイベントが現在開催中です。
それの第一回のお題がなんと「人の動作をモチーフに時計を作ってください」というもので、これはホネホネ・クロックを出さないわけにはいかないと思い、ホネホネ・クロックのJS版を作ってエントリーしていたのですが、昨日結果発表がありまして、嬉しいことにSilverをいただくことができました！

JAM Session1 Result Presentation

ありがとうございます！これで一桁秒のホネホネちゃんのがんばりも報われたと思います。（js do itのshareコードを貼ってみたけど、コードしか見えない↓）
　

ホネホネ・クロック JS - forked from: Human Clock - jsdo.it - share JavaScript, HTML5 and CSS

　
今回ホネホネ・クロックのJS版を作ろうとしてわかったのは、パラパラ漫画の手法のアニメーションをCanvasを使ってやるのは簡単ではないということ。結局gifアニメを使うお手軽な手法をとってしまったのですが、gifアニメだとfirefox以外のブラウザではフレームレートに制限があるようで、アニメーションがすごくゆっくりになってしまいました。
しかし例えゆっくりでもホネホネ・クロックJS版ならiPhoneやiPadでも見られるんですよね・・・。
また時間のあるときにCanvasを使ったホネホネ・クロックも完成させたいと思ってます。

useOwnContainer=trueにaddChildしたらuseOwnContainer=trueできない

Papervision3Dのオブジェクトに透明度つけたりフィルターかけたりしたいときはuseOwnContainerというプロパティをtrueにしなければならないのですが、useOwnContainer=trueにしたオブジェクトにaddChildしたら、そのオブジェクトはuseOwnContainer=trueにできないという話。
どちらかには効くのでやりたいことができない！ということはないと思うけど、知らなかったらはまるかもしれないのでメモ。
　
以下がwonderflで検証したもの。
左が普通のPlane。右はuseOwnContainer=trueにしたDisplayObject3DにaddChildしたPlane。

　
・_containerのalphaは変えることができる
・_container.useOwnContainer = true;をコメントアウトすれば_plane2のalphaを変えれるようになる。
・ちなみにalphaとかを有効にするのはuseOwnContainer以外に、ViewportLayerを使う方法もある。そっちのほうが軽いらしい。

FLVPlaybackのSeekBarHandleにハマりまくりました


　
何回使っても良くわからないFLVPlaybackに今回もどっぷりハマりました。

FLVPlaybackのSeekBarHandleはムービーの再生位置を示してくれるもの。ドラッグして左右に動かすとビデオの巻き戻しや早送りができます。自分でこの機能を実装しようと思ったら少々面倒くさい（というかできるかあんまり自信ない）ので、FLVPlayback備え付けのSeekBarHandleがちゃんと使えれば便利なのですが、このSeekBarHandle、ちゃんと指定しているのに出てこないことが度々あったのです。

その原因が今まで解明できていなかったので、SeekBarHandleを仕事で使うのは極力避けていたのですが、つい最近原因を解明せざるを得ない場面に遭遇したので、この機会にきちんとSeekBarHandleと向かい合ってみました。
　
まず以下のような、FLVPlaybackを使用してムービーを再生させるFlvPlayerクラスを作成しました。FLVPlaybackおよびPlayPauseButtonなど各FLVPlaybackカスタムUI コンポーネントをnewして、割り当てているだけのシンプルなものです。

[以下のページなどを参考に]
FLV Playback カスタム UI コンポーネントの使用
http://www.gcommerce.com/jp/devnet/flash/articles/custom_flvcomp_03.html

PLAIN TEXT
ACTIONSCRIPT:
  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.events.Event;
  4.     import flash.events.MouseEvent;
  5.     import fl.video.MetadataEvent;
  6.     import fl.video.FLVPlayback;
  7.     import fl.video.VideoEvent;
  8.    
  9.     public class FlvPlayer extends Sprite {
  10.         private var _path:String;
  11.         private var flvplayback:FLVPlayback;
  12.         private var playpauseBtn:PlayPauseButton;
  13.         private var mutebtn:MuteButton;
  14.         private var seekbar:SeekBar;
  15.        
  16.         public function FlvPlayer(path:String) {
  17.             _path = path;
  18.             addEventListener(Event.ADDED_TO_STAGE, _onAdded);
  19.         }
  20.        
  21.         private function _onAdded(e:Event):void {
  22.             removeEventListener(Event.ADDED_TO_STAGE, _onAdded);
  23.            
  24.             flvplayback = new FLVPlayback();
  25.             flvplayback.width = 400;
  26.             flvplayback.height = 300;
  27.             flvplayback.x = 50;
  28.             flvplayback.source = _path;
  29.             //自動再生
  30.             //flvplayback.autoPlay = false;
  31.            
  32.             // playpauseBtn
  33.             playpauseBtn = new PlayPauseButton();
  34.             playpauseBtn.buttonMode = true;
  35.             playpauseBtn.x = 50;
  36.             playpauseBtn.y = 310;
  37.             //seekbar
  38.             seekbar = new SeekBar();
  39.             seekbar.x = 89;
  40.             seekbar.y = 317;
  41.             //mutebtn
  42.             mutebtn = new MuteButton();
  43.             mutebtn.buttonMode = true;
  44.             mutebtn.x = 427;
  45.             mutebtn.y = 310;
  46.            
  47.             flvplayback.playPauseButton = playpauseBtn;
  48.             flvplayback.muteButton = mutebtn;
  49.             flvplayback.seekBar = seekbar;
  50.            
  51.             addChild(playpauseBtn);
  52.             addChild(mutebtn);
  53.             addChild(seekbar);
  54.             addChild(flvplayback);
  55.            
  56.             addEventListener(Event.REMOVED_FROM_STAGE, _onRemoved);
  57.         }
  58.        
  59.         private function _onRemoved(e:Event):void {
  60.             removeEventListener(Event.REMOVED_FROM_STAGE, _onRemoved);
  61.             flvplayback.stop();
  62.             removeChild(seekbar);
  63.             removeChild(playpauseBtn);
  64.             removeChild(mutebtn);
  65.             removeChild(flvplayback);
  66.             seekbar = null;
  67.             playpauseBtn = null;
  68.             mutebtn = null;
  69.             flvplayback = null;
  70.         }
  71.        
  72.     }
  73. }

　
各コンポーネントはFlashデフォルトのものです。それぞれ1フレーム目に書き出す、にチェックをつけるのを忘れずに。
これでFlashの1フレーム目に以下を書いて書き出したものが

PLAIN TEXT
ACTIONSCRIPT:
  1. var flvplayer:FlvPlayer = new FlvPlayer("mov01.flv");
  2. addChild(flvplayer);

　
Read more »

« Previous Entries
Next Entries »