I'm making a game with a health bar and I am trying to make a health bar that is curved.
Currently I have a lineBar that has 20 segments that looks like this at the bottom left of the screen.
What I'd like to do is write a function that goes through and modifies the scaleY of each to get a curved bar.
I can easily scale them down in a straight line. So that it looks triangle ish.
I want exponential decay.
In normal math terms it might be something like y = Pa^x.
I developed a game with a curved health bar a while back, this is how I achieved it:
Step 1:
Create your curved bar. I suggest the Oval Primitive tool:
Draw your bar. I suggest creating a guide layer to demonstrate a whole-circle visual of your curved segment. Copy the bar onto another layer and make it a mask, this will be what reveals your healthbar. The mask and the segment should be MovieClips:
Step 2:
Set the registration point of your mask to the centre of your guide circle. Your mask will rotate around this point to reveal your actual bar. Rotate your mask so that it is to the left of your actual bar graphic:
Step 3:
Create a tween of your mask rotating clockwise across 100 frames (add more frames for finer progression). You can even apply a tween to your bar graphics where the colour changes from red to green as it fills, etc.
Step 4:
Use gotoAndStop() on this element to determine which frame you should stop on throughout the animation. The formula I use here is generally:
gotoAndStop( Math.round( currentHealth / maxHealth * x ) );
Where x is the amount of frames you created.
Hope this helps.
Related
I have an hourglass like vector shape and I'd like to use it to mask an image. I'd like to feather the edges - have a soft falloff in transparency that follows the contours of the hour glass. Any ideas how I can do this?
I tried using a gradient fill on a closed shape (using beginGradientFill() and curveTo() functions) but that falloff doesn't follow the contour of the vector shape, it can only go one direction.
Maybe there is a better solution but until somebody comes up with it... I assume you could do the following:
Draw whatever shape you want to use as mask into a transparent bitmap.
Scale a bit the bitmap down (or use a matrix while drawing its bitmapdata).
Apply a blur filter to it.
Put the bitmap's center to the masked clip's center so they are aligned.
Set the masked clip's cacheAsBitmap property to true.
I'm doing some collision detection with a circle and a square and whenever the circle comes in contact with the square it bounces away changing its X coordinate by *-1. However, the Hit Area of the circle is a square, so even when it collides with the white area around the circle , the affect still occurs.
My question is, is there a way to modify the hit area to closer resemble my circle?
Thanks
Bitmap hit testing is pixel based (instead of boundary-based, like Sprite-based hit testing), so it is inherently more precise.
Here are the Adobe docs on it.
Here is a nice tutorial on it.
And here is a nice code snippet on it:
if (firstObjectBitmapData.hitTest(new Point(firstObject.x, firstObject.y), 255, secondObjectBitmapData, new Point(secondObject.x, secondObject.y), 255))
{
trace("hit!");
}
I would like to be able to create bar charts with JFreeChart that looks similar to the following picture.
It is a very basic mono-colored bar chart, but with one "fancy" detail: the diagonal stripes. I was thinking that this could be made possible by overlaying another picture on top of the normal bar. This picture would have the same dimensions as the bar, have diagonal white stripes and a transparent background. I am not quite sure how to do this though, as I have very little GUI experience, but I found a very useful article that deals with overlaying images on top of graphics from JFreeChart, so I am quite certain I should be able to pull that of.
But how should I create the diagonal stripes?
I see how I could distribute the lines from the lower left corner to the upper right corner, but not the capped lines in the upper left and lower right corner. Can I somehow paint outside the rectangle (and not have it included in the picture)?
edit: After some searching I cannot see that my suggestion of overlaying an image with a transparent background would work, as I cannot find any examples on how to do this. On the other hand, merely painting the lines on the rectangle is probably easier.
Using a gradient fill to draw lines
On trashgod's tip I tried filling a shape with a gradient that had sharp edges to simulate line drawing. This would prevent a lot of calculations and could potentially be a lot simpler. It worked quite ok for thick lines, but not for thinner lines. Using the following code produces the fill in the first picture:
rect.setSpace(spaceBetweenLines);
Color bg = Color.YELLOW;
Color fg = Color.BLUE;
rect.setPaint(new LinearGradientPaint(
(float) startX, (float) startY, (float) (startX + spaceBetweenLines), (float) (startY + spaceBetweenLines),
new float[] {0,.1f,.1001f}, new Color[] {fg,fg,bg}, MultipleGradientPaint.CycleMethod.REPEAT)
);
Drawing lines using graphic primitives
Although simpler it did not work in my case. The more elaborate, but to me, more natural way of doing it, is simply drawing lines on top of the shape (rectangle, cirle, ...). The following code was used in producing the second image. Observe the use of the clip(Shape s) to restrict the line drawing to the shape underneath. The reason for not simply drawing a rectangle and using clip() to limit the shape is that the clip() operation is not aliased, thus producing jaggies. Therefore I have to draw the shape first to get smooth edges, then set the clip to prevent overflow in the forthcoming line drawing, and finally draw the lines.
public void paint(Graphics g) {
Graphics2D g2 = (Graphics2D) g;
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2.setPaint(getBackground());
g2.fill(getShape());
g2.setClip(getShape());
// draw diagonal lines
g2.setPaint(getLineColor());
for (int x = (int) this.x, y = (int) (this.y); y - height < (this.y + height + getSpace()); ) {
g2.drawLine(x, y , x + (int) width , y - (int) width);
y += getSpace();
}
The source code for BarChartDemo1 shows how to apply a GradientPaint, but you may want to experiment with LinearGradientPaint to get the diagonal effect.
I want to paint the bars, not the background.
If you already have a suitable image, TexturePaint may be an alternative.
This is my firs excursion on the HTML5 canvas, I have working knowledge of jQuery and Javascript.
I'm trying to create a "spinning globe" effect with it.
The idea is to have a circle and meridians "spinning" on it, to give the effect of a rotating globe.
I've drawn the circle and now I'm trying to create lines that start from the right (following the curve of the circle), move towards the centre straightnening up (in the middle they are straight) and follow the inverse curvature on the left, ending with the circle.
I'm trying to do this with the HTML5 canvas and jQuery but I'm not sure of where to start... should I create an arc and then try to animate it?
I'm even wondering if the canvas is the right tool or if I should use anything else.
Any suggestion is welcome!
Sebastian
You could use a quadratic bezier curve, which is basically just a curve with a start point, an end point, and a "control point" in the middle, which is what you would want to change as the globe spins. In this case, all of your lines would start and end at the north and south poles, respectively, of your "globe". For example, to make one of these lines:
// start drawing a line
canvas.beginPath();
// move the the top of your globe
canvas.moveTo(0,0);
/* draw a curve with the control point specified by the first two args,
* end point by the second two:
* (in your case, the control point would be in the middle of the globe) */
canvas.quadraticCurveTo(control_point_x, control_point_y, 0, 50);
// finish drawing, stroke and end
canvas.stroke();
canvas.closePath();
You would also have to take in to account how you will clear the lines after each frame, of course.
See: The Canvas element API, Complex Paths
This is what I got, didn't have the time to proceed any further: http://jsfiddle.net/Z6h3Z/
I use bezier curves where the two control points are in a sort of oval arc centered at the poles.
What I got stuck at is the distribution of points along the arc to look more realistic.
I'm trying to code a 3d wall like
http://www.flashloaded.com/flashcomponents/3dwall/
The shape I am looking to create is like a bath or arena where it is a curve cornered rectangle with sloping sides.
The image below shows what i'm trying to achieve if viewed from above. I hope that helps.
Can anyone give me some ideas on the maths to create this shape using primitive rectangle shapes.
Thanks,
Josh
http://en.wikipedia.org/wiki/Matrix_multiplication
http://en.wikipedia.org/wiki/Transformation_matrix
http://www.devmaster.net/wiki/Transformation_matrices
A rectangle has 4 3D points (vectors)
Define a vector this way
To move/rotate/scale just multiply each vector by the transformation matrix.
This matrix rotates around X-axis:
For perpective projection (camera) look at: http://en.wikipedia.org/wiki/3D_projection
For example: you can create rectangles and rotate them around an axis to create a cylinder like this:
(source: flashloaded.com)
your pit:
note: the angle is not correct, it should be pi-a (180ยบ-a)
create all rectangles centered at origin (0,0,0), then rotate them as needed and move to desired position. I recommend you to code the matrix routines first like rotate(), move(), scale() and a simple paint function (just line drawing, without perspective) the rest is just playing with the matrices.