■プロフィール

クリエイトウェーブスタッフ

Author:クリエイトウェーブスタッフ
開発における、諸々を書いていきたいなと思っています。

■最近の記事
■カテゴリー
■twitter

■QRコード

QR

■最近のコメント
■月別アーカイブ
■最近のトラックバック
■ブロとも申請フォーム
■twitter_follow

■ブログ内検索

■RSSフィード
■リンク
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


カテゴリー:スポンサー広告 |
FlashCS6のHTML5書き出したアニメをスマートフォンの画面に最適化させる
おつかれさまです。フッチーです。

最近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="canvas" width="550" height="400" style="background-color:#ffffff"></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)
コメント
残念ながら、真っ白画面で役に立ちません
2015-12-17 木 18:30:30 | URL | [編集]
Re: タイトルなし
> 残念ながら、真っ白画面で役に立ちません
FlashCS6の頃とCreateJS書き出しの仕様が変わってる部分があります。
私も詳しく調べてませんが、とりあえず現在は

createjs.Ticker.addListener(stage);を
createjs.Ticker.addListener(window);

に書き換えるのでは駄目で、

createjs.Ticker.addEventListener("tick", stage);

createjs.Ticker.addEventListener("tick", handleTick);

に書き換えて

function tick()ではなく
function handleTick()
で定義する必要があります。

まだ他も変わってるかもしれませんが、とりあえずお試しください。
2015-12-27 日 01:34:21 | URL | クリエイトウェーブスタッフ [編集]
まさか、対応してもらえるとは思ってなくて
失礼な言い方ですみませんでした。

ちゃんと表示されました。
ずっと探していたので、ちょっと感動してます。
ありがとうございました
2016-02-07 日 15:53:11 | URL | [編集]
コメントの投稿

管理者にだけ表示を許可する

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。