程序与技术分享:createjs入门

简介: 程序与技术分享:createjs入门

createjs是一个轻量级的框架,稍微有点时间和耐心,就可以把全部源代码都看一遍,毕竟只有三十几个js文件。地址:


开发createjs的动画或游戏,没有重型的IDE或什么工具支持,我们只能从零开始写js。一方面,这样对于jser来说,足够灵活;另外一方面,createjs因此足够精简足够小。


createjs由几个库组成:


l easeljs,这个是核心,包括了显示列表、事件机制;


l preloadjs,用于预加载图片等;


l tweenjs,用于控制元件的缓动;


l soundjs,用于播放声音。


easeljs 81k,preloadjs 31k,soundjs 34k,tweenjs 18k,对于手机小动画或小游戏,其实只需要加载easeljs即可,因为核心库已经涵盖了简单图片的预加载功能。


开发步骤:


1、 下载类库,可以使用源代码,也可以使用压缩过的min.js,就好像平时写网页一样。


2、 建立html和canvas标签,onload后再执行createjs相关逻辑。


3、 编写createjs逻辑。这个非常简单,因为createjs只提供了最简单的基础功能,我们理解了基础功能后就可以叠积木了。


关于createjs,最关键是要理解类结构


上图列出了createjs的主要类结构,所有舞台上的内容都是元件,元件的基类是DisplayObject。Container可以包含子元件,舞台Stage本身也是Container。另外Sprite用于表现SpriteSheet帧动画人物、Bitmap用于展示纯静态的人物。


而Filter和Shadow则是滤镜分支,可以针对任意元件实现颜色变换、模糊、阴影等效果。使用滤镜的方式跟Flash一致,需要新建Filter实例,添加到目标元件的FilterList中,Createjs框架在下一帧就会把该元件加上滤镜效果。


下边以一个例子概要学习一下Createjs的使用:


var stage;


function init() {


var canvas = document.getElementById("testCanvas");


stage = new createjs.Stage(canvas);


stage.autoClear = true;


//添加背景图


var bg = new createjs.Bitmap("../res/bg.jpg");


stage.addChild(bg);


//增加5个小人,不断做旋转和放缩


for (var i = 0; i < 5; i++) {


var man = new createjs.Bitmap("../res/grossini.png");


man.regX = 42;


man.regY = 60;


man.x = canvas.width/6(i+1);


man.y = canvas.height/54;


man.scaleX = man.scaleY = 1;


stage.addChild(man);


createjs.Tween.get(man, {loop: true}, true)


.to({rotation: 360, scaleX:2, scaleY:2}, 1000).to({rotation: 360, scaleX:1, scaleY:1}, 1000);


man.addEventListener("click", function(event) {


console.log("click", event.currentTarget);


}); //监听点击非常方便,位图的透明区域忽略鼠标事件


}


var images = 【】;


for (var i = 1; i <= 14; i++) {


images.push("../res/grossinidance" + (i<10?("0"+i):i) + ".png");


}


//增加5个帧动画小人,不断播放14帧画面


for (var j = 0; j < 5; j++) {


var sheet = new createjs.SpriteSheet({


images: images,


frames: {width: 85, height: 121, regX: 42, regY: 60}


}); //需要设置每帧的宽高,注册点信息


var man = new createjs.Sprite(sheet);


man.framerate //代码效果参考:http://www.lyjsj.net.cn/wx/art_24169.html

= 60/7;

man.x = canvas.width/6*(j+1);


man.y = canvas.height / 3;


man.play();


stage.addChild(man);


}


stage.update();


createjs.Ticker.setFPS(60);


createjs.Ticker.addEventListener("tick", tick);


}


//这里有点猥琐,需要用户自行控制舞台不断update更新


function tick(event) {


//代码效果参考:http://www.lyjsj.net.cn/wz/art_24167.html

stage.update(event);

}


欢迎投简历给我,一线大厂工作机会

相关文章
|
3月前
|
搜索推荐 JavaScript 前端开发
|
5月前
|
存储 vr&ar Windows
程序与技术分享:DDraw笔记
程序与技术分享:DDraw笔记
29 0
|
5月前
|
存储 缓存 监控
程序与技术分享:CacheAlgorithm
程序与技术分享:CacheAlgorithm
33 0
|
6月前
|
存储 算法 C语言
【C 言专栏】用 C 语言开发游戏的实践
【5月更文挑战第5天】本文探讨了使用C语言开发游戏的实践,包括选择适合的游戏类型(如贪吃蛇、俄罗斯方块),设计游戏框架、图形界面和逻辑,以及音效添加。文章还强调了性能优化、测试调试、跨平台挑战及未来发展趋势。对于热衷于C语言的开发者,这是一次挑战与乐趣并存的探索之旅。
205 0
【C 言专栏】用 C 语言开发游戏的实践
|
Ubuntu Cloud Native 安全
《Linux命令宝典:从初学者到专家的100个核心技巧》
《Linux命令宝典:从初学者到专家的100个核心技巧》
80 0
|
运维 小程序
全栈工程师之路-中级篇之小程序开发-第一章第一节注册小程序
全栈工程师之路-中级篇之小程序开发-第一章第一节注册小程序
131 1
全栈工程师之路-中级篇之小程序开发-第一章第一节注册小程序
|
JSON 小程序 JavaScript
全栈工程师之路-中级篇之小程序开发-第一章第三节阅读官方demo
全栈工程师之路-中级篇之小程序开发-第一章第三节阅读官方demo
179 0
全栈工程师之路-中级篇之小程序开发-第一章第三节阅读官方demo
|
弹性计算 Cloud Native 安全
Java工程师必下载!Java开发手册+成神指南,史上最全阿里工程师实践精华!
Java作为众多开发者的必修课之一,在编程语言榜单上占据着重要地位,更是从事云计算、大数据等开发工作必备技能之一,了解Java编程规范当然是重中之重,本次社区分享了Java开发手册+成神指南+实战演练,带你学习大厂如何用Java!
21907 1
Java工程师必下载!Java开发手册+成神指南,史上最全阿里工程师实践精华!
|
缓存 边缘计算 运维
性能优化一手指南来了 | 开发者社区精选文章合集(二十六)
性能优化是一个体系化、整体性的事情,印刻在项目开发环节的各个细节中,也是体现技术深度的大的战场。
性能优化一手指南来了 | 开发者社区精选文章合集(二十六)
|
SQL 存储 安全
阿里巴巴Java开发手册快速学习
善医者“未有形而除之”,提高工程健壮性最好的方式是在代码出现问题之前就排除掉,不给Bug出现的机会。一份好的开发规范就可以起到这样的作用,大大减少产品上线后的问题。《阿里巴巴Java开发手册》是阿里巴巴的内部编码规范,阿里官方的Java代码规范标准,这份开发手册不仅规范了一些开发细节,也提出了很多工程开发的哲学,值得好好阅读。
27603 0