1. 首页
  2. HTML5
  3. 正文

createjs新手教程-前端向（一）

  • 内容
  • 评论
  • 相关

本人之前也写过新手教程，主要是面向flash转createjs的童鞋，但是实际上前端转createjs的童鞋更多，所以今天就写一篇前端向的教程吧。

flash童鞋可以挪步：

createjs基础教程（一）

createjs基础教程（二）

首先，我先纠正前端转createjs的一些观念（不止是createjs，别的游戏引擎也一样）

点这里进去

然后讲代码，先从HTML文件开始，新建一个HTML文件，css方面就不多说了，前端童鞋都会。createjs-2015.11.26.min.js是createjs主要类库的一个集合，大家也可以放在自己的服务器上，就像我注释里那样，main.js是我们主要写逻辑的js文件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>createjs新手教程</title>
</head>
<body onload="init();"  style="margin: 0px">
    <canvas id="mainView" width="1920" height="1000"  style="position:absolute;"></canvas>
    <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
    <!--可以下载下来放在自己的服务器-->
    <!--<script src="http://static.m3guo.com/video/v1/createjs/createjs/createjs-min.js"></script>-->
    <script src="main.js"></script>
</body>
</html>

好接下来看main.js

//main.js
var canvas,stage,container,images = {},sprite

function init() {
    canvas = document.getElementById("mainView");
    stage = new createjs.Stage(canvas);//获取舞台
    container = new createjs.Container();//新建容器
    stage.addChild(container);//将容器放在舞台上
    createjs.Touch.enable(stage);//使移动端支持createjs的鼠标事件

    var loader = new createjs.LoadQueue(false);//这里一共可以是3个参数 第一个是是否用XHR模式加载 第二个是基础路径  第三个是跨域
    loader.addEventListener("fileload", handleFileLoad);
    loader.addEventListener("progress",progressHandler);
    loader.addEventListener("complete",completeHandler);
    loader.loadManifest([
        {src:"images/back.jpg", id:"back"},
        {src:"images/sprite.png", id:"sprite"}
    ]);

    createjs.Ticker.setFPS(30);
    createjs.Ticker.addEventListener("tick", stageBreakHandler);

}
function handleFileLoad(evt) {
    if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
    //这是单个文件加载完成的事件，把它保存到一个地方之后可以直接拿来创建对象
}
function progressHandler(event)
{
    //这里可以写加载进度 event.progress
}
function completeHandler(event)
{
    //全部加载完成
    event.currentTarget.removeEventListener("fileload",handleFileLoad);
    event.currentTarget.removeEventListener("progress",progressHandler);
    event.currentTarget.removeEventListener("complete",completeHandler);

    var bitmap = new createjs.Bitmap(images.back);
    container.addChild(bitmap);
    bitmap.addEventListener("click",clickHandler)
    var spriteData = {
        images: [images.sprite],
        frames: {width:80, height:80, regX: 40, regY:40},
        animations: {
            stand:[0,3,"stand",0.2],
            walk:{
                frames: [4,5,6,7,6,5],
                next: "walk",
                speed: 0.2
            }
        }
    };
    var spriteSheet = new createjs.SpriteSheet(spriteData);
    sprite = new createjs.Sprite(spriteSheet,"stand");
    container.addChild(sprite);
    sprite.x = 100;
    sprite.y = 100;
}
function clickHandler(event)
{
    createjs.Tween.removeTweens(sprite);
    if(event.rawX > sprite.x)
    {
        sprite.scaleX = 1;
    }
    else if(event.rawX < sprite.x)
    {
        sprite.scaleX = -1;//为-1的时候可以转方向
    }
    createjs.Tween.get(sprite).to({x:event.rawX,y:event.rawY},1000).call(tweenCompleteHandler);
    sprite.gotoAndPlay("walk");
}
function tweenCompleteHandler()
{
    sprite.gotoAndPlay("stand");
}
function stageBreakHandler(event)
{
    stage.update();
}

先看下效果：http://www.ajexoop.com/test/test10/index.html 这是一个简单的点击行走动画。

我在代码中都加了注释哈，我这里解释下用到的类。

Stage是我们的舞台类，可以理解为所有canvas内部对象的总容器或者说是根显示对象。

Container是一个容器类，类似于Div，可以把一些显示对象全部放进去统一操作（直接操作舞台会有很多预料之外的问题，所以如果你要操作所有显示对象，建议创建一个根容器，然后操作这个根容器）

LoadQueue是一个预加载类，可以把需要加载的资源提前加载，基本支持大多数的文件预加载。我这里主要处理了它的3个事件，fileload，progress，complete。其中在handleFileLoad中我为什么要把所有资源全部预先放在一个地方呢？因为我新建Bitmap和Sprite时虽然直接传路径也可以，但是如果传的是对象，比如new createjs.Bitmap(images.back);这样可以减少一个创建对象的过程，可以略微的减少性能消耗（当然前提要是这个资源已经预加载了，不然就报错了），这点本人之前写项目的时候也忽略了，直到分析了源代码。progressHandler如注释所写，是用来显示加载进度的，不过要注意的是显示加载进度的素材本身也要被预加载，也就是说你要自己做好看点的进度条你要做2个预加载，先预加载进度条资源，再加载项目资源。completeHandler就是你资源全部加载完了，开始跑程序了，注意完了以后把所有侦听拿掉。

Ticker是一个计时类，不过他是每过一帧触发一次的，也就是说跟时间其实没关系（因为帧频是会波动的）。createjs.Ticker.setFPS(30);和createjs.Ticker.addEventListener("tick", stageBreakHandler);是必须要加的，stageBreakHandler里面放的是刷新舞台的方法，因为createjs需要不停的刷新舞台来刷新动画，也就是一个重绘的过程。 平时也可以拿Ticker类做动画。

Bitmap是一个位图类，把路径或者预加载完成的对象放进去，然后把对象放在舞台就可以显示了，我这边是放在了container，但是因为container是放在了舞台，所以也能显示，这就是一个容器嵌套关系，应该不难理解把。

Sprite是一个精灵图类，就是显示一个序列帧动画的类，这边我的素材是这样的：

这表示站立和行走2个动作。由SpriteSheet来编码这些动作，SpriteSheet类相当于Sprite类的数据类，而SpriteSheet又需要一个Object数据。我先讲下数据格式 images：就是图片资源，可以放加载完的对象，也可以直接放路径，可以放多个图片，图片的顺序关系到序列帧号。frames：可以传进去的参数很多，我着重介绍width，height regX regY 。width 和 height就是你以多少大小来切割图片，regX regY就是注册点，放大缩小的时候以哪个点来放大。animations：可以理解为动画要做哪几个动作，我这里写了站立和走2个动作stand，walk。其中动作可以传2种参数，如果传数组，第一个表示起始帧，第二个表示结束帧，第三个表示结束后播放哪个动作，第四个表示播放速度。如果传对象，frames表示播放帧的顺序，next表示结束后的动作，speed表示播放速度，大家可以看到传object对控制帧更加灵活，但是当起始帧和末尾帧相距比较远时可以用数组。然后把object数据放进spriteSheet，把spritesheet放进sprite，sprite放进我们的显示容器，动画就可以显示了，new Sprite时可以指定默认动画动作。显示对象的 x y 表示对象在容器中的坐标，相当于left top，所有显示对象都有x y。关于sprite可讲的还有很多，有兴趣的大家可以看下下面2篇博文，介绍的更加详细：

createjs进阶—sprite精灵图的使用(一)

createjs进阶—sprite精灵图的使用（二）

Tween类是一个缓动类，负责缓动，用tween做动画和ticker的不同之处在于tween是根据时间的，ticker是根据帧频的，也就是tween的优点在于就算卡了在规定时间内也还是能运行完毕的，并且tween是缓动的，也就是可以慢慢加速，慢慢减速。除了像我demo一样缓动坐标，当然他也可以缓动别的东西，比如alpha值，大小，甚至是滤镜参数。

类介绍完了，我讲下这个demo吧，我为什么要给前端新人看这个demo，因为这个demo包含了createjs的常用类和常用方法，只要学会了这些demo中的常用类和使用方法，createjs基本就可以算入门了。

很多前端新人刚学createjs一定是一头雾水，不知从哪入手，而且感觉这个语言像是给flash工程师准备的，flash工程师学的特别快，前端学得特别累。其实不然，前端工程师之所以会学的累，学得比flash工程师慢，是因为对动画和游戏的基础知识缺乏（因为前端常做的是页面，而flash常做的是游戏和动画），但是这种知识很多时候是要经验去累积的，所以前端童鞋要快速入门createjs，除了要熟记常用api外，还要勤做项目，感觉无法下手没有思路的时候就在群里多问问，相信马上就可以入门的。还有，前端工程师比flash工程师更有优势的地方在于不用太依赖canvas，不用太依赖animateCC，所以前端工程师一般入门了，用createjs写的项目性能会比flash写的高很多，限制也会比flash工程师少。

最后，我说一下，因为本人也是flash出生，对前端了解不是太多，所以这篇文章不一定写的好，所以各位前端新人希望我讲些其他什么类，或者什么方面的知识，可以在下面留言，我会在下篇详细介绍。

1542183776360437.jpg

相关文章

刷新

评论

19条评论
  1. Gravatar 头像

    匿名 回复

    大神您好，本人是个新手，请问 images/back.jpg 和 sprite.png 这两个文件是放在服务端的静态文件，还是被生成出来的呢？刚接手的公司项目里，同样的JS文件在原来项目中可以正常显示动图，但是把JS移到新的React项目里就显示不出来了，我查看Networks，发现 在好用的项目里面images底下有两个用到的图片是可以访问的，但是在React项目里那两个图片就不存在，所以显示不出来动态效果。烦请指教，谢谢。

    • Gravatar 头像

      ajex 回复

      @匿名 react你要设置webpack的静态导出目录

  2. Gravatar 头像

    匿名 回复

    一直报这个错误。UncaughtTypeError: Cannot read property 'getContext' of undefined
    at com/createjs-2015.11.26.min.js:12

    • Gravatar 头像

      ajex 回复

      @匿名 你看看是不是spritesheet参数写错了

  3. Gravatar 头像

    匿名 回复

    ssss输数输数

  4. Gravatar 头像

    匿名 回复

    你好，我想请问一下，EaselJS里面有没有层级问题

  5. Gravatar 头像

    匿名 回复

    你好，求教怎样拖动图片让其移动到指定位置并且和当前位置图片进行调换啊?

    • Gravatar 头像

      ajex 回复

      @匿名 指定位置的图片和当前位置的图片各是2个容器，也就是container，然后判断坐标拖动到指定位置的时候，容器内的内容分别重新addChild到另外一个容器里，并且如果属性不同，属性也需要对调。

  6. Gravatar 头像

    匿名 回复

    爲什麽生成出來的圓形不是高清的，邊緣有齒輪狀，謝謝

    • Gravatar 头像

      ajex 回复

      @匿名 canvas的 style没写好 拉伸了

    • Gravatar 头像

      ajex 回复

      @匿名 大神代码是写不错，不过这个demo要让小白也看得懂才行啊……

  8. Gravatar 头像

    刘宇 回复

    写的很好，期待后续文章上架，前端转createjs一枚

  9. Gravatar 头像

    李文辉 回复

    大神好，我最近在学createjs，感觉只看API有点乱，特别杂，能给点建议吗

    • Gravatar 头像

      ajex 回复

      @李文辉 看我文章里写的那些api先把，慢慢写几个demo就好了

  10. Gravatar 头像

    泽伟 回复

    貌似有（二）哈哈 期待上架，更希望ajex大神可以多多介绍api

发表评论

电子邮件地址不会被公开。