createjs 精灵图片赛尔号胸最大的精灵支持多少帧

来源：蜘蛛抓取(WebSpider) 时间：2016-08-18 09:39 标签： 神奇宝贝最大的精灵
createjs之easeljs【画一个红色矩形】
&script src=&easeljs-0.8.0.min.js&&&/script& 引入easeljs文件
&canvas id=&gameView& width=&400px& height=&=400px&&&/canvas&
&script src=&app.js&&&/script&由于easeljs是对canvas进行封装的，所以先建立一个canvas标签，设置它的大小，id。
引入将要编写的app.js。
var stage = new createjs.Stage(&gameView&);
创建一个舞台，要传入一个参数，就是canvas的id，使建立
的舞台在此id的canvas上显示。
var gameView = new createjs.Container();
new一个对象，得到一个它对应的容器gameview，后面的东西
都要通过容器来承载
stage.addChild(gameView);
把容器添加到舞台中
var s = new createjs.Shape();
绘制一个图形
s.graphics.beginFill(&#ff0000&);
s.graphics.drawRect(0,0,100,100);
居左，居上，居右，居下
s.graphics.endFill();
gameView.addChild(s);
把图形添加到容器中
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener(&tick&,stage);
添加鼠标监听事件
本分类共有文章19篇,更多信息详见
& 2012 - 2016 &
&All Rights Reserved. &
/*爱悠闲图+*/
var cpro_id = "u1888441";您目前使用的浏览器该进博物馆啦~~~
为了更佳的浏览体验，请使用现代浏览器访问本站
Outdated Browser
您的浏览器已禁用 Javascript，启用它获得更好的体验。
Outdated Browser
这是为桌面用户准备的工具，但您可以安心在这里浏览
46.5% 的互联网用户在使用 此款浏览器
GOOGLE CHROME
支持如下操作系统
16.5% 的互联网用户在使用 此款浏览器
MOZILLA FIREFOX
支持如下操作系统
21.6% 的互联网用户在使用 此款浏览器
INTERNET EXPLORER
支持如下操作系统
10.3% 的互联网用户在使用 此款浏览器
APPLE SAFARI
支持如下操作系统
1.5% 的互联网用户在使用 此款浏览器
支持如下操作系统
冷静 这是为桌面用户提供的不是为手机用户提供的createjs入门（六）_createjs吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0可签7级以上的吧50个
本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：80贴子：
createjs入门（六）
原帖地址：====================================================（六）createjs-Sprite基础的都学习了，接下来就是中级的了。学习as的时候，最开始都是用MovieCLip，然后水平提高一点，用的最多的就是Sprite了，为了效率。createjs里边的Sprite相当于as里边的MovieClip，有stop/play/gotoAndStop/gotoAndPlay等方法。先看代码：//创建stage，参数为canvas的idvar stage=new createjs.Stage(&gameMain&);createjs.Ticker.setFPS(6);createjs.Ticker.addEventListener(&tick&, tick);function tick(event){
stage.update();//需要tick，然后自己update,才能刷新显示。
}//Sprite相当于MovieClip,而MovieClip只是作为工具或扩展来用的，步包含在Easejs的主文件里边.所以暂时不研究 。//测试时一定要在服务器环境，否则可能会报跨域的错误。canvas本身也是如此。//创建一个spriteSheet；具体参数可以看api，真正用到再学。var data = {images: [&1.png&],frames: {width:50, height:50},animations: {stand:0,run:[6,11,&jump&],jump:[12,23,&run&]}};var spriteSheet = new createjs.SpriteSheet(data);//创建一个Spritevar sp=new createjs.Sprite(spriteSheet,&run&);//定义:Sprite(spriteSheet, frameOrAnimation)//设置显示元件的位置sp.x=10;sp.y=10;//添加到显示列表stage.addChild(sp);var isPlaying=stage.addEventListener(&click&,clickHandler);function clickHandler(){isPlaying=!isPisPlaying?sp.play():sp.stop();}上面的例子用Sprite创建了一个帧动画,可以通过鼠标点击动画区域控制播放暂停。创建Sprite需要先创建一个SpriteSheet，SpriteSheet不熟悉，可以看看API，一边用一边学就行。as里边很多时候Sprite都是作为容器来使用的，createjs里边就不是了，有专门的容器。Sprite作为as里的MovieClip来用。
贴吧热议榜
使用签名档&&
保存至快速回贴&游戏引擎开发- CreateJS自学教程 - 位图与位图动画
& &在游戏的开发过程中，我们经常需要进行贴图，比如场景、人物、甚至特效等等，都有可能要用到位图，标准的Canvas接口中有提供贴图功能（drawImage），CreateJS对它进行了一些简单的封装，下面我们从一些简单的例子中了解它的用法：
// 加载图片
var img = new Image();
img.onload = handleImageL
img.src = "/bbs/static/image/xcstyle/logo.png";
function handleImageLoad() {
& &//：.cn
& & var canvas = new Canvas();
& & var stage = new createjs.Stage(canvas);
& & // 创建位图示例
& & var bmp = new createjs.Bitmap(img);
& & // 把位图添加到场景
& & stage.addChild(bmp);
& & // 渲染位图
& & stage.update();
上面的例子比较简单，就不做详述了。
& & 我们这里主要介绍位图的另一个主要使用场景&&位图动画，在这里，需要先解释另一个概念&&图片精灵/精灵表单（SpriteSheet），什么是精灵表单？
& & 通俗点来讲，一个精灵表单就是一系列的图片（通常是动画帧），组合到一张大图片中（或许多张图片）。例如，一个动画由 8 张 100x100 的图片组成，就会组合成一个 400 x 200 的精灵表单。用一张图片来表示或者会更好理解：
& & 上面就是一张精灵表单，如果你需要在CreateJS上播放这个表单，你还需要一段数据：
{"images":
["Smoke.png"], "animations": {"jump": [10, 19], "boom": [0, 9]},
"frames": {"height": 94, "regX": 0, "count": 20, "regY": 0, "width":
CreateJS提供了一个很方便的工具&&（下载地址），它可以把swf转为你所需要的精灵表单，并生成以上这段JSON数据，让你可以很方便地在你的代码中进行调用。下面我们来了解一下它的具体操作：
& & 假设我们已经下载并安装好Zo&，并且已经在Flash上导出了一份swf文件
& & 点击蓝色圈圈这个按钮，导入你所输出的swf文件
& & 在图中&Output&的地方选择好精灵表单和JSON数据的输出位置，然后点击右上角的&Export&按钮，这样就大功告成了，如果你还有不明白，请查看具体的官方教程。
& & 待我们生成好表单和数据之后，我们需要在代码里面运行起来：
var canvas = new Canvas();
var stage = new createjs.Stage(canvas);
// 定义一个图片精灵，注：这个数据是Zo&导出的。
//云软件：.cn
var ss = new createjs.SpriteSheet({
& & "images": ["Smoke.png"],
& & "animations": {
& && &&&"jump": [10, 19],
& && &&&"boom": [0, 9]
& & "frames": {
& && &&&"height": 94,
& && &&&"regX": 0,
& && &&&"count": 20,
& && &&&"regY": 0,
& && &&&"width": 96
// 创建一个位图动画的实例
var grant = new createjs.BitmapAnimation(ss);
grant.x = 50;
grant.y = 50;
grant.gotoAndPlay("jump");
// 把它添加到场景上
stage.addChild(grant);
stage.update();
这样就完成位图动画的创建和播放了。
阅读(...) 评论() &

我要回帖

更多关于 神奇宝贝最大的精灵 的文章

 

随机推荐