I'm trying to make a simple farming game, just to practice godot things, but I'm not an artist (at all) and the best I can make is the most simple bare-bones 16x16 OR 32x32 tiles ever to exist (I could try to go for something like 48x48 but I prefer not to suffer much). Issue is, I need to flash labels here and there, but considering how small everything is, the text just looks extremely big.
I've tried some fonts, like FFF, Spectrum and 1 more that I can not remember, but looks like the "best" font size would be 10-12 for me (and every font looks blurry/hard to read with this size).
So my question is, what sizes do you guys (usually) use, and what should I, an art-dummy work with? Considering I'm using aseprite (lovely little thing) and really just want to learn and practice.
Videos
Was just hoping 5 years later they added an official way to fix this problem?
Well... not more than a few months ago, more text modifiers have been added to the canvas API, among which ctx.textRendering, which is basically the equivalent of SVG's text-rendering.
So, none of the options will really force turning off anti-aliasing, but you will certainly have better results using textRendering = "geometricPrecision".
Also, this is currently only being supported by Chromium based browsers ... and only with the chrome://flags/#enable-experimental-web-platform-features turned on.
const label = document.querySelector( "label" );
const canvas = document.querySelector( "canvas" );
const ctx = canvas.getContext( "2d" );
if( !ctx.textRendering ) {
console.warn( `Your browser doesn't support the textRendering property on Canvas
If you are on Chrome be sure to enable chrome://flags/#enable-experimental-web-platform-features` );
}
let state = 0;
const states = [
() => {
label.textContent = "optimizeLegibility";
ctx.textRendering = "optimizeLegibility";
drawText();
},
() => {
label.textContent = "geometricPrecision";
ctx.textRendering = "geometricPrecision";
drawText();
},
() => {
label.textContent = "difference";
ctx.textRendering = "optimizeLegibility";
drawText();
ctx.globalCompositeOperation = "xor";
ctx.textRendering = "geometricPrecision";
drawText();
ctx.globalCompositeOperation = "source-over";
}
];
document.fonts.load( "120px pixel" ).then( begin );
function begin() {
ctx.clearRect( 0, 0, canvas.width, canvas.height );
ctx.font = "120px pixel";
states[ state ]();
state = (state + 1) % states.length;
setTimeout( begin, 1000 );
}
function drawText() {
ctx.textBaseline = "top";
ctx.fillText( "TESTING", 0, 0 );
}
@font-face {
font-family: pixel;
src: url("https://dl.dropboxusercontent.com/s/hsdwvz761xqphhb/pixel.ttf");
}
<label></label><br>
<canvas width="500"></canvas>
For the time being, the best might be to pre-render your texts to bitmap.
textRendering = "geometricPrecision" doesn't do much to improve the result.
You'll have better result using a 3rd party library like opentype.js or by pre-rendering the text as a bitmap.
Please does Anyone know a font on canva that looks like the attached images please
I am working on a project, and it is important for me to know what's being used. However, it doesn't seem to be showcased in the application. Thank you in advance!