I've spent several hours trying to work around this issue... when rendering really simple shape (ie. a cube with very low complexity) and using a texture map feature of Three.js, when you rotate the cube the image seems to be distorted while in rotation, and then you can see a line which runs across the surface of the cube which appears as distortion.
http://screencast.com/t/VpSPRsr1Jkss
I understand that is a limitation of canvas rendering - but it seems like this is is a really simple thing to do - rotate a cube that has an image on one face without the distortion.
Is there another canvas library or approach i can take? I was really looking forward to using Three.js for animating some logos and other elemnets - but we can't have distortion like that in a logo or a customer facing landing page.
Thanks for reading, I'm open to suggestions here.
I don't accept increasing the complexity of the face as a solution because that just distributes the distortion through out the face. I really just want to render the image to a flat surface and be able to rotate that object.
The distortion you see is because only two triangles make that plane.
A quick fix is to have more detailed plane.
If you are using PlaneGeometry, increase the number of segments.
If you are using CubeGeometry, increase the number of segments on the plane you need (2 out of 3).
It will take a bit of fiddling to find the best balance between a decent look and optimal performance (as more segments will require more computing). Hopefully for simple scene you'll get away with no major delays.
Related
I'll start with the pictures:
Comparison Of Different Publishing Methods From Flash CC
It seems like there is a huge difference between what's published by through Flash CC HTML5 with CreateJS and what's actually created on the program although they are exact copies (I'm not talking about the pose of the character)
The shapes making up the body parts are all triangles with a solid fill and no stroke.
However, in the HTML5 published versions it looks like all those shapes now have a thin transparent stroke around them in between each other.
Any explanation or official support is greatly appreciated!
UPDATE:
The accepted answer definitely improved some of the problem but unfortunately not enough.
Since it's a platform limitation, I decided to work around it by doubling up all the assets of every layer and minutely overlapping them as best as I can.
Here's a link of the work around being implemented if you wanted an update:
link
This is an unfortunate issue with Canvas. The SWF format actually draws lines with fills on both sides, which enables the SWF (and Flash/Animate IDE) to create seamless edges when drawing shapes with edges that line up. Canvas can not do that, so the antialiasing causes the effect you are seeing.
A possible approach would be to cache it at a larger size, and scale it down.
var bounds = character.nominalBounds; // Added by Flash export
character.cache(bounds.x, bounds.y, bounds.width, bounds.height, 2);
The last parameter is the cache scale factor (in this case it doubles the cache size). It will still draw at the expected scale though.
I made a quick sample to show the difference, and it does help. Note that caching is also a good way to get rid of aliasing on edges. You can download the sample here. Uses Adobe Animate 2016.
Plain shapes exported from Adobe Animate
Cached the shape container
Doubled the cache size
You also might want to consider dropping in a shape behind it that is closer to the color of the shapes, so if the edges show through, it is not the dark grey background.
Ok I am developing a game using Libgdx and everything was fine until I noticed that when my character moves, its texture becomes slightly blurred at the edges, as if it is blending in with the background in the android version. There seems to be a slight graininess to the image as well which becomes more noticeable when it moves. I THINK these problems might be related to texture filtering, but wanted to come on and ask here to see if anyone had experienced this before. Any insight appreciated.
EDIT: Here is an the image, you can see it's quite grainy on the whole. When it moves the graininess seems move, it is hard to describe, but it looks as if the pixels on the eater are moving relative to each other slightly.
The way I draw it is pretty straight forward the following is called in my render method:
idleTexture = new Texture(Gdx.files.internal("images/GreenGuy.png"));
spriteBatch.draw(idleTexture, x, y*ppuY,width*ppuX,height*ppuY);
All other work I look at does what I am doing, but I am not totally happy with the results. I have tried changing between linear and nearest filtering but this did not change anything. I have also tried just using a smaller image instead of shrinking a large one, but I still get the same problem of the pixels not remaining relatively static while the character is moving.
I am trying to draw a rough outline of a building in canvas.
I'm achieving the effect below by creating a series of squares for each side, plus the top 'roof' and then drawing them in sequence basically following the Painter's algorithm.
The screenshot on the left is showing how it should look. This is painting each square separately.
To improve performance I want as few .stroke() and .fill() calls as possible so I queue up all the moveTo() and lineTo() calls and paint them all in one big go.
Tests have shown that (at least for lines) this gives a massive performance improvement and I've verified it myself.
Unfortunately as you can see from the right screenshot, when I paint the buildings only once at the end the layering basically gets destroyed. It paints things in a seemingly random order.
Is the canvas supposed to work this way? Why doesn't it draw everything in the order I told it to draw in like the first screenshot?
Does anyone know a good work around for this behaviour?
If you're sending it all the moveTos and lineTos etc as one big batch, it's going to draw them as if you were rendering one large shape (where you'd want to see all the inner strokes).
There's a minor performance penalty for running multiple draw operations, but it's usually not worth making your code harder to understand and debug.
I am working on a map application and I have come across an issue with how my tiles are laying while scaling.
Here is a basic look at my structure:
There is obviously a lot more going on, but you get the idea. Now, I scale the Map App Sprite to zoom in. When that scaling occurs, there is a gap between each tile.
You can see the gap where 4 tiles meet here:
I am caching everything as a bitmap. For each Layer (which all extend Bitmap), I have smoothing set to true and pixelSnapping set to PixelSnapping.ALWAYS (pixel snapping shouldn't help here, but it shouldn't hurt either).
Does anyone have any suggestions on how to fix this issue?
(For the sake of completeness, the Map app is built entirely using AS3 and it is embedded in a Flex app)
Using integers for tile x,y locations and calculating those locations correctly is most likely the fix here, unless the images have seams in them!
The code that calculates and sets the x,y locations would be needed to properly pinpoint the issue in the code.
But, also if you are scaling that container sprite, you would want to ensure that you scale so that the width/height of a tile is an integer value.
For example, if you scale your sprite that contains these tiles, the widths/heights of the individual tiles might not always be integers, therefore creating those seams you see.
What you could do in that case is do your scaling by adjusting your width/height values by integer values, taking into account proportions, as opposed to using scaleX and scaleY on your container sprite.
Without seeing your code it's difficult to be sure, but it is possibly just a visual artifact due to scaling - eg: a 250px wide bitmap scaled to 155% should be rendered at 387.5px wide but thats impossible so its rendered at 388px wide - with the 0.5px part rendered as 1px at 50% alpha to give 'appearance' of 0.5px.
Ensuring scaled bitmaps widths/heights are always integers may solve it?
This looks like a rounding error.
Without code it's hard to know: it would be a great asset to you and us if posted a barebones example of your tiling class. In the process of subtraction you may very well discover your solution.
I'd offer that you should test what happens when you scale and algin four 100x100 bitmap images at various fine grain steps, to detect if it's a Flash rendering issue or a defect in your class.
I hope my English is good enough.
The Problem:
I am developing some canvas game, using context2d. I did a perfomance test to see how well canvas render and stuff.
For painting, the method drawImage was used with some 50x50 jpg preloaded in memory at start.
My test was to instantiate a lot of logic square 50x50 objects moving random in the canvas
with no collission just to see the fps.
main loop was done with interval.
The problem, i noticed low fps when about 3000 random 50x50 on the screen, well i know the more you render, the less framerate. But i wanna ask something.
The question:
Is a good idea render every logic object in the canvas screen alone?
For example, with no collision, if i overlap two 50x50 in the same position, or almost the same position, the visible output is something lesser than (50·50)2 pixels, but i am drawing (50·50)2 pixels using drawimage for each element in the main loop.
Hope you guys understand the problem and the question.
Render alternatives? some logic techniques to archieve this instead of rendering every object alone?
I understand what you are asking, you are asking maybe you should try and rendering the collisions so you don't have to draw twice. Well frankly, I think you'd be better off just drawing the second square on top of the first one, and I'll tell you why:
Your logic will probably take more actions to determine the amount of overlapping and drawing the more complex shape, then actually drawing it.
So in my opinion, you'd be better off not testing for collisions in this one.
People, correct me if I'm wrong.
Definitely just draw. The bitblt (pixel copy) is optimized and will certainly be faster than collision logic between sprites. However, the one exception is possibly testing for off-screen sprites. This is a fast test because you're only checking against the screen bounds, that is, if a sprite is off the screen. If you have 10,000+ sprites, and many are off-screen most of the time - for example when zoomed in - then the test is worth it.. If they're always on screen, then just draw.