程序与技术分享: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笔记
47 0
|
8月前
|
存储 缓存 监控
程序与技术分享:CacheAlgorithm
程序与技术分享:CacheAlgorithm
67 0
|
8月前
|
存储 算法 Java
技术好文共享:程序员的进阶课
技术好文共享:程序员的进阶课
35 0
|
8月前
|
前端开发 Java 数据库连接
程序与技术分享:CleanBlog(个人博客+源码)
程序与技术分享:CleanBlog(个人博客+源码)
50 0
|
8月前
|
前端开发 数据安全/隐私保护 容器
程序与技术分享:DirectUI的初步分析
程序与技术分享:DirectUI的初步分析
40 0
|
9月前
|
存储 算法 C语言
【C 言专栏】用 C 语言开发游戏的实践
【5月更文挑战第5天】本文探讨了使用C语言开发游戏的实践,包括选择适合的游戏类型(如贪吃蛇、俄罗斯方块),设计游戏框架、图形界面和逻辑,以及音效添加。文章还强调了性能优化、测试调试、跨平台挑战及未来发展趋势。对于热衷于C语言的开发者,这是一次挑战与乐趣并存的探索之旅。
254 0
【C 言专栏】用 C 语言开发游戏的实践
|
9月前
|
设计模式 算法 搜索推荐
【PHP开发专栏】PHP设计模式解析与实践
【4月更文挑战第29天】本文介绍了设计模式在PHP开发中的应用,包括创建型(如单例、工厂模式)、结构型和行为型模式(如观察者、策略模式)。通过示例展示了如何在PHP中实现这些模式,强调了它们在提升代码可维护性和可扩展性方面的作用。设计模式是解决常见问题的最佳实践,但在使用时需避免过度设计,根据实际需求选择合适的设计模式。
63 0
|
消息中间件 缓存 运维
|
XML 前端开发 小程序
后端工程师入门安卓开发笔记(一)
我是daxia,一个做了8年多的后端开发,对前端一直仅限于Web页面开发,对移动端开发和小程序开发基本零基础; 有时候想做一些有意思的东西出来,用网页实现对手机支持现在是不理想,忙里偷闲学了学安卓,把一些我觉得是重点内容做一个笔记,也希望笔记对其他人有所帮助。
175 0
后端工程师入门安卓开发笔记(一)
|
缓存 边缘计算 运维
性能优化一手指南来了 | 开发者社区精选文章合集(二十六)
性能优化是一个体系化、整体性的事情,印刻在项目开发环节的各个细节中,也是体现技术深度的大的战场。
性能优化一手指南来了 | 开发者社区精选文章合集(二十六)