How do I remove the image blur in my pixel art?

[animationdoggo12]

I know I’ve seen many topics like this, and only one of them had the solution. This one, however, I cannot find anymore. I remember it had this pixel art Sonic that was pretty neat and also had the JavaScript to make the image not blurry. If someone can tell me the JavaScript to make the image pixelated OR send me the link to the topic, that would be greatly appreciated. Also, if there is a “Topic History” thing that I just don’t know of, it would also be nice to be told if that exists.

[awc95014]

this might help you. it doesn’t have a pixel art Sonic but it does have a JavaScript solution.

Removing image smoothing

There is a way to disable wick’s anti-aliasing with just one line of code. If the image is the only object in a clip then this will work this.activeFrame._children[0].view.item.smoothing = false; Else if the image is in a clip with other objects then you simply put the position, starting at 0 counting up the outliner (so if its the bottom of the outliner it would be 0 or if its 4th last on the outliner it would be 3) this code should work this.activeFrame._children[INDEX].view.item.smoothing…

an alternative is to export your pixel art in an upscaled resolution (for example, in Piskel you can export with up to 10x size), which should keep the edges sharper. (if that’s not enough, maybe there’s an online tool that can upscale it even more)

[animationdoggo12]

Thank you so much

[tanu14]

@animationdoggo12

I know I’ve seen many topics like this, and only one of them had the solution. This one, however, I cannot find anymore. I remember it had this pixel art Sonic that was pretty neat and also had the JavaScript to make the image not blurry. If someone can tell me the JavaScript to make the image pixelated OR send me the link to the topic, that would be greatly appreciated. Also, if there is a “Topic History” thing that I just don’t know of, it would also be nice to be told if that exists.

I can help you with pixelating images in JavaScript. Here’s the code:

`JavaScriptfunction pixelateImage(image, scale) {
const canvas = document.createElement(‘canvas’);
const context = canvas.getContext(‘2d’);
canvas.width = image.width / scale;
canvas.height = image.height / scale;
context.drawImage(image, 0, 0, canvas.width, canvas.height);
return canvas.toDataURL();
}

// Example usage:
const image = document.getElementById(‘myImage’);
const pixelatedImage = pixelateImage(image, 2); // Adjust scale for desired level of pixelation

// Replace the existing image source with the pixelated version
image.src = pixelatedImage;`

Use code with caution.

content_copy

This code creates a canvas, draws a scaled version of the image onto it, and returns the pixelated image data as a URL. You can then use this URL to update the source of your image element. You can try searching for “pixelate image javascript” or “how to make image pixelated javascript” to find more resources. For further learning on web development techniques, including 3D animation, I recommend searching online using keywords like “3D animation course”