2012年10月18日木曜日

ソーシャルゲームのアニメーションと 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 を利用している会社も多いと思います。

ただ、Android OS が Flash を標準搭載しなくなってきたことで少し流れが変わりつつあります。
上記の流れのまま対応するのであれば、これまでの方法に加えて、Android OS 4.0 以降であれば iOS 同様、Flash ではなく変換ツールを利用するような形になります。
しかし、これからフィーチャーフォンの優先度が下がっていくことを考えると、Flash の優先度は下がっていくため、スマートフォンは Flash を利用せずに、すべて HTML5 で開発するという会社が増えてくると思います。

そうなると、Flash 感覚で操作できる HTML5 オーサリングツールが欲しくなります。
そんなときに使えるのが Adobe が公開している Edge AnimateToolkit for CreateJS です。

Edge Animate はまさに HTML5 のオーサリングツールで、Flash 感覚で HTML5 アニメーションを制作できます。出力されるアニメーションは jquery.js、jquery.easing.js、eage.js などのライブラリに依存した HTMLです。
Tookit for CreateJS は Flash CS6 以降で利用できるプラグインで、Flash から HTML5 アニメーションを出力することができます。出力されるアニメーションは CreateJS というライブラリに依存した HTML です。
CreateJS は EaselJS、TweenJS、SoundJS、PreloadJS からなる JavaScript ライブラリで、Flash に近い表現が JavaScript(Canvas)を使ってできるというものです。


弊社ではスマートフォンアニメーションの実現方法はアプリごとに違いますが enchant.js、Flash + Swiffy、CreateJS などを利用しています。  

以上、ソーシャルゲームのアニメーションのためのツール・ライブラリについて簡単に紹介しました。

最後に

個人的には特に 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(/(?:\r\n|\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;
}

絶賛採用活動中!

京都で携帯電話向けのアニメーションを作ってみたい、ソーシャルゲームを作ってみたいという社会人、学生の皆さん、ご応募お待ちしてます!
大阪・滋賀・兵庫から通勤実績があります!

0 件のコメント:

コメントを投稿