SpriteクラスのblendModeプロパティを使って、ブレンドモード適用してるよ。 :girl:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TwinkleLights | pixi.js</title>
<script src="js/pixi.min.js"></script>
<script src="js/tweenjs-0.6.1.min.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
</style>
<script>
var stage, renderer, stats;
var loader;
var title, map;
var texture, container;
var playing = false;
function init() {
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "fixed";
stats.domElement.style.right = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);
stage = new PIXI.Container();
renderer = PIXI.autoDetectRenderer(600, 360, {backgroundColor: 0x000000});
document.body.appendChild(renderer.view);
renderer.view.style.display = "block";
renderer.view.style.width = "600px";
renderer.view.style.marginTop = "40px";
renderer.view.style.marginLeft = "auto";
renderer.view.style.marginRight = "auto";
renderer.view.style.paddingLeft = "0";
renderer.view.style.paddingRight = "0";
background();
loader = new PIXI.loaders.Loader();
loader.add("title", "assets/title.png");
loader.add("light", "assets/light.png");
loader.on("complete", complete);
loader.load();
update();
}
function update() {
twinkle();
renderer.render(stage);
requestAnimationFrame(update);
stats.update();
}
function complete() {
initialize();
start();
playing = true;
}
function initialize() {
var titletexture = PIXI.Texture.fromImage("assets/title.png");
title = new PIXI.Sprite(titletexture);
stage.addChild(title);
title.anchor.x = 0.5;
title.anchor.y = 0.5;
title.position.x = 300;
title.position.y = 180;
title.alpha = 0.2;
map = detect(30, 140, 540, 80);
texture = PIXI.Texture.fromImage("assets/light.png");
container = new PIXI.Container();
stage.addChild(container);
}
function detect(x, y, w, h) {
var canvas = document.createElement("canvas");
canvas.width = w;
canvas.height = h;
var context = canvas.getContext("2d");
var image = title.texture.baseTexture.source;
context.drawImage(image, 0, 0);
var imageData = context.getImageData(0, 0, w, h);
var data = imageData.data;
var list = [];
var max = data.length;
for (var n = 0; n < max; n += 4) {
if (data[n + 3] < 0x33) continue;
var c = n/4;
var x = c%w;
var y = (c/w) >> 0;
list.push({x: x, y: y});
}
delete canvas;
delete context;
return list;
}
function start() {
createjs.Tween.get(title, {override: true})
.to({alpha: 0.5}, 3000, createjs.Ease.linear)
.to({alpha: 0.2}, 3000, createjs.Ease.linear)
.call(repeat);
}
function repeat() {
start();
}
function twinkle() {
if (!playing) return;
create();
}
function create() {
var light = new PIXI.Container();
container.addChild(light);
var sprite = new PIXI.Sprite(texture);
sprite.pivot.x = 30;
sprite.pivot.y = 30;
light.addChild(sprite);
var scale = 0.5 + Math.random()*0.5;
sprite.scale.x = sprite.scale.y = scale;
var hue = Math.random()*360;
var color = HSVtoRGB(hue, 0.5, 1);
sprite.tint = color;
sprite.blendMode = PIXI.BLEND_MODES.ADD;
var mid = (Math.random()*map.length) >> 0;
light.position.x = 30 + map[mid].x;
light.position.y = 140 + map[mid].y;
light.scale.x = light.scale.y = 0;
light.alpha = 0;
createjs.Tween.get(light.scale, {override: true})
.to({x: 1, y: 1}, 300, createjs.Ease.quintOut)
.to({x: 0, y: 0}, 1200, createjs.Ease.quadOut)
createjs.Tween.get(light, {override: true})
.to({alpha: 1}, 300, createjs.Ease.quintOut)
.to({alpha: 0}, 1200, createjs.Ease.quadOut)
.call(remove);
}
function remove() {
container.removeChild(this);
}
function HSVtoRGB(h, s, v) {
var r, g, b, i, f, p, q, t;
if (h && s === undefined && v === undefined) {
s = h.s, v = h.v, h = h.h;
}
i = Math.floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r = v, g = t, b = p; break;
case 1: r = q, g = v, b = p; break;
case 2: r = p, g = v, b = t; break;
case 3: r = p, g = q, b = v; break;
case 4: r = t, g = p, b = v; break;
case 5: r = v, g = p, b = q; break;
}
var rgb = (Math.floor(r*0xFF) << 16) | (Math.floor(g*0xFF) << 8) | Math.floor(b*0xFF);
return rgb;
}
function background() {
var version = PIXI.VERSION;
var rendererType;
switch (renderer.type) {
case PIXI.RENDERER_TYPE.WEBGL :
rendererType = "WebGL";
break;
case PIXI.RENDERER_TYPE.CANVAS :
rendererType = "Context2D";
break;
}
var txt = "HTML5 / pixi.js [" + version + "] (" + rendererType + ")";
var basic = new PIXI.Text(txt, {"font": "14px Arial", "fill": "#FFFFFF", "align": "left"});
stage.addChild(basic);
basic.position.x = 4;
basic.position.y = 2;
basic.alpha = 0.6;
}
</script>
</head>
<body onload="init();" style="background-color:#EEEEEE">
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>TwinkleLights | pixi.js</title>
<script src="js/pixi.min.js"></script>
<script src="js/tweenjs-0.6.1.min.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
</style>
<script>
var stage, renderer, stats;
var loader;
var title, map;
var texture, container;
var playing = false;
function init() {
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "fixed";
stats.domElement.style.right = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);
stage = new PIXI.Container();
renderer = PIXI.autoDetectRenderer(600, 360, {backgroundColor: 0x000000});
document.body.appendChild(renderer.view);
renderer.view.style.display = "block";
renderer.view.style.width = "600px";
renderer.view.style.marginTop = "40px";
renderer.view.style.marginLeft = "auto";
renderer.view.style.marginRight = "auto";
renderer.view.style.paddingLeft = "0";
renderer.view.style.paddingRight = "0";
background();
loader = new PIXI.loaders.Loader();
loader.add("title", "assets/title.png");
loader.add("light", "assets/light.png");
loader.on("complete", complete);
loader.load();
update();
}
function update() {
twinkle();
renderer.render(stage);
requestAnimationFrame(update);
stats.update();
}
function complete() {
initialize();
start();
playing = true;
}
function initialize() {
var titletexture = PIXI.Texture.fromImage("assets/title.png");
title = new PIXI.Sprite(titletexture);
stage.addChild(title);
title.anchor.x = 0.5;
title.anchor.y = 0.5;
title.position.x = 300;
title.position.y = 180;
title.alpha = 0.2;
map = detect(30, 140, 540, 80);
texture = PIXI.Texture.fromImage("assets/light.png");
container = new PIXI.Container();
stage.addChild(container);
}
function detect(x, y, w, h) {
var canvas = document.createElement("canvas");
canvas.width = w;
canvas.height = h;
var context = canvas.getContext("2d");
var image = title.texture.baseTexture.source;
context.drawImage(image, 0, 0);
var imageData = context.getImageData(0, 0, w, h);
var data = imageData.data;
var list = [];
var max = data.length;
for (var n = 0; n < max; n += 4) {
if (data[n + 3] < 0x33) continue;
var c = n/4;
var x = c%w;
var y = (c/w) >> 0;
list.push({x: x, y: y});
}
delete canvas;
delete context;
return list;
}
function start() {
createjs.Tween.get(title, {override: true})
.to({alpha: 0.5}, 3000, createjs.Ease.linear)
.to({alpha: 0.2}, 3000, createjs.Ease.linear)
.call(repeat);
}
function repeat() {
start();
}
function twinkle() {
if (!playing) return;
create();
}
function create() {
var light = new PIXI.Container();
container.addChild(light);
var sprite = new PIXI.Sprite(texture);
sprite.pivot.x = 30;
sprite.pivot.y = 30;
light.addChild(sprite);
var scale = 0.5 + Math.random()*0.5;
sprite.scale.x = sprite.scale.y = scale;
var hue = Math.random()*360;
var color = HSVtoRGB(hue, 0.5, 1);
sprite.tint = color;
sprite.blendMode = PIXI.BLEND_MODES.ADD;
var mid = (Math.random()*map.length) >> 0;
light.position.x = 30 + map[mid].x;
light.position.y = 140 + map[mid].y;
light.scale.x = light.scale.y = 0;
light.alpha = 0;
createjs.Tween.get(light.scale, {override: true})
.to({x: 1, y: 1}, 300, createjs.Ease.quintOut)
.to({x: 0, y: 0}, 1200, createjs.Ease.quadOut)
createjs.Tween.get(light, {override: true})
.to({alpha: 1}, 300, createjs.Ease.quintOut)
.to({alpha: 0}, 1200, createjs.Ease.quadOut)
.call(remove);
}
function remove() {
container.removeChild(this);
}
function HSVtoRGB(h, s, v) {
var r, g, b, i, f, p, q, t;
if (h && s === undefined && v === undefined) {
s = h.s, v = h.v, h = h.h;
}
i = Math.floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r = v, g = t, b = p; break;
case 1: r = q, g = v, b = p; break;
case 2: r = p, g = v, b = t; break;
case 3: r = p, g = q, b = v; break;
case 4: r = t, g = p, b = v; break;
case 5: r = v, g = p, b = q; break;
}
var rgb = (Math.floor(r*0xFF) << 16) | (Math.floor(g*0xFF) << 8) | Math.floor(b*0xFF);
return rgb;
}
function background() {
var version = PIXI.VERSION;
var rendererType;
switch (renderer.type) {
case PIXI.RENDERER_TYPE.WEBGL :
rendererType = "WebGL";
break;
case PIXI.RENDERER_TYPE.CANVAS :
rendererType = "Context2D";
break;
}
var txt = "HTML5 / pixi.js [" + version + "] (" + rendererType + ")";
var basic = new PIXI.Text(txt, {"font": "14px Arial", "fill": "#FFFFFF", "align": "left"});
stage.addChild(basic);
basic.position.x = 4;
basic.position.y = 2;
basic.alpha = 0.6;
}
</script>
</head>
<body onload="init();" style="background-color:#EEEEEE">
</body>
</html>
title.png
light.png
[修正] (15/04/29 Wed 14:32)
pixi.js v3.0.2 にバージョンアップ。
PIXI.AssetLoader を PIXI.loaders.Loader に変更。PIXI.DisplayObjectContainer を PIXI.Container に変更。PIXI.blendModes を PIXI.BLEND_MODES に変更。
[修正] (15/05/10 Sun 18:27)
pixi.js v3.0.3 にバージョンアップ。
[修正] (15/09/21 Mon 01:19)
CreateJS 0.8.1 にバージョンアップ。