EaselJS 和 SpriteSheet

发布于 2024-12-24 23:16:20 字数 725 浏览 2 评论 0原文

我只是想获取精灵表中的每个帧，但我得到的只是第一帧，这是代码：

function handleImageLoaded(e)
{
    var c   = new Container();
    var d   = { };
    var l   = rx * ry;
    var lh  = canvas.height / ry;
    var lw  = canvas.width / rx;
    var lx  = 0;
    var ly  = 0;
    var s;
    var t;

    d.images    = [ e.target ];
    d.frames    = { width: lw, height: lh, count: l };

    s   = new SpriteSheet( d );

    for ( var i = 0; i < l; i++ )
    {
        t   = new Bitmap( s.getFrame( i ).image );

        t.x = lx++ * lw;
        t.y = ( lx == rx ? ly++ : ly ) * lh;

        lx  = lx == rx ? 0 : lx;

        c.addChild( t );
    }

    stage.addChild( c );

    stage.update();
}

我会将其放在小提琴上，但图像会存在跨域问题。

原文

I'm simply trying to get each frame in a sprite sheet but all I keep getting is the first frame, here's the code:

function handleImageLoaded(e)
{
    var c   = new Container();
    var d   = { };
    var l   = rx * ry;
    var lh  = canvas.height / ry;
    var lw  = canvas.width / rx;
    var lx  = 0;
    var ly  = 0;
    var s;
    var t;

    d.images    = [ e.target ];
    d.frames    = { width: lw, height: lh, count: l };

    s   = new SpriteSheet( d );

    for ( var i = 0; i < l; i++ )
    {
        t   = new Bitmap( s.getFrame( i ).image );

        t.x = lx++ * lw;
        t.y = ( lx == rx ? ly++ : ly ) * lh;

        lx  = lx == rx ? 0 : lx;

        c.addChild( t );
    }

    stage.addChild( c );

    stage.update();
}

I would stick this up on a fiddle but there'd be cross domain issues with the image.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一城柳絮吹成雪 2024-12-31 23:16:20

尝试 SpriteSheetUtils.exractFrame （参见 SpriteSheetUtils）。它的作用与您在自定义代码中所做的完全一样。

回复收藏 0 原文

那请放手 2024-12-31 23:16:20

代码中的问题是，frame.image 属性指向源位图，该位图对于 spritesheet 中的所有帧都是相同的（除非您有多图像 spritesheet）。

要显示 spritesheet 中的帧，请使用 Sprite。例如，修改您的代码：

for ( var i = 0; i < l; i++ )
{
    t   = new Sprite(spriteSheet, i);

    t.x = lx++ * lw;
    t.y = ( lx == rx ? ly++ : ly ) * lh;

    lx  = lx == rx ? 0 : lx;

    c.addChild( t );
}

The issue in your code is that the frame.image property points to the source bitmap, which is the same for all frames in the spritesheet (unless you have a multi-image spritesheet).

To display a frame from a spritesheet, use Sprite. For example, modifying your code:

for ( var i = 0; i < l; i++ )
{
    t   = new Sprite(spriteSheet, i);

    t.x = lx++ * lw;
    t.y = ( lx == rx ? ly++ : ly ) * lh;

    lx  = lx == rx ? 0 : lx;

    c.addChild( t );
}

回复收藏 0 原文

骑趴 2024-12-31 23:16:20

好吧，虽然我无法用 EaselJS 解决这个问题，但我只是解决了它。我创建了一个函数来复制 EaselJS 的 sprite 功能的 getFrame 函数，如下所示：

function generateTile(p, i)
{
    var cs  = document.createElement( 'canvas' );
    var c   = cs.getContext( '2d' );

    cs.height   = p[ 3 ];
    cs.width    = p[ 2 ];

    c.drawImage( i, p[ 0 ], p[ 1 ], p[ 2 ], p[ 3 ], 0, 0, p[ 2 ], p[ 3 ] );

    return new Bitmap( cs );
}

Well, while I wasn't able to fix the problem with EaselJS, I just worked around it. I created a function that replicated the getFrame function that EaselJS's sprite stuff was meant to do, here it is:

function generateTile(p, i)
{
    var cs  = document.createElement( 'canvas' );
    var c   = cs.getContext( '2d' );

    cs.height   = p[ 3 ];
    cs.width    = p[ 2 ];

    c.drawImage( i, p[ 0 ], p[ 1 ], p[ 2 ], p[ 3 ], 0, 0, p[ 2 ], p[ 3 ] );

    return new Bitmap( cs );
}

回复收藏 0 原文

~没有更多了~