createjs初学-创建一个button

最新推荐文章于 2025-09-26 13:28:16 发布

原创最新推荐文章于 2025-09-26 13:28:16 发布 · 3.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#createjs

createjs 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在CreateJS中使用ButtonHelper、Sprite和SpriteSheet创建一个交互式按钮。通过定义images、frames和animations，设置不同状态的显示帧，并通过ButtonHelper将精灵添加到舞台上，实现按钮的鼠标交互效果。别忘了启用over状态以完整实现按钮功能。

在createjs中创建button是用ButtonHelper，实际上还要用到Sprite和SpriteSheet这两个类。下面是一个最简单的button。

var data={
        images:["out.png","down.png"],
        frames:[
            [0,0,135,43,0],
            [0,0,135,43,1]
        ],
        animations:{
            out:0,
            down:1
        }
 }
 var sheet=new createjs.SpriteSheet(data);
 var sprite=new createjs.Sprite(sheet);
 var helper=new createjs.ButtonHelper(sprite,"out","out","down");
 stage.addChild(sprite);

一共有四部分，data为spriteSheet提供数据，由images，frames和animations组成。

images是一组图片，可以是html图片，也可以是图片的uri

images: [image1, "path/to/image2.png"],

frames用来定义每一帧，有两种数据格式
1.所有帧的大小都是相同的，根据宽高，帧的索引从左到右，从上向下排列

frames: {width:64, height:64, count:20, regX: 32, regY:64, spacing:0, margin:0}

2.图片是不同的尺寸，前四个参数分别表示x，y，width，height，第五个imageIndex表示上面images数组中的索引，默认是0。最后连个参数表示帧的注册位置。

frames: [
    // x, y, width, height, imageIndex*, regX*, regY*
    [64, 0, 96, 64],
    [0, 0, 64, 64, 1, 32, 32]
    // etc.
]

animations指定帧动画和动画的名字，有3种格式，具体见API
在button的例子很简单，指定了一个”out”,就是显示第一帧，一个”down”就是显示第二帧。

animations:{
            out:0,
            down:1
        }

然后根据data创建了一个spriteSheet
再用spriteSheet创建了一个sprite

创建ButtonHelper的时候把sprite传了进去，ButtonHelper并不是一个显示对象，最后需要把sprite添加到舞台上，然而Buttonhelper的引用应该保持，以免被垃圾回收。

ButtonHelper ( target  [outLabel="out"]  [overLabel="over"]  [downLabel="down"]  [play=false] [hitArea]  [hitLabel] )

构造函数中第一个参数是sprite，第二个指定out状态显示的动画的名字，上面用的事”out”，默认也是”out”，也可以用其他的值，只要和data里面的名字对应上。
后两个参数也是一样。
需要注意的是，默认状态下并不启用over状态，除非你通过enableMouseOver来设定。