クリエイトウェーブ開発日記 2013年03月

FlashCS6のHTML5書き出したアニメをスマートフォンの画面に最適化させる

投稿日：2013-03-24 Sun

おつかれさまです。フッチーです。

最近FlashCS6のHTML5書き出しオプション「Toolkit for CreateJS」の使い方がようやっと判ってきました。

http://www.adobe.com/jp/devnet/createjs/articles/getting-started.html
にも書いてありますが、CS6の「Toolkit for CreateJS」は、FlashをHTML5に変換するツールではありません。
Flashを使ってHTML5コンテンツ制作を開発・補助するものです。　

慣れてくると、これが結構便利です。
jActionみたいに、複雑なゲームを作るのには向かないけど、アニメ制作とか、ちょっとした演出に使うのには最適です。
SNSゲームの、ちょっとした演出にも十分使えるのではないかと思っているところです。

さて、「Toolkit for CreateJS」を使って書き出したHTML5コンテンツは、スマートフォンの画面に最適化されません。スマフォコンテンツは大体画面いっぱいに広げる事が大きいのですが「Toolkit for CreateJS」で書き出したHTML5はサイズが固定されており、スマートフォンの画面に最適化されません。

しかし、スマートフォンの画面にフィットさせるのは意外に簡単です。
例えば、test.fla　を作って「Toolkit for CreateJS」でHTML5を出力すると、「test.html」と「test.js」それに画像素材が使われる場合は「images」フォルダの中に画像が配置されます。

この「test.html」をのぞいてみると


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from test</title>

<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.5.0.min.js"></script>
<script src="test.js"></script>

<script>
var canvas, stage, exportRoot;

function init() {
	canvas = document.getElementById("canvas");
	exportRoot = new lib.test();

	stage = new createjs.Stage(canvas);
	stage.addChild(exportRoot);
	stage.update();

	createjs.Ticker.setFPS(10);
	createjs.Ticker.addListener(stage);
}
</script>
</head>

<body onload="init();" style="background-color:#D4D4D4">
	<canvas id="canvas" width="550" height="400" style="background-color:#ffffff"></canvas>
</body>
</html>

となっています。
このままだとFlashのステージサイズで設定したサイズで動HTML5になりスマートフォンの画面にフィットさせる事ができません。　この「test.fla」の場合、550×400で作成しておりHTML5のCanvasも550×400になっています。

<canvas id="canvas" width="550" height="400" style="background-color:#ffffff">
部分で設定されてる訳です。　このままCanvasタグのサイズを変えても、スマートフォンの画面にはフィットしません。

これを以下のように書き換えるとスマートフォンの画面にフィットするようになります。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from test</title>

<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.5.0.min.js"></script>
<script src="test.js"></script>

<script>
var canvas, stage, exportRoot;
var real_canvas, realContext;

function init() {
	real_canvas = document.getElementById("real_canvas");
	real_canvas.width  = document.body.clientWidth;
	real_canvas.height = 400 * (document.body.clientWidth / 550);
	realContext = real_canvas.getContext("2d");

	canvas = document.createElement("canvas");
	canvas.setAttribute("id","canvas");
	canvas.setAttribute("width","550");
	canvas.setAttribute("height","400");
	exportRoot = new lib.test();

	stage = new createjs.Stage(canvas);
	stage.addChild(exportRoot);
	stage.update();

	createjs.Ticker.setFPS(10);
	//createjs.Ticker.addListener(stage);
	createjs.Ticker.addListener(window);
}

function tick()
{
	//createjsレンダー
	stage.update();

	//本番レンダー
	realContext.clearRect( 0 , 0 , real_canvas.width , real_canvas.height);
	realContext.drawImage(canvas, 0, 0, real_canvas.width , real_canvas.height);
};


</script>
</head>

<body onload="init();" style="background-color:#D4D4D4" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
	<!--canvas id="canvas" width="550" height="400" style="background-color:#ffffff"></canvas-->
	<canvas id="real_canvas" width="100" height="100" style="background-color:#ffffff"></canvas>
</body>
</html>

まず元々あったCanvasは

のようにコメント化して無効化してしまいます。もちろん削除でも構いません。

<canvas id="real_canvas" width="100" height="100" style="background-color:#ffffff"></canvas>

のように新しいCanvasを作ってあげます。　後でスマートフォンにフィットさせるので画面サイズは適当に小さいものにしておきます。

bodyタグには
<body onload="init();" style="background-color:#D4D4D4" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
として上下左右に余白が出ないようにしています。これは古い書き方で、いまはスタイルシートでやるようですがiPhone、アンドロイドともこれでも大丈夫なようです。

var real_canvas, realContext;
で宣言しておいて

real_canvas = document.getElementById("real_canvas");
real_canvas.width = document.body.clientWidth;
real_canvas.height = 400 * (document.body.clientWidth / 550);
realContext = real_canvas.getContext("2d");

でreal_canvasの方を、スマートフォンの画面にフィットさせます。
ここでは、横画面に合わせて縦も変えています。

createjsがレンダリングするcanvasをコメントアウトして無効化してしまったのでjavascriptで作ってあげます。

canvas = document.createElement("canvas");
canvas.setAttribute("id","canvas");
canvas.setAttribute("width","550");
canvas.setAttribute("height","400");

こうする事により、画面に表示されずメモリ内だけでレンダリングするようになります。

createjs.Ticker.addListener(stage);
を
createjs.Ticker.addListener(window);
へ変更。

こうする事により、自作のtickメソッドがFPS（フレームレート）単位で呼び出されるようになります。

後はtickメソッドの中で


function tick()
{
	//createjsレンダー
	stage.update();

	//本番レンダー
	realContext.clearRect( 0 , 0 , real_canvas.width , real_canvas.height);
	realContext.drawImage(canvas, 0, 0, real_canvas.width , real_canvas.height);
};

と書けば終わりです。

createjs.Ticker.addListener(window);
にした場合、createjsのFPS単位でのレンダリングが自動で行われなくなるので

stage.update();
でcreatejsのレンダリング命令を呼びだします。　これでメモリ内のcanvasが通常に動くようになるので、実際画面に映っているreal_canvasに、メモリ内のcanvasをreal_canvasの大きさに合わせて複写するのです。

realContext.clearRect( 0 , 0 , real_canvas.width , real_canvas.height);
realContext.drawImage(canvas, 0, 0, real_canvas.width , real_canvas.height);

実質的に、画面に写っているCanvasに色々命令をかいて描画するより、一旦メモリ内で生成してから画面に映ってるCanvasに一回で複写したほうが、パフォーマンスも向上します。

テーマ:JavaScript - ジャンル:コンピュータ

カテゴリー：HTML5/javaScript | TM(0) | CM(3)

△ PAGE UP

クリエイトウェーブ開発日記

クリエイトウェーブのスタッフによる、開発日記です。