setScale and antialiasing - keeping pixel perfect sprites perfect

setScale and antialiasing - keeping pixel perfect sprites perfect
0.0 0


So I’m having a rather annoying problem with the scaling of my sprites.

I’ve created a simple test app; it loads a spritesheet and sticks the first sprite on the screen.


var cache = cc.SpriteFrameCache.getInstance();
cache.addSpriteFrames(“src/sprite.plist”, “src/sprite.png”);

this.sprite = cc.Sprite.createWithSpriteFrameName(this.spriteFrameNamePrefix + this.direction.toString() + “.png”);
this.sprite.setPosition(new cc.Point(size.width / 2, size.height / 2));

The problem I’ve got is that by scaling the layer (of my App subclass) it causes my sprite to get antialias scaled … and thus it looks terrible.

From Cocos2d-iphone you’d expect to be able to call setAliasTexParameters - but as the texture object is a striaght HTMLImageObject that doesn’t work.

I’ve tried a few things that don’t work e.g.
* Changing the size of my sprite from 11x21 to 12x22; same result
* Creating the way I load the sprite sheet so I manually create a cc.Texture2D and load a cc.Image onto that; cc.Image isn’t finished and you get random other errors due to lack of conf methods
* Scaling the sprite rather than the layer; same result

I’ve also tried playing around with canvas CSS properties but its all to no avail.

Am I missing something, I really like the look of Cocos2D-html5 but this issue is a show stopper. So far the only solution I can think of is to manually scale my sprites and store multiple different “scale” versions of them

Please help



this is a limitation in canvas rendercontext, WebGL support this option, we will implement WebGL Mode soon.



Thats kind of what I thought, but reading this:

It sounds like it can. I’ve tried a fair few of the most promising suggestions from that post but I can’t get it to work. I’m not sure if thats due to the intricacies of how cocos2d-html5 works or just it doesn’t work.



It doesnt work, it only works in firefox.

what you could do is write your own image scaling function, but it consumes a lot memory to do that

you will read image pixel by pixel, then scale it up using “nearest neighbor” and save the result in an offscreen canvas


Sorry for bumping an old thread, but I wanted to say that on Chrome and iOS 7 the code provided on that link is working perfectly, so I think it would be good if the framework could include this option.
I just needed to reset the values on the ‘resize’ event of the window because it kept going back to true. I also needed a setTimeout to make it work, but I don’t know exactly why:

    window.addEventListener('resize', function () {
        setTimeout(function() {
            var ctx = document.getElementById('gameCanvas').getContext("2d");
            ctx.imageSmoothingEnabled = false;
            ctx.webkitImageSmoothingEnabled = false;
            ctx.mozImageSmoothingEnabled = false;
        }, 0);