CreateJSでクロスドメインな画像を使うときの注意点

S3なんかに置いた画像を利用するときに注意すべき点は二つ。

1. PreloadJS のロードをHTML形式にする
2. mouseEnabled を false にする

PreloadJS のロードをHTML形式にする

PreloadJS はデフォルトだと XHR でリソースをとりにいく。
初期化時に false を渡してやるとHTMLタグを使った方法に切り替わる。

var loader = new createjs.LoadQueue(false);

MouseEnabled を false にする

マウスイベントを受け取らないようにする。

var bitmap = new createjs. Bitmap(/* crossdomain resource */);
bitmap.mouseEnabled = false;

サンプル

2つのコメントのとこのブーリアンを切り替えるとCORSエラーになる。
ただし[2]はマウスイベントが発生するまではなにもおきない。

;(function()
{
    'use strict';

    var stage,
        loader,
        container,
        graphics,
        sprite;

    var loadList = [
        { id: 'dove', src: '//nenji.ru/assets/jsdoit-cors-test.png' },
    ];

    createjs.Ticker.setFPS(60);
    createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

    stage = new createjs.Stage(document.getElementById('stage'));
    stage.enableMouseOver();

    // [1] 読み込み方式の選択
    loader = new createjs.LoadQueue(false);

    loader.loadManifest(loadList);
    loader.addEventListener('complete',function(event)
    {
        container = new createjs.Container();
        graphics = new createjs.Graphics();

        graphics.beginFill('#8f8');
        graphics.drawRect(-16.5, -14, 66, 56);
        container.addChild(new createjs.Shape(graphics));

        sprite = new createjs.Sprite(new createjs.SpriteSheet({
            images: [loader.getResult('dove')],
            frames: {width: 33, height: 28, regx: 33>>1, regy: 28>>1},
            animations: {
                down:  { frames: [ 0, 1, 2, 1 ] },
                left:  { frames: [ 3, 4, 5, 4 ] },
                right: { frames: [ 6, 7, 8, 7 ] },
                up:    { frames: [ 9, 10, 11, 10 ] }
            }
        }));

        // [2] マウスイベントを受け取らない
        sprite.mouseEnabled = false;
        sprite.framerate = 8;
        sprite.gotoAndPlay('down');

        container.addChild(sprite);
        container.x = 456>>1;
        container.y = 456>>1;
        container.cursor = 'pointer';

        container.on('mousedown', function (event)
        {
            console.log(event);
        });

        stage.addChild(container);

        createjs.Ticker.addEventListener('tick', function (event)
        {
            stage.update(event);
        });
    });

})();