Home > Archives > 2010-12

2010-12

CubeにMovieMaterialを適用してみる


CubeにMovieMaterialを適用してみたかったので、ちょっとテストしてみました。

簡単なタイムラインアニメーションを用意して、Loaderクラスで読み込んでおきます。

読み込みの完了を待って、MovieMaterialを使ってあげます。

private var sp:Sprite;
private var McMat:MovieMaterial;

loader.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);

private function completeHandler(e:Event):void{
    sp = loader.content as Sprite;
    McMat = new MovieMaterial(sp);
    cube.material = McMat;
}

MovieMaterialは第一引数にSprite型を取るので、loader.contentをSprite型に変換して使用しています。

第二引数は指定しなくても上手くいきましたが、指定する場合は以下の様にしてあげます。

McMat = new MovieMaterial(sp,new Rectangle(0,0,384,256));

今回Cubeの一つの面は128pxなので、new Rectangle(0,0,128,128)としても良さそうなんですが、こうしてしまうと一つの面が引き伸ばされた状態で、6面全てに適用されてしまいます。

それを回避する為に、横3列×縦2列の384×256という数値を設定しています。

swfも画像の時と同じく、横3列×縦2列にアニメーションを並べて書き出しています。

6面全てにMovieClipを適用したサンプル(要FlashPlayer10.1)

Loaderではなく、Away3DLiteに用意されているloadersフォルダの中のモノを使った方が、もっとスムーズに出来るのかなぁ…

Away3DLiteのPrimitivesに画像を貼り付ける場合


この間のてら子でも話した内容なんですが、Away3DLiteのPrimitives(PlaneとCube6)にBitmapMaterialを適用する時に注意することを、(ちょっとだけですが)まとめてみました。

Cube6の場合

6個の画像を並べて用意する

6面全てにBitmapMaterialを適用する場合、横3列×縦2列に画像を並べたものを用意してあげると、Cubeの6面にそれぞれ自動的に貼り付けてくれます。

6個の画像を並べて、適用したサンプル(要FlashPlayer10.1)

このサンプルに使っている画像は、こんな感じのものです。

6面にBitmapを適用

一つの画像だと…

画像を6個並べてではなく、1つだけ読み込んだらどうなるのか…

読み込んでいる画像は、以下になります。

flabakaアイコン

画像が引き伸ばされてしまうサンプル(要FlashPlayer10.1)

一つの画像が6面それぞれに適用されるのではなく、画像が引き伸ばされた状態で、それぞれの面に適用されてしまいます。

並べる順番

画像を6つ並べる際、同じ画像を全ての面に適用する場合は、何も考えなくてもいいのですが、違う画像を適用する場合には、並べる順番に気をつける必要があります。

画像が適用される順番を調べる

画像が適用される順番を調べるサンプル(要FlashPlayer10.1)

この画像を読み込んだ際、正面に来るのは、1ではなく、4になります。

正面から右周りに、対応する面と数字を、表に現してみました。

  数字
正面 4
右面 1
裏面 2
左面 3
上面 5
下面 6

Planeの場合

一つの画像を読み込んでみる

flabakaアイコン

Planeにアイコン画像を適用したサンプル(要FlashPlayer10.1)

表・裏両方に画像を適用させる為に、以下のような記述をしています。

private var plane:Plane;

//表・裏両方にBitmapMaterialを適用させる
plane.bothsides = true

画像を2つ並べて読み込んでみると…

(bothsidesを使わずに)Cube6の時のように、表・裏の画像を並べて用意して、それを適用してあげれば、いいんじゃない? と思いますが…

表・裏用の画像

Planeに2つ並べたアイコン画像を適用したサンプル(要FlashPlayer10.1)

こちらも引き伸ばされて適用されてしまいます。

てら子で使ったサンプルとwonderfl、バージョンが違ってた…


ごめんなさい…

この間のてら子で使ったAway3DLiteのサンプルですが、そこで使用していたAway3DLiteとwonderflで使えるAway3DLiteのバージョンが違ってました。

昨日wonderflに、primitivesのLineSegmentとかTridentを使ったものを投稿しようとしたら、そんなクラスはないよ! って怒られて、「あれっ…」と思い調べてみると、バージョン違いが判明…

srcフォルダ内のAway3DLiteのコードを、wonderflと一緒のバージョンに入れ替えたものをアップしました。

サンプルコードはこちらからダウンロードどうぞ!

ご自分で入れ替える方は…

サンプルコード自体はどちらでも動作するので、とりあえず大問題が発生! ということではないのですが…

ご自分で入れ替える方は、以下の点にご注意ください。

注意点

wonderflで使えるバージョン(1.0.0)は、templates>Template.asのコード内に以下の記述があります。

import net.hires.debug.Stats;

//init stats panel
stats = new Stats();

private var stats:Stats;

このように、net>fires>debug>Statsクラスを使っているんですね。

一方、以前のサンプルに入っていたものは、このようになっていました。

import away3dlite.debug.*;

//init stats panel
stats = new AwayStats(view);

private var stats:AwayStats;

こちらは、net>fires>debug>Statsクラスではなく、away3dlite>debug>AwayStatsクラスを使っています。

ですので、以前のサンプルは、srcフォルダ内にnetフォルダがなくても動作していましたが、1.0.0を使う場合には、src>net>hires>Statsという感じにしてあげる必要があります。

その点にご注意頂ければと思います。

逆に前回のサンプルのtemplatesフォルダにはなかったものが、1.0.0ではあったりするんですが…

  • events>LiteKeyboardEvent.as
  • ui>LiteKeyboard.as

ここらあたりは、いろいろ調べてみる必要がありそう…

東京てら子11での発表内容(Away3DLite入門)


昨日の東京てら子11で、僕が話した内容は以下のような感じです。

発表で仕様したサンプルコードは、ここからダウンロード出来ます。

teracoの3Dロゴの作り方

てら子のサイトに掲載されているteracoの3Dロゴですが、大したことはしていません。

何とも可愛らしい「てら子ロゴ」のイラレデータを以前に頂いたので、そのままイラレで開いて、効果→3D→押し出し・ベベルを選択。

アイソメトリック法-右面とアイソメトリック法-上面を使い、あとやったことと言えば、奥行きの値と各パラメーターの数値をちょっと調整したのと、陰影のカラーをブラックではなく、カスタムにしたくらい…

ものの数分で、いい感じのロゴが完成! という感じです、はい。

Away3DLite入門・はじめに

ダウンロードしたサンプルですが、FlashDevelopプロジェクトになっていますので、ご使用の環境に適宜調整して頂ければと思います。

Away3DLiteのサンプルコードと『Flash 3Dで学ぶプログラミング』の書籍を半分くらい読んだのですが、どちらもコードの書き方は共通していました。(書籍もサンプルコードの書き方を参考にしていると記載されていました)

それが、src>Main.asになります。

僕のサンプルもその書式に則って書いてあります。

Away3DLite入門・便利なところ

サンプルの中のファイル名「●●●Test.as」というのは、Spriteクラスを継承して、SceneやCameraやViewなどをゴリゴリ書いていくやり方になります。

Away3DLiteには、便利なテンプレートが用意されています。(src>away3dlite>templates)

Template.asには、先の一連の設定(SceneやCameraやViewなど)が既にされているので、それを使ってあげることで、Away3DLiteを簡単に試すことが可能になります。

サンプルの中のファイル名「●●●Temp.as」というのは、Template.asをextendsしたBasicTemplate.asを用いて、コードを書き換えたものになります。

感じとしては、clockmakerさんの『フレームアクションで覚える Papervision3D チュートリアル Vol.01』のBasicViewを用いて…というのと似ているのではないかと思います。

あとは、テクスチャの貼り付けが簡単ということでしょうか…

ImageTest.asやLoadImageTest.asにもありますが、Cube6のデフォルトの値(幅・高さ・奥行き)は100なので、300×200pxの画像を作成し、それを貼り付けてあげれば、OK。(サイコロなどを作るときは、画像の作成方法に気をつける必要があります。そこは、assets>number.jpgをCube6に貼り付けてあげて、貼り付けられる面の順番を確認してください!)

Away3DLite入門・BasicTemplateの使い方

BasicTemplateで何かプリミティブオブジェクトを作成するとかいった処理は、以下のように行います。

private var cube:Cube6;

//初期化などの処理を記述
override protected function onInit():void {
	cube = new Cube6();
	scene.addChild(cube);
}

こんな感じでoverrideする必要があります。(ここらあたりはProgressionと似ていますね!)

オブジェクトを回転させるとか言った処理は、以下のように記述します。

//変更を加えるとかの処理はここに
override protected function onPreRender():void {
	cube.rotationY += 2;
}

こんな感じで、テンプレートを使ってあげるとサクッと出来ちゃいます。

ただ気をつけることは、TemplateはcamerasクラスのCamera3Dを使っていることでしょうか…

ですので、HoverCamera3DやTargetCamera3Dを使いたい場合には、注意が必要です。

HoverCamera3Dを使ったテンプレートを自作するのも、一つの手かと…

Away3DLiteを触り初めてまだ日が浅いので、まずはこんなところで…

東京てら子11 『3D』


東京てら子11 『3D』

本年度最後のてら子を、12月12日に開催します。

今回は諸事情につき、ATNDやTwiPlaでの募集は行いません。

Ustの中継とかは行いますので、お許しを…

詳しくはこちらをどうぞ!

Home > Archives > 2010-12

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top