[Haxe/CreateJS] 万華鏡的な演出

たいが

2013.4.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

上記画像のような演出デモを作ってみたので解説します。( デモ )

ネ申の砂場あそび

先日、CreateJS の生み親である Grant Skinner ネ申が申されました。

Started posting a few little demos & experiments to the CreateJS sandbox github.com/CreateJS/sandb… More to come.

— Grant Skinner (@gskinner) April 15, 2013

﹁ CreateJS/sandbox に小さい実験デモを公開していくよ。 ( 意訳 ) ﹂…とのことなので、現在公開されている Kaleidoscope.js を弄ってみました。

Kaleidoscope.js の Haxe 用 extern クラス

Haxe/CreateJS な人は下記コードをご自由にどうぞ。

Kaleidoscope.hx

package ;
import createjs.easeljs.DisplayObject;
@:native("Kaleidoscope")
extern class Kaleidoscope extends DisplayObject {
    public function new(radius:Float, source:Dynamic, slices:Int, pattern:Array<Int>):Void;
    public var source:Dynamic;
    public var radius:Float;
    public var pad:Float;
}

デモ

実装例は以下の通り。 GitHub に公開されているサンプルを Haxe クラスに書き換えて少し変更を加えただけのものです。

Main.hx

package ;

import createjs.easeljs.Bitmap;
import createjs.preloadjs.LoadQueue;
import createjs.easeljs.Stage;
import createjs.easeljs.Ticker;
import js.Lib;
import Kaleidoscope;

class Main {

    private var stage:Stage;

    private var canvas:Dynamic;

    private var loader:LoadQueue;

    private var source:Bitmap;

    private var kaleidoscope:Kaleidoscope;

    public static function main():Void {
        new Main();
    }

    public function new() {
        Lib.window.onload = initHandler;
    }

    private function initHandler(_):Void {
        stage = new Stage(cast Lib.document.getElementById("canvas"));
        stage.compositeOperation = "darker";
        canvas = stage.canvas;

        handleResize(null);
        Lib.window.onresize = handleResize;

        Ticker.setFPS(60);
        Ticker.useRAF = true;
        Ticker.addListener(update);

        loader = new LoadQueue();
        loader.addEventListener("fileload", draw);
        loader.loadFile({id:"image", src:"sample.png"});
    }

    private function draw(eventObjects:Dynamic):Void {
        var radius:Float = 300;
        var myImage:Dynamic = loader.getResult("image");

        source = new Bitmap(myImage);
        source.regX   = source.image.width/2;
        source.regY   = source.image.height/2;
        source.scaleX = radius/source.image.width*2;
        source.scaleY = radius/source.image.height*2;

        kaleidoscope = cast stage.addChild(
                                new Kaleidoscope(radius, source, 9, [1, 1, 1, 1, 1, 1, 1, 1, 1])
                            );
        kaleidoscope.rotation = 18;
    }

    private function update():Void {
        stage.update();
        var window:Dynamic = Lib.window;
        var cx:Float = window.innerWidth * 0.5;
        var cy:Float = window.innerHeight * 0.5;
        if(kaleidoscope != null) {
            kaleidoscope.x = cx;
            kaleidoscope.y = cy;
        }
        source.rotation -= 1;
    }

    private function handleResize(_):Void {
        var window:Dynamic = Lib.window;
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        if(kaleidoscope != null) {
            kaleidoscope.x = canvas.width * 0.5;
            kaleidoscope.y = canvas.height * 0.5;
        }
    }
}