1

I am very new to html5 game making. Recently I am making a game which includes some animations using png sprite.

https://i.stack.imgur.com/y6512.png

I have a background and I try to use this sprite to mask it, I was trying to use getImageData() & putImageData() to show only the circle part of each frame of the sprite, everything's cool until I try to make another "circle" near to the first one.

The problem is I cannot make both "circle" animate at the same time if the sprite sheets overlap with each other... And this is the very start of my project, the final aim is like making 100 "circles" on random positions.

So is there a method to use this sprite sheet to make animating circles, showing the background in the circle part only even if there are several "circles" which overlapping each other?

Sorry that my english is bad and I try my best to describe the question...Any suggestions would be great and I can elaborate more on the question if needed! Thanks!!

PS: I have tried to do my homework before posting, the most neareast reference I can find is http://simonsarris.com/blog/140-canvas-moving-selectable-shapes, but I do not know how to apply the concept of the "ghost canvas" into my case..

shole
  • 4,046
  • 2
  • 29
  • 69
  • Sorry that I forget to post some information which may be useful.. I am using jQuery and KineticJS library for the development, any other useful library suggested is pleased! (I just have found a library called EaselJS seems it is good for sprite animation game but not sure) – shole Mar 25 '13 at 05:37
  • After reading your post my initial thought was "why isn't he using any library?" - Then I read you comment, my answer: KineticJS and EaselJS are both good - personally I perfer EaselJS, just because it is close to the AS3 API and is part of the CreateJS framework (includes sound, preloading, tweening) - and I don't think making SpriteSheet-animations could be any easier than this: http://www.createjs.com/Docs/EaselJS/classes/SpriteSheet.html – olsn Mar 25 '13 at 08:18
  • Thanks so much olsn, I will try it out before asking any further questions :) – shole Mar 25 '13 at 08:33
  • Hi community, while I am trying to use EaselJS to implement the effect I want, I found another reference which can elaborate my problem and my need much more clearly: [here](http://dropshado.ws/post/1244700472/putimagedata-is-a-complete-jerk) I am facing the exact problem, whats worse, I want to acheive: 1. The effect like the left 2. the circle can be animated, with png sprite Thanks for reading and helping..! – shole Mar 25 '13 at 11:35
  • Now I see, you issue is "putImageData()" - you should use `drawImage()` (http://www.w3schools.com/tags/canvas_drawimage.asp) - `putImageData()` completely overwrites the current contents at that particular position. – olsn Mar 25 '13 at 11:53
  • Thanks for the fast reply olsn :) It's good for me to finally have some directions : putImageData() cannot do the job. So now I can be focus on drawImage() & EaselJS and see how far I can go ! – shole Mar 25 '13 at 12:11
  • If you use drawImage() you don't need EaselJS - if you use EaselJS, it will handle ALL the drawing-operations for you – olsn Mar 25 '13 at 12:55

0 Answers0