POPSブログ

CreateJS バージョンUP(easeljs-0.7)に伴う「デモ」の変更点

253

  Category:  javascript2013/10/08 pops 

EaselJSなどバージョンUPされました(easeljs-0.7)、EVENTなどの部分が大きく変更された所も有りますので、easeljs-0.7に対応させるため、当方の「デモ」JSの補正する箇所などを記載します。

 

2013/09/25/EaselJSなどバージョンUPされました(easeljs-0.7)。記事内容など変更しなければ成らない箇所がありますが、記事の修正には時間を要しますので、取り合えず簡単に説明します。

(2013/10/23、CreateJS関連記事全てを easeljs-0.7 用に更新終了しました)


[ 目次 ]


 

 

 

クリックアクションの設定と補正

▲[ 目次 ]

以前(easeljs-0.6)の設定方法では、EVENTの判定する「クリックアクション」は殆んど機能しません。
以前のアクションの補正は、次のようにボタン内部にEVENTが及ばないように mouseChildren を加えれば、そのままで機能はするが完全で有るかは不明です。(問題なら、easeljs-0.7用の新しい設定方法に修正する方が無難です)
EVENTの判定無しのボタンはそのままで正常に機能する様です。但し、全てクリックが機能するか確認が必要です。


● 以前の設定で補正する、(easeljs-0.6のままで追加補正)


以前の設定例

ボタンインスタンス.addEventListener("click",handleclick);
ここにmouseChildren追加

//処理
function handleclick (event) {

	var target=event.target;
	//押されたボタンは何番目か
	var hit_no=target.parent.getChildIndex(target);

	その外の処理は略す

}

mouseChildrenで補正

上のような「クリックアクション」の場合、mouseChildren=false を直下に追加 して補正します。
handleclick関数が以前のままで機能しますが、一応、応急処置です。但し機能するか確認下さい。


ボタンインスタンス.addEventListener("click",handleclick);
ボタンインスタンス.mouseChildren=false;

● 新しい設定に書き換える、(easeljs-0.7の形式に補正)

中の要素の EVENT でも「親」要素を指定するように書く。下記は「通常のボタン」構造の場合である。
勿論構造が違う、例えば「子」を含まない Bitmap そのものにアクションを与える時は、別の書き方に成る。


複数のボタンインスタンスが、ボタン階層コンテナに収容されている前提

ボタンインスタンス.addEventListener("click",handleclick);

//処理
function handleclick (event) {

	var instance=event.target.parent;
	//押されたボタンは何番目か
	var hit_no=instance.parent.getChildIndex(instance);
	//インスタンスにIDで番号をいれてあるなら
	//var hit_no=instance.id;

	その外の処理は略す

}

● EVENTの判定をしないボタン

1個のみのボタンでEVENTの判定などない単純なボタンの場合は、何ら補正なしで機能する様です。



ボタンインスタンス.addEventListener("click",handleclick);

//処理eventなし
function handleclick () {

	その外の処理は略す、当然event関連の処理は出来ない

}

●easeljs-0.7 で追加された、on() メソッドで処理する

殆んどは押されたボタンの番号を取得する処理で有り、ループのカウント、i値 になっています。
on()メソッドは引数を渡せます。この方法で修正する時は、十分 on()メソッドを理解のに上使用下さい。


書式
on(type listener [scope] [once=false] [data] [useCapture=false])

実際の描き方は、引数をループの i値 とすると
ボタンインスタンス.on("click",handleclick,null,false,i);

//処理
function handleclick (event,no) {

	//押されたボタンは何番目か、引数を得る
	var hit_no=no;

	その外の処置は略す

}

------------------------------------------------------

//インスタンスに name で文字を入れてあり、取得するなら this 参照できる
var name=this.name;

以前より、非常に簡単に記述できるし連想配列にすれば複数の引数を渡せる。
この場合(scope は null)、押されたボタンは this で参照できるから便利になる。


 

 

マウスオーバーアクションの設定と補正

▲[ 目次 ]

下記のような箇所ですが、一応、補正などしなくとも機能します。補正するならば、rollover rollout、形式に変更する。
graphicsを塗り替える場合は、原則クリアしてから、s.graphics.clear()、実行下さい。


● 補正しないでそのまま使用する。


//create-bottun
function createbtn (..............) {

	途中略す

	//MouseOver
	btn.addEventListener("mouseover",function () {
		s.graphics.clear();
		s.graphics.s(0).beginFill(overc);
		operaRoundRect(s,x,y,w,h,r);
		stage.update();
	});
	//MouseOut
	btn.addEventListener("mouseout",function () {
		s.graphics.clear();
		s.graphics.s(0).beginFill(outc);
		operaRoundRect(s,x,y,w,h,r);
		stage.update();
	});
	return btn;
}

● rollover rollout 形式に補正する。
ロールオーバーなどの単純なものなら「こちらを使用しなさい」と言う事でしょうか。


//create-bottun
function createbtn (..............) {

	途中略す

	//rollover
	btn.addEventListener("rollover",function () {
		s.graphics.clear();
		s.graphics.s(0).beginFill(overc);
		operaRoundRect(s,x,y,w,h,r);
		stage.update();
	});
	//rollout
	btn.addEventListener("rollout",function () {
		s.graphics.clear();
		s.graphics.s(0).beginFill(outc);
		operaRoundRect(s,x,y,w,h,r);
		stage.update();
	});
	return btn;
}

 

ドラッグ関連の設定と補正

▲[ 目次 ]

ドラッグ関連の設定部分は大幅に変わりましたので、該当部分のページは変更済みです。

説明などは、下記ページを参照下さい。

【参照】当方の記事: CreateJS 画像拡大ビューア、サムネールDrag対応




 

画像分割で toDataURL() を使用しない方式に変更する

▲[ 目次 ]

画像分割で toDataURL() を使用しない方式を見つけました。この方が処理も早く簡単ですし修正も下記の用に簡単に出来ます。不具合の問題の可決につながります。
利点は、処理が早くなる、toDataURL()処理出来ないブラウザでもOK、外部画像でも分割出来ることです。


● 変更前

画像分割で、toDataURL()を使用の場合の処理は、殆んどが以下の様になっています。(パクリ処理)


	//画像分割貼り付け
	var srcArr=[];//URL容器
	var k=0;

	var sliceCanvas=document.createElement("canvas");

	for (var i=0; i < split_h; i++) {
		for (var j=0; j < split_v; j++) {

			//大きさ重要
			sliceCanvas.setAttribute("width",chip_W[k]);
			sliceCanvas.setAttribute("height",chip_H[k]);
			var context=sliceCanvas.getContext("2d");
			//貼り付け
			context.drawImage(mainImage,chip_pos_X[k],chip_pos_Y[k],chip_W[k],chip_H[k],0,0,chip_W[k],chip_H[k]);
			//toDataURL変換する
			srcArr[k]=sliceCanvas.toDataURL("image/png");

			k++;
		}
	}

● 変更後

この処理部分の変更、「画像分割アニメ」関連は同じ形式で作っていますので全てに共通です。

toDataURL()を使用しない新方式(パクリではない)の方法は、下記の様に2箇所書き換えるだけです。
1. var sliceCanvas=document.createElement("canvas"); をループの中に移動する。
2. srcArr[k]=sliceCanvas; 保存する対象をかえる。


	//画像分割貼り付け
	var srcArr=[];//URL容器
	var k=0;
	for (var i=0; i < split_h; i++) {
		for (var j=0; j < split_v; j++) {

			var sliceCanvas=document.createElement("canvas");
			//大きさ重要
			sliceCanvas.setAttribute("width",chip_W[k]);
			sliceCanvas.setAttribute("height",chip_H[k]);
			var context=sliceCanvas.getContext("2d");
			//貼り付け
			context.drawImage(mainImage,chip_pos_X[k],chip_pos_Y[k],chip_W[k],chip_H[k],0,0,chip_W[k],chip_H[k]);
			//toDataURL変換しない、こちらで処理
			srcArr[k]=sliceCanvas;

			k++;
		}
	}


びっくり仰天の事実であります。よって、以下が成り立ちますので「toDataURL()使用」に伴う不具合などが全て解決しました。「画像分割アニメ」関連は 「toDataURL()を使用しない」この方法に順次変更して行きます。


分割画像インスタンス=new createjs.Bitmap(sliceCanvas);

【参照】当方の記事: CreateJS 画像分割アニメーション、一括画像読み込み、toDataURL()を使用しない方式 (easeljs-0.7用)


● 良く考えてみますと「キャンバス要素」をBitmap化しています。「この手法」は、画像ロード取得に失敗した時の「代替画像」として利用出来るのですね。詳細は以下記事参照下さい。

【参照】当方の記事: CreateJS Graphicsクラスの beginBitmapFill() を考える

 

 

TEXT表示でのFontの変更

▲[ 目次 ]

TEXT表示でのFontの変更を一部行っていないJSがありますので、該当箇所がありましたら「 Arial 」に補正下さい。



例

var tx=new createjs.Text("表示する文字","12px _ゴシック","#000000");

の様な設定があれば、下記の様に変更下さい

var tx=new createjs.Text("表示する文字","12px Arial","#000000");

 

分割画像の重なり順の変更

▲[ 目次 ]

画像分割アニメーション関連で、「分割画像の重なり順の変更」は正しくは以下の様になります。もし違っているJSが有りましたらたら変更下さい。



Tweenのcall

.call(indexchg)

-----------------------------------------------

//重ね順を一番上にする
function indexchg () {
	container.setChildIndex(this,split_all-1);
	//container.setChildIndex(this,0);
}

雰囲気は違いますが、setChildIndex(this,0) でも可能です。


2013/10/23、CreateJS関連記事全てを easeljs-0.7 用に更新終了しました。
以上です。

 


[ この記事のURL ]


タグ:CreateJS , memo , javascript

 

ブログ記事一覧

年別アーカイブ一覧



[1]