Black lines when scaling canvas bitmaps - java

I'm trying to make a Minesweeper game in android to practise using Canvas to draw images.
I'm currently using drawBitmap(image,x,y,antialiasPaint) but, when I resize the board and the tiles become so small, this occurs:
Image
You can see the black lines that appears sometimes between the tiles...
I'm drawing each Tile object using this code.
/**
* #param canvas Canvas directly from View's #Override draw(Canvas canvas)
* #param parentX Parent X position
* #param parentY Parent Y position
*/
public void draw(Canvas canvas, float parentX, float parentY){
canvas.drawBitmap(base,parentX+x,parentY+y, paint);
}
Using a bufferedBitmap like this solves that problem, but it slows a lot the performance rathen than boosting it...
Maybe I'm not doing it well? I'm doing it like this:
private Canvas c = new Canvas();
private Bitmap bufferedImage;
public void zoom(float z){
this.scale *= z;
this.scale = Math.max(0.3f, Math.min(scale, 1f));
this.vWidthScaled = vWidth/scale;
this.vHeightScaled = vHeight/scale;
bufferedImage = Bitmap.createBitmap((int)vWidthScaled, (int)vHeightScaled, Bitmap.Config.ARGB_8888);
}
#Override
public void draw(Canvas canvas){
c.setBitmap(bufferedImage);
grid.draw(c, vWidthScaled, vHeightScaled);
canvas.drawColor(TileStyle.getInstance().getBackgroundColor());
canvas.scale(scale, scale);
canvas.drawBitmap(bufferedImage,0,0,null);
canvas.scale(1/scale, 1/scale);
}
Is there any other solution I can use to solve this?

Related

Java: Apply different textures to cube faces and render image to png with JOGL

I want to render a cube with three faces visible, each of those faces should have a different texture applied to it, which should be easily interchangable. I managed to get this basic code running, that only works with colors.
import com.jogamp.opengl.*;
import com.jogamp.opengl.awt.GLJPanel;
import javax.swing.*;
import java.awt.*;
import static com.jogamp.opengl.GL.GL_MULTISAMPLE;
public class CubeRenderer extends GLJPanel implements GLEventListener {
public static void main(String[] args) {
JFrame window = new JFrame("JOGL Scene");
GLCapabilities caps = new GLCapabilities(null);
CubeRenderer panel = new CubeRenderer(caps);
window.setContentPane(panel);
window.pack();
window.setLocation(50,50);
window.setResizable(false);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setVisible(true);
panel.requestFocusInWindow();
}
private final float rotateX;
private final float rotateY;
private final float rotateZ; // rotation amounts about axes
private int texture;
// Correct orientation -45.0, 150.0, 90.0
public CubeRenderer(GLCapabilities capabilities) {
super(capabilities);
setPreferredSize( new Dimension(500,500) );
addGLEventListener(this);
rotateX = -45.0f;
rotateY = 150.0f;
rotateZ = 90.0f;
}
private void square(GL2 gl, float r, float g, float b) {
gl.glColor3f(r,g,b); // The color for the square.
gl.glTranslatef(0,0,0.5f); // Move square 0.5 units forward.
gl.glNormal3f(0,0,1); // Normal vector to square (this is actually the default).
gl.glBegin(GL2.GL_TRIANGLE_FAN);
gl.glVertex2f(-0.5f,-0.5f); // Draw the square (before the
gl.glVertex2f(0.5f,-0.5f); // the translation is applied)
gl.glVertex2f(0.5f,0.5f); // on the xy-plane, with its
gl.glVertex2f(-0.5f,0.5f); // at (0,0,0).
gl.glEnd();
}
private void cube(GL2 gl) {
gl.glPushMatrix();
gl.glRotatef(180,0,1,0); // rotate square to back face
square(gl,0,1,1); // back face is cyan
gl.glPopMatrix();
gl.glPushMatrix();
gl.glRotatef(-90,0,1,0); // rotate square to left face
square(gl,0,1,0); // left face is green
gl.glPopMatrix();
gl.glPushMatrix();
gl.glRotatef(-90,1,0,0); // rotate square to top face
square(gl,0,0,1); // top face is blue
gl.glPopMatrix();
}
public void display(GLAutoDrawable drawable) {
// called when the panel needs to be drawn
GL2 gl = drawable.getGL().getGL2();
gl.glClearColor(0,0,0,0);
gl.glClear( GL.GL_COLOR_BUFFER_BIT | GL.GL_DEPTH_BUFFER_BIT );
gl.glMatrixMode(GL2.GL_PROJECTION); // Set up the projection.
gl.glLoadIdentity();
gl.glOrtho(-1,1,-1,1,-2,2);
gl.glMatrixMode(GL2.GL_MODELVIEW);
gl.glLoadIdentity(); // Set up modelview transform.
gl.glRotatef(rotateZ,0,0,1);
gl.glRotatef(rotateY,0,1,0);
gl.glRotatef(rotateX,1,0,0);
cube(gl);
}
public void init(GLAutoDrawable drawable) {
// called when the panel is created
GL2 gl = drawable.getGL().getGL2();
gl.glClearColor(0.8F, 0.8F, 0.8F, 1.0F);
gl.glEnable(GL.GL_DEPTH_TEST);
gl.glEnable(GL2.GL_LIGHTING);
gl.glEnable(GL2.GL_LIGHT0);
gl.glEnable(GL2.GL_COLOR_MATERIAL);
gl.glEnable(GL_MULTISAMPLE);
}
public void dispose(GLAutoDrawable drawable) {
// called when the panel is being disposed
}
public void reshape(GLAutoDrawable drawable, int x, int y, int width, int height) {
// called when user resizes the window
}
}
I however could not figure out how to apply texture instead of colors and how to then render the whole cube into a png, as I could not get any of these tutorials to run, as most of them were quite old.
Either merge the 3 images into a single image, create a single texture, bind it, enable texture target and use your texture as a texture atlas by using appropriate texture coordinates (see glTexCoords) or create 3 textures for your 3 images and perform enable/bind/draw/disable for each texture.
Have a look at TextureIO, AWTTextureIO, glBindTexture, glEnable, glDisable and glTexCoord2f.
Please note that my answer assumes that you use the fixed pipeline but using the programmable pipeline would be preferable on the long term. You should use the retained mode (VAOs, VBOs, ...) even though you use the fixed pipeline instead of the immediate mode (glBegin, glEnd, glVertex, ...) in my humble opinion.

LibGdx Understanding the viewports and associtate it with a Scene2D

Whenever I try to set my viewport to a Stage, the actors, that I puting into the Scene are blured and very large. I want to set my Game world size as a rectangle of 50x100 units and then scale everything (Sprites, actors, labels, fonts) according that units. Every state inharitate form a class State which provides render function etc.
public abstract class State {
public static final float GAME_SIZE_WIDTH = 50 ;
public static final float GAME_SIZE_HEIGHT = 100 ;
protected OrthographicCamera camera;
protected GameStateManager gsm;
protected Viewport viewport;
public State(GameStateManager gsm) {
this.gsm = gsm;
camera = new OrthographicCamera();
viewport = new ExtendViewport(GAME_SIZE_WIDTH, GAME_SIZE_HEIGHT, camera);
viewport.apply();
camera.position.set(GAME_SIZE_WIDTH / 2, GAME_SIZE_HEIGHT / 2, 0);
}
public abstract void handleInput();
public abstract void update(float dt);
public abstract void render (SpriteBatch sb);
public abstract void dispose();
public abstract void resize(int width, int height) ;
}
In every State I want to add the Stage and pass the viewPort for my State class according to keep the GAME_SIZE_WIDTH /GAME_SIZE_HEIGHT dimension, but Ive got unadjusted backgrounds (even if its full HD picture the white border on the left) and the Buttons are blured with unadjusted text on it.
public class MenuState extends State implements InputProcessor {
private Skin skin;
private Stage stage;
private Sprite background;
private Table table;
private TextButton startButton,quitButton;
private Sprite flappyButton;
private Sprite chodzenieButton;
private Sprite memoryButton;
private Sprite rememberSquare;
private static final String TAG = "kamil";
private Vector3 touchPoint;
public MenuState(GameStateManager gsm) {
super(gsm);
skin = new Skin(Gdx.files.internal("button/uiskin.json"));
stage = new Stage(viewport);
table = new Table();
table.setWidth(stage.getWidth());
table.align(Align.center | Align.top);
table.setPosition(0,GAME_SIZE_HEIGHT);
startButton = new TextButton("New Game",skin);
quitButton = new TextButton("Quit Game",skin);
startButton.addListener(new ClickListener() {
#Override
public void clicked(InputEvent event, float x, float y) {
Gdx.app.log("Clicked button","Yep, you did");
event.stop();
}
});
table.padTop(5);
table.add(startButton).padBottom(5).size(20,10);
table.row();
table.add(quitButton).size(20,10);
stage.addActor(table);
background =new Sprite(new Texture(Gdx.files.internal("backgrounds/bg.jpg")));
background.setSize(GAME_SIZE_WIDTH,GAME_SIZE_HEIGHT);
background.setPosition(0,0);
touchPoint= new Vector3();
InputMultiplexer im = new InputMultiplexer(stage,this);
Gdx.input.setInputProcessor(im);
flappyButton=new Sprite(new Texture("menuButton/floopyBirdButtonTexture.png"));
chodzenieButton =new Sprite(new Texture("menuButton/swipeMovementsButtonTexture.png"));
memoryButton =new Sprite(new Texture("menuButton/memory.png"));
rememberSquare = new Sprite(new Texture("menuButton/rememberSquare.png"));
rememberSquare.setSize(20,10);
flappyButton.setSize(20,10);
chodzenieButton.setSize(20,10);
memoryButton.setSize(20,10);
flappyButton.setPosition(GAME_SIZE_WIDTH/2-flappyButton.getWidth()/2,GAME_SIZE_HEIGHT/2-flappyButton.getHeight()/2);
chodzenieButton.setPosition(GAME_SIZE_WIDTH/2-flappyButton.getWidth()/2,flappyButton.getY()- chodzenieButton.getHeight() -2);
memoryButton.setPosition(chodzenieButton.getX(),chodzenieButton.getY()- flappyButton.getHeight() -2);
rememberSquare.setPosition(flappyButton.getX(),flappyButton.getY()+flappyButton.getHeight()+2);
}
#Override
public void render(SpriteBatch sb) {
sb.setProjectionMatrix(camera.combined);
sb.begin();
background.draw(sb);
flappyButton.draw(sb);
chodzenieButton.draw(sb);
memoryButton.draw(sb);
rememberSquare.draw(sb);
sb.end();
stage.act(Gdx.graphics.getDeltaTime());
stage.draw();
}
#Override
public void dispose() {
flappyButton.getTexture().dispose();
chodzenieButton.getTexture().dispose();
background.getTexture().dispose();
}
#Override
public void resize(int width, int height) {
Gdx.app.log("kamil","Resize");
viewport.update(width,height);
}
#Override
public void handleInput() {
if(Gdx.input.justTouched())
{
//
viewport.unproject(touchPoint.set(Gdx.input.getX(),Gdx.input.getY(),0));
if(flappyButton.getBoundingRectangle().contains(touchPoint.x,touchPoint.y)) {
gsm.set(new FlopyBirdState(gsm));
}
else if (chodzenieButton.getBoundingRectangle().contains(touchPoint.x,touchPoint.y)){
gsm.set(new ChodzenieState(gsm));
}
else if (memoryButton.getBoundingRectangle().contains(touchPoint.x,touchPoint.y)){
gsm.set(new MemoryState(gsm));
}
else if (rememberSquare.getBoundingRectangle().contains(touchPoint.x,touchPoint.y)){
gsm.set(new FoodEaterState(gsm));
}}
}
blured and very large : This is due to font size you're using.
Blured when some font scaled in appropriate manner, doesn't matter it is by you or by viewport.
You're using 50 and 100 as world width and height of viewport, and you're using BitmapFont from skin that having greater size as compare to 50 and 100. so when you update viewport by screenwidth and height then BitmapFont also scale up so look very large and blurry too.
Solution:
Use some greater world width and height of viewport by comparing your BitmapFont that you're using.
Use small size of your BitmapFont or you can scale down so that not scaled too much and look ugly.
skin.get("font-name",BitmapFont.class).getData().setScale(.25f);
you're using Table so you may need to check where your Actor is in cell/Table. You can enable debugging by this flag stage.setDebugAll(true);
EDIT
You're using ExtendViewport, from wiki
The ExtendViewport keeps the world aspect ratio without black bars by extending the world in one direction. The world is first scaled to fit within the viewport, then the shorter dimension is lengthened to fill the viewport.
Let's suppose you're device width and height is 400 and 640, then what happen when you update viewport by 400 and 640. First your background Sprite scaled in height and set his height to 640(because viewport worldheight is equal to background height) done, now it's time for width of background Sprite because you set width is half of height so scaled and set size 640/2 = 320. done
Your problem arrive, my device width is 400 but my background sprite size is only 320 rest (40*2 unit is white from both side).
Use 48*80(most of devices is in this ratio) instead of 50*100

Fit Viewport Black Bars

I'm currently developing a game where you have to avoid Asteroids. To make the Game look same on every device I use the FitViewport. Unfortunately I somehow get White Bars on the top and on the Bottom instead of Black ones. My Game Background is also white, so it looks a bit weird.
GameScreen:
#Override
public void create()
{
float aspectRatio = (float)Gdx.graphics.getWidth() / (float)Gdx.graphics.getHeight();
cam = new OrthographicCamera();
viewport = new FitViewport(MyGdxGame.WIDTH * aspectRatio, MyGdxGame.HEIGHT, cam);
[...]
}
#Override
public void render(SpriteBatch batch)
{
cam.update();
batch.setProjectionMatrix(cam.combined);
batch.begin();
em.render(batch); //render Ship and Asteroids
[...]
}
#Override
public void resize(int width, int height)
{
viewport.update(width, height);
cam.position.set(MyGdxGame.WIDTH / 2, MyGdxGame.HEIGHT /2, 0);
}
I dragged the Ship into the white Bar.
LibGDX provides viewports as a more convenient way of dealing with different aspect ratios. You don't have to multiply MyGdxGame.WIDTH with aspectRatio. Just initialize it with MyGdxGame.WIDTH and MyGdxGame.HEIGHT.
Also, in resize function, you can change the cam position using viewport values (instead of using constants):
cam.position.set(cam.viewportWidth / 2, cam.viewportHeight / 2, 0);
I found some issues in your code. for best practice while handling with the different screen ratio just try with the fill viewPort. Here is simply editing your code with the fill viewport . Just try it once.
#Override
public void create()
{
float aspectRatio = (float)Gdx.graphics.getWidth() / (float)Gdx.graphics.getHeight();
camera = new OrthographicCamera();
camera.position.set(0, 0, 0);
camera.update();
//1280 is the screen width and 800 is screen height
camera.setToOrtho(false, 1280, 800);
viewPort = new FillViewport(1280, 800, camera);
}
#Override
public void render(SpriteBatch batch)
{
batch.setProjectionMatrix(camera.combined);
batch.begin();
em.render(batch); //render Ship and Asteroids
[...]
}
#Override
public void resize(int width, int height)
{
viewPort.update(width, height);
}
just try with the above code . it will definitely work

Drawing shapes in Scene2d Actor (IE. Image or ImageTextButton)

I haven't worked with LibGdx in a couple of years, but I remember figuring this out at some point. I'm trying to create a button, and use ShapeRenderer to draw a Rectangle around the edge of the button (to outline it).
So far, I've attempted to create my own custom Actor and use ShapeRenderer in the draw method, but it won't update the position of the rectangle, opacity etc. In other words, it doesn't take advantage of any of the Actor class benefits. Is there any way to draw a line or shape using the Actor classes which will then get updated with applied Actions etc?
Here is an example of what I was doing in my custom Actor class:
public class Shape extends Actor {
ShapeRenderer sr;
float x, y, w, h;
public Shape (float x, float y, float w, float h) {
sr = new ShapeRenderer();
this.x = x;
this.y = y;
this.w = w;
this.h = h;
}
#Override
public void draw(Batch batch, float parentAlpha) {
super.draw(batch, parentAlpha);
batch.end();
sr.begin(ShapeRenderer.ShapeType.Line);
sr.setColor(Color.BLACK);
sr.rect(x, y, w, h);
sr.end();
batch.begin();
}}
Any help would be greatly appreciated; thanks in advance!
EDIT 4/21 2:39PM EST
Made recommended changes, shape still doesn't move / rotate with actions. Any other suggestions?
public class Shape extends Actor {
ShapeRenderer sr;
public Shape (ShapeRenderer sr, float x, float y, float w, float h) {
this.sr = sr;
setX(x);
setY(y);
setWidth(w);
setHeight(h);
}
#Override
public void draw(Batch batch, float parentAlpha) {
super.draw(batch, parentAlpha);
batch.end();
sr.begin(ShapeRenderer.ShapeType.Line);
sr.setColor(Color.BLACK);
sr.rect(getX(), getY(), getWidth(), getHeight());
sr.end();
batch.begin();
}}
EDIT 4/21 2:46PM EST
Here's how I'm implementing my custom actor, I add it to a parent group and set actions on the group...
//Generate buttons
ImageTextButton.ImageTextButtonStyle style = new ImageTextButton.ImageTextButtonStyle();
parameter.size = game.labelButtonSize;
style.font = generator.generateFont(parameter);
style.fontColor = Color.BLACK;
buttonYes = new ImageTextButton(Consts.CAMERA_STRING_BUTTON_YES, style);
buttonYes.align(Align.left);
buttonYes.addListener(new ClickListener() {
#Override
public void clicked(InputEvent event, float x, float y) {
Gdx.app.log("TAG", "Clicked Yes");
}
});
Group bY = new Group();
bY.addActor(buttonYes);
bY.addActor(new Shape(sr, buttonYes.getX(), buttonYes.getY(), buttonYes.getWidth(), buttonYes.getHeight()));
bY.addAction(Actions.rotateTo(90, 2));
Actor already has fields for x, y, width, height, and color. You have to use the getter methods to access them. By using your own, you're ignoring the built-in functionality.
Also, you probably want to have only one ShapeRenderer in the whole app because each ShapeRenderer instance has a big vertex data array and compiles a shader.
Note that you create a lot of extra draw calls because you keep having to flush the Batch and the ShapeRenderer for each actor that does this. If your performance begins to suffer, you may want to replace this rectangle with a NinePatch, which you can draw with the Batch.
Alternatively, if you are not using sprites at all, you might consider overriding drawDebug instead of draw so you can use SpriteBatch's built in ShapeRenderer and avoid all the extra flushing.
I have a similar scenario. What I noticed is that I had to take the TransformMatrix from the Batch and apply it to the ShapeRenderer. See code below.
#Override
public void draw(Batch batch, float parentAlpha) {
batch.end();
shapeRenderer.setTransformMatrix(batch.getTransformMatrix());
shapeRenderer.begin(ShapeRenderer.ShapeType.Filled);
Color color = getColor();
shapeRenderer.setColor(color.r, color.g, color.b, color.a * parentAlpha);
shapeRenderer.rect(getX(), getY(), getWidth(), getHeight());
shapeRenderer.end();
batch.begin();
}

Java OpenGL draw offscreen buffer to image

I'm trying to write a java opengl (JOGL) method that writes to an offscreen drawable and then writes that to an image. I have verified this works when using an onscreen drawable as well as GLP buffers, but the output image in its current state is just solid black. The code is below.
GLProfile glp = GLProfile.getDefault();
GLCapabilities caps = new GLCapabilities(glp);
caps.setOnscreen(false);
// create the offscreen drawable
GLDrawableFactory factory = GLDrawableFactory.getFactory(glp);
GLOffscreenAutoDrawable drawable = factory.createOffscreenAutoDrawable(null,caps,null,width,height);
drawable.display();
drawable.getContext().makeCurrent();
// a series of x/y coordinates
FloatBuffer buffer = generateData();
GL2 gl = drawable.getGL().getGL2();
// use pixel coordinates
gl.glMatrixMode(GLMatrixFunc.GL_PROJECTION);
gl.glLoadIdentity();
gl.glOrtho(0d, width, height, 0d, -1d, 1d);
// draw some points to the drawable
gl.glPointSize(4f);
gl.glColor3f(1f,0f,0f);
gl.glEnableClientState(GL2.GL_VERTEX_ARRAY);
gl.glVertexPointer(2, GL2.GL_FLOAT, 0, buffer);
gl.glDrawArrays(GL2.GL_POINTS, 0, numPoints);
BufferedImage im = new AWTGLReadBufferUtil(drawable.getGLProfile(), false).readPixelsToBufferedImage(drawable.getGL(), 0, 0, width, height, true /* awtOrientation */);
ImageIO.write(im,"png",new File("im.png"));
This is a bit old, but I found a solution to the problem that seems to work for me. I just added an ordinary GLEventListener object right before calling .display() on the drawable, as such:
//...
drawable.addGLEventListener(new OffscreenJOGL());
drawable.display();
//Move drawing code to OffscreenJOGL
BufferedImage im = new AWTGLReadBufferUtil(drawable.getGLProfile(), false).readPixelsToBufferedImage(drawable.getGL(), 0, 0, width, height, true /* awtOrientation */);
ImageIO.write(im,"png",new File("im.png"));
The code to draw now should be in your custom OffscreenJOGL class, under the init(...), reshape(...) and display(...) methods. Note that setting the current context must be in the init(...) method of OffscreenJOGL. I get an exception thrown otherwise.
class OffscreenJOGL implements GLEventListener {
public void init(GLAutoDrawable drawable) {
drawable.getContext().makeCurrent();
//Other init code here
}
public void display(GLAutodrawable drawable) {
//Code for drawing here
}
public void reshape(GLAutoDrawable drawable, int x, int y, int width, int height) {
//Called at least once after init(...) and before display(...)
}
public void dispose(GLAutoDrawable drawable) {
//Dispose code here
}
}
Most likely you might have found the required answer for your query.
If not, I suggest to add a line, for example:
gl.glClearColor(GLfloat red, GLfloat green, GLfloat blue, GLfloat alpha)
I have tested it, and it works.

Categories

Resources