程序与技术分享: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);

}


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

相关文章
|
8月前
|
存储 vr&ar Windows
程序与技术分享:DDraw笔记
程序与技术分享:DDraw笔记
44 0
|
8月前
|
存储 缓存 监控
程序与技术分享:CacheAlgorithm
程序与技术分享:CacheAlgorithm
59 0
|
8月前
|
前端开发 Java 数据库连接
程序与技术分享:CleanBlog(个人博客+源码)
程序与技术分享:CleanBlog(个人博客+源码)
43 0
|
8月前
|
前端开发 数据安全/隐私保护 容器
程序与技术分享:DirectUI的初步分析
程序与技术分享:DirectUI的初步分析
39 0
|
9月前
|
存储 算法 C语言
【C 言专栏】用 C 语言开发游戏的实践
【5月更文挑战第5天】本文探讨了使用C语言开发游戏的实践,包括选择适合的游戏类型(如贪吃蛇、俄罗斯方块),设计游戏框架、图形界面和逻辑,以及音效添加。文章还强调了性能优化、测试调试、跨平台挑战及未来发展趋势。对于热衷于C语言的开发者,这是一次挑战与乐趣并存的探索之旅。
247 0
【C 言专栏】用 C 语言开发游戏的实践
|
9月前
|
算法 搜索推荐
太厉害了!腾讯T4大牛把《数据结构与算法》讲透了,带源码笔记
经历过校招的人都知道,算法和数据结构都是不可避免的。 在笔试的时候,最主要的就是靠算法题。像拼多多、头条这种大公司,上来就来几道算法题,如果你没AC出来,面试机会都没有。
|
设计模式 Web App开发 移动开发
前端学习之路,分享给刚学或想学前端的网友(持续更新中)
  经常会在群里或论坛上看到有人问:“学习前端有什么捷径?”,一般都是卖油翁式的回答:“无他唯手熟尔”。那么该如何让手熟练呢?其实也就是该如何系统的学习前端。在本文中,我会结合自身的经历,分享一下自己学习前端的过程,期间会穿插引用我过去各个阶段所写的博文。
|
人工智能 前端开发 JavaScript
少走弯路,教你如何进行前端开发? | 开发者社区精选文章合集(十四)
前端开发的本质是什么?面对多种多样的跨端诉求,有哪些跨端方案?跨端的本质是什么?本篇分享了前端开发中一些实践方案和经验心得。
少走弯路,教你如何进行前端开发? | 开发者社区精选文章合集(十四)
|
程序员
<小白的源码之路_开篇>
小白的源码之路_开篇
319 0