CriticalGames

Veteran
Veteran
Joined
Aug 8, 2014
Messages
220
Reaction score
65
First Language
English
Primarily Uses
Hi,

I'm making a game that uses pixel-perfect graphics, and that extends to the font as well. I used the excellent code that KisaiTenshi created (in this topic: https://forums.rpgmakerweb.com/index.php?threads/how-to-remove-blur.47504/) to remove blur on the actual game itself (characters, tiles, etc.). However, the font still has blur applied. I've included a picture in which you can see the comparison between the blurry font as it appears in RPG Maker MV(on the top) and the pixel-perfect font (on the bottom).

Font Example.png

The blur isn't too bad in windowed mode, but it's very noticeable in full-screen.

Unfortunately, while I found a handful of topics that mentioned this issue, I didn't really find many answers. I tried using the SFont Victor Engine plugin (https://victorenginescripts.wordpress.com/rpg-maker-mv/sfont/), however I couldn't get the SFont working correctly in terms of sizing and spacing (and it seemed to randomly add 1 pixel's width to certain alphanumerical characters, ruining the overall effect). Frankly, I'd much rather just remove the blur in the RPG Maker MV engine. That seems like it should be possible, but MV has proven me wrong on that score several times in the past =P

I've been head-butting this brick wall for a while now haha, so if anyone has any ideas, I would sincerely appreciate it =)

Thanks in advance!
 

mogwai

1984
Veteran
Joined
Jun 10, 2014
Messages
875
Reaction score
596
First Language
English
Primarily Uses
RMMV
I found a topic that talks about full-screen blurring. https://forums.rpgmakerweb.com/index.php?threads/how-to-remove-blur.47504/

This is the information I gather from that thread.
PHP:
@font-face {
    font-family: GameFont;
    src: url("pixelated_game_font.ttf");
    image-rendering: pixelated;
    font-smooth: none 0px !important;
}
CANVAS{
  image-rendering: pixelated;
}
Add this to your fonts/gamefont.css ^
PHP:
Object.defineProperty(Bitmap.prototype, 'smooth', {
    get: function() {
        return false; // this._smooth;
    },
    set: function(value) {
        if (this._smooth !== value) {
            this._smooth = value;
            if (0) {//(this._smooth) {
                this._baseTexture.scaleMode = PIXI.SCALE_MODES.LINEAR;
            } else {
                this._baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;
            }
        }
    },
    configurable: true
});
This ^ will remove any bitmap.smooth = true;

EDIT3: I played around with the information in that topic and it seems to make everything pixelated perfectly, but the text still has some anti-aliasing.

I corrected the problem using a script I made that does a repeat-layer trick that I use in GIMP to solidify the anti-aliasing.

Screen%20Shot%202017-02-25%20at%204.00.01%20PM.png

PHP:
Bitmap.prototype._drawTextOutline = function() { // only use to get rid of text stroke
   return;
};
Bitmap.prototype._drawTextBody = function(text, tx, ty, maxWidth) {
    var context = this._context;
    context.imageSmoothingEnabled = false;
    context.fillStyle = this.textColor;
    for(var i = 0; i < 12; i++) // repeat the layer 12 times like in GIMP
       context.fillText(text, tx, ty, maxWidth);
};
Do you see what I did there ^ ?
 
Last edited:

Kest

The Ecstasy of Gold
Veteran
Joined
Dec 4, 2014
Messages
148
Reaction score
25
First Language
English
How do I use those last two code blocks? I tried saving them in a plugin but still getting blurred text with outlines.
 
Last edited:

CriticalGames

Veteran
Veteran
Joined
Aug 8, 2014
Messages
220
Reaction score
65
First Language
English
Primarily Uses
I found a topic that talks about full-screen blurring. https://forums.rpgmakerweb.com/index.php?threads/how-to-remove-blur.47504/
Etc.

Thank you very much for the detailed response mogwai! I'd read that topic as well, and unfortunately none of the solutions provided work. I'm not entirely sure if I used the second piece of code correctly (wasn't sure if I had to also add that to the gamefont.css file or make it a plugin), but neither approach seemed to make a difference.

Creating several layers of text which overlap to 'paste over' the anti-aliasing is a really great idea, but in practice I don't think it looks very good. It makes the text unnaturally chunky (and I found that if I used less layers, it didn't hide the anti-aliasing). Sorry about that =/

But thank you very much - I sincerely appreciate the effort! =)

How do I use those last two code blocks? I tried saving them in a plugin but still getting blurred text with outlines.

Hi Kest. As I said to mogwai, I'm not exactly sure how to use the second code block (as it didn't seem to do anything), but the third one is simple - just put it in a plugin by itself (don't include both code blocks together) and activate it in the plugin manager. As I said above, I don't think the layering effect looks very good, but if you'd like to try it out, hopefully that helps!
 

mogwai

1984
Veteran
Joined
Jun 10, 2014
Messages
875
Reaction score
596
First Language
English
Primarily Uses
RMMV
@CriticalGames _ I noticed about a 1 pixel increase in font size too. Your best bet would be to find the same pixel font you like in a slim or narrow or something. I know they are out there. I took typography in college and I've never seen so many redundant fonts. Padding would also need adjusted so they don't overlap.

How do I use those last two code blocks? I tried saving them in a plugin but still getting blurred text with outlines.
I hate to ask, but did you have the plugin on? I know it is.

Those are function overwrites, so it could conflict with another plugin. If another plugin crashes mine, I'm not sure. I can't imagine you're using another _drawTextOutline plugin you wouldn't know about because you don't want the outline.

I'm uncertain.

@CriticalGames

I've come up with another plugin, but I see this is going to be a too-hot/too-cold situation. This one removes all transparent pixels one by one.

I've been learning pixel manipulation from this tutorial https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
PHP:
Bitmap.prototype._drawTextBody = function(text, tx, ty, maxWidth) {
   var context = this._context;
   context.imageSmoothingEnabled = false;
   context.fillStyle = this.textColor;
   context.fillText(text, tx, ty, maxWidth*2);

   var imageData = context.getImageData(0, 0, this.width, this.height);
   var data = imageData.data;
   for (var i = 0; i < data.length; i += 4) {
       if(data[i + 3] < 200) // if alpha less than
           data[i + 3] = 0;  // set alpha to 0
       data[i]     = data[i];     // red
       data[i + 1] = data[i + 1]; // green
       data[i + 2] = data[i + 2]; // blue
   }
   context.putImageData(imageData, 0, 0);
};
The downside is that it removes all transparent pixels so no transparent text is allowed. It took out my "Continue" from the menu which apparently gets grayed out with opacity.
Screen%20Shot%202017-02-26%20at%206.43.34%20AM.png
It's also doing gross things with my font on resize. It's 100% pixelated, but it's doing some weird shape things.

If you can do script and stuff, for your game, you might want to tweak the alpha 200 boolean and maybe combine this plugin with the layering plugin at lower levels. I can tell this will take some fine tuning.
 
Last edited:

Kest

The Ecstasy of Gold
Veteran
Joined
Dec 4, 2014
Messages
148
Reaction score
25
First Language
English
His second block looks like this (click these to zoom)



His third block does this



Supposed to look like this

 

mogwai

1984
Veteran
Joined
Jun 10, 2014
Messages
875
Reaction score
596
First Language
English
Primarily Uses
RMMV
@Kest
The first two were what I gathered from an older thread. They basically remove anti-aliasing on the graphics but only partially on the text.

I'm still working to perfect a pixel text solution. Try using the first two with my fourth plugin. That one still needs tweaking, but as I can tell from your screenshots, you might have some javascript experience to better perfect it for your game.

Where my other one added to the text and puffed it up, this one subtracts any pixels below 200 opacity and that number might need tweaked a little. 255 is solid opacity.

It may still have some problems if it's removing too many pixels, so you might try adding a small loop before context.fillText too
PHP:
for(var i = 0; i < 2; i++) // repeat the layer 2 times

These two text solutions have pitfalls in opposite directions.

I'll keep tinkering for a better way.
 

CriticalGames

Veteran
Veteran
Joined
Aug 8, 2014
Messages
220
Reaction score
65
First Language
English
Primarily Uses
@mogwai

You've been busy! Thank you very much for looking into this so in-depth. I unfortunately only have the most basic of skills when it comes to scripting/plugins, but I messed around with some of the settings. As you say, neither quite works - but it is *close*. You can see in the example below a few of the settings I tried, and all 3 plugins working together is by far the closest I've got. That extra thickness is a killer, though. I'm not sure if making the font thinner would actually work, as the extra pixel thickness seems to be added in fairly random spots; I can't just consistently remove a pixel's width from each letter.

Font Example 2.png

And just to note, I added the loop into your 'fourth' plugin like you said, so that's what you're seeing above (I think it slightly improved the situation). It also messed up my Continue button as well haha.

I've tried a lot of tinkering with the values, but any manipulation I do seems to get further and further away from the goal (the 3rd example above is the best I've got). As you say, all these approaches have their own pitfalls. So if you can come up with a pixel-perfect method, it'd be greatly appreciated =) But either way, thanks again for going to all this effort!
 

mogwai

1984
Veteran
Joined
Jun 10, 2014
Messages
875
Reaction score
596
First Language
English
Primarily Uses
RMMV
Oh dude. This is making my head spin. I can't wrap my spinning head around this.
Screen%20Shot%202017-02-26%20at%205.15.48%20PM.png

Screen%20Shot%202017-02-26%20at%205.16.28%20PM.png
The line after I set imageSmoothingEnabled to false it returns true. This is some dirt PIXI locked property. EDIT: nevermind it logged false that time. The text is still blurry though.
It was doing that when I had it before fillText... AH...

I can't figure it out.

I think the canvas is using the smaller (like bigger I don't know gl numbers) windowed version of webgl NEAREST when it resizes, but the rest of this images don't do this.

I've actually resorted to playing with w3schools fiddles.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_filltext

This fillText scaling problem seems to be all browsers on all screen zoom.
Screen%20Shot%202017-02-26%20at%205.32.12%20PM.png

Since browser text does not do this (only fillText), Imma ready to just write a jquery DOM version of all the game text.
 
Last edited:

CriticalGames

Veteran
Veteran
Joined
Aug 8, 2014
Messages
220
Reaction score
65
First Language
English
Primarily Uses
@mogwai

Oh man, this is insane XD Some of what you said went over my head, so I could be wrong about this, but as someone who has no interest in making a game that works within a web browser, it's pretty frustrating that that seems to be part of the reason. It just seems like pixel-perfect text should be so simple haha.

But you've done an incredible job breaking all of this down! And as I said with my comparison above, you've gotten so close to fixing it. Hopefully someone might have the final piece of the puzzle, but thank you so much for all your work =)

Actually, just a thought from someone who doesn't really know what he's talking about haha - could you just remove the blur filter entirely from pixi.js? Just I notice from line 27871 onwards, there's a ton of lines about setting up blur. Not sure if this has anything to do with the text or not, but I thought it was worth mentioning.
 

Kest

The Ecstasy of Gold
Veteran
Joined
Dec 4, 2014
Messages
148
Reaction score
25
First Language
English
I'm having the same difficulties as CriticalGames, just so you know

Saw a recent video where the guy seems to have a pixel perfect font and I'm wondering how he managed it.

 

CriticalGames

Veteran
Veteran
Joined
Aug 8, 2014
Messages
220
Reaction score
65
First Language
English
Primarily Uses
I'm having the same difficulties as CriticalGames, just so you know

Saw a recent video where the guy seems to have a pixel perfect font and I'm wondering how he managed it.

Good to know I'm not alone! In regards to the video, it can be hard to tell with Youtube's compression. But I agree, it does look pixel perfect to me as well.
 

CriticalGames

Veteran
Veteran
Joined
Aug 8, 2014
Messages
220
Reaction score
65
First Language
English
Primarily Uses
I think I might've discovered something that could help shed light on the problem. So a big part of the reason that mogwai's previous solution didn't work was because of this weird 1 pixel issue where 1 extra pixel's thickness was added in random spots.
Well, I've just noticed that this issue is also present on tiles and events in full-screen mode. I've got pixel-perfect artwork which appears pixel-perfect in Windowed mode, but then gets the same 1 pixel differential in full-screen mode - messing up the overall look of the game.

The most obvious example I found is with a character's eyes. One eye is clearly wider than the other in this image:
1 Pixel Example.png

Obviously this is a big issue with RPG Maker MV's fullscreen mode if you're making a pixel-perfect game. Does anyone have any ideas about what could be causing this?
 

mogwai

1984
Veteran
Joined
Jun 10, 2014
Messages
875
Reaction score
596
First Language
English
Primarily Uses
RMMV
He probably used PIXI text instead of fillText for all game text. This would require a plugin. I could tinker with this, but something about the way PIXI is used, triggers my dyslexia. I need more docs.

I'm currently doing another RPG Maker thing consuming my time, but I read through the grape vine that this guy has a PIXI text plugin in the making.
 

CriticalGames

Veteran
Veteran
Joined
Aug 8, 2014
Messages
220
Reaction score
65
First Language
English
Primarily Uses
Oooh, good find mogwai! If anyone has any solutions in the meantime, I'd love to hear them. But otherwise, fingers crossed for @Jonforum =P
 

CriticalGames

Veteran
Veteran
Joined
Aug 8, 2014
Messages
220
Reaction score
65
First Language
English
Primarily Uses
Haha, sorry @Jonforum - Mogwai just linked to a post where you mentioned that you were working on a Pixitext, and we were hoping it might give us the ability to remove anti-aliasing and thus use pixel-perfect text =)
 

Trishy

Villager
Member
Joined
Feb 13, 2018
Messages
19
Reaction score
5
First Language
English
Primarily Uses
RMMZ
I think I might've discovered something that could help shed light on the problem. So a big part of the reason that mogwai's previous solution didn't work was because of this weird 1 pixel issue where 1 extra pixel's thickness was added in random spots.
Well, I've just noticed that this issue is also present on tiles and events in full-screen mode. I've got pixel-perfect artwork which appears pixel-perfect in Windowed mode, but then gets the same 1 pixel differential in full-screen mode - messing up the overall look of the game.

The most obvious example I found is with a character's eyes. One eye is clearly wider than the other in this image:
View attachment 59001

Obviously this is a big issue with RPG Maker MV's fullscreen mode if you're making a pixel-perfect game. Does anyone have any ideas about what could be causing this?

the problem is that you're using a native resolution for your game that doesn't match today's resolution standards. I've tried the demo and you're using the default RPG Maker MV's resolution (which is the cause of 99% of the issues people have, along with the damn Canvas setting).

To solve that issue you should have made your game in today's HD resolution, so when you fullscreen it it will go to FullHD resolution (today's standard).

-edit-

Also, your font native size factors into this. If your font's native resolution is 16 (most common size), then you should use a size that's a factor of 2 of 16. Note that some pixel font native sizes are 8, 20, 21, 24, 18... these are some sizes I found.
 
Last edited:

CriticalGames

Veteran
Veteran
Joined
Aug 8, 2014
Messages
220
Reaction score
65
First Language
English
Primarily Uses
the problem is that you're using a native resolution for your game that doesn't match today's resolution standards. I've tried the demo and you're using the default RPG Maker MV's resolution (which is the cause of 99% of the issues people have, along with the dayum Canvas setting).

To solve that issue you should have made your game in today's HD resolution, so when you fullscreen it it will go to FullHD resolution (today's standard).

-edit-

Also, your font native size factors into this. If your font's native resolution is 16 (most common size), then you should use a size that's a factor of 2 of 16. Note that some pixel font native sizes are 8, 20, 21, 24, 18... these are some sizes I found.

Hi Trishy,

I figured out how to use the SFont Victor Engine Plugin a while ago, but thank you very very much for your response regardless! That wasn't entirely the problem (pixi does force blur onto fonts, regardless of resolution), but you have a lot of great points there.

Out of interest, what do you mean when you say that I should have made my game in today's HD resolution? Do you just mean 1920x1080 size? Because the problem in doing that with this kind of game is that RPG Maker MV doesn't scale up the size of your graphics; it just expands the window. Which consequently means that players can see a massive amount of your map (like you can see below), ruining the feel and style of the game, the framing of cutscenes, and smaller maps often just don't look right.

Test.png

So I was curious about what you meant =)
 

Trishy

Villager
Member
Joined
Feb 13, 2018
Messages
19
Reaction score
5
First Language
English
Primarily Uses
RMMZ
Hi Trishy,

I figured out how to use the SFont Victor Engine Plugin a while ago, but thank you very very much for your response regardless! That wasn't entirely the problem (pixi does force blur onto fonts, regardless of resolution), but you have a lot of great points there.

It's interesting (and kinda sad), I used a lot of Construct 2 before, another HTML5 engine, and it had a different problem - while there were no pixel perfect issues with fonts, there was an issue that fonts didn't "preload" correctly, so you had a ton of font popping issues. And one of the solutions was using sprite fonts. I see it as a hard workaround, not a real solution, though.

Out of interest, what do you mean when you say that I should have made my game in today's HD resolution? Do you just mean 1920x1080 size? Because the problem in doing that with this kind of game is that RPG Maker MV doesn't scale up the size of your graphics; it just expands the window. Which consequently means that players can see a massive amount of your map (like you can see below), ruining the feel and style of the game, the framing of cutscenes, and smaller maps often just don't look right.

View attachment 83221

So I was curious about what you meant =)

Today's most popular res is 1920x1080, or 16:9 aspect ratio. Due to the way scaling works, you could/should have used a power of 2 resolution but smaller. Obviously 1280x720 is the most common but it can go lower to accommodate your preferred "camera view", something like this:

QrYU9ka.png


Here's a bit more info about it: https://forum.yoyogames.com/index.php?threads/how-to-properly-scale-your-game.995/

---

I found that none of the solutions do exactly what I need: I need to remove that stupid 1px border that pixi adds to the font, so mogwai solution works perfectly for that... but then I found out that I need to put an outline to the font because I like using transparent background for the text, fits my game. And it messes everything up. I had to stay with the kinda blurry font, and I'll see if I can add an extra filter on top of it.

For your case specifically, I think that using a 16:9 res plus the mogwai fix would have been great, technically you shouldn't had... have? to use sprite fonts.
 

Latest Threads

Latest Posts

Latest Profile Posts

Quite the versatile cast so far :p

chars.PNG

Edit: Sprites are made by Alexdraws and TheMightyPalm. I just edited them.
Degica Games Turn Komodo | RPG Maker News #77

Well, rats. Was really looking forward to trying out FPS Creator, but trying to install and set it up was pretty much impossible for my tiny brain to comprehend. So much for that, then.
Ah, home once more! I think I can safely work on my games now.
Let's hope power remains on for the day

Forum statistics

Threads
112,414
Messages
1,068,140
Members
146,069
Latest member
Skepter
Top