shlajin Posted May 21, 2019 Share Posted May 21, 2019 Hey there! I'm trying to scale text during animation (namely – during camera zooming) while keeping it smooth & sharp. Scaling with `.scale` doesn't work well for this case – text gets pixelated, so I went with redrawing the text by changing the text style `fontSize` property. This is slow, but this isn't shown to the user in real-time, so I don't care about FPS during that. The problem with this approach is that text shakes/shivers during the animation. This doesn't happen when I animate `.scale` property and I want to avoid that. So I tried different approach: I created text at maximum fontSize and then shrank it down via scale and animated scale. Shivering almost gone, but some nasty artifacts such as over-sharpness appear when scale is low... so I thought – maybe mipmaps can help me there? I hacked pixi and tried to do this inside Text#updateText: const width1 = Math.ceil((Math.max(1, width) + style.padding * 2) * this.resolution) this.canvas.width = Math.pow(2, Math.round(Math.log(aSize) / Math.log(2))) width1; const height1 = Math.ceil((Math.max(1, height) + style.padding * 2) * this.resolution) this.canvas.height = height1; this impacted text metrics a lot, mangling text positions but I didn't notice any positive change on the text quality. So, maybe I'm doing something completely wrong. What's the correct way of doing this? Thank you in advance! Quote Link to comment Share on other sites More sharing options...
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.