I have a background image I am drawing with open gl 1.0 es.
The problem is when I draw this small image to the big screen I get this…
The lines / breaks in pattern are not suppose to be there. I have tried a lot of things, I thought maybe my atlas was wrong… doubt it. I draw it from (0, 0, 50, 50) which is (x, y, width, height). Checked this a lot and still get the same result, it is as it should be.
Tried different things with my for loop which is below…
GL10 gl = this.glGraphics.getGL();
gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
guiCam.setViewportAndMatrices();
gl.glEnable(GL10.GL_TEXTURE_2D);
// Set background color //
batcher.beginBatch(Assets.mainmenuAtlas);
for(int x = Assets.mmbackgroundPattern.width / 2; x < this.scale.getWidth() + Assets.mmbackgroundPattern.width / 2; x += Assets.mmbackgroundPattern.width) {
for(int y = Assets.mmbackgroundPattern.height / 2; y < this.scale.getHeight() + Assets.mmbackgroundPattern.height / 2; y += Assets.mmbackgroundPattern.height) {
batcher.drawSprite(x, y, Assets.mmbackgroundPattern.width, Assets.mmbackgroundPattern.height, Assets.mmbackgroundPattern);
}
}
The viewport & matrices is:
public void setViewportAndMatrices() {
GL10 gl = glGraphics.getGL();
gl.glViewport(0, 0, glGraphics.getWidth(), glGraphics.getHeight());
gl.glMatrixMode(GL10.GL_PROJECTION);
gl.glLoadIdentity();
gl.glOrthof(position.x - frustumWidth * zoom / 2,
position.x + frustumWidth * zoom/ 2,
position.y - frustumHeight * zoom / 2,
position.y + frustumHeight * zoom/ 2,
1, -1);
gl.glMatrixMode(GL10.GL_MODELVIEW);
gl.glLoadIdentity();
}
When I draw sprites:
public void endBatch() {
vertices.setVertices(verticesBuffer, 0, bufferIndex);
vertices.bind();
vertices.draw(GL10.GL_TRIANGLES, 0, numSprites * 6);
vertices.unbind();
}
public void drawSprite(float x, float y, float width, float height, TextureRegion region) {
float halfWidth = width / 2;
float halfHeight = height / 2;
float x1 = x - halfWidth;
float y1 = y - halfHeight;
float x2 = x + halfWidth;
float y2 = y + halfHeight;
verticesBuffer[bufferIndex++] = x1;
verticesBuffer[bufferIndex++] = y1;
verticesBuffer[bufferIndex++] = region.u1;
verticesBuffer[bufferIndex++] = region.v2;
verticesBuffer[bufferIndex++] = x2;
verticesBuffer[bufferIndex++] = y1;
verticesBuffer[bufferIndex++] = region.u2;
verticesBuffer[bufferIndex++] = region.v2;
verticesBuffer[bufferIndex++] = x2;
verticesBuffer[bufferIndex++] = y2;
verticesBuffer[bufferIndex++] = region.u2;
verticesBuffer[bufferIndex++] = region.v1;
verticesBuffer[bufferIndex++] = x1;
verticesBuffer[bufferIndex++] = y2;
verticesBuffer[bufferIndex++] = region.u1;
verticesBuffer[bufferIndex++] = region.v1;
numSprites++;
}
Here are my texture and texture regions:
public TextureRegion(Texture texture, float x, float y, float width, float height) {
this.u1 = x / texture.width;
this.v1 = y / texture.height;
this.u2 = this.u1 + width / texture.width;
this.v2 = this.v1 + height / texture.height;
this.texture = texture;
this.width = (int) width;
this.height = (int) height;
}
public class Texture {
GLGraphics glGraphics;
FileIO fileIO;
Bitmap img;
String fileName;
int textureId;
int minFilter;
int magFilter;
public int width;
public int height;
public Texture(GLGame glGame, String fileName) {
this.glGraphics = glGame.getGLGraphics();
this.fileIO = glGame.getFileIO();
this.fileName = fileName;
try {
load(BitmapFactory.decodeStream(this.fileIO.readAsset(fileName)));
} catch(Exception e) {
e.printStackTrace();
}
}
public Texture(GLGame glGame, Bitmap img) {
this.glGraphics = glGame.getGLGraphics();
this.fileIO = glGame.getFileIO();
this.img = img;
load(img);
}
private void load(Bitmap bitmap) {
GL10 gl = glGraphics.getGL();
int[] textureIds = new int[1];
gl.glGenTextures(1, textureIds, 0);
textureId = textureIds[0];
gl.glBindTexture(GL10.GL_TEXTURE_2D, textureId);
GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);
setFilters(GL10.GL_LINEAR, GL10.GL_LINEAR);
gl.glBindTexture(GL10.GL_TEXTURE_2D, 0);
width = bitmap.getWidth();
height = bitmap.getHeight();
bitmap.recycle();
}
public void reload() {
if(fileName.equals(null)) {
load(this.img);
} else {
try {
load(BitmapFactory.decodeStream(this.fileIO.readAsset(fileName)));
} catch(Exception e) {
e.printStackTrace();
}
}
bind();
setFilters(minFilter, magFilter);
glGraphics.getGL().glBindTexture(GL10.GL_TEXTURE_2D, 0);
}
public void setFilters(int minFilter, int magFilter) {
this.minFilter = minFilter;
this.magFilter = magFilter;
GL10 gl = glGraphics.getGL();
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, minFilter);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, magFilter);
}
public void bind() {
GL10 gl = glGraphics.getGL();
gl.glBindTexture(GL10.GL_TEXTURE_2D, textureId);
}
public void dispose() {
GL10 gl = glGraphics.getGL();
gl.glBindTexture(GL10.GL_TEXTURE_2D, textureId);
int[] textureIds = { textureId };
gl.glDeleteTextures(1, textureIds, 0);
}
}
I have tried adding and subtracting from the width added and height added, but makes it look worse.
My question is what would you look at to try and fix this problem, I feel very stumped, but I feel like I may have set something wrong in OPENGL. What could I have setup wrong?
I can always provide more code up top, but not exactly sure what you may need.
The image I am re pasting over the whole screen is:
Also the tool I am using to make atlas is found here and I am using the one under the beta tree which is considered build 4. However, I checked the atlas over and it seems just fine.
public class SpriteBatcher {
final float[] verticesBuffer;
int bufferIndex;
final Vertices vertices;
int numSprites;
public SpriteBatcher(GLGraphics glGraphics, int maxSprites) {
this.verticesBuffer = new float[maxSprites*4*4];
this.vertices = new Vertices(glGraphics, maxSprites*4, maxSprites*6, false, true);
this.bufferIndex = 0;
this.numSprites = 0;
short[] indices = new short[maxSprites*6];
int len = indices.length;
short j = 0;
for (int i = 0; i < len; i += 6, j += 4) {
indices[i + 0] = (short)(j + 0);
indices[i + 1] = (short)(j + 1);
indices[i + 2] = (short)(j + 2);
indices[i + 3] = (short)(j + 2);
indices[i + 4] = (short)(j + 3);
indices[i + 5] = (short)(j + 0);
}
vertices.setIndices(indices, 0, indices.length);
}
public void drawSprite(float x, float y, float width, float height, TextureRegion region, boolean corner) {
if(corner) {
float x1 = x;
float y1 = y;
float x2 = x + width;
float y2 = y + height;
verticesBuffer[bufferIndex++] = x1;
verticesBuffer[bufferIndex++] = y1;
verticesBuffer[bufferIndex++] = region.u1;
verticesBuffer[bufferIndex++] = region.v2;
verticesBuffer[bufferIndex++] = x2;
verticesBuffer[bufferIndex++] = y1;
verticesBuffer[bufferIndex++] = region.u2;
verticesBuffer[bufferIndex++] = region.v2;
verticesBuffer[bufferIndex++] = x2;
verticesBuffer[bufferIndex++] = y2;
verticesBuffer[bufferIndex++] = region.u2;
verticesBuffer[bufferIndex++] = region.v1;
verticesBuffer[bufferIndex++] = x1;
verticesBuffer[bufferIndex++] = y2;
verticesBuffer[bufferIndex++] = region.u1;
verticesBuffer[bufferIndex++] = region.v1;
numSprites++;
} else {
drawSprite(x, y, width, height, region);
}
}
public void present(float deltaTime) {
GL10 gl = this.glGraphics.getGL();
gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
guiCam.setViewportAndMatrices();
gl.glEnable(GL10.GL_TEXTURE_2D);
// Set background color //
batcher.beginBatch(Assets.mainmenuAtlas);
for(float x = 0; x < this.scale.getWidth(); x += Assets.mmbackgroundPattern.width) {
for(float y = 0; y < this.scale.getHeight(); y += Assets.mmbackgroundPattern.height) {
batcher.drawSprite(x, y, Assets.mmbackgroundPattern.width, Assets.mmbackgroundPattern.height, Assets.mmbackgroundPattern, true);
}
}
Can you try using GL_NEAREST filtering instead of GL_LINEAR? You may be getting some linear sampling between your edge pixels and the border color.
Specifically here: