[pixi.js] PixiParticlesでパーティクル (6) ~光~

pixijsを使って、パーティクルを扱うよ。 :boy:

pixijs_particles_light

PixiParticlesを使ってみちゃうよ。 :boy:

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PixiParticles [light] | pixi.js</title>
<script src="js/pixi.min.js"></script>
<script src="js/pixi-particles.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 piyo;
var view, light;
var elapsed = Date.now();
var night;

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, 300, {backgroundColor: 0xFFFFFF});
  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";

  loader = new PIXI.loaders.Loader();
  loader.add("piyo", "assets/piyo.json");
  loader.add("light", "assets/light.png");
  loader.on("complete", complete);
  loader.load();

  update();
}
function update() {
  if (light) {
    var time = Date.now();
    light.update((time - elapsed)/1000);
    elapsed = time;
  }

  renderer.render(stage);
  requestAnimationFrame(update);

  stats.update();
}
function complete() {
  background();
  initialize();
  setup();
  start();
}
function initialize() {
  view = new PIXI.Container();
  stage.addChild(view);

  var textures = [];
  for (var n = 0; n < 60; n++) {
    var texture = PIXI.Texture.fromFrame("piyo" + n + ".png");
    textures.push(texture);
  }

  piyo = new PIXI.extras.MovieClip(textures);
  stage.addChild(piyo);
  piyo.anchor.x = 0.5;
  piyo.anchor.y = 0.9;
  piyo.position.x = 640;
  piyo.position.y = 260;
  piyo.gotoAndPlay(Math.random()*60);
}
function setup() {
  var texture = PIXI.Texture.fromImage("assets/light.png");
  var config = {
    "emitterLifetime": 0,
    "frequency": 0.01,
    "maxParticles": 160,
    "lifetime": {"min": 1.6, "max": 2},
    "pos": {"x": 0, "y": 0},
    "spawnType": "circle",
    "spawnCircle": {"x": 0, "y": 0, "r": 24},
    "speed": {"start": 60, "end": 75},
    "acceleration": {"x": 0, "y": -30},
    "startRotation": {"min": 260, "max": 280},
    "color": {"start": "CC9966", "end": "FFFFFF"},
    "alpha": {"start": 1, "end": 1},
    "scale": {"start": 0.6, "end": 0},
    "blendMode": "add",
    "addAtBack": false
  };
  light = new cloudkid.Emitter(view, texture, config);
  light.updateOwnerPos(640, 230);
}
function start() {
  transit();
}
function transit() {
  createjs.Tween.get(night, {override: true})
    .wait(4000).to({alpha: 1}, 1600, createjs.Ease.linear)
    .wait(4000).to({alpha: 0}, 1600, createjs.Ease.linear)
    .call(start);
  createjs.Tween.get(piyo, {override: true})
    .to({x: -40}, 2800, createjs.Ease.quadInOut).to({x: 640})
    .to({x: -40}, 2800, createjs.Ease.quadInOut).to({x: 640})
    .to({x: -40}, 2800, createjs.Ease.quadInOut).to({x: 640})
    .to({x: -40}, 2800, createjs.Ease.quadInOut).to({x: 640})
    .addEventListener("change", change);
  createjs.Tween.get(this, {override: true})
    .wait(4000).call(wind, [120])
    .wait(1600).call(wind, [0])
    .wait(4000).call(wind, [120])
    .wait(1600).call(wind, [0]);
}
function wind(vx) {
  light.acceleration.x = vx;
}
function change(evt) {
  light.ownerPos.x = evt.target.target.x;
}
function background() {
  var sky = new PIXI.Graphics();
  stage.addChild(sky);
  sky.beginFill(0x00AAE4);
  sky.drawRect(0, 0, 600, 225);
  sky.endFill();

  var ground = new PIXI.Graphics();
  stage.addChild(ground);
  ground.beginFill(0x99CC33);
  ground.drawRect(0, 225, 600, 75);
  ground.endFill();

  night = new PIXI.Container();
  stage.addChild(night);
  night.alpha = 0;

  var nightsky = new PIXI.Graphics();
  night.addChild(nightsky);
  nightsky.beginFill(0x002A80);
  nightsky.drawRect(0, 0, 600, 225);
  nightsky.endFill();

  var nightground = new PIXI.Graphics();
  night.addChild(nightground);
  nightground.beginFill(0x4A6619);
  nightground.drawRect(0, 225, 600, 75);
  nightground.endFill();

  var front = new PIXI.Container();
  stage.addChild(front);

  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"});
  front.addChild(basic);
  basic.position.x = 4;
  basic.position.y = 2;
  basic.alpha = 0.6;
  var title = new PIXI.Text("PixiParticles", {"font": "24px Arial", "fill": "#FFFFFF", "align": "center"});
  front.addChild(title);
  title.position.x = 300 - (title.width >> 1);
  title.position.y = 40;
  title.alpha = 0.6;
  var ver = new PIXI.Text("[1.2.2]", {"font": "14px Arial", "fill": "#FFFFFF", "align": "center"});
  front.addChild(ver);
  ver.position.x = 300 - (ver.width >> 1);
  ver.position.y = 65;
  ver.alpha = 0.6;
  var subtitle = new PIXI.Text("light", {"font": "20px Arial", "fill": "#FFFFFF", "align": "center"});
  front.addChild(subtitle);
  subtitle.position.x = 300 - (subtitle.width >> 1);
  subtitle.position.y = 90;
  subtitle.alpha = 0.6;
  var publish = new PIXI.Text("authoring: Sublime Text 2 + Flash CC", {"font": "14px Arial", "fill": "#FFFFFF", "align": "right"});
  front.addChild(publish);
  publish.position.x = 600 - (publish.width + 4);
  publish.position.y = 2;
  publish.alpha = 0.6;
}
</script>
</head>
<body onload="init();" style="background-color:#EEEEEE">
</body>
</html>


[修正] (15/03/01 Sun 17:00)
pixi.js v2.2.7 にバージョンアップ。
[修正] (15/04/29 Wed 07:27)
pixi.js v3.0.2 にバージョンアップ。
PIXI.AssetLoader を PIXI.loaders.Loader に変更。PIXI.MovieClip を PIXI.extras.MovieClip に変更。PIXI.DisplayObjectContainer を PIXI.Container に変更。
[pixi-particles.min.js] PIXI.MovieClip を PIXI.extras.MovieClip に変更。PIXI.blendModes を PIXI.BLEND_MODES に変更。setTextureメソッド を textureプロパティに変更。
:caution: ローカルで確認すると、次のようなエラーがでる。
Error: The frameId “****.png” does not exist in the texture cache
[修正] (15/05/10 Sun 17:05)
pixi.js v3.0.3 にバージョンアップ。
ローカルで発生していたエラーがSafariでは出なくなった。
[修正] (15/09/21 Mon 01:16)
CreateJS 0.8.1 にバージョンアップ。