Making a sharp sprite in cocos2d-js

Question

I'm trying to use cocos2d-js to make a canvas webgame that uses pixel graphics.

I have made the canvas and the setDesignResolutionsize to be the size of the viewport.

I can't make a sprite that isn't antialiased. I have tried using

sprite.getTexture().setAliasTexParameters();

Although I may be using it wrong.

var canvas = document.getElementById("gameCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

cc.game.onStart = function(){

    //load resources
    cc.view.setDesignResolutionSize(canvas.width, canvas.height, cc.ResolutionPolicy.SHOW_ALL);


    cc.LoaderScene.preload(gameResources, function () {
        cc.director.runScene(new MyScene());
    }, this);
};

cc.game.run("gameCanvas");

var MyScene = cc.Scene.extend({
   onEnter:function () {
      this._super();
      var gameLayer = new game();
      gameLayer.init();
      this.addChild(gameLayer);
      }
});

var backgroundLayer;

var game = cc.Layer.extend({
    init:function() {
        this._super();
        var sprite = cc.Sprite.create("assets/ui/title.png");
        sprite.getTexture().setAliasTexParameters();
        this.addChild(sprite,0);
        sprite.setPosition((window.innerWidth/2),(window.innerHeight/2));
        }
});

This is the results with png for comparison:

foreground: title png image, background: rendered sprite

Who can help?

Nicholas Nicholas · Accepted Answer · 2016-01-22T12:14:17

I think the problem is here: sprite.setPosition((window.innerWidth/2),(window.innerHeight/2));

In my experience with cocos if you don't use whole number (integer) coordinates, sprites will be blurred because a single pixel in the sprite is spread across multiple screen pixels. Try rounding the x and y positions after the division.

Note: a fractional position in a parent will effect all its children, so you might have to look up the heirachy to find the parent which is cause the blurry sprite

Making a sharp sprite in cocos2d-js

1 Answers