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

开发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的使用:

   <script type="text/javascript">

        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/5*4;

                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/grossini_dance_" + (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 = 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) {

            stage.update(event);

        }

    </script>

createjs入门的更多相关文章

  1. createjs 入门之EaselJs 绘制图片Bitmap

    var canvas=document.getElementById('demoCanvas'); canvas.width=window.innerWidth; canvas.height=wind ...

  2. CreateJs入门必知必会

    CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具.基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用.CreateJS主要包含如下四个类库: Ease ...

  3. canvas框架::createjs入门

    createjs是一个轻量级的框架,稍微有点时间和耐心,就可以把全部源代码都看一遍,毕竟只有三十几个js文件.地址:http://www.createjs.com/ 开发createjs的动画或游戏, ...

  4. CreateJS入门 -- 注释详细到爆炸(My Style)

    写在前面 首先,还是谢谢大家的支持,谢谢!记得在之前的文章中我说过自己算是一个半文艺程序员,也一直想着写一写技术性和其他偏文学性的文章.虽然自己的底子没有多么优秀,但总是觉得这个过程中可以督促自己去思 ...

  5. 玩转createjs

    标题党"玩转", 真的是在玩怎么转... 参考一篇很经典的博文:createjs入门 做移动版(750x1334)的时候出来不居中啊, 不是掉在下面就是滑到右面, canvas里面 ...

  6. createjs 小游戏开发实战

    [转载请注明出处] 紧接着上一篇文章createjs入门:http://www.cnblogs.com/beidan/p/7055422.html 这里来一篇小游戏实战篇. 游戏整体思路实现 1. 实 ...

  7. 一篇文章带你快速入门createjs

    开始用createjs这个框架的时候,发现网上的相关教程还是挺少的,所以写一篇文章,方便日后查看.   createjs简介 官网:http://www.createjs.cc/ createjs中包 ...

  8. 【CreateJS】WebStorm+Adobe Animate CC 搭配开发HTML5,入门教程

    目的:动画设计师用Adobe Animate CC做好动画素材,发布好之后,交给程序员写交互代码:在WebStorm之类的ide里操纵 Animate 里面的变量,class等. 前提环境: ①安装好 ...

  9. easelJS入门、事件、spritesheet

    easelJS入门.事件.spritesheet <%@ page language="java" contentType="text/html; charset= ...

随机推荐

  1. [Android Security] APK自我保护 - DEX/APK校验

    cp : https://segmentfault.com/a/1190000005105973 DEX校验 classes.dex 是 Android 虚拟机的可执行文件,我们所写的 java 代码 ...

  2. java的mock测试框架

    无论是敏捷开发.持续交付,还是测试驱动开发(TDD)都把单元测试作为实现的基石.随着这些先进的编程开发模式日益深入人心,单元测试如今显得越来越重要了.在敏捷开发.持续交付中要求单元测试一定要快(不能访 ...

  3. Tmux教程

    常用命令如下: (Ctrl+B) + (Shift+5) 打开一个新窗口 (Ctrl+B) + right/left 在不同窗口之间切换 (Ctrl+B) + [ 或 ] 进入复制模式,查看历史记录 ...

  4. libc中的标准函数 localtime和localtime_r 的用法

    http://baike.baidu.com/view/1080853.htm 随便一查,就可以查到基本用法,但是... http://blog.csdn.net/maocl1983/article/ ...

  5. SQL:Oracle 目录

    ylbtech-Miscellaneos-SQL:Oracle 目录 Oracle Database,又名Oracle RDBMS,或简称Oracle.是甲骨文公司的一款关系数据库管理系统.它是在数据 ...

  6. 首个threejs项目-前端填坑指南【转】

    http://www.cnblogs.com/pursues/p/5226807.html 第一次使用threejs到实际项目中,开始的时候心情有点小激动,毕竟是第一次嘛,然而做着做着就感受到这玩意水 ...

  7. jQuery源码分析-构造函数详解

    在jQuery.js的构造函数中,充分利用了JavsScript语言的动态性——对行参的类型和个数没有的严格要求,以至于一个函数可以实现多种功能需求,也为JavaScript语言的多态性提供了基础,在 ...

  8. Linux中挂载新的磁盘到指定目录或分区

    新增磁盘的设备文件名为 /dev/vdb 大小为100GB. #fdisk -l  查看新增的的磁盘 1.对新增磁盘进行分区 #fdisk /dev/vdb 按提示操作 p打印  n新增 d 删除 w ...

  9. (转)Unity3D研究院之Assetbundle的实战(六十三)

    上一篇文章中我们相惜讨论了Assetbundle的原理,如果对原理还不太了解的朋友可以看这一篇文章:Unity3D研究院之Assetbundle的原理(六十一) 本篇文章我们将说说assetbundl ...

  10. Flask调试

    1.AttributeError: 'NoneType' object has no attribute 'app' 原因:直接在py中调用视图函数,但没有上下文,导致出错 2.不转换html代码 { ...