メモ

CreateJSでテキストを動的に変えることの考察

Posted on by seigo

※こちらは2012/7/27現在のものです。今後CreateJSがバージョンアップすると解決される＆挙動が変更される可能性があります。

最近、以前より研究しているSWF全変換タイプのSwiffyだけでなく、Flashをパーツ単位でHTML5とJSに書きだして扱えるCreateJSも戯れております。

ちょっと勉強がてらテキストを外部から動的に変更することをやってみました。

今回のソース

今回のテストに使う元のコードです。このように人が話しフキダシにセリフ文言が表示される作りです。セリフ部分は画面外側からテキストが登場するアニメーションも入っています。なお、セリフのテキストフィールドは、_rootでアニメさせているmc01というMovieClipの中にinnerText01のTextFieldで入っています。

Flash元コード(speak.swf,speak.fla)

[SWF]https://www.1ft-seabass.jp/memo/archives/createjs_textarea_change_study/speak.swf,240,270[/SWF]

CreateJSコード(speak.html)

つづいて上記を書きだしたCreateJSのコードです。Toolkit for CreateJSの設定でループするようにしているので以下のようにフキダシが繰り返すものなります。これは今回の意図通りのものです。

→別ページで開く

見ての通り、複数行で指定されたテキストフィールドだったのに単一行になってしまい改行されず文言が突き抜けています。これはEaselJSのTextクラスに複数行のパラメータが見当たらないようなので、現状のではしかたのないことのようです。

EaselJS v0.4.2 API Documentation(Textクラス)

そもそも、複数行を指定するようなパラメータがないですね。。。あったら変換時にやってますね。

テキストを入れ替えてみる

ともあれ、セリフを以下のように変えてみます。

EaselJS v0.4.2 API Documentation(Textクラス)

には、Textクラス.textというプロパティがあり、それを使って変更します。

はじめまして。～～～～さん。
今日は○○月○○日○曜日。天気は晴れのち曇り。今日も一日元気に過ごしましょう！！！

を

はじめまして。1ft-seabassさん。
今日は7月27日金曜日。天気は晴れのち曇り。今日も一日元気に過ごしましょう！！！

に変更します。テキストはアニメさせるmc01というMovieClipの中にinnerText01のTextFieldにあるので、FLASHにおける「_root.mc01.innerText01」を、今回のCreateJSではexportRootでパーツを呼び出しているので「exportRoot.mc01.innerText01」で呼び出します。


<script>
var canvas, stage, exportRoot;

function init() {
	canvas = document.getElementById("canvas");
	exportRoot = new lib.speak();
	
	// ここを追加する。
	exportRoot.mc01.innerText01.text = "はじめまして。1ft-seabassさん。\n今日は7月27日金曜日。天気は晴れのち曇り。今日も一日元気に過ごしましょう！！！";

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

	Ticker.setFPS(12);
	Ticker.addListener(stage);
}
</script>

以下が実際のコードです。うまくいきました。

CreateJSコード(speak_study01.html)

→別ページで開く

うまく改行を調整してみる

あとは、単一行になってしまっているので、改行で調整しようと思います。


<script>
var canvas, stage, exportRoot;

function init() {
	canvas = document.getElementById("canvas");
	exportRoot = new lib.speak();
	
	// FLASHと似たように改行してみる。
	exportRoot.mc01.innerText01.text = "はじめまして。1ft-seabassさん。\n今日は7月27日金曜日。天気は晴\nれのち曇り。今日も一日元気に過ごしま\nしょう！！！";

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

	Ticker.setFPS(12);
	Ticker.addListener(stage);
}
</script>

CreateJSコード(speak_study02.html)

→別ページで開く

できました。とはいえ、動的に入る文言を毎度調整するのは大変ですね。実践的にやるなら、1行に入る文字数によって自動改行するJavascriptで補正する必要がありますね。

途中で文言を変える

ひとまず、最初の表示で文言を変える仕組みは見通せました、続いて、途中で文言を変えることをやっています。


<script>
var canvas, stage, exportRoot;

function init() {
	canvas = document.getElementById("canvas");
	exportRoot = new lib.speak();
	
	// FLASHと似たように改行してみる。
	exportRoot.mc01.innerText01.text = "はじめまして。1ft-seabassさん。";
	
	//
	loop();
	
	stage = new Stage(canvas);
	stage.addChild(exportRoot);
	stage.update();

	Ticker.setFPS(12);
	Ticker.addListener(stage);
}

function text001(){
	exportRoot.mc01.innerText01.text = "今日は7月27日金曜日。天気は晴\nれのち曇り。";
}

function text002(){
	exportRoot.mc01.innerText01.text = "今日も一日元気に過ごしま\nしょう！！！";
}

function loop(){
	exportRoot.mc01.innerText01.text = "はじめまして。1ft-seabassさん。";
	Tween.get({}).wait(1500).call(text001).wait(1000).call(text002).wait(1500).call(loop);
}

</script>

CreateJSコード(speak_study03.html)

→別ページで開く

横のスライドと今回実装したテキスト切り替わりのタイミングが微妙に合っていないのは、今回の作りの問題です。全体のムービーの秒数が4秒なのですが、Tweenで4秒繰り返すと徐々にズレていく非同期だからです。1フレーム目に戻るイベントが取れればより同期できると思います。

おわりに

いかがでしたでしょうか。割とだめかなーと臨んでみたのですが、結構行ける印象。

1行に入る文字数によって自動改行、あるいは、手動改行するというのがネックですね。これもJavascriptでの文字列整形や同様のことを出力側のサーバーサイドスクリプトで整備できればやれなくもないです。まあそもそも、CreateJS側で複数行テキストフィールドが対応すれば一発解決ですし、万能ではないですが使えると思います。

以下、今回のファイル一式を置いておきますので興味のある方は変換して試してみてください。

.fla(CS6.0作成)データダウンロード：createjs_textarea_change_study.zip

それでは、よきCreateJS Lifeを！（本ブログ初）

、、
seigo