Thursday, 6 February 2014

Mouse sparkle in EaselJS

I have ported over my Mouse sparkle effect in Actionscript 3 to EaselJS. Firstly, I recreated the particle effect using the Shape class in EaselJS to create rectangle particles. Here is my code below. An example can be seen here.

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    #canvas{border: 1px solid #999999;} 
    </style> 
    <script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script> 
    <script> 

        var stage, 
            numParticles = 30, 
            particlesArray = [], 
            colourArray = ['#18DD00', '#E1C829', '#2FB5F3', '#FC82C3' , '#1E023F'];
         
        function init() 
        { 
            stage = new createjs.Stage('canvas'); 
            stage.addEventListener('stagemousemove', moveHandler); 

            createjs.Ticker.addEventListener('tick', tick); 
            createjs.Ticker.setFPS(60); 
        } 

        function moveHandler() 
        { 
            if(particlesArray.length < numParticles) 
            { 
                var g = new createjs.Graphics(); 
                g.beginFill(colourArray[Math.floor(Math.random() * colourArray.length)]); 
                g.drawRect(0,0,10,10); 

                var square = new createjs.Shape(g); 
                square.x = stage.mouseX; 
                square.y = stage.mouseY; 
                square.alpha = getRandom(0.5,0.9); 
                square.scaleX = getRandom(0.5,0.9); 
                square.scaleY = getRandom(0.5,0.9); 
                square.rotation = getRandom(0,360); 
                square.xVel = getRandom(-4,4); 
                square.yVel = getRandom(-4,4); 
                stage.addChild(square); 
                particlesArray.push(square); 

                stage.update(); 
            } 
        } 

        function tick() 
        { 
            for(var i = 0; i < particlesArray.length; i++){ 

                var particle = particlesArray[i]; 
                particle.x += particle.xVel; 
                particle.y += particle.yVel; 
                particle.alpha -= 0.06; 

                if(particle.alpha <= 0){ 
                    particlesArray.splice(i, 1); 
                    stage.removeChild(particle); 
                    stage.update(); 
                } 

            } 
        } 

        function getRandom(min, max) 
        {
          return min + (Math.random() * (max - min));
        }

    </script> 
</head> 
<body onLoad="init()"> 
    <canvas id="canvas" width="640" height="480"></canvas> 
</body> 
</html>


As you see the code above is almost identical to the Actionscript version. Only a few minor additions such as using the ticker instead of the enter frame event. The second example uses sprite sheets to create the star particle like the Actionscript 3 version. An example can be seen here.

<!DOCTYPE html>
<html>
<head>
 <style>
 html,body{ padding:0; margin:0;}
 #canvas{ background-color:#000000;} 
 </style>
 
    <script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
    <script>
  
   var numParticles = 30,
   particlesArray = [],
   stage,
   spritesheet;
  
    function init() 
    { 
      var data = {"framerate":30,
      "images":[
      "spritesheet/star_frame_0.png",
      "spritesheet/star_frame_1.png",
      "spritesheet/star_frame_2.png",
      "spritesheet/star_frame_3.png"
      ],
      "frames":[
       [0, 0, 32, 32, 0, 0, 0],
       [0, 0, 32, 32, 1, 0, 0],
       [0, 0, 32, 32, 2, 0, 0],
       [0, 0, 32, 32, 3, 0, 0]
      ],
      "animations":{ "frames":[0,3]}
    };
     
    stage = new createjs.Stage("canvas");
    stage.addEventListener("stagemousemove", moveHandler);
   
    createjs.Ticker.addEventListener("tick", tick);
    createjs.Ticker.setFPS(30);
   
    spriteSheet = new createjs.SpriteSheet(data);
  }
  
  
  function moveHandler()
  {
   if(particlesArray.length < numParticles){
    var starAnim = new createjs.Sprite(spriteSheet);
    starAnim.x = stage.mouseX;
    starAnim.y = stage.mouseY;
    starAnim.gotoAndStop( Math.floor( Math.random() * spriteSheet.getNumFrames() ));
    starAnim.alpha = getRandom(0.5, 0.9);
    starAnim.scaleX = starAnim.scaleY = getRandom(0.5,0.9);
    starAnim.rotation = getRandom(0,360);
    starAnim.xVel = getRandom(-6,6);
    starAnim.yVel = getRandom(-6,6);
    stage.addChild(starAnim);
    particlesArray.push(starAnim);
    
    stage.update();
   } 
  }
  
  
  function tick(event) 
  {
   for(var i = 0; i < particlesArray.length; i++){
    var particle = particlesArray[i];
    particle.x += particle.xVel;
    particle.y += particle.yVel;
    particle.alpha -= 0.05;
    particle.scaleX -= 0.02;
    particle.scaleY -= 0.02;
   
    if(particle.alpha <=0){
     particlesArray.splice(i, 1);
     stage.removeChild(particle);
     stage.update();
    }
   } 
  }
  
  
  function getRandom(min, max) 
  {
   return min + (Math.random() * (max - min));
  }
  
    </script>
</head>
<body onLoad="init();">
    <canvas id="canvas" width="600" height="480"></canvas>
</body>
</html>

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP