Selim, I'm coming out with a holiday card animation card that involves an elf scratching off a board and revealing a coupon while he scratches it. Do you have any examples of something to that effect?
I can see many ways to implement this. The simplest and most compatible one is as follow: - If the scratching is always the same (I mean the elf's movement not what's being uncovered) you can use an simple sprite. The first frame would have no transparent pixels and frame by frame the scratched area will be drawn with transparent pixels. You will then have another image bellow that sprite to show what's being revealed.
...where do I fit in the transparent scratching into this playground setup? You mentioned that the first frame would have no transparent pixel - what do you mean by that? Is that something I design in photoshop with a .png file, or is that a javascript effect?
In my $.playground().registerCallback(function(){...} I will have the elf moving from left to right, over the white board and coupon code. I just need to figure out how to get that scratch effect included within this process to reveal the coupon code that is behind the white board.
haha - I think I'm making this harder than it needs to be. I think I'm going to take the opposite pursuit and remove any sprites that come in contact with my elf (with the collision method), as he moves from left to right, and then right to left.
Comments
I can see many ways to implement this. The simplest and most compatible one is as follow:
- If the scratching is always the same (I mean the elf's movement not what's being uncovered) you can use an simple sprite. The first frame would have no transparent pixels and frame by frame the scratched area will be drawn with transparent pixels. You will then have another image bellow that sprite to show what's being revealed.
Would that work for you?
"...the first frame would have no transparent pixels and frame by frame the scratched area will be drawn with transparent pixels."
So within the $playground(), I would have something like this...
******************************************************************
$.playground().addGroup("holiday-card", {width: game.width, height: game.height})
.addGroup("elf", {posx: ..., posy: ..., width: ..., height: ...})
.addSprite("elf-body", {animation:..., posx:..., posy:..., width:..., height: ....})
.end()
.addGroup("coupon-code", {width:..., height:...}).end()
.addGroup("white-board",{width:..., height:...}).end()
.end()
******************************************************************
...where do I fit in the transparent scratching into this playground setup? You mentioned that the first frame would have no transparent pixel - what do you mean by that? Is that something I design in photoshop with a .png file, or is that a javascript effect?
In my $.playground().registerCallback(function(){...}
I will have the elf moving from left to right, over the white board and coupon code. I just need to figure out how to get that scratch effect included within this process to reveal the coupon code that is behind the white board.
thanks for the help!
Thanks for the ideas!
bh