ヤッチマイナシコ

Cubeにマウスオーバーとクリックのイベントを付けて、ワールド座標を取得するMouse3Dの値を見たらマウスオーバーしたときの値が変なことに気が付いた。

どうやら1回前の値を表示しているような動きをしている。

下のサンプルのCube AとCube BにマウスオーバーしたときのX座標を見てもらうと分かるかと思います。
Cube Aをマウスオーバー後に、Cube BをマウスオーバーするとCube Aでマウスオーバーしたときのマウス座標が表示されるはずです。
Cube Cは対策済み。

ちなみにCube Bが座標の中心（x=0）で、Cube A側がマイナス、Cube C側がプラス方向です。

private function cubeOver(evt:InteractiveScene3DEvent):void
{
  // 1
  viewport.interactiveSceneManager.mouse3D.updatePosition(evt.renderHitData);
  
  // 2
  viewport.interactiveSceneManager.mouse3D.updatePosition(viewport.interactiveSceneManager.renderHitData);
}

iewport.interactiveSceneManager.mouse3D.updatePositionメソッドを使うといいことは分かったけど、1と2どっちを使えばいいのか分からない。状況によるのかな？？

サンプルソース

ようやく3Dで作りたいものができたのでお勉強です。Sandyはちょこっと触ったことがあったんですがPapervisionの方が何かと情報が多いと思ったのでこちらで作成することにしました。

基本的な作り方は単純で分かりやすいね！と思ったらさっそくCubeの色付けで詰まったのでメモ。色付けというよりはマテリアルの変更と言ったほうが正しいかと思います。
Cubeは6面すべてに対して色やBitmapの貼り付けが可能で、Plane（平らなオブジェクト）とはちょっと扱い方が違うところが手間です。

以下、作成のソース。

// Planeの作成
var planeMaterial:ColorMaterial = new ColorMaterial(0x000000);
var plane:Plane = new Plane(planeMaterial, 500, 500, 15, 15);

// Cubeの作成
var cubeMaterial:ColorMaterial = new ColorMaterial(0x555555);
var cubeMaterialsList:MaterialsList = new MaterialsList();
cubeMaterialsList.addMaterial(cubeMaterial, "all"); // 6面すべて同じ
var cube:Cube = new Cube(cubeMaterialsList, 10, 10, 10);

Planeはnewするときにマテリアル情報（ここではColorMaterial）を指定してあげるだけで作成でき、Cubeは作成したマテリアル情報をMaterialsListに6面の設定を書き込み、CubeをnewするときにMaterialsListを指定してあげる。6面全体を同じにする場合は上記のように"all"を指定し、1面毎に設定する場合は"front"、"top"等で設定する。



Cube自体にマウスイベントを設定するのは簡単。

// cube マテリアル
var cubeMaterial:ColorMaterial = new ColorMaterial(0x555555);
cubeMaterial.interactive = true;
var cubeMaterialsList:MaterialsList = new MaterialsList();
cubeMaterialsList.addMaterial(cubeMaterial, "all"); // 6面すべて同じ
			
// cube 作成
var cube:Cube = new Cube(cubeMaterialsList, 10, 10, 10);
cube.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, cubeOver, false, 0, true);
cube.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, cubeOut, false, 0, true);
cube.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, cubeClick, false, 0, true);

Cube自体にマウスイベントを設定するには、InteractiveScene3DEventを使用する。
その際、マテリアルにはcubeMaterial.interactive = true;のようにinteractiveの設定を行う。



とりあえず2つの方法がある事が分かったけど、結局1つの方法でよさそう。

1．Cubeのmaterialプロパティを置き換える方法。

private function cubeClick(evt:InteractiveScene3DEvent):void
{
  var cube:Cube = evt.renderHitData.displayObject3D as Cube;
  var cubeMaterial:ColorMaterial = new ColorMaterial(0xFF0000);
  cubeMaterial.interactive = true;
  cube.material = cubeMaterial;
}

cube.materialプロパティにマテリアル情報を指定するだけで変更できる。


2．CubeのreplaceMaterialByNameメソッド使用して置き換える方法。

private function cubeBClick(evt:InteractiveScene3DEvent):void
{
  var cube:Cube = evt.renderHitData.displayObject3D as Cube;
  var cubeMaterial:ColorMaterial = new ColorMaterial(0xFF0000);
  cubeMaterial.interactive = true;
  cube.replaceMaterialByName(cubeMaterial, "all");
}

replaceMaterialByNameメソッドにマテリアル情報と面を指定すると変更できる。

両方を使ってみた結果ですが、後者のreplaceMaterialByNameメソッドを使用する方が困らないということが分かりました。
1．6面に個別の設定を行うことができる。
2．前者のmaterialプロパティを1度使用すると、その後replaceMaterialByNameメソッドが効かなくなる。（もしかしたら効くようにできるかもしれない）

重要なのは2．の事だと思います。
下のサンプルの"Cube C"は、マウスオーバー、マウスアウト時にreplaceMaterialByNameメソッドでマテリアル情報をセットし、クリック時にmaterialプロパティでマテリアル情報をセットしています。クリック後は色が変更されないことが分かります。
よって、後者であるreplaceMaterialByNameメソッドを使用してマテリアル情報を変更したほうがよさそうです。




サンプルのFlashでCubeにマウスオーバーした状態で、画面全体を回転させCubeからマウスアウトしても判定が走らないようです。これは何かしらで改善できそうですが、今後の課題かな。
とりあえず2日目なので今からガシガシ覚えていきます。


サンプルソース

外部のAIRなんかでObjectの中を表示してくれるやつがちらほらあるんですが、やっぱ面倒と思って適当に作ってみた。どうせならPHPのprint_rが個人的に好みなので似せてみた。

とりあえず下みたいなデータを吐いてみる。

import net.nashiko.utils.Trace;

var obj:Object = new Object();
obj["xPos"] = 100;
obj["yPos"] = 200;
obj["testAry"] = [1,2,3];

Trace.print_r(obj);

trace結果

object (
  [yPos]:number = 200
  [testAry]:array = [Array]
  array (
    [0]:number = 1
    [1]:number = 2
    [2]:number = 3
  )

  [xPos]:number = 100
)

こんな感じ。Objectのfor inは順番が適当になるのが気に食わないけど仕様だからしょうがない。個人的には見やすいです。

ダウンロード

うんうんそうだよね！と思いながらじっくり読んだ。

同じBitmapを使う場合の膨大処理って結構重要なので覚えておいて損はないと思います。

@IT - Flashで吹雪のごとき描画を実現するチューニング3策

Vecterに突っ込むとこだけは毎回無視していたので今度から使おうかな。

AS3の話なんですが、JSばっかやってたらすっかり忘れてた･･･。

ArrayのコピーならArray.concat()とかArray.slice()でサクっといけるのは覚えてたのに、Objectのコピーがどうしてもでてこなかった。

ByteArrayって単語見たら思い出したけどこりゃマズイです。
というわけで忘れっぽいので書いておこう。

import flash.utils.ByteArray;
public static function clone(obj:*):*
{
  var ba:ByteArray = new ByteArray();
  ba.writeObject(obj);
  ba.position = 0;
  return ba.readObject();
}

いっちょあると便利です。

思い出させてくれたサイトさん。

2点から角度を求める方法をすぐ忘れるのでメモメモ。

// e.y = 終了点 Y
// s.y = 開始点 Y
// e.x = 終了点 X
// s.x = 開始点 X
var rot:Number = Math.atan2(e.y - s.y, e.x - s.x) * 180 /Math.PI;

昨日に引き続き、Zend_Amf_Serverを使ってデータ送信です。

今日はイメージの保存をやってみました。
BMP保存と書いていますが正確にはPNGとして保存するんですけどね。

イメージデータの保存がこれほど単純に作れるとは恐ろしいです。
今まであーだーこーだ思いながら作ってたのに＞＜

PNGを保存するPHP

<?php
require_once('Zend/Amf/Server.php');

$server = new Zend_Amf_Server();
$server->setClass('Image');
$response = $server->handle();
echo $response;

class Image
{
 /**
 * @param string name
 * @param array data
 * @return boolean
 */
 public function pngsave($name, $data)
 {
  $success = false;
  if( !is_null($name) && $fp = fopen($name.".png", "w+") )
  {
   fwrite($fp, $data);
   fclose($fp);
   $success = true;
  }
  return $success;
 }

}

?>

BmpをPNGに変換して送信

import flash.net.NetConnection;
import flash.net.Responder;
import com.adobe.images.PNGEncoder;

var gateway:String = "http://localhost/zend_amf_img/zend_amf_img.php";
var connection:NetConnection = new NetConnection();
var responder:Responder = new Responder(onResultHandler, onFaultHandler);
connection.connect(gateway);

var bmpd:BitmapData = new BitmapData(200,200,true,0x00000000);
bmpd.draw(this);
var imgByte:ByteArray = PNGEncoder.encode( bmpd );

// phpCall, response, 保存ファイル名, 送信イメージデータ
connection.call("Image.pngsave", responder, "filename", imgByte);

function onResultHandler(evt:Object):void
{
	trace(String(evt));
}

function onFaultHandler(evt:Object):void
{
	trace(String(evt));
}

これだけです。PHPの処理が適当すぎますが保存はできます。
AS3のPNGEncoderはググルとでてきます。

お手軽っすな〜?。

ダウンロードはこちらから