16
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

Animate CCで書きだしたCreateJSのグラフィックスの色をプログラム上から変更する

使用したバージョン

  • Animate CC 2015
  • CreateJS 8.0.2
  • Chrome 48.0

Animate CCから書き出されるCreateJSのMovieClipの構造

変数として書き出される名前はAnimate CC側でつけたインスタンスの名前と同じ名前が付く(タイムラインに分割して配置されると、_1といった連番の番号が後ろに付く)

myShapeColor.js抜粋
(lib.FaceBase = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // レイヤー 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("#CCCCCC").s("#D4D4D4").ss(1,1,1).de(-61.9,-61.9,123.8,123.8);
    this.shape.setTransform(61.9,61.9);

    this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-1,-1,125.8,125.8);

...略

(lib.MyFace = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // mouth
    this.mouth = new lib.Mouth();
    this.mouth.setTransform(62.2,113.4,1,1,0,0,0,26.7,26.7);

    this.timeline.addTween(cjs.Tween.get(this.mouth).wait(8));

    ...略

    // レイヤー 6
    this.faceBase = new lib.FaceBase();
    this.faceBase.setTransform(61.9,61.9,1,1,0,0,0,61.9,61.9);

    this.timeline.addTween(cjs.Tween.get(this.faceBase).wait(8));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-0.5,-0.5,124.8,124.8);

MovieClipの構造をたどるには?

Object.keys等でコンテナ内のプロパティを辿ることが出来る。createjs.MovieClipの時に再帰的に同じ関数を呼び出すことで、更に奥深くのcreatejs.MovieClipを取得することが出来る。

function searchHierarchy(container) {

  Object.keys(container).forEach(function (key) {
    if (container[key] instanceof createjs.Shape) {
      // Shapeの時の処理
    }
    if (container[key] instanceof createjs.MovieClip) {
      // MovieClipの時は同じ関数を呼び出して、更に深い階層を取得する
      searchHierarchy(container[key]);
    }
  });
}

シェイプの色を変えるには?

createjs.Shapeはグラフィックスを描画した時のコマンドを保持している。
shape.graphics.instructionsプロパティーに描画したグラフィックスの配列が入っているので、グラフィックスの中身を直接編集することで色を変更することが可能。

function changeColor(shape, color) {
  var instructions = shape.graphics.instructions;
  if (instructions && instructions.length > 0) {
    for (var i = 0; i < instructions.length; i++) {
      var cmd = instructions[i];
      if (cmd instanceof createjs.Graphics.Fill) { // 塗りのとき
        cmd.style = color;
      } else if (cmd instanceof createjs.Graphics.Stroke) { // 線のとき
        cmd.style = color;
      }
    }
  }
}

まとめ

MovieClipの構造を辿り、シェイプの色を変更することで、Animate CCで描いたシェイプの色を変更することが出来る。

例えば、とある名前のインスタンスのムービークリップの色だけを変えるといったことが可能で、応用することで自由に色を変えられるようなアバターシステムのようなものが作成できる。はず。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
16
Help us understand the problem. What are the problem?