[CreateJS] 炎のパーティクル

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

createjs_fireparticle

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

詳しくは「HTML5 Canvasでパーティクル表現!パーティクルエンジンParticleEmitterJS | ClockMaker Blog
:check: 「ParticleEmitterJS | Purple Monkey Studios

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>炎のパーティクル | CreateJS</title>
<script src="js/easeljs-0.8.1.min.js"></script>
<script src="js/tweenjs-0.6.1.min.js"></script>
<script src="js/movieclip-0.8.1.min.js"></script>
<script src="js/particleEmitterJs-0.5.0.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
  #canvas{
    display:block;
    width:600px;
    margin-top:40px;
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
  }
</style>
<script>
var canvas, stage, image, emitter, stats;

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);

  canvas = document.getElementById("canvas");

  stage = new createjs.Stage(canvas);

  image = new Image();
  image.onload = loaded;
  image.src = "assets/particle.png";

  stage.update();

  createjs.Ticker.setFPS(60);
  createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
  //createjs.Ticker.addListener(this);
  createjs.Ticker.addEventListener("tick", tick);
}
function loaded() {
  emit(canvas.width/2, canvas.height*0.75);
}
function emit(x, y) {
  emitter = new createjs.ParticleEmitter(image);
  emitter.emitterType = createjs.ParticleEmitterType.Emit;
  emitter.emissionRate = 40;
  emitter.maxParticles = 200;
  emitter.life = 3000;
  emitter.lifeVar = 0;
  emitter.position = new createjs.Point(x, y);
  emitter.positionVarX = 40;
  emitter.positionVarY = 40;
  emitter.speed = 60;
  emitter.speedVar = 60;
  emitter.accelerationX = 0;
  emitter.accelerationY = -250;
  emitter.radialAcceleration = 0;
  emitter.radialAccelerationVar = 0;
  emitter.tangentalAcceleration = 40;
  emitter.tangentalAccelerationVar = 0;
  emitter.angle = 0;
  emitter.angleVar = 180;
  emitter.startSpin = 0;
  emitter.startSpinVar = 0;
  emitter.endSpin = null;
  emitter.endSpinVar = null;
  emitter.startColor = [204, 61, 0];
  emitter.startColorVar = [122, 31, 0];
  emitter.startOpacity = 1;
  emitter.endColor = null;
  emitter.endColorVar = null;
  emitter.endOpacity = null;
  emitter.startSize =120;
  emitter.startSizeVar = 60;
  emitter.endSize = 0;
  emitter.endSizeVar = null;
  stage.addChild(emitter);
}
function tick() {
  stage.update();

  stats.update();
}
</script>
</head>
<body onload="init();" style="background-color:#333333">
  <canvas id="canvas" width="600" height="400" style="background-color:#000000"></canvas>
</body>
</html>


[修正] (13/05/15 Wed 19:40)
CreateJS 0.6.1 にバージョンアップ。
[修正] (13/06/30 Sun 04:00)
createjs.Ticker.addListener(this); から createjs.Ticker.addEventListener(“tick”, tick); に変更。
[修正] (13/10/30 Wed 18:34)
CreateJS 0.7.0 にバージョンアップ。
[修正] (14/08/11 Mon 14:10)
CreateJS 0.7.1 にバージョンアップ。
[修正] (14/12/17 Wed 15:54)
CreateJS 0.8.0 にバージョンアップ。particleEmitterJs-0.5.0.js内の一部スクリプトをコメントアウト。
[修正] (15/09/20 Sun 21:04)
CreateJS 0.8.1 にバージョンアップ。