I'm new to CraftyJS. I want to make a game with low-resolution graphics (e.g. 10x10 pixel tile).
I'm trying to use Crafty.viewport.scale(10) to make the game big enough to see, but scaling the game is making it very blurry.
It's like the web browser is using bilinear scaling instead of nearest neighbor.
<html>
<head></head>
<body>
<div id="game"></div>
<script type="text/javascript" src="https://rawgithub.com/craftyjs/Crafty/release/dist/crafty.js"></script>
<script>
Crafty.init(500,500, document.getElementById('game'));
Crafty.sprite('blueball.png', {blueball:[0,0,10,10]});
Crafty.e('blueball, 2D, Canvas') .attr({x:20, y:20, w:10, h:10})
Crafty.viewport.scale(10);
</script>
</body>
</html>
What's the best way to scale the game without making it blurry?
I've successfully gotten sharp pixel-art in CraftyJS in the past like this:
This below API page has some additional suggestions that it notes may be necessary for compatibility with some browsers. However, with Chrome and Safari I've only had to call the above option to get good results.
http://craftyjs.com/api/Crafty-pixelart.html