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.
Related
So I need to make a simple game for a project, and the StdDraw from princeton library was provided.
From looking through the source code it seems like the library handles animation by drawing on two (for double buffering) BufferedImages and then displays on on a JFrame. To increase the window size the BufferedImage is simply increased in size and the drawings scaled up. But this causes severe lag and screen tear when going above say 700x700 pixels.
I don't know enough about Java to know if this is the most efficient method of doing animation but there must be a way to animate a simple triangle fullscreen without lag. I can easily edit the library or even just write my own if someone could give me some pointers on what is the best way to handle animation.
Google drive for StdDraw.java if anyone wants to look
For reference the effect I'm going for is this:
I'm working in Processing 3, NOT p5.js.
I've looked around processing forums, but i can't find anything that works in the current version or doesn't use PGraphics and a mask which from what I've read can be expensive to use.
My current ideas and implementations have resulted to drawing shapes around the player and filling the gaps in with a circles with no fill that has a large stroke weight.
Does anyone know of any methods to easily and inexpensively draw a black background over everything except a small circular area?
If this is the wrong place to ask this question just send me on my way I guess, but please be nice. Thank you:)
You could create an image (or PGraphics) that consists of mostly black, with a transparent circle in it. This is called image masking or alpha compositing. Doing a Google image search for "alpha composite" returns a bunch of the images I'm talking about.
Anyway, after you have the image, it's just a matter of drawing it on top of your scene wherever the player is. You might also use the PImage#mask() function. More info can be found in the reference.
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.
Yesterday I tried to solve a Problem I had the entire Day and it is still unsolved. I searched for every combinations of words I could imagine to find solutions on Google etc. But without success. :(
The Problem consists of following idea:
I started programming GLES20 (Not GLES10!) on Android. There are many other ways how to compute matrixes and objects. So there aren't any methods like "Pop" or "push" Matrix.
I want to rotate a globe/sphere only by touching and moving my fingers. Touching functions etc works fine but the rotation itself never does. Everytime I first rotate by x-axis and then rotating by y-axis the rotation is still computed by local space axis of the object and Not two global axis. This happens whatever I do... :/
There are some people searching the solution for the Same Problem, but mostly GLES10 or completly different programming languages, never GLES20 and Java.
I will also post some Code parts later, when I get access to a Computer.
perhaps someone already understands what my Problem is.
Thank you so much! :)
Chrise
In OpenGL ES 2.0 there aren't any of the matrix functions and you're supposed to take care of your own matrices. So, for pushing and popping matrices what you need to do is when you're drawing you copy your matrix to a temporary one, do whatever transformation on it and pass the temporary matrix to the vertex shader.
I'm currently developing my first Android app and am having some issues rendering images. The image itself is great quality to begin with, but upon rendering it the quality drastically lowers. Edges become jagged and it just looks poorly done. Everyone I've showed it to thus far has almost immediately noticed it, without any prompting about it. [start on left, end on right:]
I'm trying everything I am aware of and every tip I've been able to find by looking around online, but nothing seems to fix it.
Currently, I get the image as a Bitmap and scale it:
Bitmap holeImage = BitmapFactory.decodeResource(res, R.drawable.hole_image);
Bitmap holeImageBMP = Bitmap.createScaledBitmap(holeImage, width, height, true);
Once I have the image, I create a Paint, set a few smoothing attributes to true, and then draw it on the canvas:
Paint smoothingPaint = new Paint();
smoothingPaint.setAntiAlias(true);
smoothingPaint.setFilterBitmap(true);
smoothingPaint.setDither(true);
canvas.drawBitmap(holeImageBMP, 0, 0, smoothingPaint);
Yet, as you can obviously see above, the image quality drastically decreases. I've seen plenty of images being rendered beautifully and I'm honestly just not sure what's going on so any advice would be great!
Other notes: I'm using a SurfaceView method to handle the drawing, similar in nature to the LunarLander example given in the SDK.
Thanks again!
If you aren't restricted to much less colors than the original picture has (Does Android have 256 color modes?), I'd suggest to disable dithering, if you zoom into your picture, it does have a visible effect that perhaps destroys a smooth look.
I think in your case, dithering infers with anti-aliasing by destroying the additional colors that anti-aliasing needs for a smooth look. A quick color count on your pictures (left one about 850, right one about 140) confirms this.
That is probably related to converting images from one format to another. Also, android screens vary from device to device. Try to use another device and it might look better... Almost for sure it will have a different tone.
Try to read this great article on this problem (and banding and dithering) and consider adapting the image you created for it to work better in android devices: http://www.curious-creature.org/2010/12/08/bitmap-quality-banding-and-dithering/