0

Using EaselJS (HTML Canvas framework, from CreateJS)

I have a tileset, and I need to draw a tilemap. So I assigned my tileset bitmap to each tile. But of course, each tile has to draw only a part of the tileset.

I figured out how to draw a part of a Bitmap (Bitmap.sourceRect), but it means I have to clone the tileset for each tile !

Coming from a Flash AS3 background, I chose this library because it is supposed to be similar, however it seems to be different for image handling (where this problem is adressed by using many Bitmap with one BitmapData).

Thanks.

hugo
  • 3,067
  • 2
  • 12
  • 22
  • 2
    createJS looks like a suite. I'm assuming you're using easelJS? – kennypu Dec 13 '12 at 01:06
  • Yes, sorry, I changed "CreateJS" to "EaselJS" in my question. – hugo Dec 13 '12 at 02:03
  • Bitmap.sourceRect() works as you want it though correct? Are you just worried about performance/space it may take up? You might just want to try it out and see if it does affect performance. – kennypu Dec 13 '12 at 02:23
  • looking here, it looks like it does actually "clip" the image: http://community.createjs.com/discussions/easeljs/268-copy-part-of-bitmap-int-another I was looking around, and you might want to check out the SpriteSheetUtils.js class, it may or may not help – kennypu Dec 13 '12 at 02:25
  • @kennypu: I does not affect performance yet, since I just started, but cloning an entire tileset for each tile seems so wrong to me... SpriteSheetUtils is useful for characters sets: it handles animations, and requires to name each; therefore it is not suitable for a tileset that contains a great number of tiles. – hugo Dec 13 '12 at 02:31
  • well from a programming perspective, I'm sure Bitmap() just stores a reference to the image, not actually creating a whole new image, so its actually fine. so all the different bitmaps you create will be pointing to the same image, just drawing different parts of it. – kennypu Dec 13 '12 at 02:36
  • @kennypu: Okay I figured it out (some time before but just thought about posting). Like you said, *Bitmap* only contains a reference. The underlying data of the *Bitmap* is actually managed by the browser, just as it is when using the native Javascript *Image* class. – hugo Mar 05 '13 at 07:06

1 Answers1

1

Look into using a SpriteSheet and BitmapAnimation instead. There are examples in GitHub that can help.

https://github.com/CreateJS/EaselJS/blob/master/examples/SpriteSheet.html http://www.createjs.com/#!/EaselJS/demos/spritesheet

Lanny
  • 11,244
  • 1
  • 22
  • 30