Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
16
Help us understand the problem. What is going on with this article?
@nyamogera

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

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

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

16
Help us understand the problem. What is going on with this article?
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
nyamogera
フロントエンド周りをお仕事にしてます。ハムスターのことを一日考えて過ごすことが多いです。
ics
インタラクションデザイン専門のプロダクション。最先端のウェブテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。最新のウェブ技術を発信するサイト「ICS MEDIA」を運営。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
16
Help us understand the problem. What is going on with this article?