Home > Away3DLite

Away3DLite Archive

Away3Dのテンプレートを作ってみた


Away3DLiteには、away3dlite>templatesフォルダの中に、Away3DLiteを始めるのに簡単なテンプレートファイルが幾つか入っています。

これを使うことで、ちょっとAway3DLite試してみるか…といった事が簡単に出来ちゃいます。

でもこのテンプレートファイルは、Away3Dにはないんですよねぇ…

前々から「Away3Dにもテンプレートファイルがあったら、便利だよなぁ」と思っていて、日曜日にFlashup 第12回に参加してきたこともあったので、テンプレートファイルを作ってみました。

作ったと言っても、(Away3DLiteと同じ感じで使えるようにする為)8~9割はAway3DLiteのテンプレートと同じコードなんですけど…

ダウンロード

使い方

BasicTemplate.asというファイルをダウンロードしてきて、同一階層にMainというクラスファイルを作成。

package 
{
	import away3d.primitives.Cube;
	
	/**
	 * @author flabaka
	 */
	
	public class Main extends BasicTemplate 
	{
		
		private var cube:Cube
		
		override protected function onInit():void {
			cube = new Cube();
			scene.addChild(cube)
		}
		
		override protected function onPreRender():void {
			scene.rotationY += 2;
		}
		
	}
	
}

これをコンパイルすると、Cubeがくるくる横に回転します。

ちょっと試したいんだけど、View3DとかScene3DとかCamera3Dとか毎回作るの面倒くさいよね! って人には、ちょっとだけ便利かも…

それは、まぁ、僕なんですけど…

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を触り初めてまだ日が浅いので、まずはこんなところで…

ホーム > Away3DLite

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top