Html5游戏框架createJs组件--EaselJS(一)

   现在html5小游戏越来越火爆了,由于公司业务的需要,也开发过几款微信小游戏,用canvas写的没有利用什么框架,发现性能一直不怎么好,所以楼主就只能硬着头皮去学习比较火的Adobe公司出的CreateJS框架,找了很久资料比较少,基本没什么

中文文档,很多都是英文文档(想想我这才过四级,只能借用有道,一点一点看,一点一点翻译学习),今天我就写个引子(也是在慢慢学习),写的不好,大家就不要见笑。

        EaselJS是CreateJS Suite中的一个js库,它可以让canvas的使用变得简单,它提供了一个直接了当的创建html5 canvas中使用富媒体、富交互应用的解决方案。

        (一)如何使用

        先去下载EaselJS框架,然后创建一个舞台canvas元素的舞台stage对象stage=new createjs.Stage(‘demo‘),增加显示的子对象到舞台上英文就是DisplayObject对象stage.addChild(),然后

渲染render就用stage.update()就可以了。EaselJS 支持功能常用的createjs下相对应的对象:
        
        1.使用图像就用Bitmap位图对象。
        
        2.矢量图形就使用Shape和Graphics对象。

        3.动画Animated 位图bitmaps 使用 SpriteSheet 和 Sprite 对象。

        4.使用文本实例就用Text。

        5.包含说有DisplayObjects对象的容器就用Container。

        6.控制HTML DOM 元素的使用DOMElement。

        所有显示对象可以添加到舞台stage作为child,或直接吸引到画布canvas。

        使用说明:

        所有的在舞台上的显示对象DisplayObject(除了DOMElement),当使用mouse或touch时可以绑定事件。EaselJS支持 hover、 press和 release events,同时很容易使用drag和drop拖拽的模型。

 

        让我们看看基本的例子吧:
        
        你可以现在 illustrates里面先去实现模拟,然后去用EaselJS创建Stage和shape去实现效果。

  //Create a stage by getting a reference to the canvas
  //创建一个阶段通过引用到画布上
    stage = new createjs.Stage("demoCanvas");
        
    //Create a Shape DisplayObject.
        //创建形状显示对象
    circle = new createjs.Shape();
    circle.graphics.beginFill("red").drawCircle(0, 0, 40);
        
    //Set position of Shape instance.
        //设置形状实例的圆心坐标
    circle.x = circle.y = 50;
        
    //Add Shape instance to stage display list.
        //增加形状实例显示在舞台列表上
    stage.addChild(circle);
        
    //Update stage will render next frame
        //更新舞台渲染
    stage.update();

  

    基本的监听绑定事件,简单交互

displayObject.addEventListener("click", handleClick);
 function handleClick(event){
     // Click happenened
 }

 displayObject.addEventListener("mousedown", handlePress);
 function handlePress(event) {
     // A mouse press happened.
     // Listen for mouse move while the mouse is down:
     event.addEventListener("mousemove", handleMove);
 }
 function handleMove(event) {
     // Check out the DragAndDrop example in GitHub for more
 }

结合上面创建的cricle显示对象即:

                        //监听圆形显示对象,增加事件  displayObject.addEventListener("click", handleClick);
                         circle.addEventListener("click", handleClick);
                         function handleClick(event){
                                 // 点击时发生
                                 alert(11);
                         }

                         circle.addEventListener("mousedown", handlePress);
                         function handlePress(event) {
                                alert(‘鼠标按下了‘)
                                 // 鼠标按下时发生
                                 // 监听当鼠标按下移动时发生的事件
                                 event.addEventListener("mousemove", handleMove);
                         }
                         function handleMove(event) {
                                 // Check out the DragAndDrop example in GitHub for more
                                 console.log(‘鼠标移动了‘)
                         }                

     基本的动画例子                

 //Update stage will render next frame
    createjs.Ticker.addEventListener("tick", handleTick);

    function handleTick() {
     //Circle will move 10 units to the right.
    //圆将向右边以10为单位移动
        circle.x += 10;

        //Will cause the circle to wrap back
        //移动的距离大于舞台的距离,将重新开始
        if (circle.x > stage.canvas.width) { circle.x = 0; }
        stage.update();
    }

  

最后,EaselJS 也还有其他的功能,也简单的说一下吧:

        1.canvas阴影和CompositeOperation等特性

        2.Ticker, a global heartbeat that objects can subscribe to(有点不太懂)
        
        3.滤镜,就是像ps里面的一下滤镜遮罩,颜色通道这些。
        
        4.按钮button的功能,可以很简单的创建按钮交互。
        
        5.SpriteSheetUtils 和 SpriteSheetBuilder帮助我们构建和管理SpriteSheet 在运行的时候。


createJS的学习是系列教程,喜欢就请继续关注下期……一起成长

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。