I am making a game in LibGDX. I'm using the orthographic camera class to scale the image and it works great. My only issue is with the black border. Since opengl draws the image at 0,0 which is the bottom left corner, the black border when the screen is scaled improperly is either on the top or the right. Ex:
Border on right:
Border on top:
What I want to do is make them like this:
Border used to be on right, now it's on right and left, perfectly symmetrical:
Same for this one. It used to just be on top but now it's evenly on top and bottom:
Anyone know how to do this? I think it would look muuuch nicer and more professional. Thanks in advance.
EDIT: This is what I tried so far:
Here is what I did so far:
double ratio = 1280 / 720;
double newRatio = width / height;
System.out.println("" + newRatio + " " + ratio);
System.out.println("" + width + " " + height);
if(newRatio < ratio){
System.out.println("herro");
double x = width / ratio;
double dif = height - x;
cam.setPosition(0f, (float)(dif / 2));
}
you will have to center the image at first it would look something like:
image_x = screen_width/2 - image_width/2;
image_y = screen_height/2 - image_height/2;
then in the resize methode provided by LibGDX you will have to change the viewport, it would look like:
public void resize(int newWidth, int newHeight) {
Gdx.GL30.glViewport(0, 0, newWidth, newHeight);
}
the version of the GL depends on your config.
Related
i have created a 10x10 grid in the center of the screen in android, now i would like to give each square in the grid a coordinate. for example top left square in the grid would be 0 then 1, 2,3 and so on. But i dont know how to do this. i am trying to do this in a draw class which extends view. my code of what i am trying is below
public int coordinates(int posX, int posY){
int startX = (screenWidth / 2) - (rectSide / 2);
int startY = (screenHeight / 2) - (rectSide / 2);
//for(int i=0; i<=10000; i+=100){
xCoord = (startX + (posX*100));
yCoord = (startY + (posY*100));
}
You know you start at point 0,0 top left. So assuming you have equally spaces squares you can just do the screen height / 10 to get how far apart each square should be in the y direction. And then do the same for the x direction. Say your screen was 1000 pixels tall.
Then your grid at position (0,1) would be at (0,100) pixels. (0,2) would be (0,200) you are just multiplying the y coordinate by the height of each square in the grid.
I am making a game in Android that requires a list of sprites to running from right to left so I try to flip the image using the code below.
It slows the game speed down so much, moves fast running to the right but slows down so much running to the left.
public void Draw(Canvas spriteBatch, int X, int Y, int imageIndex,int flip)
{
int drawY = (imageIndex / columns);
int drawX = imageIndex - drawY * columns;
int spriteX = drawX * spriteWidth;
int spriteY = drawY * spriteHeight;
Rect src = new Rect( spriteX, spriteY,spriteX + spriteWidth, spriteY + spriteHeight);
Rect dst = new Rect(X, Y, X + spriteWidth,Y + spriteHeight);
location.X = X;
location.Y = Y;
if(flip == 1)
{
//here image is flipped
spriteBatch.save();
spriteBatch.scale(-scaleX, scaleY, X, Y);
spriteBatch.drawBitmap(texture2D,src,dst, paint);
spriteBatch.restore();
//Use simple use this to flip image canvas.scale(-1, 1)
}
else if(flip == 0)
{
//draws sprite without flipping
spriteBatch.save();
spriteBatch.scale(scaleX, scaleY, X, Y);
spriteBatch.drawBitmap(texture2D,src,dst, paint);
spriteBatch.restore();
}
this.SetFrame(imageIndex);
}
I can flip using matrix but I can't draw a sprite using matrix.
Is there a way to draw sprite using matrix and would it make it faster?
matrix.reset();
matrix.setTranslate(location.X, location.Y);
matrix.setScale(-scaleX,scaleX);
matrix.postTranslate(location.X + texture2D.getWidth(), location.Y);
Or is there another way that is faster?
So I think that the matrix solution should will work perfectly the canvas object includes it's own built in matrix which if you manipulate will affect the output of all graphics after that point. So you just set the matrxi and then do the draw.
You're solution is okay but you're doing it wrong - rather do this part ONCE:
Create the left-ward facing sprite as you do at the beginning and then store it. Then EACH FRAME: Use this 'cached' copy of the inverted bitmap that you created.
A third solution (which I haven't tried but might work) is to manipulate the destination rectangle so that the left and right edges are swapped - the canvas docs say, "Draw the specified bitmap, scaling/translating automatically to fill the destination rectangle." - I suspect that this might include negative scaling to fit the space where the right edge is smaller than the left although the docs do not explicitly say so.
I've got the following code to display an image/texture in Opengl. The method is supposed to display the image in its correct aspect ratio and zoom in/out.
The image does not seem to maintain its aspect ratio on the horizontal axis. Why?
(NB: The OpenGL viewing width is from -1 to 0 and height from 1 to -1).
private void renderImage(Rectangle dst, float magnification) {
float width, height;
float horizontalOffset, verticalOffset;
// Default: Fill screen horizontally
width = 1f;
height = dst.getHeight()/(float) dst.getWidth();
// magnification
width *= magnification;
height *= magnification;
// Offsets
horizontalOffset = width/2f;
verticalOffset = height/2f;
// Do the actual OpenGL rendering
glBegin (GL_QUADS);
// Right top
glTexCoord2f(0.0f, 0.0f);
glVertex2f(-0.5f + horizontalOffset, verticalOffset);
// Right bottom
glTexCoord2f(0.0f, 1.0f);
glVertex2f(-0.5f + horizontalOffset, -verticalOffset);
// Left bottom
glTexCoord2f(1.0f,1.0f);
glVertex2f(-0.5f - horizontalOffset, -verticalOffset);
// Left top
glTexCoord2f(1.0f, 0.0f);
glVertex2f(-0.5f - horizontalOffset, verticalOffset);
glEnd();
}
I don't have any experience with OpenGL but from looking at your code it seems that there is something fishy about your default fill.
// Default: Fill screen horizontally
width = 1f;
height = dst.getHeight()/(float) dst.getWidth();
This is setting your "width" variable to a constant value of 1 whilst the "height" variable relies on the height and width of the rectangle that you are passing in, which is then being used to calculate the offsets
// Offsets
horizontalOffset = width/2f;
verticalOffset = height/2f;
in my experience this can cause the problems you have stated, first try stepping through this function in the debugger to analyse the values that the width and height variables hold, or try changing
// Default: Fill screen horizontally
width = 1f;
height = dst.getHeight()/(float) dst.getWidth();
to
// Default: Fill screen horizontally
width = 1f;
height = 1f;
and rerun this to see if it has had an effect on your output
Hello i'm currently working on a 2D Game Engine written entirely in java. Is there a way to centre a Graphics Object (g.drawString(x,y,z).
It would be preferably if this could be done through Graphics and the DefaultToolkit.
Thankyou very much :)
Simple mathematics. We have the object to be centered and the area where it should be centered.
Object width - w
Object height - h
Area width - aW
Area height - aH
//Follow center coordinates are coordinates where top left corner should be placed in order for the object to lie in center
centerWidth = (aW - W) /2
centerHeight = (aH - H) /2
As you can see, you MUST know the metrics of area you are placing your object on !
If that area is just the screen, then screen dimension can be used like this.
//Some dummy object metrics
int w = 30;
int h = 60;
//Now we find out the area metrics
Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
int aW = screenSize.width;
int aH = screenSize.height;
//Apply our common formula
int centerWidth = (aW - w) / 2;
int centerHeight = (aH - h) /2;
This works well for objects you know (their width and height).
Text centering
If you want to center text, you can use FontMetrics class, which allows you to measure size of text.
So im trying to get the whole area of the viewport and then use the coordinates to draw images in the camera's viewport. So if the camera moves I can fill it with one image the length and the width of the viewport:
I just want the take the gray area in the picture (which is the camera's viewport) and fill it with this image.
So no matter what the camera's x and y coordinates are it will continue drawing the bottom image giving the effect of an infinite space and also the effect of moving.
EDIT:
Code I've tried so far
TextureRegion bg = ...;
int imageWidth = bg.getRegionWidth();
int imageHeight = bg.getRegionHeight();
batch.begin();
for (int x = 0;x<(camera.viewportWidth / imageWidth) + 2;x++) {
for (int y = 0;y<(camera.viewportHeight / imageHeight) + 2;y++) {
batch.draw(bg, ((camera.position.x - camera.viewportWidth / 2) + ((x - 1) * imageWidth)), ((camera.position.y - camera.viewportHeight / 2) + ((y - 1) * imageHeight)));
}
}
batch.end();
EDIT 2:
Thinking about getting the viewport area of the camera and adding tiles to a list that are viewable in the viewport area. Then as the camera moves remove the ones out of the list that are out of view and when a new area comes into view add new tiles. Then render all the tiles in the list.