POPSブログ

CreateJS Google WebFont OUTLINEテキストアニメのシミュレーション

314

  Category:  javascript2014/07/27 pops 

CreateJS Textクラスで作ったCanvasエレメント描画OUTLINEテキストアニメーションに「Google WebFont」を利用してみました。当然、Fontは変わりますが印象にさほどの変化はありません。
シミュレーションをご覧頂けます。挙動は「前ページ」のものと同じです。easeljs-0.7.1 でのテストです。

 

CreateJS Canvasエレメント描画OUTLINEテキストを補正しアニメ、シミュレーション

CreateJS Textクラスで作ったCanvasエレメント描画OUTLINEテキストアニメーションに「Google WebFont」を利用しただけです。作り方などを変えていますので「Google WebFont」表示確認のためのものです。詳細は「前ページ」を参照ください。


使用WebFont

 

 

DEMO


CreateJS Canvasエレメント描画 Google WebFont OUTLINEテキストアニメーションのデモ

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


画像埋め込み Google WebFont OUTLINEテキストのシミュレーション


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


 

簡単な説明


今回は「Google webfont」の読み込み部分のみの説明になります。


webfont.jsの読み込み

必ず、HtmlのJS読み込み最初に記述します。



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>

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

当方の場合は、ズルです
<script type="text/javascript" src="js/webfont.js"></script>

フォントの読み込み

当方では、CreateJSがスタートしてからフォントの読み込みを行っています。
読み込み判定のフラグweb_fontを用意して、フォントの読み込みの判定を行っています。
「Limelight」はOUTLINEテキストに合いませんので使用していません。この部分は「前ページ」などとほぼ同じです。
init()の中で記述しているのは、進展状況をテキスト表示できるからなのですが、....



//初期設定
//WebFont
var webfont_name="Erica One";
var web_font=false;

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

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

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

	//バックRect/最下位色背景層
	backrect=new createjs.Shape();
	backrect.graphics.beginFill("#888888").drawRect(0,0,canvasWidth,canvasHeight);
	stage.addChild(backrect);

	//背景画像
	backImage=new createjs.Bitmap();
	stage.addChild(backImage);
	backImage.visible=true;

	//簡易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);
	set_text("LOADING NOW!");

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

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

	//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);

	//WebFont
	WebFont.load({
		google:{
			//families:[webfont_name]
			families:["Erica One","Archivo Black","Varela Round","Flamenco","Fanwood Text","Limelight"]

		},
		loading:function(){
			set_text("WebFont Loading Now!");
		},
		active:function(){
			//読み込み成功
			web_font=true;
			set_text("WebFont Loading END");
			bulkload();
		},
		inactive:function(){
			//読み込み失敗
			web_font=false;
			set_text("WebFont None!");

			//jQuery/シミュレーション用
			$(".webfonts").css({"display":"none"});

			//画像一括ロードに進む
			bulkload();
		}
	});

}

//bulk-load、画像一括ロード
function bulkload() {

	略す

}

フォントの読み込みの判定を行っていますので、読み込み失敗の場合は無難な「Airal」などを指定します。



//webfontを使用する
if(web_font) {webfont_name="Erica One";}
else{webfont_name="Airal";}

//インスタンス配列取得
//CanvasW,H,サイズ,フォント,文字色,アウトライン幅,虹色,スペース,陰影色,陰影,画像,画像透明度,文字,base表示,line表示
textChip2=createMoveOutlineTextCanvas_D(100,100,font_size,font_name,text_color,...........);

● init()の外に出すならば、以下の様にも書けます。動作すればこの辺は自由です。
一般的にはこちらの書き方になると思います。進展状況はjQueryでも表示できますので、....



//初期設定
//WebFont
var webfont_name="Erica One";
var web_font=false;

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

//START
window.addEventListener("load", function(){

	//WebFont
	WebFont.load({
		google:{
			//families:[webfont_name]
			families:["Erica One","Archivo Black","Varela Round","Flamenco","Fanwood Text","Limelight"]

		},
		loading:function(){
			//
		},
		active:function(){
			//読み込み成功
			web_font=true;
			init();
		},
		inactive:function(){
			//読み込み失敗
			web_font=false;
			init();
		}
	});

}, false);

通常は読み込み成功するが、状況次第では「失敗」がある。こんな場合、ブラウザの「リロード」ボタンで正常になる事が多い。Fontによっては壊れたりする物も有るかも知れません。


上記の設定は、CSSの記述は行っていませんので、CreateJS、ステージ内部のみでの使用に限定されます。
今回は説明などは何もありません。いつもこの調子だと大変らくですナ。


 

当方の参照記事など

「前ページ」画像装飾OUTLINEテキストアニメーションの記事ですです。

【参照】当方の記事: CreateJS Canvasエレメント描画OUTLINEテキストを補正しアニメーション

WebFont テキストアニメーションは下記の記事も参照ください。(上記説明とほぼ同じ)

【参照】当方の記事: CreateJS WebFont テキストアニメーション



以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]