So I'm trying to achieve a typewriter effect in WebGL. Currently, I use a 2D canvas to generate the text then I turn that into a texture for WebGL. All that works and the text looks fine. But when I try to do my effect–by adding one character of text to a line and rendering–there is a slight but noticeable jittering of the characters, it seems something to do with the kerning, but I'm not sure.
Is there some setting in canvas that I could use to mitigate this?
Related
I have a rich text label that works fine under a resolution of 1920x1080. However, when scaled down to the resolution on my laptop, which has a 1366x768 resolution, the text on said label becomes janky and malformed.
Some lines are cut off at the top or the bottom, and others are squished (as you can see in the image at lines 3, 6, and 13).
I'm using Godot v3.5.1 and the text font is Noto Sans Regular from here
I tried enabling mipmaps, using the filter, disabling anti aliasing, disabling font oversampling and enabling GPU pixel snap under Project Settings > Rendering > 2D > Snapping. And out of all of those, only the pixel snap setting worked. Completely fixes the issue and the text is rendered properly.
However, this completely breaks an animation of a spinning circle that plays at basically all times during the actual gameplay. It becomes stuttered and shakes instead of the normally smooth animation it has otherwise. I realize this may possibly be fixed by using SVG instead of PNG sprites, but I feel like that's not an ideal solution in case other sprites get added. Especially since my game will also allow community members to add their own sprites for their own game play.
So is there any way to fix the text without breaking the animations, or make it so that the animations don't break with pixel snap enabled?
I am developing a game using Phaser where a user is rendered a triangular canvas. User can crop this canvas to any possible shape by drawing any crop pattern on the canvas. Besides this, i need to get this cropped canvas in suitable data format to be used as an image to render and also trace changes made on this canvas for undoing puspose.
Any help to get this through will be appreciated.
Thanks in advance.
Initial canvas
Canvas after crop
Cropped canvas used to create new canvas
So it's like folding a piece of paper and then cutting it so it looks like a snowflake? Interesting idea.
I think you could either use BitmapData to draw the initial cut out, then copy that bitmap 6 (or 12?) times and rotate and flip x-axis to construct the rest. Though maybe there will be seems, so like small lines, between the parts idk.
Another appproach would be to keep track of the initial cutlines like vectors. Then use math/trigonometry to calculate the result. No idea how to do this though, sorry.
There are three basic ways to move a path in Raphael.
If that path has a fill image that has PNG transparency, and you need IE8 (VML), all three are flawed.
JSBin demo
If you use a simple transform...
path1.animate({transform: 't20,100'},1000);
...then in IE8, the png transparency in the fill breaks and translucent pixels turn black. Edges become pixelated and ugly, and depending on the image you might get a scuffy black outline around the translucent edge of the image. Not good, and there doesn't seem to be any reliable way to fix this after the event.
Sometimes, inconsistently, the background image also doesn't stay relative to the element (more on that below).
If you animate the path attribute, for example like this:
path2.animate({path: Raphael.transformPath( path2.attr('path'), 't100,20') },1000);
...IE8 doesn't wreck the image background. However, the fix for making background images relative to the element not the paper does not work with this method (and various ways I've tried to bodge it using improved background image offset with an additional "M-20,-20" element don't seem to work), and I can't find any way to make that work either.
Also, just having lots of transformations on the go can break the delicate IE8 bug the background image fix depends on in VML mode, causing the background to move. This seems to be inconsistent - with the JSBin above, in IE8, sometimes they all move, sometimes only the top one moves.
If you use translate...
path3.translate(42,42);
...the results are the same as transform (presumably both use the same translate functions).
With Raphael image elements, it's possible to fix this broken alpha by applying opacity with the transform in an attr or animate call. This doesn't work with path fills. Also, turning off the fill and resetting it from the original URL string doesn't remove the broken alpha contamination. You can see this in this demo.
So, I'm looking for a way to move a Raphael path that has a background image that has PNG transparency that a) keeps the image relative to the element, consistently and b) doesn't wreck the PNG transparency in IE8 by turning partial transparency into pixelated black.
Similar problems occur with any form of transformation - such as scale, rotate etc.
I can't find any good answer to this: the closest I've found is an ugly but functional workaround for IE8 transform (wrapped in if(Raphael.type=='VML')s so you don't spoil things for real browsers):
Before doing any transform to anything that has an alpha transparency PNG / pattern fill, remove the pattern fill (path.attr({fill:'none'});), storing the fill setting like path.data('fill',path.attr('fill'));
After the transform, asynchronously (e.g. wrapped in setTimeout(function(){ })) re-apply the fill e.g. path.attr({fill: path.data('fill')});
The crucial thing seems to be: the fill must not be applied when the transform occurs, else it'll be ruined forever, even if you remove and re-apply it. Be careful with the timing on this - it mustn't be possible for the fill to re-apply before the transform completes (e.g. watch out for race conditions with animations or other async processes).
If you're animating a transform, your options seem to be to either:
Clear the fill before the animation, just accept that there will be no fill while the animation takes place, and re-set in a callback after the animation completes
Implement your own animation handler than removes and re-applies the fill before and after every frame (this, of course, risks being a performance nightmare).
I'm trying to understand how Paperjs works and I would like to know if it's possible to write text vectors, if yes how?
I tried Raphael.js before this, and I was almost satisfied with it but it seems that Paperjs is more (cross)browser compliant for some reasons, right?
Some examples would be nice!
Thanks for your answers.
Yes, it is definitely possible to create texts in paper.js.
var awesometext = new paper.PointText();
awesometext.content='awesome';
paper is better than raphael because its canvas based. Canvas is better supported on mobiles/tabs and hence the advantage of paperjs. However, since canvas is just a bitmap implementation, zooming will make canvas renderings not so good compared to svg renderings like in raphael.
So, it depends on what your priorities are for your application..
Paperjs handles text-scaling well, but it uses canvas' native methods to render the characters, so you can't access the vector data once they're drawn. But I imagine you'd only want vector characters to manipulate their shape, for example, morphing one letter into another, or creating a font editor.
If you just want hi res text then paperjs can do that no problem... or you could just set a bigger font size.
If you want to render text as vectors in paperjs, have a look at https://nodebox.github.io/opentype.js/
I have a multiviewport OpenGL modeler application. It has three different viewports : perspective, front and top. Now I want to paint a label for each viewport and not succeeding in doing it.
What is the best way to print a label for each different perspective?
EDITED : The result
Here is the result of my attempt:
I don't understand why the perspective viewport label got scrambled like that. And, Actually I want to draw it in the upper left corner. How do I accomplished this, because I think it want 3D coordinate... is that right? Here is my code of drawing the label
glColor3f(1,0,0);
glDisable(GL_DEPTH_TEST);
glDepthMask(GL_FALSE);
glRasterPos2f(0,0);
glPushAttrib(GL_LIST_BIT); // Pushes The Display List Bits
glListBase(base - 32); // Sets The Base Character to 32
glCallLists(strlen("Perspective"), GL_UNSIGNED_BYTE, "Perspective"); // Draws The Display List Textstrlen(label)
glPopAttrib();
I use the code from here http://nehe.gamedev.net/data/lessons/lesson.asp?lesson=13
thanks
For each viewport switch into a projection that allows you to supply "viewport space" coordinates, disable depth testing (glDisable(GL_DEPTH_TEST)) and depth writes (glDepthMask(GL_FALSE)) and draw the text using one of the methods used to draw text in OpenGL (texture mapped fonts, rendering the full text into a texture drawing that one, draw glyphs as actual geometry).
Along with #datenwolf's excellent answer, I'd add just one bit of advice: rather than drawing the label in the viewport, it's usually easier (and often looks better) to draw the label just outside the viewport. This avoids the label covering anything in the viewport, and makes it easy to get nice, cleanly anti-aliased text (which you can normally do in OpenGL as well, but it's more difficult).
If you decide you need to draw the text inside the viewport anyway, I'll add just one minor detail to what #datenwolf said: since you generally do want your text anti-aliased (even if the rest of the picture isn't) you generally want to draw the label after all the other geometry of the picture itself. If you haven't turned on anti-aliasing otherwise, you generally will want to turn it on for drawing the text.