Please help me to draw a shape like the image below. I have tried many things, but none of the code worked.
This is what I have tried
private Point mFirstCurveStartPoint = new Point();
private Point mFirstCurveEndPoint = new Point();
.................................................
.................................................
mFirstCurveStartPoint.set((mNavigationBarWidth / 2) - (CURVE_CIRCLE_RADIUS * 2) - (CURVE_CIRCLE_RADIUS / 3), 0);
// the coordinates (x,y) of the end point after curve
mFirstCurveEndPoint.set(mNavigationBarWidth / 2, CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4));
mFirstCurveControlPoint1.set(mFirstCurveStartPoint.x + CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4), mFirstCurveStartPoint.y);
// the coordinates (x,y) of the 2nd control point on a cubic curve
mFirstCurveControlPoint2.set(mFirstCurveEndPoint.x - (CURVE_CIRCLE_RADIUS * 2) + CURVE_CIRCLE_RADIUS, mFirstCurveEndPoint.y);
mPath.reset();
mPath.moveTo(0, 0);
mPath.lineTo(mFirstCurveStartPoint.x, mFirstCurveStartPoint.y);
mPath.cubicTo(mFirstCurveControlPoint1.x, mFirstCurveControlPoint1.y,
mFirstCurveControlPoint2.x, mFirstCurveControlPoint2.y,
mFirstCurveEndPoint.x, mFirstCurveEndPoint.y);
is there any way to done this using Xml layout
Since I can't add comments because of low reputation, check this link.
Adding another link if you're going to use Java here, in Areas section some great example how to achieve your shape using setVisible.
If you have an image in svg format, use Asset Studio to convert it to xml drawable. Otherwise, use code like that:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="500dp"
android:height="300dp"
android:viewportWidth="500"
android:viewportHeight="300">
<path
android:pathData="M0,0h500v300h-500z"
android:fillColor="#e3e3e3"/>
<path
android:pathData="M0,80C0,250 487,104 550,247L500,300L0,300"
android:fillColor="#3e47cb"/>
</vector>
Related
I use the class org.apache.pdfbox.pdmodel.PDPageContentStream for write text into PDF file.
I need to scale the text horizontally.
How can it be done?
do this before drawing your text:
contentStream.transform(Matrix.getScaleInstance(2, 1));
this will enlarge on the x axis. If this effect is to be temporary, don't forget to put your draw commands within saveGraphicsState() and restoreGraphicsState().
Alternatively, use setTextMatrix() with the same parameter. The later one has the advantage that one call replaces the previous.
THIS IS CORRECT CODE:
contentStream.saveGraphicsState();
contentStream.beginText();
contentStream.setFont(currentBaseFont, currentFontSize);
//X HORIZONTAL SCALING
Matrix scaleInstance = Matrix.getScaleInstance(scalaRiga / 100f, 1);
contentStream.transform(scaleInstance);
float rot = (float)((rotazione == 90)?(Math.PI / 2):(Math.PI * 2));
contentStream.setTextMatrix(Matrix.getRotateInstance(rot, x, y));
contentStream.showText(txpDati.getDati());
contentStream.endText();
contentStream.restoreGraphicsState();
THANK YOU TILMAN
FR
I'm making a little game just for fun and I got stuck making the bullets come out of the gun. In the code below, the direction of the player is a degree angle called rot.
float gunOffsetX = 106, gunOffsetY = 96;
double angle = Math.toRadians(rot); // convert direction of player from degrees to radians for sin and cos
x = getX(); // player X
y = getY(); // player Y
float bulletX = (float) (x + (gunOffsetX * Math.cos(angle) - gunOffsetY * Math.sin(angle)));
float bulletY = (float) (y + (gunOffsetX * Math.sin(angle) + gunOffsetY * Math.cos(angle)));
Instances.fire.add(new Fire(bulletX, bulletY, rot, weapon));
Also tried:
bulletX = (float) (x + Math.cos(angle + Math.atan2(gunOffsetX, gunOffsetY)) * Point2D.distance(0, 0, gunOffsetX, gunOffsetY));
But same results
Supposedly the bullets should spawn at the end of the gun but this isn't the case as you can see in the following gif..
Any help appreciated
One big issue (at least in my opinion) is how this game handles anchor points of shapes, like the player.
We can highlight the anchor point by drawing a little red rectangle on its place:
g.setColor(Color.RED);
g.drawRect((int)player.getX() -5, (int)player.getY() -5, 10, 10);
This comes into the Draw#renderGame(Graphics2D) method, so it looks like:
private void renderGame(Graphics2D g) {
g.rotate(Math.toRadians(player.rot), player.getX()+64, player.getY()+64);
g.drawImage(player.getCurrentFrame(), (int)player.getX(), (int)player.getY(), player.getWidth(), player.getHeight(), null);
g.setColor(Color.RED);
g.drawRect((int)player.getX() -5, (int)player.getY() -5, 10, 10);
g.rotate(-Math.toRadians(player.rot), player.getX()+64, player.getY()+64);
//...
then we'll see that the anchor point is not in the center of the image:
As you can see, the anchor point (the original (0,0) point before the rotation) isn't in the center of the image and the crosshair is related to it, instead of the view of the player.
This happens due to the shifting operation while the player rotation:
g.rotate(Math.toRadians(player.rot), player.getX()+64, player.getY()+64);
//...
g.rotate(-Math.toRadians(player.rot), player.getX()+64, player.getY()+64);
You're shifting the postion with +64. I suggest to remove that and add the shifting to the g.drawImage call instead, so the anchor point is correctly in the center (mind that I avoided the fixed value 64):
g.rotate(Math.toRadians(player.rot), player.getX(), player.getY());
g.drawImage(player.getCurrentFrame(), (int)player.getX() - (player.getWidth() / 2), (int)player.getY() - (player.getHeight() / 2), player.getWidth(), player.getHeight(), null);
g.rotate(-Math.toRadians(player.rot), player.getX(), player.getY());
Then you now fire the gun you'll see that the bullet always "starts" from a certain position from the player. The problem here is the incorrect offset you used. The proper values are:
float gunOffsetX = 35, gunOffsetY = 29;
(I got them by trial and error, so you may adjust them a bit more, if you like)
Now it looks like this:
As you can see, the shot is still a bit misplaced, but this happens due to the incorrect rotation of the bullet (like you did it for the player shape):
g.rotate(Math.toRadians(f.rot), f.getX()+f.getWidth()/2, f.getY()+f.getHeight()/2);
g.drawImage(f.img, (int)f.getX(), (int)f.getY(), f.getWidth(), f.getHeight(), null);
g.rotate(-Math.toRadians(f.rot), f.getX()+f.getWidth()/2, f.getY()+f.getHeight()/2);
It should look like this (without any X or Y adjustments):
g.rotate(Math.toRadians(f.rot), f.getX(), f.getY());
g.drawImage(f.img, (int)f.getX(), (int)f.getY(), f.getWidth(), f.getHeight(), null);
g.rotate(-Math.toRadians(f.rot), f.getX(), f.getY());
The end result is:
The player now correctly looks at the crosshair and the shots are placed in front of the gun.
If you like to fire directly through the center of the crosshair, you'll only need to adjust the player position and the bullet offset a bit.
Player (in Draw#renderGame(Graphics2D)):
g.drawImage(player.getCurrentFrame(), (int)player.getX() - (player.getWidth() / 2), (int)player.getY() - (player.getHeight() / 2) - 30, player.getWidth(), player.getHeight(), null);
(mind the -30 in (int)player.getY() - (player.getHeight() / 2) - 30)
Bullet:
float gunOffsetX = 35, gunOffsetY = 0;
Now the bullet travels right through the crosshair (mind that the red rectangle is right on the weapon):
(I'm a bit too stupid to create proper GIF files, so I can only provide pictures)
Now you have the necessary offset values to get the result you want, but you should definitely try to understand why the values are like they are right now. You need to replace them later with dynamic values, since different weapons need different offsets for the bullet, because the player image differs. It should be helpful to have some kind of class with instances for each weapon type, which contains the images and the coordinates where the weapon barrel is located in the image. Then you can use these coordinates to correctly set the offsets for the bullet image.
I'm trying to draw a NinePatch using a transform matrix so it can be scaled, rotated, moved etc. So I created a class that inherits from LibGDX's NinePatch class and which is responsible of the matrix.
This is how I compute my transform matrix (I update it each time one of the following values changes) :
this.transform
.idt()
.translate(originX, originY, 0)
.rotate(0, 0, 1, rotation)
.scale(scale, scale, 1)
.translate(-originX, -originY, 0)
;
and how I render my custom NinePatch class :
drawConfig.begin(Mode.BATCH);
this.oldTransform.set(drawConfig.getTransformMatrix());
drawConfig.setTransformMatrix(this.transform);
this.draw(drawConfig.getBatch(), this.x, this.y, this.width, this.height); // Libgdx's NinePatch#draw()
drawConfig.setTransformMatrix(this.oldTransform);
Case 1
Here's what I get when I render 4 nine patches with :
Position = 0,0 / Origin = 0,0 / Scale = 0.002 / Rotation = different for each 9patch
I get what I expect to.
Case 2
Now the same 4 nine patches with :
Position = 0,0 / Origin = 0.5,0.5 / Scale = same / Rotation = same
You can see that my 9 patches aren't draw at 0,0 (their position) but at 0.5,0.5 (their origin), like if I had no .translate(-originX, -originY, 0) when computing the transform matrix. Just to be sure, I commented this instruction and I indeed get the same result. So why is my 2nd translation apparently not taken into account?
The problem is probably your scaling. Because it also scales down the translation, your seccond translate actually translates (-originX*scale, -originY*scale, 0) since scale=0.002, it looks like there is no translate at all. For instance for the x coordinate, you compute :
x_final = originX + scale * (-originX + x_initial)
I had to change the code computing my transform matrix to take the scale into account when translating back as pointed by Guillaume G. except my code is different from his :
this.transform
.idt()
.translate(originX, originY, 0)
.rotate(0, 0, 1, rotation)
.scale(scale, scale, 1)
.translate(-originX / scale, -originY / scale, 0);
;
I am trying to implement smooth 3D camera in my game. So, I have a few reserved positions and directions and I want to change view of my camera by applying them to my camera. Now I am doing it like below:
//Reserved positions and directions
//View #1
Vector3 pos1 = new Vector3(0, 5, -10);
Vector3 dir1 = new Vector3(0, 0, 10);
//View #2
Vector3 pos2 = new Vector3(5, 2, 5);
Vector3 dir2 = new Vector3(-2, 2, 7);
//Applying view #2
camera.position.set(pos2);
camera.lookAt(dir2);
It works, but I need to do it smoothly. I've seen a similar question for 2D camera, but it doesn't appropriate for me, because orthographic camera doesn't need direction and Z-axis.
UPDATE:
I tried to use method which is described for 2D camera. So, positioning works as needed, but I can't say the same about direction. Behaviour of direction is wrong. It rotates camera on Z-axis. Seems to me I have to update Up vector too.
float lerp = 0.01f;
Vector3 position = camera.position;
position.x += (pos2.x - position.x) * lerp;
position.y += (pos2.y - position.y) * lerp;
position.z += (pos2.z - position.z) * lerp;
Vector3 direction = camera.direction;
direction.x += (dir2.x - direction.x) * lerp;
direction.y += (dir2.y - direction.y) * lerp;
direction.z += (dir2.z - direction.z) * lerp;
//CODE FROM LIBGDX'S CAMERA
//LookAt function
/*
tmpVec.set(x, y, z).sub(position).nor();
if (!tmpVec.isZero()) {
float dot = tmpVec.dot(up); // up and direction must ALWAYS be orthonormal vectors
if (Math.abs(dot - 1) < 0.000000001f) {
// Collinear
up.set(direction).scl(-1);
} else if (Math.abs(dot + 1) < 0.000000001f) {
// Collinear opposite
up.set(direction);
}
direction.set(tmpVec);
normalizeUp();
}
*/
What is the correct way to set direction?
I would use the Univesal Tween Engine, which is a library for interpolating pretty much anything.
You'd have to write a Vector3Accessor class (which would be very simple), but then you'd have all sorts of controls and options for smooth movement. It has a very rich API and is used a lot for exactly this sort of thing.
I'd strongly recommend you put a little time into investigating it as an option -It'll give you a better result, and once you know it you'll find all sorts of other cool uses for it in your app.
First happy new year to all here!
I have a question about drawing background in code. I have a code for simple Android game and all assests is in png format, expect background. I`m not a programmer (but newbie in this and I learn with live examples).
I think this code draw background clouds on the screen:
//draw cloud layer 1
background_shader.setColor(getResources().getColor(R.color.blue_dark));
int radius = DrawBackgroundCloud(canvas, (ScreenHeight() / 2), 7);
canvas.drawRect(0, (float) ((ScreenHeight() / 2.2) + radius * 1.5), ScreenWidth(), ScreenHeight(), background_shader);
//draw cloud layer 2
background_shader.setColor(getResources().getColor(R.color.blue_darkest));
radius = DrawBackgroundCloud(canvas, (int) (ScreenHeight() / 1.5), 4);
canvas.drawRect(0, (float) ((ScreenHeight() / 1.7) + radius * 1.5), ScreenWidth(), ScreenHeight(), background_shader);
This draw some random circles as clouds but I want to change this to draw something like hills or mountains. Here is a picture of current background and what I`m looking for.
http://prntscr.com/5nqa25
Can anyone help me with this? I will be really thankfuly
Responding to the further question in the comment:
you cant really do that with canvas.drawColor, but you can use a proper Paint object and use canvas.drawPaint (or other canvas method that uses Paint object - if you want to for example draw shape with gradient).
The key part of creating your gradient Paint object is calling its setShader(...) method. For example like so:
mGradientPaint = new Paint();
mGradientPaint.setStyle(Paint.Style.FILL);
mGradientPaint.setShader(new LinearGradient(0, 0, 0, getHeight(), Color.TRANSPARENT, Color.GREEN, Shader.TileMode.MIRROR));