Im making a 2d game where my character is controlled by a joystick and I rotate him using canvas.rotate(angel, x, y). My character shoots in the same direction he is heading, now I want to add fire coming out of his rifle when he shoots. The problem is, how do I rotate this fire-image around my character?
How I rotate My character:
canvas.save();
canvas.rotate((float) controls.getAngle(), controls.charPosition.x + charBitmap.getWidth() / 2, controls.charPosition.y + charBitmap.getHeight() / 2);
character.draw(canvas, controls.charPosition.x,controls.charPosition.y);
canvas.restore();
How I rotate the Fire:
canvas.save();
canvas.rotate((float) controls.getAngle(), controls.charPosition.x + (fireBitmap.getWidth()) / 2, controls.charPosition.y + (fireBitmap.getHeight() / 2));
fire.draw(canvas, controls.charPosition.x, controls.charPosition.y);
canvas.restore();
As you probably know, drawing my fire like this will make it rotate around its own center, just like with my character. But I want it to rotate around my character so it looks like the fire is coming out of his gun.
Any ideas? If anything is unclear please let me know in a comment. Thanks!
I will try to tailor this answer so that it's more specific, but if I understand you correctly, you may not want to rotate the canvas to create the rotation of the fire. Instead you may want to describe it with a trig function relative to the character's location. So I think it will look something like your drawing of the character.
canvas.save();
canvas.rotate((float) controls.getAngle(), controls.charPosition.x + charBitmap.getWidth() / 2, controls.charPosition.y + charBitmap.getHeight() / 2);
fire.draw(canvas, controls.charPosition.x+(fireRadius*cos(fireAngle)),controls.charPosition.y+(fireRadius*sin(fireAngle));
canvas.restore();
Where in this code, fireRadius is how far from the center of the character drawing you want the fire drawing to be and fireAngle is the angle of the fire from the center of the character. This won't be quite right because it will track the corner of the fire image, not the center. I think that can be fixed somewhat easily. If not, I will change soon.
You could use Canvas.translate(dx, dy). Idea is to move the fire a certain distance away from the gun, which can be directly along x -axis, and then rotate Canvas around gun center. This results fire to rotate given angle at given distance from the gun.
canvas.save();
canvas.rotate((float) controls.getAngle(), controls.charPosition.x + (fireBitmap.getWidth()) / 2, controls.charPosition.y + (fireBitmap.getHeight() / 2));
canvas.translate(distanceFromGun, 0);
fire.draw(canvas, controls.charPosition.x, controls.charPosition.y);
canvas.restore();
Please do note the order. Canvas matrix operations are pre multiplying and though translation is made later in the code.
Related
I got stuck with canvas.drawLines().
My application displays track om map view, but the resulting lines are awful.
Did anyone see such behavior? I.e, lines doesn't have same width, are not even "square", and are rhombus, and sometimes even disappear!
I've tested with for(){drawLine()} instead, and drawPath instead - same issue.
Screenshot took on 10" tablet 1280x800, Fujitsu. Lenovo tablet shows the same.
http://jpegshare.net/c8/1d/c81daa6cff15e3d14cb1268679bb1af1.png.html
borderPaint = new Paint();
borderPaint.setAntiAlias(true);
borderPaint.setStrokeWidth(5);
borderPaint.setStyle(Paint.Style.STROKE);
borderPaint.setColor(Color.WHITE);
//borderPaint.setAlpha(190);
fillPaint = new Paint();
fillPaint.setAntiAlias(true);
fillPaint.setStyle(Paint.Style.STROKE);
fillPaint.setStrokeWidth(3);
fillPaint.setColor(Color.RED);
....
canvas.drawLines(linepoints, 0, linepoints_count, borderPaint);
canvas.drawLines(linepoints, 0, linepoints_count, fillPaint);
where linepoints is array of track lines to draw. Each line is set of 4 float numbers.
Well, I figured out my problem. Hope this can help someone.
Before drawing lines, I do
canvas.translate(X, Y);
where X and Y values are HUGE. Like 10E+6..10E+7 or something.
When I draw lines, their xy values are huge too, but negative, hence in screen coordinates this xy+XY give something inside a screen - but this fact matters and produces issue described in my own first post.
Why this is happening? I found a clue. When drawLine algorithm tries to draw a line, it messes up with line coordinates (division, multiplication) and since machine arithmetic is limited in precision, algorithm gets wrong numbers.
How this was solved?
I dicarded canvas.translate(), and calulate screen coords on the fly, just before drawing.
Now, like that
screen_line_coords_x = line_coord_x - X; //X is offset applied in translate.
screen_line_coords_y = line_coord_y - Y; //Y is offset applied in translate.
canvas.drawLine(screen_line_coords_x, screen_line_coords_y, ...);
... or drawLines() or drawPath() - all give good results.
Hope this might help.
I´m facing same thing.
However, why are you using so huge offset, since the screen is about 1280x800 resolution ?
I believe that system coordinates gets too far from the real display coordinates causing wrong calculations at translation / rotation / scaling operations.
Try to revise your calculations in order to work inside of the display coordinates.
So i'm making a custom View that displays some graphs (plots), and in some ocasions i want to rotate the canvas 90 degrees.
All i can guess is that there's a bug in my device (HTC Desire, with android 2.3), i haven't test it yet in another device.
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.save();
canvas.rotate((float) 90.0);
canvas.drawPoint(10, 10, pointPaint); /* Sorry about missing that these
* coordinates will fall out after being rotated... it's just an
* example. put 10, -10 and it should work, but it doesn't */
canvas.restore();
}
This won't draw the point, but if we change that 90.0 for a 90.014 (i found that this was the minimum, 90.013 doesn't work either) then the point will show up.
So... is it something i'm doing wrong, or it's just Android's bug? I googled a lot, but couldn't find nothing....
-Victor -
edit: Additional info: Only points doesn't work. Rects, lines and circles work perfect.
edit: screenshot of my app, you can see how the red line has dots on the 90.014 degree version, and the 90.0 doesn't.:
(As you can see, the 90.014 it looks like a little bit flipped (you can see how the Y axis is 'broken')
Setting the Paint of the dots to use a ROUND stroke cap resolves the problem, even though it doesn't yet explain the strange behavior you are experiencing. e.g.:
paint.setStrokeCap(Paint.Cap.ROUND)
The canvas rotates through its origin, so if you rotate your canvas by 90 degrees you are effectively rotating your view out of your screen. You should translate the canvas to the axis you want to rotate on first:
canvas.save();
canvas.translate(-axispointx,-axispointy);
canvas.rotate((float) 90.0);
canvas.translate(axispointx,axispointy);
canvas.drawPoint(10, 10, pointPaint);
canvas.restore();
An example can be found here compass.java.
Api here
Even when I first answered this question a few years ago, I didn't really understand how Canvas transforms (like translate, rotate, etc.) worked. I used to think that translate moved the thing that you were drawing. Actually, translate moves the entire coordinate system. This has the desired effect of also moving the thing you are drawing.
On your screen it looks like you are moving the drawing:
What is actually happening is you are moving the coordinate system to a new place on the canvas:
I draw the tree first at (0,0). Then I translate the origin of the coordinate system to some other spot on the canvas. Then I draw the tree again at (0,0). This way my drawing code doesn't have to change anything at all. Only the coordinate system changes.
Normally (0,0) is at the top left of your view. Doing Canvas.translate moves it to some other part of your view.
Saving and Restoring the Coordinate System
You can do save() and restore() to get back to your original coordinate system.
// draw the tree the first time
canvas.drawBitmap(tree, 0, 0, mPaint);
// draw the tree the second time
canvas.save();
canvas.translate(dx, dy); // dx = change in x, dy = change in y
canvas.drawBitmap(tree, 0, 0, mPaint); // draw still thinks it is at (0,0)
canvas.restore(); // undo the translate
When you restore, the drawing is already on the canvas. Restoring doesn't change that. It just moves the coordinate system back to wherever it was when you saved it.
Why Translate
Note that you could achieve the same affect by changing the x,y coordinates of the draw method:
// draw the tree the first time
canvas.drawBitmap(tree, x, y, mPaint);
// update the x,y coordinates
x += dx;
y += dy;
// draw the tree the second time
canvas.drawBitmap(tree, x, y, mPaint);
This might be more intuitive coming from a math background. However, when you are translating, rotating, and scaling your image, it is often much easy to keep your drawing logic the same and just transform the canvas. Recalculating x and y for every draw could be very expensive.
Imagine it's a Print Head.
The easiest way to explain this is to imagine it is the print head of an inkjet or 2D printer.
translate basically "moves" the print head along the X and Y axes the number of pixels that you tell it to.
The resulting position becomes the new "origin" (0,0).
Now that we understand that, let's make a simple face by doing the following:
Starting Origin:
x
The x will (roughly) represent where the origin (or print head) is.
Draw a rectangle for the left eye:
canvas.drawRect(10, 10, 10, 10, paint);
x__
|__|
Note: The "origin" has not changed, it is still at the top left of this rectangle.
Move "origin" right by 20 points:
canvas.translate(20, 0)
__ x
|__|
Draw the right eye using the exact same rectangle command:
canvas.drawRect(10, 10, 10, 10, paint);
__ x__
|__| |__|
Move "origin" back to the original X position and move it down on the Y axis:
canvas.translate(-20, 20) // Positive numbers for the second param is "down" on the y-axis.
__ __
|__| |__|
x
And draw a mouth to finish it off:
canvas.drawLine( 0, 0, 30, 0, paint );
__ __
|__| |__|
x___________
Now just move the "origin" down 20 points to showcase our masterpiece:
canvas.translate(0, 20)
__ __
|__| |__|
___________
x
Not perfectly to scale as there's only so much you can do with a monospace font. :)
Translate - Basically do what it says. Just translate the canvas using x,y. If you want to draw two objects and the one is just translation of the other e.g x2 = x1 + 50 for each point . You don't have to make all your calculations again for the second object but you can just translate the canvas and draw again the same object. I hope this example will help you.
it will change the position of your canvaz(except scale) either x or y
if we translate & scale then it is transformation in general terminology
I want to skew (correct me if this is not the correct word) a bitmap so that it appears to have depth. A good way to visualize what I am asking for is how the credits of Star Wars are angled to show depth.
I have tried the following:
canvas.getMatrix().postSkew(kx,ky,px,py);
and
canvas.skew(sx,sy);
But I have not had much success. The above methods seem to always transform the bitmap into a parallelogram. Is there a way to transform the bitmap into a trapezoid instead?
Here is a snippet of code that I took from the examples that Romain pointed me to.
canvas.rotate(-mOrientation[0] + mHeading, mCenterX, mCenterY);
camera.save();
if (mReverse) {
camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);
} else {
camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));
}
camera.rotateX(mOrientation[1]);
camera.applyToCanvas(canvas);
canvas.drawPath(mPath, mPaint);
canvas.drawCircle(mCenterX, mCenterY, mRadius - 37, mPaint);
camera.restore();
I spent a lot of time working on this today (ran into the same problem) and came up with the code below.
Key thing to note, you need to set preTranslate() and postTranslate() to the center (or somewhere else) of your Canvas area. It seems to mean that it uses the center of the image to apply the transformation from, instead of the upper left corner (x=0,y=0) by default. This is why you would get a parallelogram instead of what you would expect, a trapezoid (Thanks for teaching me the names of those).
The other important thing that I picked up is the Save/Restore functions on the Canvas/Camera. Basically, if you call the Rotate functions consecutively three times without restoring the state back each time, you would keep rotating your object around and around each time you draw. That might be what you want, but I certainly didn't in my case. Same applies to the canvas as you are basically applying the Matrix from the Camera object to the Canvas and it needs to be reset otherwise the same thing occurs.
Hope this helps someone, this is not well documented for beginners. Tip to anyone reading this, check out the APIDemos folder in the SDK Samples. There is a Rotate3dAnimation.java file which demonstrates this as well.
//Snippet from a function used to handle a draw
mCanvas.save(); //save a 'clean' matrix that doesn't have any camera rotation in it's matrix
ApplyMatrix(); //apply rotated matrix to canvas
Draw(); //Does drawing
mCanvas.restore(); //restore clean matrix
//
public void ApplyMatrix() {
mCamera.save();
mCamera.rotateX(-66);
mCamera.rotateY(0);
mCamera.rotateZ(0);
mCamera.getMatrix(mMatrix);
int CenterX = mWidth / 2;
int CenterY = mHeight / 2;
mMatrix.preTranslate(-CenterX, -CenterY); //This is the key to getting the correct viewing perspective
mMatrix.postTranslate(CenterX, CenterY);
mCanvas.concat(mMatrix);
mCamera.restore();
}
You cannot achieve the effect you want with skew(). However, you can use a Camera object and 3D rotations to achieve this effect. The Camera will generate a Matrix for you that you can then apply on the Canvas. Note that the result will not be perspective correct, but good enough for your purpose. This how 3D rotations are done in Honeycomb's Launcher for instance (and many other apps.)
I don't think the "Star Wars effect" is an affine transformation, which I think are the only operations supported by Matrix.
I'm trying to build a custom clock view in Android. See image http://twitpic.com/1devk7
So far to draw the time and hour markers I have been using the Canvas.rotate method to get the desired effect. However, notice that it is difficult to interpret the numbers in the lower half of the clock (e.g. 6 or 9?) because of the angle in which they are drawn.
When using drawText, is it possible to draw the text at 45/90/180 degrees so that all text appears upright when my onDraw method has finished?
To draw a text rotated by 90 degrees at point (x,y), use this code:
canvas.save();
canvas.rotate(-90, x, y);
canvas.drawText(text, x, y, paint);
canvas.restore();
How can you display upside down text with a textview in Android?