Создание острого спрайта в cocos2d-js

Question

Я пытаюсь использовать cocos2d-js для создания веб-игры на холсте, использующей пиксельную графику.

Я сделал холст и setDesignResolutionsize, чтобы быть размером области просмотра.

Я не могу сделать спрайт без сглаживания. Я пытался использовать

sprite.getTexture().setAliasTexParameters();

Хотя я могу использовать это неправильно.

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

Вот результаты с png для сравнения:

передний план: изображение заголовка png, фон: визуализированный спрайт

Кто может помочь?

Answer 1

Я думаю, что проблема здесь: sprite.setPosition((window.innerWidth/2),(window.innerHeight/2));

По моему опыту с кокосами, если вы не используете координаты целых чисел (целых), спрайты будут размыты, потому что один пиксель в спрайте распределен по нескольким пикселям экрана. Попробуйте округлить позиции x и y после деления.

Примечание: дробная позиция в родительском элементе повлияет на все его дочерние элементы, поэтому вам, возможно, придется поискать иерархию, чтобы найти родительский элемент, который вызывает размытый спрайт