Home > FIVe3D
FIVe3D Archive
FIVe3DのBitmap3Dで気になったこと
- 2009-06-01 (月)
- FIVe3D | FlashDevelop
以前のFIVe3Dのエントリにコメントを頂いて、検証がてら（FIVe3Dを）久しぶりに触って、気がついたことがあったので、メモ。
five3D（ver2.1.2）>display>Bitmap3D.asファイルの401～402行目。
var matrix = new Matrix(); var matrixp = new Matrix();
別にいいっちゃいいけど、FlashDevelopでコンパイルすると、エラーと表示される。
var matrix:Matrix = new Matrix(); var matrixp:Matrix = new Matrix();
こうしておけば、怒られない。
何でここだけデータ型の指定がしていないんだろう…
わざとなのかなぁ…
- Comments: 0
- Trackbacks: 0
CubeClock
- 2008-10-16 (木)
- ActionScript3.0 | FIVe3D | Works
思いっきり3Dライブラリ使ってます！ いう時計を作りたくて作ったのが、これ。
JavaScriptを有効にしてご覧ください。（要FlashPlayer9以上）
FIVe3DでTeraClock（3）のエントリにも書いてありますが、時間の経過とともにCubeが動きます。
package {
import flash.display.StageScaleMode;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
// FIVe3Dクラスを読み込む
import five3D.display.DynamicText3D;
import five3D.display.Scene3D;
import five3D.display.Shape3D;
import five3D.display.Sprite3D;
import five3D.display.Graphics3D;
import five3D.display.Bitmap3D;
import five3D.typography.ＭＳＰGothic;
import five3D.utils.Drawing;
//TeraClockを読み込む
import com.trick7.utils.TeraClock;
//CubeClockを読み込む
import com.flabaka.utils.CubeClock;
public class ClockCube extends Sprite {
private var scene:Scene3D;
private var cube1:CubeClock;
private var cube2:CubeClock;
private var cube3:CubeClock;
private var clock:TeraClock;
//コンストラクタ
public function ClockCube() {
stage.scaleMode = StageScaleMode.NO_SCALE;
//3Dのシーンを作成
scene = new Scene3D();
scene.x = 300;
scene.y = 200;
addChild(scene);
//CubeClockの引数（面の色、線の太さ、線の色、文字の大きさ、文字の色、文字の位置、幅、高さ、深度、透明度）
//秒を表示するためのCubeを作成
cube1 = new CubeClock(0xFFFFFF,1, 0x000000, 50, 0x000000,25,100, 100, 50,0.5);
cube1.x = 150;
cube1.y = 0;
cube1.rotationX = 25;
cube1.rotationY = 25;
scene.addChild(cube1);
//分を表示するためのCubeを作成
cube2 = new CubeClock(0xFFFFFF,1, 0x000000, 50, 0x000000,25,100, 100, 50,0.5);
cube2.x = 0;
cube2.y = 0;
cube2.rotationX = 25;
cube2.rotationY = 25;
scene.addChild(cube2);
//時を表示するためのCubeを作成
cube3 = new CubeClock(0xFFFFFF,1, 0x000000, 50, 0x000000,25,100, 100, 50,0.5);
cube3.x = -150;
cube3.y = 0;
cube3.rotationX = 25;
cube3.rotationY = 25;
scene.addChild(cube3);
clock = new TeraClock();
clock.addEventListener(TeraClock.SECONDS_CHANGED, secondsListener);
clock.addEventListener(TeraClock.MINUTES_CHANGED, minutesListener);
clock.addEventListener(TeraClock.HOURS_CHANGED, hoursListener);
}
private function secondsListener(e:Event):void{
cube1.tf01.text = cube1.tf02.text = cube1.tf03.text = cube1.tf04.text = cube1.tf05.text = cube1.tf06.text = String(clock.seconds2);
cube2.tf01.text = cube2.tf02.text = cube2.tf03.text = cube2.tf04.text = cube2.tf05.text = cube2.tf06.text = String(clock.minutes2);
cube3.tf01.text = cube3.tf02.text = cube3.tf03.text = cube3.tf04.text = cube3.tf05.text = cube3.tf06.text = String(clock.hours2);
cube1.rotationX -= 90;
cube1.rotationZ += 45;
}
private function minutesListener(e:Event):void{
cube2.rotationY += 45;
}
private function hoursListener(e:Event):void{
cube3.rotationY += 45;
}
}
}
今回はCubeClockクラスなるものを作成してみました。importして、newすれば、簡単にCubeClockが作れます。
newしたときに、引数でcubeの面の色、線の色、サイズ、透明度とかいろいろ設定出来るようになっています。
文字の幅ですが、自分の好きなフォントを使う場合は、Make a new typography fileを使うことになりますが、フォントによってBOX内での表示位置がまちまちなので、この幅に数値を入れることで、対応することが出来ます。
Make a new typography fileの詳しい使い方は、FIVe3DのMake a new typography fileを使う際に注意することのエントリを参照してください。
あと深度ですが、幅・高さで指定した数値の半分の値を入れてあげれば、上手くいくようになっています。
★CubeClockクラスはこんな感じ
package com.flabaka.utils {
import flash.display.*;
import flash.events.*;
// FIVe3Dクラスを読み込む
import five3D.display.DynamicText3D;
import five3D.display.Scene3D;
import five3D.display.Shape3D;
import five3D.display.Sprite3D;
import five3D.display.Graphics3D;
import five3D.display.Bitmap3D;
import five3D.typography.ＭＳＰGothic;
import five3D.utils.Drawing;
public class CubeClock extends Sprite3D {
private var w:Number;
private var h:Number;
private var zindex:Number;
private var color:uint;
private var linecolor:uint;
private var fontsize:int;
private var fontcolor:uint;
private var linesize:Number;
private var p:Number;
private var transparent:Number;
public var tf01:DynamicText3D;
public var tf02:DynamicText3D;
public var tf03:DynamicText3D;
public var tf04:DynamicText3D;
public var tf05:DynamicText3D;
public var tf06:DynamicText3D;
//コンストラクタ
public function CubeClock(_color:uint, _linesize:Number, _linecolor:uint, _fontsize:int, _fontcolor:uint,_p:Number ,_w:Number, _h:Number, _zindex:Number,_transparent:Number) {
color = _color;
linesize = _linesize;
linecolor = _linecolor;
fontsize = _fontsize;
fontcolor = _fontcolor;
w = _w;
h = _h;
zindex = _zindex;
p = _p;
transparent = _transparent;
init();
}
public function init(){
childrenSorted = true;
CreateCube();
}
public function CreateCube(){
var sp01:Sprite3D = new Sprite3D();
addChild(sp01);
sp01.graphics3D.clear();
sp01.graphics3D.lineStyle(linesize,linecolor);
sp01.graphics3D.beginFill(color,transparent);
sp01.graphics3D.drawRect(-w/2,-h/2,w,h);
sp01.graphics3D.endFill();
sp01.z = - zindex;
tf01 = new DynamicText3D(ＭＳＰGothic);
tf01.size = fontsize;
tf01.x = -p;
tf01.y = -p;
tf01.color = fontcolor;
tf01.alpha = transparent;
tf01.text = "01";
sp01.addChild(tf01);
var sp02:Sprite3D = new Sprite3D();
addChild(sp02);
sp02.graphics3D.clear();
sp02.graphics3D.lineStyle(linesize,linecolor);
sp02.graphics3D.beginFill(color,transparent);
sp02.graphics3D.drawRect(-w/2,-h/2,w,h);
sp02.graphics3D.endFill();
sp02.rotationY = -90;
sp02.x = zindex;
tf02 = new DynamicText3D(ＭＳＰGothic);
tf02.size = fontsize;
tf02.x = -p;
tf02.y = -p;
tf02.color = fontcolor;
tf02.alpha = transparent;
tf02.text = "02";
sp02.addChild(tf02);
var sp03:Sprite3D = new Sprite3D();
addChild(sp03);
sp03.graphics3D.clear();
sp03.graphics3D.lineStyle(linesize,linecolor);
sp03.graphics3D.beginFill(color,transparent);
sp03.graphics3D.drawRect(-w/2,-h/2,w,h);
sp03.graphics3D.endFill();
sp03.rotationY = 90;
sp03.x = -zindex;
tf03 = new DynamicText3D(ＭＳＰGothic);
tf03.size = fontsize;
tf03.x = -p;
tf03.y = -p;
tf03.color = fontcolor;
tf03.alpha = transparent;
tf03.text = "03";
sp03.addChild(tf03);
var sp04:Sprite3D = new Sprite3D();
addChild(sp04);
sp04.graphics3D.clear();
sp04.graphics3D.lineStyle(linesize,linecolor);
sp04.graphics3D.beginFill(color,transparent);
sp04.graphics3D.drawRect(-w/2,-h/2,w,h);
sp04.graphics3D.endFill();
sp04.rotationX = -90;
sp04.y = -zindex;
tf04 = new DynamicText3D(ＭＳＰGothic);
tf04.size = fontsize;
tf04.x = -p;
tf04.y = -p;
tf04.color = fontcolor;
tf04.alpha = transparent;
tf04.text = "04";
sp04.addChild(tf04);
var sp05:Sprite3D = new Sprite3D();
addChild(sp05);
sp05.graphics3D.clear();
sp05.graphics3D.lineStyle(linesize,linecolor);
sp05.graphics3D.beginFill(color,transparent);
sp05.graphics3D.drawRect(-w/2,-h/2,w,h);
sp05.graphics3D.endFill();
sp05.rotationX = 90;
sp05.y = zindex;
tf05 = new DynamicText3D(ＭＳＰGothic);
tf05.size = fontsize;
tf05.x = -p;
tf05.y = -p;
tf05.color = fontcolor;
tf05.alpha = transparent;
tf05.text = "05";
sp05.addChild(tf05);
var sp06:Sprite3D = new Sprite3D();
addChild(sp06);
sp06.graphics3D.clear();
sp06.graphics3D.lineStyle(linesize,linecolor);
sp06.graphics3D.beginFill(color,transparent);
sp06.graphics3D.drawRect(-w/2,-h/2,w,h);
sp06.graphics3D.endFill();
sp06.z = zindex;
sp06.rotationY = 180;
tf06 = new DynamicText3D(ＭＳＰGothic);
tf06.size = fontsize;
tf06.x = -p;
tf06.y = -p;
tf06.color = fontcolor;
tf06.alpha = transparent;
tf06.text = "06";
sp06.addChild(tf06);
}
}
}
CubeClockクラスの作成にあたっては、moriBlogさんの「Z-Sortの続き。Cubeを表示」の記事を参考にさせていただきました。
てら子勉強会の際には、面や線の色を一つ一つ指定出来るようなソース（uintでなくArray）だったんですが、こっちの方がいいかなぁ…ってことで、修正してあります。
★引数の透明度を変更してみたCubeClock
transparentを1ではなく0.5にすると、こんな感じになります。
- Comments: 0
- Trackbacks: 0
PolygonClock
- 2008-10-16 (木)
- ActionScript3.0 | FIVe3D | Works
FIVe3Dの公式サイトからダウンロードできるサンプルデータ（Elements Menu）を参考に、作成してみた時計です。
FIVe3DでTeraClock（2）にエントリした様に、サンプルデータはAS2で作成されていたんですが、AS3に変更して作ってみました。
JavaScriptを有効にしてご覧ください。（要FlashPlayer9以上）
ソースはこんな感じ
package {
import flash.display.StageScaleMode;
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.text.*;
import flash.events.*;
import five3D.display.DynamicText3D;
import five3D.display.Scene3D;
import five3D.display.Shape3D;
import five3D.display.Sprite3D;
import five3D.typography.ＭＳＰGothic;
import five3D.utils.Drawing;
import com.trick7.utils.TeraClock;
public class PolygonClock extends Sprite{
private var clock:TeraClock;
private var scene:Scene3D;
private var secondsTxt:DynamicText3D;
private var radius1:Number = 150;
private var radius2:Number = 150;
private var p:Number = Math.PI/180;
private var centerX:Number = stage.stageWidth / 2;
private var centerY:Number = stage.stageHeight / 2;
//コンストラクタ
public function PolygonClock() {
stage.scaleMode = StageScaleMode.NO_SCALE;
// 3Dの定義みたいなもん
scene = new Scene3D();
scene.x = 275;
scene.y = 250;
addChild(scene);
//色を配列に登録しておく
var ColorList:Array = new Array();
ColorList.push("0x00FF00","0x00FF80","0x00FFFF","0x0080FF","0x0000FF","0x8000FF", "0xFF00FF","0xFF0080","0xFF0000","0xFF8000","0xFFFF00","0x80FF00");
//傾きを配列に登録しておく
var RotateList:Array = new Array();
RotateList.push(-15,15,-15,15,-15,15,-15,15,-15,15,-15,15);
//文字盤を配列に登録しておく
var TimeList:Array = new Array();
TimeList.push(4,5,6,7,8,9,10,11,12,1,2,3);
for(var i:uint = 1; i<13;i++){
var obj:Shape3D = new Shape3D();
Drawing.polygon(obj.graphics3D,[{x:-25,y:0},{x:-25,y:-70},{x:15,y:-70},{x:30,y:-50},{x:30,y:0}],ColorList[i-1]);
obj.x = radius1 * Math.cos(i * 30 * p);
obj.y = radius1 * Math.sin(i * 30 * p);
obj.rotationX = 45;
obj.rotationY = RotateList[i-1];
scene.addChild(obj);
var reflect:Shape3D = new Shape3D();
Drawing.polygon(reflect.graphics3D,[{x:-25,y:0},{x:-25,y:70},{x:15,y:70},{x:30,y:50},{x:30,y:0}],ColorList[i-1],0.2);
reflect.x = radius1 * Math.cos(i * 30 * p);
reflect.y = radius1 * Math.sin(i * 30 * p);
reflect.rotationX = 45;
reflect.rotationY = RotateList[i-1];
scene.addChild(reflect);
var mytext:DynamicText3D = new DynamicText3D(ＭＳＰGothic);
mytext.size = 14;
mytext.color = 0x666666;
mytext.text = TimeList[i-1];
mytext.x = (radius2 * Math.cos(i * 30 * p))-5;
mytext.y = radius2 * Math.sin(i * 30 * p);
mytext.rotationX = 45;
mytext.rotationY = RotateList[i-1];
scene.addChild(mytext);
}
//3D空間にテキストを配置（秒を表示）
secondsTxt = new DynamicText3D(ＭＳＰGothic);
secondsTxt.size = 125;
secondsTxt.color = 0x999999;
secondsTxt.alpha = 0.2;
secondsTxt.text = "";
secondsTxt.x = -65;
secondsTxt.y = -40;
secondsTxt.rotationX = 45;
scene.addChild(secondsTxt);
clock = new TeraClock();
Myhours.x = Myminutes.x = centerX;
Myhours.y = Myminutes.y = centerY;
clock.addEventListener(TeraClock.SECONDS_CHANGED, secondsListener);
}
//秒が更新される度の処理
function secondsListener(e:Event):void {
secondsTxt.text = clock.seconds2;
Myhours.rotation = -90 + clock.hoursDegree;
Myminutes.rotation = -90 + clock.minutesDegree;
}
}
}
Drawingクラスのpolygonメソッドを使ってオブジェクトを描写。あとは、配列をかなり多用しています。
ダウンロードできるサンプルでは、色とか傾きとかはXMLファイルに定義してあったんですが、他の方法で試してみよう！ と思い、この手法をとってみました。
ちなみにMyhoursとMyminutesは、FlashIDE側で作成してある時計の針（MovieClipシンボル）のインスタンス名です。
- Comments: 0
- Trackbacks: 0
ClickPanelClock
- 2008-10-15 (水)
- ActionScript3.0 | FIVe3D | Works
3Dライブラリを使って時計でも作ろうかなぁ…と考えていて、まだ触ったことのなかったFIVe3Dに手を出してみて、作ったのがこれ。
FIVe3Dをダウンロードした際に（フォルダに）入っているfirst_exampleのデータと、ほぼ一緒ですが…
JavaScriptを有効にしてご覧ください。（要FlashPlayer9以上）
package {
import flash.display.StageScaleMode;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
// FIVe3Dのクラスを読み込む
import five3D.display.DynamicText3D;
import five3D.display.Scene3D;
import five3D.display.Shape3D;
import five3D.display.Sprite3D;
import five3D.typography.ＭＳＰGothic;
import five3D.utils.Drawing;
//TeraClockを読み込む
import com.trick7.utils.TeraClock;
public class ClickPanelClock extends Sprite {
//変数各種を設定しておく
private var clock:TeraClock;
private var scene:Scene3D;
private var sign:Sprite3D;
private var hi:DynamicText3D;
private var txt1:DynamicText3D;
private var txt2:DynamicText3D;
private var txt3:DynamicText3D;
private var txt4:DynamicText3D;
private var txt5:DynamicText3D;
//コンストラクタ
public function ClickPanelClock() {
clock = new TeraClock();
clock.addEventListener(TeraClock.SECONDS_CHANGED, secondsListener);
stage.scaleMode = StageScaleMode.NO_SCALE;
scene = new Scene3D();
scene.x = 300;
scene.y = 200;
addChild(scene);
sign = new Sprite3D();
sign.graphics3D.beginFill(0x000000);
sign.graphics3D.drawRoundRect(-150, -150, 300, 300, 40, 40);
sign.graphics3D.endFill();
scene.addChild(sign);
txt1 = new DynamicText3D(ＭＳＰGothic);
txt1.size = 60;
txt1.color = 0xffffff;
txt1.x = -100;
txt1.y = -34;
sign.addChild(txt1);
txt2 = new DynamicText3D(ＭＳＰGothic);
txt2.size = 60;
txt2.color = 0xffffff;
txt2.x = -38;
txt2.y = -40;
txt2.text = ":";
sign.addChild(txt2);
txt3 = new DynamicText3D(ＭＳＰGothic);
txt3.size = 60;
txt3.color = 0xffffff;
txt3.x = -25;
txt3.y = -34;
sign.addChild(txt3);
txt4 = new DynamicText3D(ＭＳＰGothic);
txt4.size = 60;
txt4.color = 0xffffff;
txt4.x = 40;
txt4.y = -40;
txt4.text = ":";
sign.addChild(txt4);
txt5 = new DynamicText3D(ＭＳＰGothic);
txt5.size = 60;
txt5.color = 0xffffff;
txt5.x = 55;
txt5.y = -34;
sign.addChild(txt5);
sign.rotationX = Math.random()*100-50;
sign.rotationY = Math.random()*100-50;
sign.rotationZ = Math.random()*100-50;
sign.addEventListener(MouseEvent.CLICK, signClickHandler);
sign.mouseChildren = false;
sign.buttonMode = true;
}
function secondsListener(e:Event):void {
txt1.text = clock.hours2;
txt3.text = clock.minutes2;
txt5.text = clock.seconds2;
}
private function starEnterFrameHandler(event:Event):void {
event.target.rotationZ++;
}
private function signClickHandler(event:MouseEvent):void {
event.target.rotationX = Math.random()*100-50;
event.target.rotationY = Math.random()*100-50;
event.target.rotationZ = Math.random()*100-50;
}
}
}
FIVe3DでTeraClock（1）のエントリにも書きましたが、テキストフィールドを一つにして、そこに「時:分:秒」という形で表示させると、時間が更新されたときに画面がきちんと更新されないというバグが発生しました。
なので、回避するためにテキストを５つに分けて、それぞれに値を入れています。
この方法ならきちんと表示されたんで、まぁ、これでいいかと…
これを作ってみて、「FIVe3Dって楽しいかも…」と感じました。
- Comments: 0
- Trackbacks: 0
Matrixでは無理みたい…
- 2008-10-06 (月)
- ActionScript3.0 | FIVe3D
FIVe3Dで作成したcubeを、時間の経過と共にy軸方向にだけ延ばしたいなぁ…と思ってやってみたこと
private var _scale:Number = 1; （略） cube.scaleY += _scale * 1.25;
このようにすると、時間の経過と共にcubeはy軸に方向に延びることは延びるんですが、cubeの真ん中（中心）を基準にして拡大するので、見た目（モニタ上）では上下に延びるという感じになってしまう…
希望としては、上方向にだけ延びて欲しいので、この方法はボツ。
基準点を変更すれば、何だか良さそうなので、今度は基準点を変更してみることに…
cellfusionさんが、Matrixでオブジェクトの基準点を変更出来るよ！ という記事をお書きになっていたのを思い出し、早速その手法を試してみる。
ダウンロードできるサンプルコードを、試しにこんな感じにしてみると…
private function enterframeHandler(event:Event):void{
var mat:Matrix = new Matrix();
mat.translate(-50, -100);
//y軸方向に延ばしてみる
mat.scale(1,1.05);
（略）
無事、BOXをy軸（の上にだけ）方向に延ばすことが出来た。
駄目もとで、これをFIVe3Dで作ったcubeに適用させてみると…
private function enterframeHandler(event:Event):void{
var mat:Matrix = new Matrix();
mat.translate(-50, -100);
//y軸方向に延ばしてみる
mat.scale(1,_scale*1.25);
（略）
最初は問題なさそうだったんですが、時間の経過と共に画面から消えていってしまいました…
やっぱりMatrixでは（FIVe3Dで作成したオブジェクトには）上手くいかないみたいです…
- Comments: 0
- Trackbacks: 0
ホーム > FIVe3D
- Search
- Feeds
- Meta