Active clip rectangle?

(Nirvan) #1

I trying to render part of my image using clipRectangle. But with it I can’t make active changes of shape for rendering image. I want to do something like health bar with it.

I creating Rectangle class and when I creating image I set rectangle to image, and when I do something with rectangle image doesn’t change.

(azrafe7) #2

Not able to verify it right now but, if I recall it correctly, you just need to call update.buffer(true) afterwards to get the modifications applied to the Graphic.

Otherwise you can resort to using the drawMask property.

(Ultima2876) #3

@azrafe7 is correct, though the function you want is updateBuffer(true); in Image.

(Nirvan) #4

Thanks, now it works but there is next problem. I want to resize height of rectangle from bottom, no from top. It’s error when I set negative height, for example.

(Ultima2876) #5

OK, in this instance what you will want to do is change the y position of the image. For example, to remove 5 pixels from the bottom but keep it drawing at the same position (as if you have clipped off the bottom 5 pixels):

myImage.clipRect.height = clipRectHeight - 5;  //remove 5 pixels from the height
myImage.y = 5;  //move it 5 pixels down to compensate
myImage.updateBuffer(true);  //update the buffer to use the new clipRect
(Nirvan) #6

Ok, but there is problem because I have rounded health bar graphic and it looks buggy:

Of course I can add some y when health is going down but I still think what hiding graphic from top will look better.

(azrafe7) #7

Yeah, updateBuffer(true) was what I was thinking of.

(azrafe7) #8

Mmmh… since you have rounded borders probably using a drawmask would do it.

For example, for the red bar (which decreases from top), I think something like this should work:

  • have a fullMask that representes the full bar and a currentMask that is applied to the bar image
  • when it decreases:
    • copy the full mask to currentMask
    • mask out the empty portion (blit rounded empty part + empty rectangle)

Do the same for the green bar but flip it vertically.

Hope it makes sense.

(Zachary Lewis) #9

I think I answered this question before… Check this thread out.

(azrafe7) #10

Hey, don’t know if you already solved it, but after seeing @zachwlewis’ post I realized that you could use Draw.rectPlus() to easily redraw your mask as a rectangle with rounded corners when you need it.

Just remember to make use of Draw.setTarget() to address your mask bitmapData (and maybe reset the target, as soon as you’ve done with it, by calling Draw.resetTarget() - probably unneeded, but it’s safer to do so).

(Ultima2876) #11

To hide the graphic from the top, do the opposite to above. Increase the y value of the clipRect and decrease the y value of the graphic:

myImage.clipRect.y = 5;
myImage.y = -5;

drawMask and calculating fresh rounded rectangles both seem like overkill for such a simple thing :slight_smile: