My rendered text appears upside down. I understand that the bottom left corner is position (0,0) and the entirety of my code is based around this. I have a feeling that the reason my text is rendered upside down is because I am using java's awt font class instead of newdawn.slick.Font. Is there a simple way to accomplish flipping is over? I tried using
glScalef(1, -1, 1);
to flip it however that cause everything to stop rendering.
Code below
import static org.lwjgl.opengl.GL11.*;
import java.awt.Font;
import org.newdawn.slick.Color;
import org.newdawn.slick.TrueTypeFont;
public class FontRenderer {
private TrueTypeFont font;
public FontRenderer(){
Font awtFont = new Font("Times New Roman", java.awt.Font.PLAIN, 24);
font = new TrueTypeFont(awtFont, false);
}
public void render(float x, float y, String text){
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
font.drawString(x, y, text);
}
public void render(float x, float y, String text, float r, float g, float b)
{
Color color = new Color(r, g, b);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
font.drawString(x, y, text, color);
}
}
Your fonts are drawing upside down because Slick uses a origin in the top left corner, whereas by default LWJGL uses a origin in the bottom left. You stated that you know your origin is in the bottom left, so why would you expect your rendering code to work?
Related
I have just started with LibGdx and I have figured out how to center text with it. Now I am having trouble with center justifying text. I was wondering if someone can help. I have attach my code for centering. Thank you in advance.
package com.tutorials.game;
import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.GlyphLayout;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
public class TextDemo extends ApplicationAdapter {
SpriteBatch batch;
BitmapFont font;
String myText;
GlyphLayout layout = new GlyphLayout();
#Override
public void create () {
batch = new SpriteBatch();
font = new BitmapFont(Gdx.files.internal("myFont.fnt"));
myText = "I took one, one cause you left me\n"
+ "Two, two for my family\n"
+ "Three, three for my heartache";
layout.setText(font,myText);
}
#Override
public void render () {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
float x = Gdx.graphics.getWidth()/2 - layout.width/2;
float y = Gdx.graphics.getHeight()/2 + layout.height/2;
batch.begin();
font.draw(batch,layout,x,y);//Center Text
batch.end();
}
You can use following setText() method instead and set targetWidth to screen width, Aligh.center, and set wrap to true. Also, set x = 0 so the text is centered across the whole screen.
import com.badlogic.gdx.graphics.g2d.GlyphLayout;
public void setText(BitmapFont font,
java.lang.CharSequence str,
Color color,
float targetWidth,
int halign,
boolean wrap)
Updated example:
#Override
public void create () {
batch = new SpriteBatch();
font = new BitmapFont(Gdx.files.internal("myFont.fnt"));
myText = "I took one, one cause you left me\n"
+ "Two, two for my family\n"
+ "Three, three for my heartache";
layout.setText(font,myText,Color.BLACK,Gdx.graphics.getWidth(),Align.center,true);
}
#Override
public void render () {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
float x = 0;
float y = Gdx.graphics.getHeight()/2 + layout.height/2;
batch.begin();
font.draw(batch,layout,x,y);//Center Text
batch.end();
}
Instead of using the font.draw method, use the following one instead...
public TextBounds drawMultiLine (Batch batch, CharSequence str, float x, float y, float alignmentWidth, HAlignment alignment)
alignmentWidth is the max width you want your text to take up. Any more than that and it will wrap. Set it to something stupidly high if you don't want wrapping.
'alignment' is the key thing and takes an HAlignment enum and can be either LEFT, RIGHT or CENTER
The batch, str, x and y parameters are the same as you're already doing.
I have tried to make a ellipse object in libgdx. Sorry if i can't describe properly but im a newbie in java.
My code looks like:
public class GameScreen implements Screen{
MyGame game;
OrthographicCamera camera;
SpriteBatch batch;
...
Ellipse playBounds;
public GameScreen(MyGame game) {
this.game = game;
camera = new OrthographicCamera();
camera.setToOrtho(false, 1080, 1920);
batch = new SpriteBatch();
state = GAME_READY;
touchPoint = new Vector3();
pauseBounds = new com.badlogic.gdx.math.Rectangle(1080-128,1920-128,128,128);
playBounds= new Ellipse()
}
...
public void render(float delta) {
Gdx.gl.glClearColor(1F, 1F, 1F, 1F);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
camera.update();
generalupdate();
batch.setProjectionMatrix(camera.combined);
batch.begin();
batch.draw(Assets.sprite_bg, 0, 0);
switch (state){
case GAME_READY:{
batch.draw(Assets.sprite_startScreen, 0, 0);
batch.draw(Assets.sprite_playButton,218,800,644,225);
break;
}
Basically it draws background, a welcome screen and a button(with "play" on it)
So here i made a touch detection.
if (Gdx.input.justTouched()) {
camera.unproject(touchPoint.set(Gdx.input.getX(), Gdx.input.getY(), 0));
if (state==GAME_READY);
if (playBounds.contains(touchPoint.x, touchPoint.y)) {
state=GAME_RUNNING;
Drawing works fine but the problem is when i touch the button it doesnt work instead if i touch near it game starts as it should
Alright, ignoring the several errors in the code which I will just assume were made here instead of the actual code, I believe the problem could be that you are not setting the values in the Ellipse. By this I mean the width, height, x, and y.
An nice way to do this would be to use the constructor:
Ellipse(float x, float y, float width, float height)
instead of just :
Ellipse()
That way you can set the values right away. Refer to this website for more info in Ellipses for LibGDX.
If that doesn't solve your problem you may have to post a little more of the relevant parts of your code.
I am trying to display text on the screen and eclipse is telling me that the drawString method does not accept a Color variable. This is my code
import java.awt.Color;
import java.awt.Font;
import org.newdawn.slick.TrueTypeFont;
public class Text {
static TrueTypeFont font;
public static void drawText(int x, int y, String text) {
Font awtFont = new Font("Terminal", Font.BOLD, 24);
font = new TrueTypeFont(awtFont, false);
font.drawString(x, y, text, Color.yellow); //x, y, string to draw, color
}
}
And this is how I call the method.
Text.drawText(10, 10, "randomText");
It is saying that I am not allowed to put Color.yellow, can anyone please tell me what I am doing wrong. This is the error that I get if I try to run it with the color. Note that if I take away the Color it does draw it on the screen.
Exception in thread "main" java.lang.Error: Unresolved compilation problem:
The method drawString(float, float, String, Color) in the type TrueTypeFont
is not applicable for the arguments (int, int, String, Color)
Also if anyone could give an example of how to make a method that takes an z, y, String, and a Color that would help me a lot.
You will either have to change your import to import org.newdawn.slick.Color or use
font.drawString(x, y, text, org.newdawn.slick.Color.yellow);
I have been trying to align my java2d shape's center to the JPanel's center with no success. I was able to do it for an image and many 2D shapes like parallelogram using getBounds method but not for rhombus though all of them follow the same pattern. Drastically, when I prepared an SSCCE out of the actual project I could align none of them correctly.
I've written a drawShape method for drawing shapes on center. I didn't understand where I'm going wrong.
This is SSCCE:
import java.awt.*;
import java.awt.geom.*;
import java.util.*;
import javax.swing.*;
public class TestPanel extends JPanel{
Point a,b,c,d;
Shape trapezium,parallelogram;
Random random=new Random();
public TestPanel(){
a=new Point();
b=new Point();
c=new Point();
d=new Point();
rhombusFactory(a,b,c,d);
trapezium=getQuadrilateral(a,b,c,d);
}
private void rhombusFactory(Point a,Point b,Point c,Point d)
{ int width=random.nextInt(200-100)+100;
int height=random.nextInt(150-50)+50;
a.x=0;
a.y=0;
b.x=a.x+width/2;
b.y=a.y+height/2;
c.x=a.x+width;
c.y=a.y;
d.x=a.x+width/2;
d.y=a.y-height/2;
}
private void parallelogramFactory(Point a,Point b,Point c,Point d){
int l1=random.nextInt(200-100)+100;
int l2=random.nextInt(150-70)+70;
int offset=(random.nextInt(2)==0?-1:1)*(random.nextInt(50-20)+20);
a.x=0;
a.y=0;
b.x=a.x+l1;
b.y=a.y;
d.x=a.x+offset;
d.y=a.y+l2;
c.x=d.x+l1;
c.y=d.y;
}
private Shape getQuadrilateral(Point a,Point b,Point c,Point d){
GeneralPath gp=new GeneralPath();
gp.moveTo(a.x,a.y);
gp.lineTo(b.x,b.y);
gp.lineTo(c.x,c.y);
gp.lineTo(d.x,d.y);
gp.closePath();
return gp;
}
private void drawShape(Graphics2D g,Shape shape){
AffineTransform oldt=g.getTransform();
Rectangle2D bounds=shape.getBounds2D();
double height=bounds.getHeight();
double width=bounds.getWidth();
g.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);
g.setStroke(new BasicStroke(2.0f, BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL));
g.translate(this.getWidth()/2,this.getHeight()/2);
g.translate(-width/2,-height/2);
g.draw(shape.getBounds2D());
g.draw(shape);
g.setTransform(oldt);
}
public void paintComponent(Graphics g2){
super.paintComponent(g2);
Graphics2D g=(Graphics2D)g2;
drawShape(g,trapezium);
//drawShape(g,parallelogram);
}
public static void main(String args[]){
JFrame jf=new JFrame();
TestPanel tp=new TestPanel();
jf.setLayout(new BorderLayout());
jf.add(tp,BorderLayout.CENTER);
jf.setSize(500,500);
jf.setVisible(true);
}
}
Any help would be appreciated
EDIT:
I just removed the confusing lines out of the code...
You need to account for the bounded x/y location of the Shape:
Rectangle bounds=shape.getBounds(); // changed this
...
//g.translate(this.getWidth()/2,this.getHeight()/2);
//g.translate(-width/2,-height/2);
g.translate((this.getWidth() - width) / 2,(this.getHeight() - height) / 2);
g.translate(-bounds.x, -bounds.y); // added this
Your translate is wrong. You should first translate the origin of you drawing space to the center of the panel and then translate the center of your drawing to the origin. You did the latter right, but the first wrong.
Change
g.translate(this.getWidth(),this.getHeight());
g.translate(-width/2,-height/2);
to
g.translate(this.getWidth()/2,this.getHeight()/2);
g.translate(-width/2,-height/2);
Or just
g.translate((this.getWidth() - width) / 2,(this.getHeight() - height) / 2);
EDIT:
In method rhombusFactory(), change that:
a.y=0;
to this:
a.y=height/2;
Short expanation:
In your drawShape() method, you place the graphics context's origin where you assume that the upper left corner of the shape's bounds would be (Point: [(getWidth-width)/2, (getHeight()-height)/2]). In your rhombusFactory() method, you set point a at (0, 0), which consequently shifts your shape's upper left corner at (0,-height/2), effectively causing it's not being vertically centered.
I want to crop an image manually using the mouse.
Suppose the image has some text, and I want to select some text from an image, then
for that purpose I want to crop that area by using the mouse.
The solution I found most useful for cropping a buffered image uses the getSubImage(x,y,w,h);
My cropping routine ended up looking like this:
private BufferedImage cropImage(BufferedImage src, Rectangle rect) {
BufferedImage dest = src.getSubimage(0, 0, rect.width, rect.height);
return dest;
}
There are two potentially major problem with the leading answer to this question. First, as per the docs:
public BufferedImage getSubimage(int x,
int y,
int w,
int h)
Returns a subimage defined by a specified rectangular region.
The returned BufferedImage shares the same data array as the original
image.
Essentially, what this means is that result from getSubimage acts as a pointer which points at a subsection of the original image.
Why is this important? Well, if you are planning to edit the subimage for any reason, the edits will also happen to the original image. For example, I ran into this problem when I was using the smaller image in a separate window to zoom in on the original image. (kind of like a magnifying glass). I made it possible to invert the colors to see certain details more easily, but the area that was "zoomed" also got inverted in the original image! So there was a small section of the original image that had inverted colors while the rest of it remained normal. In many cases, this won't matter, but if you want to edit the image, or if you just want a copy of the cropped section, you might want to consider a method.
Which brings us to the second problem. Fortunately, it is not as big a problem as the first. getSubImage shares the same data array as the original image. That means that the entire original image is still stored in memory. Assuming that by "crop" the image you actually want a smaller image, you will need to redraw it as a new image rather than just get the subimage.
Try this:
BufferedImage img = image.getSubimage(startX, startY, endX, endY); //fill in the corners of the desired crop location here
BufferedImage copyOfImage = new BufferedImage(img.getWidth(), img.getHeight(), BufferedImage.TYPE_INT_RGB);
Graphics g = copyOfImage.createGraphics();
g.drawImage(img, 0, 0, null);
return copyOfImage; //or use it however you want
This technique will give you the cropped image you are looking for by itself, without the link back to the original image. This will preserve the integrity of the original image as well as save you the memory overhead of storing the larger image. (If you do dump the original image later)
This is a method which will work:
import java.awt.image.BufferedImage;
import java.awt.Rectangle;
import java.awt.Color;
import java.awt.Graphics;
public BufferedImage crop(BufferedImage src, Rectangle rect)
{
BufferedImage dest = new BufferedImage(rect.getWidth(), rect.getHeight(), BufferedImage.TYPE_ARGB_PRE);
Graphics g = dest.getGraphics();
g.drawImage(src, 0, 0, rect.getWidth(), rect.getHeight(), rect.getX(), rect.getY(), rect.getX() + rect.getWidth(), rect.getY() + rect.getHeight(), null);
g.dispose();
return dest;
}
Of course you have to make your own JComponent:
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.awt.image.BufferedImage;
import java.awt.Rectangle;
import java.awt.Graphics;
import javax.swing.JComponent;
public class JImageCropComponent extends JComponent implements MouseListener, MouseMotionListener
{
private BufferedImage img;
private int x1, y1, x2, y2;
public JImageCropComponent(BufferedImage img)
{
this.img = img;
this.addMouseListener(this);
this.addMouseMotionListener(this);
}
public void setImage(BufferedImage img)
{
this.img = img;
}
public BufferedImage getImage()
{
return this;
}
#Override
public void paintComponent(Graphics g)
{
g.drawImage(img, 0, 0, this);
if (cropping)
{
// Paint the area we are going to crop.
g.setColor(Color.RED);
g.drawRect(Math.min(x1, x2), Math.min(y1, y2), Math.max(x1, x2), Math.max(y1, y2));
}
}
#Override
public void mousePressed(MouseEvent evt)
{
this.x1 = evt.getX();
this.y1 = evt.getY();
}
#Override
public void mouseReleased(MouseEvent evt)
{
this.cropping = false;
// Now we crop the image;
// This is the method a wrote in the other snipped
BufferedImage cropped = crop(new Rectangle(Math.min(x1, x2), Math.min(y1, y2), Math.max(x1, x2), Math.max(y1, y2));
// Now you have the cropped image;
// You have to choose what you want to do with it
this.img = cropped;
}
#Override
public void mouseDragged(MouseEvent evt)
{
cropping = true;
this.x2 = evt.getX();
this.y2 = evt.getY();
}
//TODO: Implement the other unused methods from Mouse(Motion)Listener
}
I didn't test it. Maybe there are some mistakes (I'm not sure about all the imports).
You can put the crop(img, rect) method in this class.
Hope this helps.
File fileToWrite = new File(filePath, "url");
BufferedImage bufferedImage = cropImage(fileToWrite, x, y, w, h);
private BufferedImage cropImage(File filePath, int x, int y, int w, int h){
try {
BufferedImage originalImgage = ImageIO.read(filePath);
BufferedImage subImgage = originalImgage.getSubimage(x, y, w, h);
return subImgage;
} catch (IOException e) {
e.printStackTrace();
return null;
}
}
This question has not enough information to answer. A general solution (depending on your GUI framework): add a mouse event handler that will catch clicks and mouse movements. This will give you your (x, y) coordinates. Next use these coordinates to crop your image.
You need to read about Java Image API and mouse-related API, maybe somewhere under the java.awt.event package.
For a start, you need to be able to load and display the image to the screen, maybe you'll use a JPanel.
Then from there, you will try implement a mouse motion listener interface and other related interfaces. Maybe you'll get tied on the mouseDragged method...
For a mousedragged action, you will get the coordinate of the rectangle form by the drag...
Then from these coordinates, you will get the subimage from the image you have and you sort of redraw it anew....
And then display the cropped image... I don't know if this will work, just a product of my imagination... just a thought!
I'm giving this example because this actually work for my use case.
I was trying to use the AWS Rekognition API.
The API returns a BoundingBox object:
BoundingBox boundingBox = faceDetail.getBoundingBox();
The code below uses it to crop the image:
import com.amazonaws.services.rekognition.model.BoundingBox;
private BufferedImage cropImage(BufferedImage image, BoundingBox box) {
Rectangle goal = new Rectangle(Math.round(box.getLeft()* image.getWidth()),Math.round(box.getTop()* image.getHeight()),Math.round(box.getWidth() * image.getWidth()), Math.round(box.getHeight() * image.getHeight()));
Rectangle clip = goal.intersection(new Rectangle(image.getWidth(), image.getHeight()));
BufferedImage clippedImg = image.getSubimage(clip.x, clip.y , clip.width, clip.height);
return clippedImg;
}