在 cocos2d-js 中制作清晰的精灵答案

【问题标题】：Making a sharp sprite in cocos2d-js在 cocos2d-js 中制作清晰的精灵
【发布时间】：2016-01-18 21:17:16
【问题描述】：

我正在尝试使用 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

谁能帮忙？

【问题讨论】：

标签： cocos2d-iphone cocos2d-js

【解决方案1】：

我认为问题出在： sprite.setPosition((window.innerWidth/2),(window.innerHeight/2));

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

注意：父级中的小数位置会影响其所有子级，因此您可能需要查找层次结构才能找到导致精灵模糊的父级

【讨论】：

谢谢，我现在试试