Post by underground4550 in monster game rpg comments

Viewing post in monster game rpg comments

first image without nearest filter

second image with the nearest filter

i tried using the line of code

this.textures.get('map').setFilter(Phaser.Textures.FilterMode.NEAREST); // Ensure pixel sharpness for this texture

not sure if this does the trick its kind of hard to tell in here the difference but it does make it a bit less blurry. im also using a zoom on the camera... maybe its just the resolution of my tilesets.

i tried to set the pixelart to true in the game config and this is the result.

not sure if i like it or not lol.

this is without the pixelart enabled:

the text looks more smooth and the characters have less rigid pixels. not sure what to do here what do you think?

im using a phaser 3 engine in javascript not sure if you're familiar with the engine.

this is the tilesheet in using in tiled. i assume its just because my tilesheet isn't the best resolution?

if you have any advice let me know.

try opening the image in a new tab to get a better look...

Hubert Nafalski83 days ago

From what I can see, this looks like an issue with the tileset - it’s very blurry. Did you process those tilesets in some kind of graphic program before adding them to your game? Try to get the original ones and add them to your game untouched.

underground455083 days ago

thats just the way i found it. i just tried searching for a higher resolution but i dont think there is one.

Hubert Nafalski82 days ago

It’s this tileset, right? When I download it looks sharp - not like the last screen in your previous message. I think the whole deal is that you need a sharp pixelated image, not high-resolution image. If you need to make it bigger to match the scale of other elements of the game, be sure to scale it up without smoothing. By default, most graphics programs try to smooth image while scaling, since it’s what you usually expect. Pixel art is different, and there are different scaling methods that won’t smooth the edges. I haven’t used Phaser, but NEAREST filter mode, as you wrote, seems the right method.

underground455082 days ago (8 edits)

yeah for some reason my image is stretched i think. i need to use the original.

for some reason i streched the image 1.5 in width and height. the original tileset was 8x8 pixels and i then i made it 12x12 pixels. so when i streched using the nearest pixel this time it looks like this:

has sharp pixels but the diagonals look a bit weird lol. not sure why image processing is so hard. i could change the tileset size to the original 8x8 but that would mess with my code a lot. and my interior houses use 12x12 too. not sure why the hell i decided to go with 12x12 pixels. i used python to resize.

resized_img = img.resize((new_width, new_height), Image.NEAREST)
its just the pixels dont line up on the grid anymore is the problem when streched. you can tell when you open in paint and look at the pixels...

think i found a solution, but i will have to change my interior stileset as well. if i double the resolution, so its 24x24 then the pixels line up. just i didnt do my code well when placing the images i should have did x*tilesize + tilesize/2 but i just entered in 12 and 6 instead of tilesize so im going to have to redo a lot of my code so i can change the tilesize easier.

here is the image at double resolution and stretched 1.5:

i just realized its supposed to be 12x12 and i stretched it 1.5 for some reason i dont know why and still made the game with the tileset streched... surprised it still worked. if i were to unstrech it then i'd have to replace all the tiles in my entire map because the values of the tiles wouldn't line up anymore. yikes.

https://discourse.mapeditor.org/t/trouble-understanding-set-up-of-mass-replace-t...

maybe this will help me

itch.io

Viewing post in monster game rpg comments