Create.js实战-Sprite精灵图操作

博主记忆力不好，最近刚好用了一下createJs框架，怕以后一段时间没用后会忘记，所以在此做个记录，或许以后用得着。

闲话少说，之前看官网有一组sprite精灵图合集，今天分享出来给大家一起学习一下，

画布代码

<canvas id=”gameView” width = “1024” height = “768” style=”background-color: #cccccc; width:1024px;height:768px;”></canvas>

在body上方引入外置createjs引擎

<script src=”js/create.js”></script>

创建舞台，

var stage = new createjs.Stage(“gameView”);

创建雪碧图设置，

var ss = new createjs.SpriteSheet({
“images”:[“image/spt.png”],
“frames”:{
“height”:292.5,
“width”:165.75,
“count”:64},//总数
“animations”:{
“run”:[0,25,”jump”],
“jump”:[26,63,”run”]
}
});

这里分为两层，第一层是指图片行走，第二层是指奔跑

最后添加到舞台上，

var s = new createjs.Sprite(ss,”run”);
s.x = 100;
s.y = 100;

stage.addChild(s);

哦对了 最后是每桢监测进行更新舞台上，

createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener(“tick”,stage);

Ticker,setFPS(xx);这个指越大精灵运动的越慢，大家可以试一下

＝。＝ 那么今天的分享就到这里 ， 今天也是代码满满的一天 各位老哥再见