この記事は公開されてから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;
}
}
}
出力結果
今後もネ申の砂場遊びに注目です。