POPSブログ

CreateJS OUTLINEテキストアニメーション

311

  Category:  javascript2014/07/10 pops 

OUTLINEテキストは、easeljs-0.7以降、「CreateJS Textクラス」で作れるようになりました。以前は、OUTLINEテキストをCanvasエレメントで作りBitmap()で表示してましたが、今回は標準のCreateJS Textクラスで作ります。
テキストを重ねて装飾したり、テキストに画像を埋め込み装飾する方法など色々な形式で調べてみます。
easeljs-0.7.1 でのテストです。

 

CreateJS OUTLINEテキストアニメーション テスト

基本的には、テキストの中心補正を textBaseline middle でするか、または regXY でするかの違いですが、一長一短あるようです。テキスト単独でそのものをアニメーションする場合は構造が単純です。
テキストを装飾(デザイン)する時は複数のテキストを重ねて処理しますので、コンテナに収容することになります。


 

簡単な説明目次に進む


 

DEMO

▼[ 目次 ]


CreateJS OUTLINEテキストアニメーションのデモ、(createJS095.js)

このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。
/// 注意、ブラウザ、マシン性能により描画品質などに大きな差が有ります事了承下さい ///


通常のOutlineテキストアニメ、デモ


OutlineテキストLOGOアニメ、シミュレーション


Chrome Opera Firefox Safari(Win) IE9-11で動作確認済み。 Safari(Mac)、は未確認です。


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

ダウンロードしたJSを使用する場合。記述は一例です。(バージョン 0.7.1 使用)


<script type="text/javascript" src="js/easeljs-0.7.1.min.js"></script>
<script type="text/javascript" src="js/preloadjs-0.4.1.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.5.1.min.js"></script>

重要、バージョン違いでは動かない場合が有りますので必ず合わせて下さい。


HTML (HTML5)


<div id="demo-wrap">
	<div id="image-box" class="radius"><canvas id="mainCanvas" width="640" height="300"></canvas></div>
</div>

JS

createJS095.js、JS名は任意に変更可。注意、easeljs-0.7.1用です。


//日本語
//createJS095.js
//デモ用OUTLINEテキストアニメーション
//easeljs-0.7.1用

//------------------------------------------------------

//canvasの大きさ/全てこの値を使用
var canvasWidth=640;
var canvasHeight=300;

//prologue表示時間
var prologue_time=12000;

//メインテキスト
var mainstring="ViVa POPS WEB KOUBOU";
//メインテキスト表示位置
var mtcontainer_x=100;//中央補正しない場合
var mtcontainer_y=80;//80

//ロゴテキスト
var logostring="POPS-WEB";

//サブテキスト
var substring="Dudubi dubi dubi dubiduba Welcome to my site. thanks";

//------------------------------------------------------
//変数、未使用もあり

//ステージ
var stage;
//コンテナなど
var backrect;
var container;
var btncontainer;
//TEXT
var viewtext;

//MAIN-TEXT
var maintextcontainer;
var maintext;
//MOVE-TEXT
var textChip=[];
var textPosx=[];
var textPosy=[];

//LOGO-TEXT
var logotextcontainer;
var logotext;
//MOVE-TEXT2
var textChip2=[];
var textPosx2=[];
var textPosy2=[];

//SUB-TEXT
var subtextcontainer;
//MOVE-TEXT3
var textChip3=[];
var textPosx3=[];
var textPosy3=[];

//------------------------------------------------------
//shadowフィルター
var shadow=new createjs.Shadow("#000000",0,0,4);

//click-btn
var myhitBtn;

//var textlen=0;
//var textcount=0;
var backchg_no=0;
var backcolors=["#000000","#FFFFFF","#BC8F8F","#4682B4","#6B8E23","#888888","#333333"];

//------------------------------------------------------

//ステージ周りセット
function init() {

	//STAGE
	stage=new createjs.Stage('mainCanvas');
	//MouseOver重要
	stage.enableMouseOver(20);

	//バックRect/最下位色背景層、無くとも良い
	backrect=new createjs.Shape();
	backrect.graphics.beginFill("#000000").drawRect(0,0,canvasWidth,canvasHeight);

	//クリック
	backrect.addEventListener("click",backchg);
	stage.addChild(backrect);

	//簡易TEXT
	viewtext=new createjs.Text("","12px Arial","#FFFFFF");
	viewtext.x=20;
	viewtext.y=15;
	viewtext.maxWidth=canvasWidth-40;
	viewtext.lineHeight=20;
	viewtext.textBaseline="bottom";
	viewtext.shadow=shadow;//SHADOW処理
	stage.addChild(viewtext);

	//LOGO-TEXT
	logotextcontainer=new createjs.Container();
	//表示位置
	logotextcontainer.x=150;
	logotextcontainer.y=100;
	stage.addChild(logotextcontainer);

	//MAIN-TEXT
	maintextcontainer=new createjs.Container();
	//表示位置
	maintextcontainer.x=mtcontainer_x;
	maintextcontainer.y=mtcontainer_y;
	stage.addChild(maintextcontainer);

	//SUB-TEXT
	subtextcontainer=new createjs.Container();
	stage.addChild(subtextcontainer);

	//btncontainer
	btncontainer=new createjs.Container();
	btncontainer.y=270;
	stage.addChild(btncontainer);
	set_btn();
	myhitBtn.visible=false;

	stage.update();

	createjs.Ticker.setFPS(30);
	createjs.Ticker.addEventListener('tick',tick);

	//調整
	setTimeout(function() {

		//プロローグ表示に進む
		set_prologue();

	},2000);

}

//プロローグ
function set_prologue() {

	//MAINテキストアニメ
	set_mainanime();
	//LOGOテキストアニメ
	set_logoanime();
	//SUBテキストアニメ
	set_subanime();

	//調整
	setTimeout(function() {

		//案内
		set_text("テキストアニメーションが終了したら「ボタン」を押してください。");
		//ボタン表示
		myhitBtn.visible=true;
		//自動
		//reset_text();

	},prologue_time);
}

//背景色変更
function backchg() {
	backchg_no ++;
	if (backchg_no > backcolors.length-1) {backchg_no=0;}
	var color=backcolors[backchg_no];
	backrect.graphics.beginFill(color).drawRect(0,0,canvasWidth,canvasHeight);
}

//MAINアウトラインテキストアニメ/現在使用
function set_mainanime() {

	//MAINテキストアニメーション
	var maintext_W=0;
	var text_spc=0;//テキストスペース
	var center=true;
	var tcount=0;
	var outline_w=2;//アウトライン幅

	//インスタンス配列取得
	//サイズ,フォント,色,アウトライン幅,虹色,スペース,文字
	textChip=createMoveOutlineText("40px","Arial","#FFFFFF",outline_w,true,text_spc,mainstring);
	var textlen=mainstring.length;

	//ランダム配置のため全幅の計算を先に
	for (var i=0; i < textlen; i++) {
		maintext_W +=textChip[i].width;
		if(i < textlen) {maintext_W +=text_spc;}
	}
	//コンテナ中央ランダムのため速く決めた
	if (center) {maintextcontainer.x=(canvasWidth-maintext_W)/2;}

	//移動
	var delay_st=[];
	//パターン番号
	var pattern_no=Math.floor(Math.random()*6);
	//多目的判定用フラグ
	var chgxyflag=Math.floor(Math.random()*5);
	//多目的用2
	var chgflag=Math.floor(Math.random()*3);
	var chgflag2=Math.floor(Math.random()*3);
	//逆転フラグ
	var chg_v=Math.floor(Math.random()*2);
	if (chg_v < 1) {chg_v=-1;}

	//回転
	var rotate_no=chgflag*chg_v;
	//スケール
	var sclsdata=[1,1,1,.5,4,8];
	var scls=sclsdata[Math.floor(Math.random()*sclsdata.length)];
	//delay番号
	var delay_no=Math.floor(Math.random()*3);

	var sh=textlen-1;
	var k=0;
	var flag=-1;

	for (var i=0; i < textlen; i++) {

		//addChild
		maintextcontainer.addChild(textChip[i]);
		//ポジション取得
		textPosx[i]=textChip[i].x;
		textPosy[i]=textChip[i].y;

		//全幅計算は上で行っている
		//maintext_W +=textChip[i].width;
		//if(i < textlen) {maintext_W +=text_spc;}

		//移動左右1、X方向のみ
		if (pattern_no == 0) {
			textChip[i].x=canvasWidth*chg_v;
			textChip[i].y=textPosy[i];
		}
		//移動左右2、Y方向ズレ
		if (pattern_no == 1) {
			textChip[i].x=canvasWidth/2*chg_v;
			textChip[i].y +=100*flag*chg_v*(chgflag2-1);
		}
		//移動上下
		if (pattern_no == 2) {
			textChip[i].x=textPosx[i];//その場
			textChip[i].y=canvasHeight/2*chg_v*(chgflag+1);
			if (chgflag == 1) {
				textChip[i].y *=flag;//上下交互
			}
		}
		//ランダム
		if (pattern_no == 3) {
			//globalToLocal
			var point=maintextcontainer.globalToLocal(Math.random()*canvasWidth,Math.random()*canvasHeight);
			textChip[i].x=point.x;
			textChip[i].y=point.y;
		}
		//文字列の中心から
		if (pattern_no == 4) {
			textChip[i].x=maintext_W/2;
			textChip[i].y=textPosy[i];//その場
		}
		//その場所から
		if (pattern_no == 5) {
			textChip[i].x=textPosx[i]+20*(chgflag-1);//その場少しずらす
			textChip[i].y=textPosy[i];//その場
		}

		textChip[i].rotation=rotate_no*180*(chgflag2-1);
		textChip[i].alpha=0;
		textChip[i].scaleX=scls;
		textChip[i].scaleY=scls;

		//delay
		delay_st[i]=100*i;//標準
		if (delay_no == 1) {delay_st[i]=20*i*i;}
		if (delay_no > 1) {delay_st[i]=Math.abs(i-sh/2)*150;}//150-200

		//交互遅延
		if (chgflag2 == 1) {
			if (flag == 1) {delay_st[i] +=1500;}
		}

		k ++;
		flag *=-1;
	}
	//delay逆転
	if (chgflag == 0) {
		delay_st.reverse();
	}

	//コンテナ中央補正は上で行っている
	//if (center) {maintextcontainer.x=(canvasWidth-maintext_W)/2;}

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn=createjs.Tween.get(textChip[i])
		.wait(delay_st[i])
		.to({x:textPosx[i],y:textPosy[i],scaleX:1,scaleY:1,alpha:1,rotation:0},1000)
		.wait(100).to({scaleX:2,scaleY:2},50)
		.wait(100).to({scaleX:1,scaleY:1},200)
		.wait(500).call(textshadow)
		.call(finshmove);//現在何もしない
	}

}

//LOGOアウトラインテキストアニメ
function set_logoanime() {

	//LOGOテキストアニメーション
	var logotext_W=0;
	var text_spc=4;//テキストスペース
	var center=true;
	var tcount=0;
	var outline_w=2;//アウトライン幅

	//色替え
	var colorChg=false;
	var colortype="random";//rainbow random #000000

	//インスタンス配列取得
	//サイズ,フォント,色,アウトライン幅,虹色,スペース,文字
	textChip2=createMoveLogoText("60px","Impact","#FF1493",outline_w,true,text_spc,logostring);
	var textlen=logostring.length;

	//ランダム配置のため全幅の計算を先に
	for (var i=0; i < textlen; i++) {
		logotext_W +=textChip2[i].width;
		if(i < textlen) {logotext_W +=text_spc;}
	}
	//コンテナ中央ランダムのため速く決めた
	if (center) {logotextcontainer.x=(canvasWidth-logotext_W)/2;}

	//パターン番号
	var pattern_no=Math.floor(Math.random()*3);
	var alpha_no=1;
	var scale_no=1;

	//移動
	var k=0;
	var flag=-1;

	for (var i=0; i < textlen; i++) {

		//addChild
		logotextcontainer.addChild(textChip2[i]);
		//ポジション取得
		textPosx2[i]=textChip2[i].x;
		textPosy2[i]=textChip2[i].y;

		//全幅計算は上で行っている
		//logotext_W +=textChip2[i].width;
		//if(i < textlen) {logotext_W +=text_spc;}

		//移動
		//左右
		if (pattern_no == 0) {
			textChip2[i].x=canvasWidth*flag;
			textChip2[i].y=textPosy2[i];//その場
			alpha_no=1;
			scale_no=1;
		}
		//ランダム
		if (pattern_no == 1) {
			//globalToLocal
			var point=logotextcontainer.globalToLocal(Math.random()*canvasWidth,Math.random()*canvasHeight);
			textChip2[i].x=point.x;
			textChip2[i].y=point.y;
			alpha_no=0;
			scale_no=Math.floor(Math.random()*3)+1;//1-3
		}
		//その場
		if (pattern_no == 2) {
			textChip2[i].x=textPosx2[i];
			textChip2[i].y=textPosy2[i];
			alpha_no=0;
			scale_no=3;
		}

		//alpha scale
		textChip2[i].alpha=alpha_no;
		textChip2[i].scaleX=scale_no;
		textChip2[i].scaleY=scale_no;

		k ++;
		flag *=-1;
	}

	//コンテナ中央
	if (center) {logotextcontainer.x=(canvasWidth-logotext_W)/2;}
	logotextcontainer.y=130;

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn2=createjs.Tween.get(textChip2[i])
		.wait(200*i+1000)
		.to({x:textPosx2[i],y:textPosy2[i],scaleX:1,scaleY:1,alpha:1},1000);
		if(colorChg) {twn2.wait(500).call(color_chg,[colortype]);}
		twn2.wait(500).call(textshadow2)
		.call(finshmove2);//現在何もしない
	}

}

//SUBテキストアニメ
function set_subanime() {

	//SUBテキストアニメーション
	var text_W=0;
	var text_spc=0;//テキストスペース
	var center=true;
	var tcount=0;

	//インスタンス配列取得
	//サイズ,フォント,色,虹色,スペース,文字
	textChip3=createMoveText("16px","Arial","#CCCCCC",false,text_spc,substring);
	var textlen=substring.length;

	//移動
	var k=0;
	var flag=-1;

	for (var i=0; i < textlen; i++) {

		//addChild
		subtextcontainer.addChild(textChip3[i]);
		//ポジション取得
		textPosx3[i]=textChip3[i].x;
		textPosy3[i]=textChip3[i].y;

		//全幅
		text_W +=textChip3[i].width;
		if(i < textlen) {text_W +=text_spc;}

		//移動
		textChip3[i].x=canvasWidth*flag;
		k ++;
		flag *=-1;
	}

	//コンテナ中央
	if (center) {subtextcontainer.x=(canvasWidth-text_W)/2;}
	subtextcontainer.y=220;

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn3=createjs.Tween.get(textChip3[i])
		.wait(200*i)
		.to({x:textPosx3[i]},500)
		.call(finshmove3);//現在何もしない
	}

}

//--------------------------------------------------------------------------------------

//MOVE-Outlineテキストインスタンスを作る1
//reg原点中央補正
function createMoveOutlineText(size,font,color,outline_w,rainbow,space,str) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	for (var i=0; i < len; i++) {

		//文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		t.outline=outline_w;
		//1文字入れる
		t.text=str.charAt(i);
		//幅高さ
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();
		//原点中央
		t.regX=w/2;
		t.regY=h/2;
		//虹色
		if (rainbow) {
			//t.color=rainbowColor(i,len,100,50);//rainbow
			t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		}

		//位置
		tpos_x +=w/2;//half
		t.x=tpos_x;
		t.y=tpos_y;//0
		//位置加算
		tpos_x +=(w/2+space);//half+space
		//大きさ重要
		t.width=w;
		t.height=h;
		//
		chip[i]=t;//TEXT
	}
	//戻り配列
	return chip;
}

//MOVE-Outlineテキストインスタンスを作る2
//textBaseline中心補正
function createMoveOutlineText2(size,font,color,outline_w,rainbow,space,str) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	for (var i=0; i < len; i++) {

		//文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		t.outline=outline_w;
		//1文字入れる
		t.text=str.charAt(i);
		//幅高さ
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();

		//最重要、幅高さ取得後に中心補正
		t.textAlign="center";
		t.textBaseline="middle";

		//虹色
		if (rainbow) {
			//t.color=rainbowColor(i,len,100,50);//rainbow
			t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		}

		//位置
		tpos_x +=w/2;//half
		t.x=tpos_x;
		t.y=tpos_y;//0
		//位置加算
		tpos_x +=(w/2+space);//half+space
		//大きさ重要
		t.width=w;
		t.height=h;
		//
		chip[i]=t;//TEXT
	}
	//戻り配列
	return chip;
}

//MOVE-Outlineテキストインスタンスを作る3
//reg原点中央補正コンテナ収容
function createMoveOutlineText3(size,font,color,outline_w,rainbow,space,str) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	for (var i=0; i < len; i++) {

		//コンテナを作る
		container=new createjs.Container();

		//文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		t.outline=outline_w;
		//1文字入れる
		t.text=str.charAt(i);
		//幅高さ
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();

		//虹色
		if (rainbow) {
			//t.color=rainbowColor(i,len,100,50);//rainbow
			t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		}

		//コンテナ大きさ重要
		container.width=w;
		container.height=h;
		//コンテナ原点中央
		container.regX=w/2;
		container.regY=h/2;
		//コンテナ位置
		tpos_x +=w/2;//half
		container.x=tpos_x;
		container.y=tpos_y;//0
		//addChild
		container.addChild(t);

		//位置加算
		tpos_x +=(w/2+space);//half+space

		//
		chip[i]=container;//コンテナ
	}
	//戻り配列
	return chip;
}
//--------------------------------------------------------------------------------------

//LOGO-テキストインスタンスを作る1
//複数テキストのためtextBaseline中心補正/簡易形式
function createMoveLogoText(size,font,color,outline_w,rainbow,space,str) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	for (var i=0; i < len; i++) {

		//1文字取り出し
		var text=str.charAt(i);

		//コンテナを作る
		var box=new createjs.Container();

		//ベース文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		//1文字入れる
		t.text=text;
		t.name="base";
		t.colorno=""+parseInt(i/len*360);//虹色番号文字
		//幅高さを先に取得する
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();

		//最重要、幅高さ取得後に中心補正
		t.textAlign="center";
		t.textBaseline="middle";

		//虹色
		if (rainbow) {
			t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		}

		//ライン文字インスタンスを作る
		var l=new createjs.Text("",fontdata,"#FFFFFF");
		l.name="line";
		l.outline=outline_w;
		//1文字入れる
		l.text=text;
		//中心補正
		l.textAlign="center";
		l.textBaseline="middle";
		l.shadow=new createjs.Shadow("#000000",0,0,3);//陰影

		//BOX位置
		tpos_x +=w/2;//half
		box.x=tpos_x;
		box.y=h/2;
		//大きさ重要
		box.width=w;
		box.height=h;

		//位置加算
		tpos_x +=(w/2+space);//half+space

		//addChild/2層
		box.addChild(t,l);

		chip[i]=box;

	}
	//戻り配列
	return chip;
}
//-----------------------------------------------
//LOGO-テキストインスタンスを作る2
//複数テキストのためtextBaseline中心補正
function createMoveLogoText2(size,font,color,outline_w,rainbow,space,str) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	var shadow=true;
	var shadow_color="#000000";//黒色

	var neon=false;//ネオン文字
	var neon_color="#00BFFF";//ネオン色

	//shadowを虹色にする
	var rainbowShadow=false;

	var baseoutline=false;//ベース文字outline
	var line=true;//ライン文字

	for (var i=0; i < len; i++) {

		//非表示には文字をいれないで処理

		//1文字取り出し
		var text=str.charAt(i);

		//コンテナを作る
		var box=new createjs.Container();

		//ベース文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		//1文字入れる
		t.text=text;
		t.name="base";
		t.colorno=""+parseInt(i/len*360);//虹色番号文字

		//幅高さを先に取得する
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();

		if(baseoutline) {t.outline=outline_w;}//outline

		//最重要、幅高さ取得後に中心補正
		t.textAlign="center";
		t.textBaseline="middle";

		//虹色
		if (rainbow) {
			//t.color=rainbowColor(i,len,100,50);//rainbow
			t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接

			/*
			var angle=i/len;//0-1
			var rgb=hslToRgb(angle,1,0.5);//直接
			color=createjs.Graphics.getRGB(rgb[0],rgb[1],rgb[2]);//0-255
			*/

			if(rainbowShadow){
				//虹色陰影色
				var angle=i/len;//0-1
				var rgb=hslToRgb(angle,1,0.5);//直接
				//RGB数値を#000000形式に変換
				neon_color=shadow_color=getHexString(rgb[0],rgb[1],rgb[2]);
			}
		}

		//ネオン陰影を強くする未使用
		//if(neon) {t.shadow=new createjs.Shadow(neon_color,0,0,6);}//3-8

		//ネオン文字インスタンスを作る
		var n=new createjs.Text("",fontdata,neon_color);
		n.outline=outline_w+2;// +1 +2 +3 +4
		n.name="neon";
		//1文字入れる
		if (neon) {n.text=text;}//表示
		n.textAlign="center";
		n.textBaseline="middle";
		if(neon) {n.shadow=new createjs.Shadow(neon_color,0,0,8);}//3-8

		//ライン文字インスタンスを作る
		var l=new createjs.Text("",fontdata,"#FFFFFF");
		l.name="line";
		l.outline=outline_w;
		//1文字入れる
		if(line) {l.text=text;}//表示
		//中心補正
		l.textAlign="center";
		l.textBaseline="middle";

		//neon優先
		if(!neon) {
			if(shadow) {

				//指定色または虹色
				t.shadow=new createjs.Shadow(shadow_color,0,0,4);
				l.shadow=new createjs.Shadow(shadow_color,0,0,4);
				//l.shadow=new createjs.Shadow(shadow_color,2,2,1);
			}
		}

		//BOX位置
		tpos_x +=w/2;//half
		box.x=tpos_x;
		box.y=h/2;
		//大きさ重要
		box.width=w;
		box.height=h;

		//位置加算
		tpos_x +=(w/2+space);//half+space

		//addChild
		box.addChild(n,t,l);

		chip[i]=box;

	}
	//戻り配列
	return chip;
}

//--------------------------------------------------------------------------------------

//MOVEテキストインスタンスを作る
function createMoveText(size,font,color,rainbow,space,str) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	for (var i=0; i < len; i++) {

		//文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		//1文字入れる
		t.text=str.charAt(i);
		//幅高さ
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();
		//原点中央
		t.regX=w/2;
		t.regY=h/2;
		//虹色
		if (rainbow) {
			t.color=rainbowColor(i,len,100,50);//rainbow
			//t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		}
		//位置
		tpos_x +=w/2;//half
		t.x=tpos_x;
		t.y=tpos_y;//0
		//位置加算
		tpos_x +=(w/2+space);//half+space
		//大きさ重要
		t.width=w;
		t.height=h;
		//
		chip[i]=t;
	}
	//戻り配列
	return chip;
}

//--------------------------------------------------------------------------------------

//TEXT陰影処理1
function textshadow() {
	//this.shadow=new createjs.Shadow("#000000",0,0,5);//黒
	this.shadow=new createjs.Shadow("#FFFFFF",-1,-1,2);//白ハイライト
}
//TEXT陰影処理2
function textshadow2() {
	//this.shadow=new createjs.Shadow("#000000",0,0,5);//黒
}
//色替
function color_chg(colortype) {

	if(!colortype) {return}//指定なし
	//保存虹色番号
	var no=this.getChildByName("base").colorno*1;
	if(colortype == 'rainbow'){this.getChildByName("base").color=createjs.Graphics.getHSL(no,100,50);
	} else if(colortype == 'random'){this.getChildByName("base").color=createjs.Graphics.getHSL(Math.floor(Math.random()*360),100,50);
	} else {this.getChildByName("base").color=colortype;}//指定色
}

//終了
function finshmove () {
	//
}
//終了2
function finshmove2 () {
	//
}
//終了3
function finshmove3 () {
	//
}
//reset_text
function reset_text() {

	set_text("クリア");
	myhitBtn.visible=false;

	//コンテナの中を削除
	maintextcontainer.removeAllChildren();
	logotextcontainer.removeAllChildren();
	subtextcontainer.removeAllChildren();
	stage.update();

	//調整
	setTimeout(function() {
		set_text("ランダムアニメ実行中");
		set_prologue();
	},1000);

}

//tickステージ
function tick() {
	stage.update();
}
//VIEWTEXT
function set_text(t) {
	viewtext.text=t;
}

//rainbow-Color
var rainbowColor=function(v,cv,saturation,lightness) {
	var no=v/cv*360;
	var color=createjs.Graphics.getHSL(no,saturation,lightness);
	return color;
}

//create-text未使用
function create_text(size,font,color,string) {

	var fontdata=size + " " + font;
	var t=new createjs.Text("",fontdata,color);
	t.text=string;
	var w=t.getMeasuredWidth();
	var h=t.getMeasuredHeight();
	//大きさ設定、受け渡しに重要
	t.width=w;
	t.height=h;
	//原点中央
	t.regX=w/2;
	t.regY=h/2;
	return t;

}
//Create-Bottunボタンを作る
function set_btn() {

	//ラベル文字生成
	var label="CLICK";
	//x,y,w,h,r,c,label,lc,overc,outc
	myhitBtn=createbtn (0,0,60,20,5,"#FFFFFF",label,"#FF0000","#48D1CC","#FFFFFF");
	myhitBtn.cursor="pointer";
	myhitBtn.x=(canvasWidth-60)/2;
	myhitBtn.y=0;
	//クリック
	myhitBtn.addEventListener("click",reset_text);
	//addChild
	btncontainer.addChild(myhitBtn);

}

//create-bottunベタ塗り
function createbtn (x,y,w,h,r,c,label,lc,overc,outc) {

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	var s=new createjs.Shape();
	//角丸
	s.graphics.s(0).beginFill(outc).drawRoundRect(x,y,w,h,r);
	btn.addChild(s);
	//myBtn shadow onMouseOverでupdate()すると濃くなる
	//テキスト以外で使用は注意
	btn.shadow=shadow;
	var tx=new createjs.Text(label,"12px Arial",lc);
	tx.x=w/2;
	tx.y=3;
	tx.maxWidth=w;
	//tx.lineWidth=w;
	tx.textAlign="center";
	tx.shadow=shadow;//テキストは濃くなら無い
	tx.name="btntext";//name挿入
	btn.addChild(tx);
	//文字の食み出し防止mask
	tx.mask=s;

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

//RGB数値を#000000形式に変換/下と同じ
function getHexString(r,g,b) {
	var color="#"+("0"+parseInt(r).toString(16)).slice(-2)+("0"+parseInt(g).toString(16)).slice(-2)+("0"+parseInt(b).toString(16)).slice(-2);
	return color;
}

//RGB数値を#000000形式に変換
function getHexStringX(r,g,b) {

	var data=[r,g,b];
	var color="#";
	for (var i=0; i < 3; i++) {
		color +=hexstr(data[i]);
	}
	return color;

	function hexstr(v) {
		var txt=v.toString(16);
		txt="00"+txt;
		var str=txt.substring(txt.length-2);
		return str;
	}

}

//--------------------------------------------------------------------------------------
/**
 * Converts an HSL color value to RGB. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
 * Assumes h, s, and l are contained in the set [0, 1] and
 * returns r, g, and b in the set [0, 255].
 *
 * @param   Number  h       The hue
 * @param   Number  s       The saturation
 * @param   Number  l       The lightness
 * @return  Array           The RGB representation
 */
function hslToRgb(h, s, l){
    var r, g, b;

    if(s == 0){
        r = g = b = l; // achromatic
    }else{
        function hue2rgb(p, q, t){
            if(t < 0) t += 1;
            if(t > 1) t -= 1;
            if(t < 1/6) return p + (q - p) * 6 * t;
            if(t < 1/2) return q;
            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        }

        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }

    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}
//--------------------------------------------------------------------------------------
//LinearGradientBox
//幅、高さ、色1、色2、色3、方向(x.y)、タイプ(2.3)
function createLineGradBox (w,h,color1,color2,color3,direction,type) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");

	//LinearGradient
	var gradient;
	if(direction == 'x') {
		gradient=ctx.createLinearGradient(0,h,w,h);
	}
	if(direction == 'y') {
		gradient=ctx.createLinearGradient(w,0,w,h);
	}
	if(direction == 'xy') {
		gradient=ctx.createLinearGradient(0,0,w,h);
	}
	if(type == 2) {
    		gradient.addColorStop(0,color1);
    		gradient.addColorStop(1,color2);
	}
	if(type == 3) {
    		gradient.addColorStop(0,color1);
		gradient.addColorStop(0.5,color2);
    		gradient.addColorStop(1,color3);
	}
	ctx.fillStyle=gradient;
	//FILL
	ctx.fillRect(0,0,w,h);

	return canvas;
}

//--------------------------------------------------------------------------------------

//START
init();

注釈文を削除すれば、幾分早くなります。
画像使用の場合、登録画像パスは当方の例です。使用の際は環境に合わせて下さい。


CSS

createJS095.css、CSS名は任意に変更可


/*日本語 createJS095.css*/

#demo-wrap {
position:relative;
width:auto;
height:320px;
text-align:center;
}

#image-box {
/*position:absolute;*/
position:relative;
top:0;left:0;
width:640px;
height:300px;
padding:0;
margin:0 auto;
box-shadow:0 0 10px #000;
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
-o-box-shadow:0 0 10px #000;
-ms-box-shadow:0 0 10px #000;
background-color:#000000;
}

#image-box #mainCanvas {
border-radius:10px;
}
#btn-box {
width:640px;
height:50px;
margin:10px auto;
padding:0;
}

.radius {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-box-border-radius:10px;
-ms-border-radius:10px;
}

当方のサンプルの例です。


 

簡単な説明


 

[ 簡単な説明の複雑な目次 ]


 

[説明図]

上から、サンプル 1、サンプル 2、サンプル 3、の順にアニメーションさせています。


 

 

CreateJS OUTLINE処理テキスト

▲[ 目次 ]


以前は、OUTLINEテキストを「Canvasエレメント」で作って表示していました。
今回は、「CreateJS Textクラス」で、テキストを重ねて作りますが、各テキストが「インスタンス化」されているので個別の書き換えが楽であるのが最大の利点です。
「Canvasエレメント」は装飾性が良いが画像同様であるため、一部の変更でも一括して全てを描画し直す必要があるので(またテキスト画像塗りこみが完成していなかった)、「OUTLINEテキストアニメーション」を最後にした。


OUTLINEテキストの書式と例

下記の様に、「CreateJS Textクラス」のテキストに、outline プロパティ(アウトラインの幅)を設定するだけです。
outline の数値は......


● 1 以上適正な幅、大きすぎると文字の一部が壊れる。
● 0 の値は outline は描画されず普通のテキストになる。
● マイナスの数値は outline=1 が実行される。




outline Number
------------------------------------------------------

文字インスタンス=new createjs.Text(.........)
文字インスタンス.outline=数値

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

//文字インスタンスを作る
var t=new createjs.Text("","50px Arial","#FF0000");
t.outline=4;
//1文字入れる
t.text="P";

略す

Arial、50px、赤色、アウトライン幅4の「P」文字テキストが出来ます。


 

CreateJS OUTLINEテキストアニメーション

▲[ 目次 ]


OUTLINEテキストのサンプルを2種類、掲示します。最終段はOUTLINEでは無い通常のものです。小さな文字はOUTLINEには適していません。


ここでの方法は、テキスト(文章)を1文字毎に分解して、文字間隔が綺麗に揃う処理です。


1. 1字毎のアニメーション用途のものは、アニメーションが綺麗になる様に原点を中央にします。
2. テキストでは原点を中央にする方法は2種類ありますがそれぞれ一長一短あるようです。
3. textAlign="center"、textBaseline="middle"、での方式が問題が少ない様ですが「複数要素のテキスト」をコンテナでラップする構造になります。
4 .一方、regXYで原点を中央にする場合は、構成構造を考慮して行います。
(注意、このデモではコンテナに収容しない単体です、テキスト単体そのものを中央補正)
5. 原則、文字は一行であるが、間隔が綺麗にそろう。勿論日本語をも使用できる。
6. Canvasエレメントの文字(画像同様)と違って、「Textクラス」であるゆえ拡大した場合の品質が良い。
7. FONT、ブラウザによっては、OUTLINEが壊れる場合がありますので確認が必要です。
(防げないので「アウトライン幅」を余り太くしないか、別のFONTを使用する)
8. その他設定の詳細は、JS上部を参照ください。


構造の相違

▲[ 目次 ]


「デモ」では文章を1文字毎に分解して並べています。アニメーションのためには文字の中心に原点を移動修正しなければなりません。其の構造を図示 (大体の形であり正確ではない) しますと、下の様になります。


 

1. サンプル1 の構造、テキストのみを中央補正している。一応軽量である。(これはラップなし)
2. サンプル2 の構造、装飾のために複数のテキストを重ねて構成して、コンテナでラップ。
3. textAlign center、textBaseline middle、で作った方が簡単であるが、regXYでの設定は機能しなくなる。
(グラフイックが合わなくなる場合などありますので、原点の位置を確認して補正の必要あり)
4. グラフイックなどを内包する場合は、テキスト原点左上、ラップのコンテナをregXYで原点を中央に修正する方法がグラフイックの描画が比較的楽と思います。標準的なボタンの作りと同じ。
5. regXYでの設定不具合は、予期せぬ所に描画されたりしますので、再度点検ください。


textBaseline中心補正形式がY方向のズレが少ないが、中にグラフイックなど描画の際は原点位置を考慮して処理しなければならない煩雑さがある。beginBitmapFill()は最悪になるのでゴマカシ業が必要。
ラップのコンテナに陰影処理をすると、原則、中のテキスト全てに陰影処理される。但し、其の時の構造、ブラウザ、によっても違いが発生するので確認のこと。


 

TEXTの大きさを取得する (重要)

▲[ 目次 ]


分解した文字を綺麗にならべるには、先に1文字毎に大きさを取得して並べ替えして行きます。


TEXTの大きさを取得する場合は、textAlign="left"、textBaselineは未設定、の状態で取得する事が重要です。初期状態で、textAlign 初期値はleftである、centerにしてはいけない。
横幅は正確であるが、高さはブラウザによりほんの僅かの差異がある(無視できる範囲であるが、Y位置をずらす原因の1つになる、将来修正されるかなどは不明です)。

大きさ取得後、textBaseline middle を設定するもブラウザにより若干の差異があるために、背景グラフイックなど入れると中心よりずれる(1-2ピクセル前後、Fontにより違いあり、Firefoxのズレは大きい)。


注意、outline設定の場合でも「取得したTEXT」の大きさは同じです。但し、実際の描画は「outlineの幅分」大きくなります。特別なTEXT処理でなければさほど気にすることでは無い。




//文字インスタンスを作る
var t=new createjs.Text("",fontdata,color);
t.outline=outline_w;
//1文字入れる
t.text=str.charAt(i);
//幅高さ
var w=t.getMeasuredWidth();
var h=t.getMeasuredHeight();

//最重要、幅高さ取得後に中心補正
t.textAlign="center";
t.textBaseline="middle";

略す

//大きさ重要
t.width=w;
t.height=h;

「Textの大きさ(TextField)」を後で参照できないので、受け渡しのために width height を書き込んでいるが利用はしていない。グラフイック、コンテナの大きさなど決めたい場合に利用する。


 

サンプル 1

▲[ 目次 ]


軽量にするために、この構造にしてある。1文字入れて「Textクラス」を作り大きさを調べて、中心補正している。
アニメーションは「画像分割」アニメーションとなんら変わりは無いので、そちらが参考になる。


現在、「1. テキスト単独、reg原点中央補正」を使用。その他の形式を掲示する。

「2」番目の、textBaseline 中心補正形式がY方向のズレが少ない。


1. テキスト単独、reg原点中央補正


//MOVE-Outlineテキストインスタンスを作る1
//reg原点中央補正
function createMoveOutlineText(size,font,color,outline_w,rainbow,space,str) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	for (var i=0; i < len; i++) {

		//文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		t.outline=outline_w;
		//1文字入れる
		t.text=str.charAt(i);
		//幅高さ
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();
		//原点中央
		t.regX=w/2;
		t.regY=h/2;
		//虹色
		if (rainbow) {
			//t.color=rainbowColor(i,len,100,50);//rainbow
			t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		}

		//位置
		tpos_x +=w/2;//half
		t.x=tpos_x;
		t.y=tpos_y;//0
		//位置加算
		tpos_x +=(w/2+space);//half+space
		//大きさ重要
		t.width=w;
		t.height=h;
		//
		chip[i]=t;//TEXT
	}
	//戻り配列
	return chip;
}

2. テキスト単独、textBaseline中心補正 (Y方向のズレが少ない)


//MOVE-Outlineテキストインスタンスを作る2
//textBaseline中心補正
function createMoveOutlineText2(size,font,color,outline_w,rainbow,space,str) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	for (var i=0; i < len; i++) {

		//文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		t.outline=outline_w;
		//1文字入れる
		t.text=str.charAt(i);
		//幅高さ
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();

		//最重要、幅高さ取得後に中心補正
		t.textAlign="center";
		t.textBaseline="middle";

		//虹色
		if (rainbow) {
			//t.color=rainbowColor(i,len,100,50);//rainbow
			t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		}

		//位置
		tpos_x +=w/2;//half
		t.x=tpos_x;
		t.y=tpos_y;//0
		//位置加算
		tpos_x +=(w/2+space);//half+space
		//大きさ重要
		t.width=w;
		t.height=h;
		//
		chip[i]=t;//TEXT
	}
	//戻り配列
	return chip;
}

3. コンテナ収容、コンテナreg原点中央補正
複数のインスタンスを収容する場合はコンテナが必要です。


//MOVE-Outlineテキストインスタンスを作る3
//reg原点中央補正コンテナ収容
function createMoveOutlineText3(size,font,color,outline_w,rainbow,space,str) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	for (var i=0; i < len; i++) {

		//コンテナを作る
		container=new createjs.Container();

		//文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		t.outline=outline_w;
		//1文字入れる
		t.text=str.charAt(i);
		//幅高さ
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();

		//虹色
		if (rainbow) {
			//t.color=rainbowColor(i,len,100,50);//rainbow
			t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		}

		//コンテナ大きさ重要
		container.width=w;
		container.height=h;
		//コンテナ原点中央
		container.regX=w/2;
		container.regY=h/2;
		//コンテナ位置
		tpos_x +=w/2;//half
		container.x=tpos_x;
		container.y=tpos_y;//0
		//addChild
		container.addChild(t);

		//位置加算
		tpos_x +=(w/2+space);//half+space

		//
		chip[i]=container;//コンテナ
	}
	//戻り配列
	return chip;
}

 

サンプル 2

▲[ 目次 ]


少々、修飾しているが文字を重ねて表現している。グラフイックとは少々違っている。余り多くの装飾は出来ない。
Canvasエレメントを利用して装飾することも可能ではある。(画像同様)


 

textAlign center、textBaseline middle を設定すると...

原点は「左上に移動」するので、ここを中心とした構造に作ると良い。regX regYは機能しないので注意ください。
(x y 位置の調整は可能ですから、ブラウザによる高さの違いも補正は可能です)
textBaseline middle は regXY補正より、Y方向のズレが少し小さいようです。


● 簡単なロゴアニメーション用、内部テキスト2層
デモ、createJS095.js で設定使用しています。デザイン変更はほとんど出来ない。初期時はこちらがセットされています。次の「少し凝ったロゴアニメーション用テキストを作る」に変更すると色々楽しめます。



//LOGO-テキストインスタンスを作る1
//複数テキストのためtextBaseline中心補正/簡易形式
function createMoveLogoText(size,font,color,outline_w,rainbow,space,str) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	for (var i=0; i < len; i++) {

		//1文字取り出し
		var text=str.charAt(i);

		//コンテナを作る
		var box=new createjs.Container();

		//ベース文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		//1文字入れる
		t.text=text;
		t.name="base";
		t.colorno=""+parseInt(i/len*360);//虹色番号文字
		//幅高さを先に取得する
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();

		//最重要、幅高さ取得後に中心補正
		t.textAlign="center";
		t.textBaseline="middle";

		//虹色
		if (rainbow) {
			t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		}

		//ライン文字インスタンスを作る
		var l=new createjs.Text("",fontdata,"#FFFFFF");
		l.name="line";
		l.outline=outline_w;
		//1文字入れる
		l.text=text;
		//中心補正
		l.textAlign="center";
		l.textBaseline="middle";
		l.shadow=new createjs.Shadow("#000000",0,0,3);//陰影

		//BOX位置
		tpos_x +=w/2;//half
		box.x=tpos_x;
		box.y=h/2;
		//大きさ重要
		box.width=w;
		box.height=h;

		//位置加算
		tpos_x +=(w/2+space);//half+space

		//addChild/2層
		box.addChild(t,l);

		chip[i]=box;

	}
	//戻り配列
	return chip;
}

● 文字を重ねて装飾する


 

テキストの周りにラインを描きたい場合、graphicsと違い簡単にラインを処理できないので、テキストを図の様に重ねて作ります。上の文字を透過して重なりをみてみますと、outlineテキストが大きいのがわかる。


1. テキストを重ねて装飾する。アイデア勝負!
2. outline設定のテキストは、outline幅の半分外にはみ出る。graphicsと同じ。
(このJSでは、文字間隔は調整できますので問題は無い)
3. 取得する大きさ(w h)は outline であっても同じ値ですので注意ください。


単色で文字を染めている分ではoutline幅が太くなっても何ら問題はないが、画像などでテキストを染める処理(標準ではまだ出来ない)の場合はoutlineの幅を考慮した処理をしなければならない。これは次のページで説明します。


● 変更のアイデア

テキストを入れないで「テキストインスタンスの非表示」と、「テキストインスタンスのアウトライン」の変更がいつでも出来るようです。つまり変更時の有能な武器になる。これはイケル!



//テキストを非表示にする
インスタンス.text="";

//アウトライン解除、普通文字に変更
インスタンス.outline=0;

● TWEENの途中でインスタンスの入れ替え

同じTWEENの途中では、インスタンスの入れ替えが可能ですから、図形graphicsから文字に変化(または逆)、が可能ですから、これらもアイデア次第と思います。

【参照】当方の記事: CreateJS テキストアニメーション、Tweenの途中でグラフィックを挿入する


 

少し凝ったロゴアニメーション用テキストを作る

テキストを重ねて、陰影処理などをして作りこみます。テキストに画像塗りも可能ですが、ここでは単色で塗ります。


● 少し凝ったロゴアニメーション用、内部テキスト3層 (シミュレーション有り)

 


条件分岐が複雑になるために、非表示には文字を入れないで処理しています。


上記設定のOutlineテキストLOGOのアニメ、シミュレーションを実行できます。

 

変更のJS部分、上部の設定でデザイン変更可能です。デザイン変更はシミュレーションでみれます。
必要であれば、上記関数を削除または名前を変更して、こちらを使用する、引数は同じです。



//LOGO-テキストインスタンスを作る2
//複数テキストのためtextBaseline中心補正
function createMoveLogoText2(size,font,color,outline_w,rainbow,space,str) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	var shadow=true;
	var shadow_color="#000000";//黒色

	var neon=false;//ネオン文字
	var neon_color="#00BFFF";//ネオン色

	//shadowを虹色にする
	var rainbowShadow=false;

	var baseoutline=false;//ベース文字outline
	var line=true;//ライン文字

	for (var i=0; i < len; i++) {

		//非表示には文字をいれないで処理

		//1文字取り出し
		var text=str.charAt(i);

		//コンテナを作る
		var box=new createjs.Container();

		//ベース文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		//1文字入れる
		t.text=text;
		t.name="base";
		t.colorno=""+parseInt(i/len*360);//虹色番号文字

		//幅高さを先に取得する
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();

		if(baseoutline) {t.outline=outline_w;}//outline

		//最重要、幅高さ取得後に中心補正
		t.textAlign="center";
		t.textBaseline="middle";

		//虹色
		if (rainbow) {
			//t.color=rainbowColor(i,len,100,50);//rainbow
			t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接

			/*
			var angle=i/len;//0-1
			var rgb=hslToRgb(angle,1,0.5);//直接
			color=createjs.Graphics.getRGB(rgb[0],rgb[1],rgb[2]);//0-255
			*/

			if(rainbowShadow){
				//虹色陰影色
				var angle=i/len;//0-1
				var rgb=hslToRgb(angle,1,0.5);//直接
				//RGB数値を#000000形式に変換
				neon_color=shadow_color=getHexString(rgb[0],rgb[1],rgb[2]);
			}
		}

		//ネオン陰影を強くする未使用
		//if(neon) {t.shadow=new createjs.Shadow(neon_color,0,0,6);}//3-8

		//ネオン文字インスタンスを作る
		var n=new createjs.Text("",fontdata,neon_color);
		n.outline=outline_w+2;// +1 +2 +3 +4
		n.name="neon";
		//1文字入れる
		if (neon) {n.text=text;}//表示
		n.textAlign="center";
		n.textBaseline="middle";
		if(neon) {n.shadow=new createjs.Shadow(neon_color,0,0,8);}//3-8

		//ライン文字インスタンスを作る
		var l=new createjs.Text("",fontdata,"#FFFFFF");
		l.name="line";
		l.outline=outline_w;
		//1文字入れる
		if(line) {l.text=text;}//表示
		//中心補正
		l.textAlign="center";
		l.textBaseline="middle";

		//neon優先
		if(!neon) {
			if(shadow) {

				//指定色または虹色
				t.shadow=new createjs.Shadow(shadow_color,0,0,4);
				l.shadow=new createjs.Shadow(shadow_color,0,0,4);
				//l.shadow=new createjs.Shadow(shadow_color,2,2,1);
			}
		}

		//BOX位置
		tpos_x +=w/2;//half
		box.x=tpos_x;
		box.y=h/2;
		//大きさ重要
		box.width=w;
		box.height=h;

		//位置加算
		tpos_x +=(w/2+space);//half+space

		//addChild
		box.addChild(n,t,l);

		chip[i]=box;

	}
	//戻り配列
	return chip;
}

ネオンの調整は以下の部分で行ってください。


n.outline=outline_w+2;// +1 +2 +3 +4

if(neon) {n.shadow=new createjs.Shadow(neon_color,0,0,8);}//3-8

非表示には文字をいれないで処理

色々なデザインを1つで処理すると複雑になりますので、間違い易く思い道理に行かない。簡単に処理するために、ここでは「非表示には文字をいれないで処理」しました。(文字なしでの陰影処理などがエラーにならない)
重ね順も変わりませんし、復活したい場合は文字を入れれば良い。(個人的にはグットアイデアと思うが....少し重くなるかナ....、実際は困り果てての苦肉の策です)


設定例

このデモJSでの設定の例です。上図のような表示になりますが、アウトラインの幅、および陰影の幅などで見た目は違ってきます。あくまでも参考例です。


ネオン陰影指定、neon が true の場合は、上の文字に陰影はつきません。(ネオンが薄くなるための対処)
虹色陰影の指定、rainbowShadow が true の場合は全ての陰影が虹色になります。


区分 1 2 3 4 5 6 7 8 備考
rainbow false false true true true true true true 虹色指定
color #FF1493 #FF1493 #FF1493 #FF1493 #FF1493 #FF1493 #FF1493 #FF1493 文字色自由
- -
shadow false false false true true true true true 陰影を付ける
neon true true true true false false false false ネオン陰影
rainbowShadow false false false false true true false false 虹色陰影
baseoutline false true true false false false false false アウトライン
line true false false true true false false true ライン装飾
- -
shadow_color #000000 #000000 #000000 #000000 #000000 #000000 #000000 #000000 陰影色、黒色
neon_color #00BFFF #00BFFF #00BFFF #00BFFF #00BFFF #00BFFF #00BFFF #00BFFF ネオン明青色

 

サンプル 3

▲[ 目次 ]


regX regY補正の「通常のテキスト」です。OUTLINEテキストとの比較のためにおいてあります。説明は省略します。

 

 

共通事項など

▲[ 目次 ]


カーニング (文字間の間隔の調整)

文字を配置してゆく場合、間に「スペース」を入れて計算していますので「間隔の調整」が可能です。マイナス値も使用できます。(AS カーニング と思えばよい、重ね順はそのままで変更はしていない)



var text_spc=0;//テキストスペース

TWEEN終了後(または途中)の処理

文字の中は複数のテキストで構成されていますので、「Textクラス」のインスタンスは個別に制御出来ます。
色を変えたりの操作をおこなえますので、ここでは、TWEEN終了後に文字色を変化させて見ます。


変化のタイプは、虹色、ランダム色、指定色、の3種類です。colorChg が true で実行します。


//色替え
var colorChg=false;
var colortype="random";//rainbow random #000000

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

//色替
function color_chg(colortype) {

	if(!colortype) {return}//指定なし
	//保存虹色番号
	var no=this.getChildByName("base").colorno*1;
	if(colortype == 'rainbow'){this.getChildByName("base").color=createjs.Graphics.getHSL(no,100,50);
	} else if(colortype == 'random'){this.getChildByName("base").color=createjs.Graphics.getHSL(Math.floor(Math.random()*360),100,50);
	} else {this.getChildByName("base").color=colortype;}//指定色
}

「Textクラス」故の便利さですが、事前にそれなりの仕込みが必要です。
工夫すれば色々なことが可能と思います。


欠点など

グラフイックと比較して、まだ、Canvas仕様が未確定であり、対処していないものが多いために、現在は余り便利では無いが将来は機能が増えてくると予想されます。


 

1. Textクラスは、文字に画像またはグラフイックの塗りが出来ない。単色で染める機能だけである。
2. 文字を利用してのマスクは出来ない。
3. 自由なフォント指定が難しい。(WebFontの利用は可能)
4. 文字を装飾する場合は、文字などを重ねてゆく。少々アイデアが必要だ。
5. そのままで、日本語を表示は可能であるが、日本語文字種の指定が難しい。
(英数字と比較して、Y方向のズレがまた違います)
6. ブラウザによって微妙に描画が違う。中心補正しても特にY方向のズレがある。


 

虹色と陰影

▲[ 目次 ]


CreateJSでは虹色と陰影が簡単に処理できます。


 

テキストを虹色で染める

▲[ 目次 ]


● CreateJSのgetHSL()


虹色の抽出にはHSLを利用しますが、CreateJSでは getHSL() で実現できます。 HLSは、色相(Hue)、彩度(Saturation)、輝度(Lightness/Luminance または Intensity)の3つの成分からなる色空間です。 CreateJSでは、色相 0-360、彩度 0-100、輝度 0-100、で指定します。



getHSL (hue saturation lightness [alpha]) String

文字合計数の何番目か判定して、色を取得しています。rainbowColor関数を使用しても、直接 getHSL() でも構いません。Graphicsクラスでも使用できますが、Shadow()では変換しなければなりません。
i=0 の場合 hsl(0,100%,50%) の赤色のストリングが返ります。


//虹色
if (rainbow) {
	//t.color=rainbowColor(i,len,100,50);//rainbow
	t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接
}

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

//rainbow-Color
var rainbowColor=function(v,cv,saturation,lightness) {
	var no=v/cv*360;
	var color=createjs.Graphics.getHSL(no,saturation,lightness);
	return color;
}

HLSのカラーモデル

http://ja.wikipedia.org/wiki/HLS色空間


色相:色味を0~360度の範囲の角度で表す。0度は赤で、その反対側に位置する180度は赤の反対色にあたる青緑。すなわち、反対色を見つけるのも容易。色相についてはHSVと同じ。

彩度:HSVとは違い、純色から彩度が落ちるということは、すなわち灰色になっていくという考え方に基づいている。

輝度:明度100%を純色とし、そこからどれだけ明るさが失われるかを示すHSVとは違い、輝度0%を黒、100%を白とし、その中間(50%)を純色とする。50%以下はHSVの明度を示し、50%以上はHSVの彩度を示すと考えると分かりやすいだろう。

HLS色空間を使う代表的なアプリケーションとしては Microsoft Windows (ペイントを含む)、CSS3、Paint Shop Pro、Inkscape など。


● 他のHSL関数を利用する


CreateJSのgetHSL()は手軽ですが、RGB値に変換するのは面倒ですから、他のHSL関数を利用してみます。

下記、HSL関数でRGB値が返ります。陰影を虹色で染めたい場合にはこちら利用の方が楽です。
色相 0-1、彩度 0-1、輝度 0-1、で指定します。



var angle=i/len;//0-1
var rgb=hslToRgb(angle,1,0.5);

戻り値0-255のRGB値
rgb[0] rgb[1] rgb[2]
----------------------------------------------------------------
/**
 * Converts an HSL color value to RGB. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
 * Assumes h, s, and l are contained in the set [0, 1] and
 * returns r, g, and b in the set [0, 255].
 *
 * @param   Number  h       The hue
 * @param   Number  s       The saturation
 * @param   Number  l       The lightness
 * @return  Array           The RGB representation
 */
function hslToRgb(h, s, l){
    var r, g, b;

    if(s == 0){
        r = g = b = l; // achromatic
    }else{
        function hue2rgb(p, q, t){
            if(t < 0) t += 1;
            i

[ この記事のURL ]


 

ブログ記事一覧



[1]