setScale and antialiasing - keeping pixel perfect sprites perfect

cocos2d-x JavaScript
#1

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.

@
this.setScale(10);

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.getTexture().setAliasTexParameters();
this.sprite.setPosition(new cc.Point(size.width / 2, size.height / 2));
this.addChild(this.sprite);
@

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

Rich

#2

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

thanks!

#3

Thats kind of what I thought, but reading this: http://stackoverflow.com/questions/7615009/disable-interpolation-when-scaling-a-canvas

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.

Rich

#4

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

#5

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);
    });
1 Like