This is great news. So can there be an additional feature like this? There is a house image. We want this house image to be painted brown. So when the user paints it brown, it will be correct. So is it possible to assign features to the painting areas? Maybe what I want is a little difficult.
There should be a way to draw the fill into a Shape and then be able to drag the shape, assign features, etc. But not sure...
Here are a couple examples - we will also create an Announcement for the new features. Will work on that next.
1 Like
Here is the Announcement:
1 Like
The user may accidentally paint the edges. In such a case, it may not look good. It may be more logical to put a barrier for this.
I made the following change in BitmapData to prevent this situation.
p.floodFill = function(x, y, color) {
if (this._contextChanged) this.updateImageData();
var imgData = this._imageData;
var w = imgData.width;
var h = imgData.height;
x = x >> 0;
y = y >> 0;
if (x < 0 || y < 0 || w <= x || h <= y) {
return;
}
var targetColor = this.getPixel32(x, y);
//alert(targetColor)
//4278190080 //// this is black color....
//// Changes were made here...
if (targetColor === color||targetColor===4278190080) {
return;
}
OK. if (currentColor<convertColor(dark, "hexnumber")) return; You have blocked it with this code.
And that is what we call... MAKE IT STUPID SIMPLE ! You rock Dan ! Thanks
2 Likes
@abstract There seems to be a bug like this: when the painted part is touched again, the page freezes and nothing can be done anymore.
I saw that it freezes as well.
Ah... I see. It seems to have a problem floodFilling the same color. Will add a test for that in the samples.
1 Like
Ya... okay. Annoying. The color we are getting from the current pixel is a hex number. When we set it we need a hex string. So it is a few steps. We will see if we can wrap that up somehow. Maybe add a color method to the createjs BitmapData or something. But not tonight.
Can we actually currently already make games like this easy with ZIM?
The image is just 1 900x900px image and you cut up the tiles automatically in code.
The example above is the easy version , but the one below (not on a grid) is even more interesting to do. Can we somehow do this easily in ZIM ?
What I actually mean to ask is...
Can we take a (rectangular) part of an image (I guess from the bitmapdata) and turn it into a separate sprite that we can then drag?
Kind regards,
Bart
Yes - that can be done without BitmapData class - you can make a Bitmap() of any DisplayObject and specify x,y,width,height as the part that you want. That is what chop() is doing in behind the scene. Then leave a white Rectangle over the same area and add the new Bitmap over on the left. Set dropTargets to the right white rectangle and on the pressup test to see if there if the dropTarget property is true and if so - hide the white rectangle.
Any way to animate this bitmapData.floodFill(point.x, point.y, newColor);? color slowly or with an ease? The coloring appears gradually or from one side to the other?
Not that I know of. I might look into trying to make it fill another Shape - that might give us more control like animating a mask on it.
I am seeing a problem with changing colors on some objects. The color stops changing after two or three times. I noticed it's happening, not always, when the source file has a shape on top of another shape. Does this transfer over to the png in layers? Would this cause the issue?
I don't know exactly what you mean. If you are just coloring one bitmap, I think it only colors one bitmap. A shape on top can certainly block the mouse - try a noMouse() on it.