CODEWITHSUNDEEP
javascripthtmlcanvaseaseljs
Lex34
Lex34

Reputation: 75

How to make a single function to load animation in Easeljs?

I am using the Easeljs library.Created a function to add an object and animation.Now the function has been added only for one picture;if you insert another sprite picture where each sprite has a different width and height, it will not work well.How to create a function once and only substitute the values so that you can use many images in the function? Sprite example:

airplane

Here is the code:

<!DOCTYPE html>
<html>
    <head>
        <title>Airplan</title>
        <style>
        body {
          width: 100%;
          height: 100%;
          background-color: #000;
        }

        #drawingCanvas {
          width: 75%;
          height: 75%;
          display: block;
          margin: auto;
          background-color: #000;
          padding-top: 10%;
        }
        </style>
          <script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
    </head>
    <body>
        <canvas id="drawingCanvas" width="800" height="800"></canvas>
<script>
var stage = new createjs.Stage("drawingCanvas");
createjs.Ticker.on("tick", stage);

function getAnim(URL_IMG,x,y,width,height,frame) {

//width = 85, height = 37, frame = 5
       var _tmpTile = {
          images: [URL_IMG],
          "frames": [
                [0, 0, width,height],
                [85, 0, width,height],
                [170, 0, width,height],
                [255, 0, width,height],
                [340, 0, width,height]
                
           ],

            "animations": {
                1: [0],
                2: [1],
                3: [2],
                4: [3],
                5: [4]
            } 
        }; 
      
      
                var p1 = new createjs.SpriteSheet(_tmpTile); 
                tmpTile = new createjs.Sprite(p1);
                
                tmpTile.x = x;
                tmpTile.y = y;
                
                tmpTile.width = width;
                tmpTile.height = height;
                
                return tmpTile;
   
       
}

var airplane = getAnim("Airplane.png",10,10,85,37,5);

stage.addChild(airplane);


 
</script>
 
</body>
</html>

How to create a function once and add parameters?

Upvotes: 0

Views: 21

Answers (0)

Related Questions