I am making a simple platformer with a tile-based map. However, when the camera moves there is white flickering which I think occurs along the tile boundaries, but it is hard to tell because they flicker quickly.
What I have tried:
adding padding to my Tileset. I have 4px padding around each tile, so it's not image bleeding.
setting the TextureFilter to nearest. It was never on anything else, so Linear wasn't the culprit.
Casting the camera position to an int. While this doesn't fix the flickering it also makes my camera jerky, so this is the worst possible solution.
Setting config.useCPUSync to false and config.vSync to true. While I have set vSync to true I can't set CPUSync to false because, as far as I am aware, this is no longer an option. I get a compile time error when I try.
I am just displaying the map by calling TiledMapRendere.render(), so I don't know if the padding from my Tileset or my Nearest TextureFilter are actually being applied correctly, but that is the only possible issue in my rendering process I can think of.
Any other ideas?
Edit:
So I tried rendering manually and I learned a few things.
Even if I cast every coordinate for each tile to an int and every coordinate in the camera, there is still flickering, so that is defiantly not the answer. However, I then set the TextureFilter on each tile to Linear and that DID solve the flickering, but I don't like how the textures look so it's not really a solution.
This took me forever to figure out: everywhere else I looked gave the solutions I tried above.
What I eventually did is extruded the outer pixels by 1 the same way I would have if I expected there to be blur. I think this worked because when the tiles were scaled, the application sometimes had to choose whether to use the outer pixel or a transparent pixel (my margins) and chose a transparent pixel. So now, the margin around each tile is just another pixel of the same color, so if it chooses that pixel it looks the same to us.
Related
Background
I am creating an application where I manually lay out a texture atlas. The whole point is that the image itself isn’t supposed to be transparent—it has a consistent background color that is then supposed to be removed in the code.
The problem I’m having is that I can’t seem to be able to remove pixels—make them transparent—from the Pixmap I’m working on. I’ve made sure to use RGBA_8888 for my Pixmap’s Format, which is sure to support transparency.
Problem
Here’s the piece of code I’m having trouble with:
pixmap.drawPixel(x, y, 0x00000000);
Quite obviously, 0x00000000 would be zero—even if converted from hex to base ten—seriously, it’s the same number!
From my observations, I’ve noticed that the drawPixel method draws a pixel onto the current one. What I want is for it to become transparent. Using the aforementioned piece of code, it draws transparency onto something that isn’t transparent—ending up changing nothing. As if you add nothing to something, the something remains.
Research
As usual, I’ve done some research on my own. Here on Stackoverflow I haven’t managed to find anything of use. The only things I know is the things mentioned above that I’ve managed to find out by observing the Pixmap and its drawPixel method.
Moreover
Perhaps someone can point me in the right direction as to how you’d make a pixel of a Pixmap transparent?
As you already discovered, you can't draw a blended transparent pixel over the existing pixel, because you can't see anything. So first you need to disable Pixmap blending.
Pixmap.setBlending(Pixmap.Blending.None); // before you start drawing pixels.
pixmap.drawPixel(x, y, 0x00000000);
// And all pixels you want to draw
Pixmap.setBlending(Pixmap.Blending.SourceOver); // if you want to go back to blending
If you want to maintain the RGB of the existing pixel, you have to get the current pixel color and manually black out the alpha component only:
pixmap.drawPixel(x, y, pixmap.getPixel(x, y) & 0xffffff00);
So I am trying to render a sprite with this texture:
However, it renders like this:
In the original texture, every line has a width of 1px. In the rendered texture,the top line seems to have dissapeared from the top and moved to the bottom effectively forming a 2px line. The texture is loaded from a single file, not a sheet.
I have disabled/enabled texture filtering, it did not help.
I have made sure the camera is not zoomed in or out.
I have made sure the texture is not scaled in any way.
I haven't specified any wrap for the texture.
Any ideas as to what may be causing this?
I figured it out!
Seems that this occurs when trying to draw the texture at position with decimals (in my case it was x=580.5), to fix it I had to use Math.round() to ensure that it was a full number.
I thought that LibGdx and/or opengl was capable of rendering with subpixel precision. Weird.
I am attempting to create a "hole in the fog" effect. I have a background grid image, overlapped onto that I have a "fog" texture that I use to show that certain areas are not in view. I am attempting to cut a chunk out of "fog" that will show the area that is currently in view. I am trying to "mask" a part of the fog off the screen.
I made some images to help explain what I am after:
Background:
"Mask Image" (The full transparency has to be on the inside and not the outer rim for what I am going to use it for):
Fog (Sorry, hard to see.. Mostly Transparent):
What I want as a final Product:
I have tried:
Stencil-Buffer: I got this fully working except for one fact... I wasn't able to figure out how to retain the fading transparency of the "mask" image.
glBlendFunc: I have tried many different version of the parameters and many other methods with it (glColorMask, glBlendEquation, glBlendFuncSeparate) I started by using some parameter that I found on this website: here. I used the "glBlendFunc(GL_ZERO, GL_ONE_MINUS_SRC_ALPHA);" as this seemed to be what I was looking for but... This is what ended up happening as a result: (Its hard to tell what is happening here but... There is fog covering the grid in the background. Though, the mask is just ending up as an fully opaque black blob when its supposed to be a transparent part in the fog.
Some previous code:
glEnable(GL_BLEND); // This is not really called here... It is called on the init function of the program as it is needed all the way through the rendering cycle.
renderFogTexture(delta, 0.55f); // This renders the fog texture over the background the 0.55f is the transparency of the image.
glBlendFunc(GL_ZERO, GL11.GL_ONE_MINUS_SRC_ALPHA); // This is the one I tried from one of the many website I have been to today.
renderFogCircles(delta); // This just draws one (or more) of the mask images to remove the fog in key places.
(I would have posted more code but after I tried many things I started removing some old code as it was getting very cluttered (I "backed them up" in block comments))
This is doable, provided that you're not doing anything with the alpha of the framebuffer currently.
Step 1: Make sure that the alpha of the framebuffer is cleared to zero. So your glClearColor call needs to set the alpha to zero. Then call glClear as normal.
Step 2: Draw the mask image before you draw the "fog". As Tim said, once you blend with your fog, you can't undo that. So you need the mask data there first.
However, you also need to render the mask specially. You only want the mask to modify the framebuffer's alpha. You don't want it to mess with the RGB color. To do that, use this function: glColorMask(GL_FALSE, GL_FALSE, GL_FALSE, GL_TRUE). This turns off writes to the RGB part of the color; thus, only the alpha will be modified.
Your mask texture seems to have zero where it is visible and one where it isn't. However, the algorithm needs the opposite, so you should either fix your texture or use a glTexEnv mode that will effectively flip the alpha.
After this step, your framebuffer should have an alpha of 0 where we want to see the fog, and an alpha of 1 where we don't.
Also, don't forget to undo the glColorMask call after rendering the mask. You need to get those colors back.
Step 3: Render the fog. That's easy enough; to make the masking work, you need a special blend mode. Like this one:
glEnable(GL_BLEND);
glBlendEquation(GL_FUNC_ADD);
glBlendFuncSeparate(GL_ONE_MINUS_DST_ALPHA, GL_DST_ALPHA, GL_ZERO, GL_ONE);
The separation between the RGB and A blend portions is important. You don't want to change the framebuffer's alpha (just in case you want to render more than one layer of fog).
And you're done.
The approach you're currently taking will not work, as once you draw the fog over the whole screen, there's no way to 'erase' it.
If you're using fixed pipeline:
You can use multitexturing (glTexEnv) with fixed pipeline to combine the fog and circle textures in a single pass. This function is probably kind of confusing if you haven't used it before, you'll probably have to spend some time studying the man page. You'll do something like bind fog to glActiveTexture 0, and mask to glActiveTexture 1, enable multitexturing, and then combine them with glTexEnv. I don't remember exactly the right parameters for this.
If you're using shaders:
Use a multitexturing shader where you multiply the fog alpha with the circle texture (to zero out the alpha in the circle region), and then blend this combined texture into the background in a single pass. This is probably a more conceptually easy approach, but not sure if you're using shaders.
I'm not sure there's a way you can do this where you draw the fog and the mask in separate passes, as they both have their own alpha values, it will be difficult to combine them to get the right color result.
I'm developing 2D Side Scroll Android Game, using AndEngine.
I have problem with tiles quality.
If I will use DEFAULT texture option, for my texture congaing tiles, it doesn't look perfect, contours ARE NOT smooth, etc:
DEFAULT Texture options, uses such OPEN GL parameters:
new TextureOptions(GL10.GL_NEAREST, GL10.GL_NEAREST, GL10.GL_CLAMP_TO_EDGE, GL10.GL_CLAMP_TO_EDGE, GL10.GL_MODULATE, true);
But lately I realized, that if I will use such parameters (similar to BILINEAR parameters, except last one)
new TextureOptions(GL10.GL_LINEAR, GL10.GL_LINEAR, GL10.GL_CLAMP_TO_EDGE, GL10.GL_CLAMP_TO_EDGE, GL10.GL_MODULATE, true)
graphic looks smooth (i would say perfect, check image below)
Everything would be perfect, but while moving camera (Camera is chasing player) there are visible contours of those sprites, like for example on this screen:
I have been trying to use different OPEN GL parameters, but with no luck. I would be grateful for some help. With DEFAULT texture option, such problem doesn't exist, but quality is bad. Thanks.
Ps: I have been trying to cast integer on my setCenter method inside camera, but with no luck, some people were saying it should help, but it didn't.
This occurs because the function that is used for smoothing out the textures uses pixels that are outside of the pictures on the Texture Atlas. These are black by default so the pixels on the edges are poisoned by the black area outside.
I have temporarily fixed the issue by extending the picture an all sides by 1px and putting there a copy of the adjacent 1px line from the picture. Then I set my TextureRegion to contain only the middle of the picture with the padding being outside. The results are probably not perfect but the lines are no longer noticeable.
I have seen someone on the AndEngine forums say that in the newest version the problem is fixed, so you may try updating.
I'm developing Side Scroll 2D Game, using AndEngine
I'm using their SVG extension (I'm using vector graphic)
But I discovered strange and ugly effect, while moving my player (while camera is chasing player exactly, means while camera is changing its position)
Images of my sprites looks just different, they are like blurred or there is effect like those images would be moving (not changing their possition, just jittery effect, really hard to explain and call this effect properly) Hopefully this image may explain it a bit:
Its more or less, how does it look in the game, where:
a) "FIRST" image is showing square, while player is moving (CAMERA isn't) image looks as it should
b) "SECOND" the same image, but with this strange effect "which looks like image moving/blurring during camera moving [chasing player])
Friend of mine told me that it might be hardware problem:
"the blurring that you notice is actually a hardware problem. Some phones "smooth" the content on the screen to give a nicer feel to applications. I don't know if it's the screen or the graphics processor, but it doesn't occur on my wife's Samsung Captivate. It happens on my Atrix and Xoom though. It's really noticable on the Xoom due to the large screen size."
But seems there is way to prevent it, since I have tested many similar games, where camera is chasing player, and I could not notice such effect.
Is there a way to turn this off in code?
I'm grateful for previous answers, unfortunately, still problem exist.
Till now, I have tried:
casting (int) on setCenter method which is being executed on updateChaseEntity
testing game using PNG images, instead of SVG extension and vector graphic
different TextureOptions
hardwareAcceleration
If someone have different idea, what may cause this strange effect, I would be really grateful for help - thank you.
Some devices (Xperia Play) bleed everywhere when trying to draw things that are moving quickly. For example a red icon on the application list leaves a blur behind it. You could try hardwareAcceleration in the manifest (on and off) to see if it makes a difference.
You'd probably get the same effect if you weren't using svg
When your player's just going to the right and camera begins chasing him, all other sprites except player are moving to the left. Try to print the absolute coordinates of your "blurring" sprite (or some of its anchor points) to the log. The X-coord of sprite should be decreasing linearly. If you notice it's increasing some times, it could be a reason of blur.
Hope this will help.
It sounds like it's due to the camera moving in real increments, making the SVG components rest on non-integer bounds, and the SVG renderer making anti-aliasing come into effect to demonstrate this. Try moving the camera in integer increments by casting camera values to int.
I'm not familiar with this engine but I wonder why would you use vector graphics for pixelated art style. I'll be surprised if your character in the screenshot is really a vector art... maybe it's texture imported in SVG? I attempted back in the day to use flash a few times and I was making the same mistake... I'm not saying it's not possible but it's not intended to create pixel art with flash or any other vector software. There is a reason why most flash games have similar look.
Best way to debug it, is try a different looking sprite.
Maybe it is just the slow response time of your device display.
I'm also an Andengine developer, and never seen such behavior.
Sometimes you fix jittering using FixedStepEngine, it might help.
If you can post your code maybe we can better help you.