ソーシャルゲームのアニメーションと CreateJS
エンジニアの草苅です。
突然ですが、ソーシャルゲームのアニメーションはどのようなライブラリやツールを使って実現されているかご存じでしょうか？
今回はそのあたりを簡単にご紹介しようと思います。
フィーチャーフォン向けアニメーション
ほとんどの場合、Flash Lite で制作されており、ほとんどの場合 ActionScript 1.1で作られています。
これは ActionScript 1.1 にすることでほとんど100%に近いくらいの携帯電話で動作させることができるからです。
ただ、Flash Lite はかなり制限事項（100kb制限など）が多いことから、バイナリ置換などでテキストや画像を差し替えたり、バイナリ文字列をつなぎ合わせて swf を作成したりしている会社がほとんどだと思います。
このあたりはかなりディープな話になるので、今回はあまり触れません。
スマートフォン向けアニメーション
会社によって対応が違いますが、GREE では Reel、mobage では ExGame など各プラットフォームから提供されている HTML5 の Flash 再生（変換）ツールを利用している会社が多いと思います。
まずフィーチャーフォン向けに Flash を作り、それを Android OS 向けに少し修正を加え、最後に iOS 向けには変換ツールを利用する。一番割合の多いフィーチャーフォンをまず作り、次に割合の多い Android OS、最後に自動変換で iOS に対応というのは、とても自然な流れでしかも開発が楽なのでこの選択肢をとる会社が多いのだと思います。
また、HTML5 の Flash 再生ツールを提供していないプラットフォームに対応するため（もしくはその他の理由で）、iOS 向けには Google Swiffy を利用している会社も多いと思います。
しかし、これからフィーチャーフォンの優先度が下がっていくことを考えると、Flash の優先度は下がっていくため、スマートフォンは Flash を利用せずに、すべて HTML5 で開発するという会社が増えてくると思います。
Tookit for CreateJS は Flash CS6 以降で利用できるプラグインで、Flash から HTML5 アニメーションを出力することができます。出力されるアニメーションは CreateJS というライブラリに依存した HTML です。
CreateJS は EaselJS、TweenJS、SoundJS、PreloadJS からなる JavaScript ライブラリで、Flash に近い表現が JavaScript（Canvas）を使ってできるというものです。
以上、ソーシャルゲームのアニメーションのためのツール・ライブラリについて簡単に紹介しました。
最後に
個人的には特に CreateJS に注目しており、約半年前から社内のスマートフォンアニメーション勉強会などで CreateJS に取り組んでいます。
CreateJS 自体はまだもう一つのところもあったりするのですが、その一つの例として createjs.Text が日本語のマルチライン（lineWidth）に対応していないということがあります。
String.prototype.toArray = function() {
var array = [];
for (var i=0,max=this.length;i<max;i++) {
array.push(this.charAt(i));
}
return array;
};
// Text(EaselJS 0.5.0)
createjs.Text.prototype._drawText = function(ctx) {
var paint = !!ctx;
if (!paint) { ctx = this._getWorkingContext(); }
var lines = String(this.text).split(/(?:rn|r|n)/);
var lineHeight = this.lineHeight||this.getMeasuredLineHeight();
var count = 0;
for (var i=0, l=lines.length; i<l; i++) {
var w = ctx.measureText(lines[i]).width;
if (this.lineWidth == null || w < this.lineWidth) {
if (paint) { this._drawTextLine(ctx, lines[i], count*lineHeight); }
count++;
continue;
}
// split up the line
var words = lines[i].toArray();
var str = words[0];
for (var j=1, jl=words.length; j<jl; j++) {
// Line needs to wrap:
if (ctx.measureText(str + words[j]).width > this.lineWidth) {
if (paint) { this._drawTextLine(ctx, str, count*lineHeight); }
count++;
str = words[j];
} else {
str += words[j];
}
}
if (paint) { this._drawTextLine(ctx, str, count*lineHeight); } // Draw remaining text
count++;
}
return count;
}
絶賛採用活動中！
大阪・滋賀・兵庫から通勤実績があります！
