Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

使用したバージョン

  • 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で描いたシェイプの色を変更することが出来る。

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

nyamogera
フロントエンド周りをお仕事にしてます。ハムスターのことを一日考えて過ごすことが多いです。
http://nyamogera.net
ics
インタラクションデザイン専門のプロダクション。最先端のウェブテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。最新のウェブ技術を発信するサイト「ICS MEDIA」を運営。
https://ics.media/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした