当前位置：
微信扫一扫分享到朋友圈
第一步：生成游戏场景中的地面首先，需要使用Bitmap类来生成游戏中人物所处的地面效果，使用如下游戏图片：将以上图片宽度为75px，如果将游戏区宽度设置为350px（画布宽度），克隆五个即可填满屏幕，代码如下：//克隆5个地面图片生成游戏区域的地面效果for(i =0; i &5; i++){var tempBlockGround = ground.clone();tempBlockGround.x = i *70;tempBlockGround.y = stageHeight - blockHeight;stage.addChild(tempBlockGround);}如果大家对于Bitmap类不是很熟悉，请参考如下系列教程：EaselJS处理图片以上代码将使用一个图片，并且克隆5次，生成游戏场景中的地面效果第二步：生成游戏中人物的跑步效果使用SpriteSheet类，可以生成人物动画效果，使用图片如下：通过如下代码，可以设置动画效果：spritesheet =new createjs.SpriteSheet({&images&:['/gblibraryassets/libid108/charactor.png'],&frames&:{&height&:96,&count&:10,&width&:75},&animations&:{ run:[0,9]}});character =new createjs.Sprite(spritesheet);以上代码中使用了spritesheet生成动画人物相关sprite，并且设置相关游戏人物的x，y轴位置使用play()方法播放动画效果，使用ticker来控制动画帧第三步：添加游戏人物的键盘方向控制这节学习添加键盘控制人物效果，相关代码如下：
function handleKeyDown(e) {
switch (e.keyCode) {
case KEYCODE_LEFT:
moveLeft = true;
character.play();
case KEYCODE_RIGHT:
moveRight = true;
character.play();
function handleKeyUp(e) {
switch (e.keyCode) {
case KEYCODE_LEFT:
moveLeft = false;
character.gotoAndStop(0);
case KEYCODE_RIGHT:
moveRight = false;
character.gotoAndStop(0);
} 以上两个方法定义了键盘keydown和keyup的相关处理， 当用户按下指定键，例如，a，d或者是左右方向键，则调用人物的播放方法，而当用户松开指定键，则调用了终止动画方法gotoAndStop(0)第四步：控制游戏人物的跳跃控制人物跳跃，需要添加如下一个方法：function jump(){if(isJumping ==false){yVel =-15;isJumping =true;}}这个方法将控制游戏人物在y轴的移动速度，同时在tick方法中添加如下处理：function tick(event){...//控制跳跃if(isJumping){yVel += gravity;character.y += yVel;if(character.y & characterGround){character.y = characterGround;yVel =0;isJumping =false;}}stage.update();} 以上方法控制人物的重力效果，并且控制人物最后落地的位置最后需要将键盘的w键和向上箭头绑定到跳跃动作，如下：function handleKeyDown(e){switch(e.keyCode){case KEYCODE_UP:case87:// Wjump();break;case KEYCODE_LEFT:case65:// AmoveLeft =true;character.play();break;case KEYCODE_RIGHT:case68:// DmoveRight =true;character.play();break;}} 详细的代码讲解和互动在线演示，请点击&阅读原文&查看相关课程库教程：学习使用easelJS类库控制游戏角色的移动和跳跃
分享给好友
分享到微信朋友圈：
第一步 打开微信底部扫一扫
第二步 扫下面的文章二维码
第三步 右上角点击转发
相关文章Relevant
■ 点击上面蓝字一键关注 ▲QIBU生活微刊建议在WIFI下观看,土豪请随意~~1、每一次接吻 会消耗体内至少12个卡路里科学家指出:...
我是主播 贝妮~(微信号:Voaoao)每天提供最热门、最火爆、最精彩的视频!口味有点儿重喔~笑死!笑死!笑死!如果觉得这些还...
【最费脑力的14部电影】《盗梦空间》、《记忆裂痕》、《生死停留》、《死亡幻觉》、《禁闭岛》、《穆赫兰道》、《蝴蝶效应》、...
现如今,飞机以舒适、方便与节省时间等原因成为出行首选的交通方式之一.可你是否知道,为何不能喝飞机上的冲泡茶饮,又为何在...
感知CG,感触创意,感受艺术,感悟心灵 在CG世界的一期中我们展示了 Vince Low的一部分作品,今天再次翻看CG网站时发现他的...
因女儿未出世便患肿瘤,柴静离职后首发雾霾调查.雾霾是什么?它从哪儿来?我们怎么办?看完这些,才知道雾霾的真相.震撼!震...createjs bitmap-学网
createjs bitmap
状态:1个回答日期： 三、页面文本倒序查找 abababababababa [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 四、聚焦控件后把光标放到最后 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执...状态:1个回答日期：(1)js中有SetAttribute方法,如创建标签为a,即a.SetAttribute(&class&,名称) (2)上述(1)中的名称即为你所要指定的class名称,或者可以用a.className来指定样式名称 (3...状态:1个回答日期： //定义方法创建一个label标签 //*************************************// 复制代码 代码如下: var createLabel = function(id, name, value) { var label_var = document.createElement(&q...状态:1个回答日期： var div=document.createElement('div'); div.className='fontClass'; 这样就可以了。className的N要大写。状态:1个回答日期：那么评论就应该全部显示。而列表页和查看单个条目的页面是同一个页面,这就要求我判断一下用户是否定位到该篇日志,如果是,就通过JS来触发 A 标签的点击事件。 一开始我...状态:1个回答日期： document.createElement(&input&); 创建一个文本框状态:1个回答日期： var x=createElement(&a&); x.href=&&; 把创建节点语句付给变量,用变量变量附上href即可,其他属性同样可用该方法状态:1个回答日期： 短路或的用法,一旦"或"左边的表达式为真,就不在执行和判断"或"右边的表达式。这里的意思就是如果 lis[index]存在,则 将 lis[index]赋值给变量li,否则就创建一个li元素赋值给变...状态:1个回答日期： document.createElement(&button&)可以么? 应该是document.createElement(&input&),然后再type=&Button&吧状态:1个回答日期：&&&&&&&script.src='INCLUDE/AutoUpdate.asp'; &&&&&&&&script.type='text/javascript'; &n...
与【createjs bitmap】相关信息:&&&&&&&&&&&&&&&&&&
用户还关注
12345678910
大类导航： |&&&&HTML5 开发框架CreateJS EaselJS-release_v0.7.1.zip
&HTML5 开发框架CreateJS EaselJS-release_v0.7.1.zip
EaselJS-release_v0.7.1.zip
开发动画和游戏
若举报审核通过，可奖励20下载分
被举报人：
guocdfeifei
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
Q.为什么我点的下载下不了，但积分却被扣了
A. 由于下载人数众多，下载服务器做了并发的限制。若发现下载不了，请稍后再试，多次下载是不会重复扣分的。
Q.我的积分不多了，如何获取积分？
A. 获得积分，详细见。
完成任务获取积分。
论坛可用分兑换下载积分。
第一次绑定手机，将获得5个C币，C币可。
关注并绑定CSDNID，送10个下载分
下载资源意味着您已经同意遵守以下协议
资源的所有权益归上传用户所有
未经权益所有人同意，不得将资源中的内容挪作商业或盈利用途
CSDN下载频道仅提供交流平台，并不能对任何下载资源负责
下载资源中如有侵权或不适当内容，
本站不保证本站提供的资源的准确性，安全性和完整性，同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
开发技术下载排行
您当前C币：0&&&可兑换 0 下载积分
兑换下载分:&
消耗C币:0&
立即兑换&&
兑换成功你当前的下载分为 。前去下载资源
你下载资源过于频繁，请输入验证码
如何快速获得积分？
你已经下载过该资源，再次下载不需要扣除积分
HTML5 开发框架CreateJS EaselJS-release_v0.7.1.zip
所需积分：0
剩余积分：0
扫描微信二维码精彩活动、课程更新抢先知
VIP会员，免积分下载
会员到期时间：日
剩余下载次数：1000
HTML5 开发框架CreateJS EaselJS-release_v0.7.1.zip
剩余次数：&&&&有效期截止到：
你还不是VIP会员VIP会员享免积分 . 专属通道极速下载
VIP下载次数已满VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员
你的VIP会员已过期VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员& &现在html5小游戏越来越火爆了，由于公司业务的需要，也开发过几款微信小游戏，用canvas写的没有利用什么框架，发现性能一直不怎么好，所以楼主就只能硬着头皮去学习比较火的Adobe公司出的CreateJS框架，找了很久资料比较少，基本没什么中文文档，很多都是英文文档（想想我这才过四级，只能借用有道，一点一点看，一点一点翻译学习），今天我就写个引子（也是在慢慢学习），写的不好，大家就不要见笑。& & & & EaselJS是CreateJS Suite中的一个js库，它可以让canvas的使用变得简单，它提供了一个直接了当的创建html5 canvas中使用富媒体、富交互应用的解决方案。& & & &&(一)如何使用& & & & 先去，然后创建一个舞台canvas元素的舞台stage对象stage=new createjs.Stage('demo')，增加显示的子对象到舞台上英文就是DisplayObject对象stage.addChild()，然后渲染render就用stage.update()就可以了。EaselJS 支持功能常用的createjs下相对应的对象:& & & &&& & & & 1.使用图像就用Bitmap位图对象。& & & &&& & & & 2.矢量图形就使用Shape和Graphics对象。& & & & 3.动画Animated 位图bitmaps 使用 SpriteSheet 和 Sprite 对象。& & & & 4.使用文本实例就用Text。& & & & 5.包含说有DisplayObjects对象的容器就用Container。& & & & 6.控制HTML DOM 元素的使用DOMElement。& & & & 所有显示对象可以添加到舞台stage作为child,或直接吸引到画布canvas。& & & & 使用说明：& & & & 所有的在舞台上的显示对象DisplayObject（除了DOMElement），当使用mouse或touch时可以绑定事件。EaselJS支持 hover、 press和 release events，同时很容易使用drag和drop拖拽的模型。
& & & &&让我们看看基本的例子吧：& & & &&& & & & 你可以现在 illustrates里面先去实现模拟，然后去用EaselJS创建Stage和shape去实现效果。
//Create a stage by getting a reference to the canvas
//创建一个阶段通过引用到画布上
stage = new createjs.Stage("demoCanvas");
//Create a Shape DisplayObject.
//创建形状显示对象
circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 40);
//Set position of Shape instance.
//设置形状实例的圆心坐标
circle.x = circle.y = 50;
//Add Shape instance to stage display list.
//增加形状实例显示在舞台列表上
stage.addChild(circle);
//Update stage will render next frame
//更新舞台渲染
stage.update();
& &&基本的监听绑定事件，简单交互
displayObject.addEventListener("click", handleClick);
function handleClick(event){
// Click happenened
displayObject.addEventListener("mousedown", handlePress);
function handlePress(event) {
// A mouse press happened.
// Listen for mouse move while the mouse is down:
event.addEventListener("mousemove", handleMove);
function handleMove(event) {
// Check out the DragAndDrop example in GitHub for more
结合上面创建的cricle显示对象即：
//监听圆形显示对象，增加事件
displayObject.addEventListener("click", handleClick);
circle.addEventListener("click", handleClick);
function handleClick(event){
// 点击时发生
alert(11);
circle.addEventListener("mousedown", handlePress);
function handlePress(event) {
alert('鼠标按下了')
// 鼠标按下时发生
// 监听当鼠标按下移动时发生的事件
event.addEventListener("mousemove", handleMove);
function handleMove(event) {
// Check out the DragAndDrop example in GitHub for more
console.log('鼠标移动了')
&& &&基本的动画例子& & & & & & & &&
//Update stage will render next frame
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
//Circle will move 10 units to the right.
//圆将向右边以10为单位移动
circle.x += 10;
//Will cause the circle to wrap back
//移动的距离大于舞台的距离，将重新开始
if (circle.x & stage.canvas.width) { circle.x = 0; }
stage.update();
最后，EaselJS 也还有其他的功能，也简单的说一下吧：& & & & 1.canvas阴影和CompositeOperation等特性& & & & 2.Ticker, a global heartbeat that objects can subscribe to（有点不太懂）& & & &&& & & & 3.滤镜，就是像ps里面的一下滤镜遮罩，颜色通道这些。& & & &&& & & & 4.按钮button的功能，可以很简单的创建按钮交互。& & & &&& & & & 5.SpriteSheetUtils 和 SpriteSheetBuilder帮助我们构建和管理SpriteSheet 在运行的时候。createJS的学习是系列教程，喜欢就请继续关注下期&&一起成长
阅读(...) 评论()如何使用Createjs来编写HTML5游戏（三）使用EaselJS中的制作Sprite类制作 - 博客频道 - CSDN.NET
失业矿工的博客
我是名矿工，曾经是，后来国有变成私有，领导变成老板，老板掏空企业，企业玩完，矿工失业。
分类：Html5/Createjs
&一，使用Sprite制作动画
&&&&& 动画的制作原理据说是由于人的视觉残留效应，连续播放一系列的静止图片，即可获得一段动画，每张图片可以称作动画的一帧，可以参考Gif动画的原理。在EaselJS中，提供了一个Sprites类，可以用来创建动画。创建Sprite同创建其他EaselJS对象实例一样，只需要调用new createjs.Sprite(SpriteSheet);
很显然，需要使用SpriteSheet来创建Sprite，那么SpriteSheet又是什么呢？可以理解为一个运行动画所需要的数据集合，包含动画的原始图像（一般都是将动画的每一帧合并为一个大图），每一帧的尺寸数据，以及动画的帧数（每个动画的名称及包含那几个帧）。
如何来构造一个SpriteSheet呢？在EaselJS中，首先要创建一个用于创建的SpriteSheet的数据集合作为参数，包含定义Spritesheet所必须的信息，一般情况看起来是这样的：
var data = {
//动画所需要的图像路径
//可以是多个图片路径组成的列表
&images&:[image.png],
//定义每一帧的数据，宽高等等，形成动画的每一帧
//有两种方法，如果所有的帧的尺寸相同，只需要统一定义
&frames&:{width:, height:, count:, regX: , regY:}
//如果帧数据的尺寸不同，分别定义即可
// x, y, width, height, imageIndex, regX, regY,这里的imageIndex对应“images”列表中的图片索引
[0,0,64,64,0,32,64],//frames0
//创建动画，动画的名字，以及对应&frames&列表中的哪些帧，也有两种方法
&animations&:{
a1:[frame0,framen]}//a1动画从第一帧运行到第n帧
//也可以单独列出一个动画所需要的帧数
，同时定义动画完成后的动作，速度等等
animations: {
frames: [1,,3,5,7],
next: &a1&,//a2播放完成后进入a1
speed: 2//速度
以中第一个Demo1为例，首先它的图片看起来大体是这样的
有了这样的图片，就可以通过SpriteSheet来创建一个Sprite动画。
第一步，创建构造Spritesheet
先创建SpriteSheet的参数，
var data = {
&images&:[&./spritesheet_grant.png&],//图片路径
&frames&:{&height&: 292, &width&: 165, &count&: 64,&regX&: 82,
&regY&: 0},//每帧的尺寸，count是总帧数
&animations&:{
&run&: [0, 25, &run&, 1.5],//[开始帧，结束帧，动画完成后的动作，速度]
&jump&: [26, 63, &run&]
对参数必须包含的三项，images,frames, animations采用合适的方式赋值，参数构造完成后调用
var spriteSheet = new createjs.SpriteSheet(data);
现在你有了一个spritesheet示例，随后就可以来创建一个sprite动画了，这里有两种方法：
sprite = new createjs.Sprite(spriteSheet);
sprite.gotoAndPlay(&run&);
sprite = new createjs.Sprite(spriteSheet，&run&);
最后把sprite添加到stage当中即可
stage.addChild(sprite);
现在你的页面上就有了一个不断走动的小人。
关于动画Sprite的使用，有几个特别的地方
1.可不可以构造一个只有一帧的动画？
只有一帧的动画，其实就是一个静止的图片。很多时候，尤其是编写前端CSS是，很多人喜欢把用到的所有图片合成为一个大图，在使用Createjs制作游戏时也是一样，把用的图片合成为一个大图，然后使用sprite把其中的每个图片分解出来，当然你也可以用Bitmap中的Rectangle来选取部分图片。比如有一个素材的图片包含你的游戏用到的所有图：
使用Sprite把图片逐个分离出来，代码看起来是这样的：
var data2 = {
&images&:[&./mario.png&],
&frames&:[
[2, 2, 32, 32],
[34, 2, 32, 32],
[66, 2, 32, 32],
[100, 2, 32, 32],
[2, 34, 32, 32],
[34, 34, 32, 32],
[66, 34, 32, 32],
[100, 34, 32, 32],
&animations&:{
&wall&:[0],
&gold&:[1],
&key&:[2],
&head&:[3],
&flag&:[4],
&mush&:[5],
&mario&:[6],
&tube&:[7]
var marioSheet = new createjs.SpriteSheet(data2);
好了，所有的图片都被分解为8个帧，而在“animations”中又分别创建了8个单帧的动画，然后你获得了一个marioSheet，当你有了这个marioSheet之后，游戏制作中需要那个图片时，只需要调用
= new createjs.Sprite(marioSheet,&wall&);
var gold = new ceatejs.Sprite(marioSheet,&gold&);
使用起来方便不少，而且便于管理。
2.怎么把所有图片合成到一个大图？
可以用photoshop，如果你会的话，通常我是用一个叫做TexturePacker的软件
下载安装后可以试用，选择EasalJS/CreateJS格式。它不但可以合成图片，而且可以生成一个json格式的数据，此处有惊喜。
把你制作游戏中用到的图片都拖进来，或者直接选择图片目录即可，点击publish sprite sheet，在你选定的目录中就会出现你想要的合成图片和一个json文件，打开json后你会惊讶的发现，它看起来非常眼熟，是不是很像你在构建SpriteSheet时使用的参数data，把需要的部分复制出来，让构建SpriteSheet变非常简单。（其实可以使用preloadJS直接载入这个json文件）
3.怎么获得一个连续动做的图片？
像制作Gif动画一样，当你想做一个这样的GIF
显然你需要录制很多熊猫不同动作的图片，然后组合到一起顺序播放，CreateJS官方提供的工具中，使用zoe工具可以把flash文件转变为sprite（这就是亲儿子的力量）。
最妙的是，同TexturePacker一样，使用zoe转化后，你将获得一个所有连续动作组成的大图，和一个json数据。
4.当一个动画播放完毕，如何删除这个动画
假设你有个飞机爆照效果的动画Sprite，飞机被击中后爆炸，当然只会爆照一次，动画播放完成后，必须在舞台Stage中删除这个动画，怎么才能让舞台在动画播放完成时收到通知并删除它呢？
在官方的API中，每个类的都有自己可以对应的事件event，打开Sprite页面，在event中可以看到animationend事件，就是动画播放结束所触发的，当你想在动画播放结束时删除掉这个动画，只需要：
sprite.addEventListener('animationend',function(event){
stage.removeChild(event.target);
所有的时间相应函数都有一个event参数，其中的event.target指向触发事件的元素。这样在动画结束后，就被从舞台上删除了。
二，使用BitmapText来制作图片字母或数字
CreateJS中所有的字符显示都可以通过Text类完成，虽然可以设置字体，不过有时候也许你想让他看起来更cool些，假设现在你想做一个电子表样式的记分牌，像这样
或者你发现了一些更酷的创意字体，比如这样的
想把他们用到你得游戏当中，这时候你需要用到BitmapText类
同Sprite一样，要创建一个BitmapText实例，首先要创建一个SpriteSheet作为参数，（以我的数字图片为例）
var data = {
&images&:[&./num.png&],
&frames&:[
[2, 2, 34, 41],
[34, 176, 22, 43],
[36, 45, 26, 41],
[34, 88, 24, 41],
[2, 45, 32, 41],
[34, 131, 22, 43],
[2, 174, 30, 41],
[38, 2, 24, 41],
[2, 131, 30, 41],
[2, 88, 30, 41]
&animations&:{
var ss = new createjs.SpriteSheet(data);
同用来定义Sprite的SpriteSheet格式一样，只是在定义“animations”时把动画的名字定义为对应的字符，这里是数组，如果是字符的话，动画的名字就应该是'a','b'......
var scoreTxt = new createjs.BitmapText(score.toString(), ss);//为了运算方便，我的score变量是数字，这里首先转化成字符
这样当你载入scoreTxt后就会发现，数字变成你提供的图片样式。


排名：千里之外
（1）（8）（2）}