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用于比较的结果：

foreground: title png image, background: rendered sprite

谁可以提供帮助？

Answer 1

我认为问题在于： sprite.setPosition（（window.innerWidth / 2），（window.innerHeight / 2））;

根据我对cocos的体验，如果你不使用整数（整数）坐标，精灵将会模糊，因为精灵中的一个像素分布在多个屏幕像素上。在分割后尝试舍入x和y位置。

注意：父级中的小数位置会影响其所有子级，因此您可能必须查找heirachy以找到导致模糊精灵的父级

在cocos2d-js中制作一个尖锐的精灵

1 个答案: