标签: sprite

对于Delphi精灵引擎,我应该考虑哪些选择.

我知道

• GLScene中
• 安道尔2D

还有什么我想念的？

最好是依赖于OpenGL.DirectX唯一的解决方案不是很受欢迎.

我可以在后台重复一部分图像[它在CSS精灵图像中]吗？

例如:

background-position:-13px top; background-repeat:repeat-y;

因为我重复了整个精灵图像......

我遇到了问题,有一段时间我一直想弄清楚如何解决这个问题.我将在下面详细描述......

我试图将图像用作UL列表的精灵图像.它应该在它旁边显示一个带有文本的图标,图标和文本都应该链接到某个地方.

我的第一个例子看看我是怎么想的.当font-size 设置为10px它看起来没问题......

当我改变font-size来自10px于16px...

这是CSS和HTML

CSS

#post-meta-wrapper{
    list-style: none;
    margin:20px 0 20px 20px;
    width:400px;
}

#post-meta-wrapper li {
    width:100%;
    color: #44495B;
    border-top: 1px dotted #CCC;
    color: #999;
    font-size: 10px;
    line-height: 28px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-indent: 0px;
}
#post-meta-wrapper li a{
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
    padding-left:15px;
}

#post-meta-wrapper .meta-img {
    background:#fff;
    width: 15px;
    height: 10px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px …

假设我们有一个纹理(在这种情况下是8x8像素)我们想要用作精灵表.其中一个子图像(精灵)是纹理内部的4x3子区域,如下图所示:

(显示了四个角的标准化纹理坐标)

现在,基本上有两种方法可以将纹理坐标分配给4px x 3px大小的四边形,以便它有效地成为我们正在寻找的精灵; 第一个也是最直接的是在子区域的角落采样纹理:

// Texture coordinates

GLfloat sMin = (xIndex0                  ) / imageWidth;
GLfloat sMax = (xIndex0 + subregionWidth ) / imageWidth;
GLfloat tMin = (yIndex0                  ) / imageHeight;
GLfloat tMax = (yIndex0 + subregionHeight) / imageHeight;

虽然在第一次实施这种方法时,2010年,我意识到精灵看起来有些"扭曲".经过一些搜索后,我在cocos2d论坛中发现了一个帖子,解释了渲染精灵时采样纹理的"正确方法"是:

// Texture coordinates

GLfloat sMin = (xIndex0                   + 0.5) / imageWidth;
GLfloat sMax = (xIndex0 + subregionWidth  - 0.5) / imageWidth;
GLfloat tMin = (yIndex0                   + 0.5) / imageHeight;
GLfloat tMax = (yIndex0 + subregionHeight - 0.5) / imageHeight; …

所以即时通讯使用libgdx,制作平台游戏.我使用方形瓷砖作为平台,但是当它们被绘制时,它们中的一些在它们之间有间隙.当我放大/缩小或移动相机移动间隙移动位置.有没有人有同样的问题或知道如何解决它？

更多细节.瓷砖的尺寸为32,并且已经尝试了32和64的纹理.瓷砖排列成32个例如.第一个图块将是x = 0 y = 0秒x = 32 y = 0,并且在x和y方向上都是如此.差距不是纹理假象,因为我已经检查了很多次.使用带填充的纹理包.我最好的猜测是,将纹理转换为屏幕坐标是一个问题,但实际上根本不知道如何解决这个问题.我以为这个问题以前出现过,但在任何地方找不到任何修复.我已经检查并用瓷砖尺寸仔细检查了我的精度并将它们排成一行.

任何帮助将非常感激.谢谢.

我试图从我有的一些方形精灵中创建一行.所以要获得我正在使用的这些精灵的宽度

tileWidth = (int)tileSet[0].renderer.bounds.size.x;

然后形成我的行

for(int i = 0; i < tileSet.Length ; i++){
    if((i+1)*tileWidth<screenWidth){
        tileSet[i].transform.position = new Vector3(i*tileWidth,0,0);
    }
}

但精灵仍然相互重叠,并没有形成一个合适的行.
我在这里做错了什么,我该如何纠正呢？

是否可以将CSS精灵用于"前景"图像 - 即用户应该点击并与之交互甚至打印的图像？

而不是使用CSS background-image属性.你会用什么？

我有一个使用精灵表动画的精灵.他只有16x16,但是我希望能够将它扩展到64x64左右的所有像素优点!

结果很糟糕,当然浏览器反锯齿它.:/

谢谢!

编辑:不需要CSS,这是我的绘图功能.

function drawSprite(offsetx:number,offsety:number,posx:number,posy:number){
    ctx.drawImage(img, offsetx*32, offsety*32, 32, 16, posx*32, posy*8, 128, 32);
}

看到它在这里工作(codepen)

正如SpriteMethodTest所说,绘制精灵的方法有很多种.首先,我尝试了帆布,并有一些性能问题.比我决定学习opengl.我使用GL11Ext扩展我的第一个成就.但是你知道默认情况下,当你绘制纹理时,它们被翻转,而x和y轴在设备屏幕的左下角(横向模式)为零,而不像画布,你不能旋转精灵.

比我试图用GLU看看影响这个轴视图.但没效果.

比我想旋转我的精灵并且没有像他们说的那样影响GL11Ext的原因.

所以我现在有主要的stackoverflow条件,基本问题是:

1.使用哪种方法来实现对精灵的变焦,旋转和弹奏效果以及在旧的SWEET方式中查看X和Y轴[(0,0)在风景模式中的左上方]？

2.在宇宙中,有哪些类似于SPRING类的例子只使用了一种良好的SPRING RENDERING方式？(SpriteMethodTest让我很困惑)

我正在使用background-imageSVG精灵,在我的Safari,移动版Safari,Chrome,Firefox,Opera,IE等版本上,一切看起来都不错.但是,我的一些同事的背景位置无法正确显示一个较新版本的Chrome(我知道其中一个在Mac上使用的是版本35.0.1916.153,有些在Windows上使用了不同的新版本).

这是我在所有浏览器版本中的样子:

以下是一些较新版本Chrome的外观:

HTML:

<span class="icon icon--chat"></span>

CSS:

.icon{
    background:url(data:image/svg+xml;base64,[data]);
    font-family:sans-serif;
    background-position:top left;
    background-size:cover;
    display:inline-block;
    width:100px;
    height:100px;
    padding:0;
    margin:15px;
    cursor:default;
}

.icon--chat{
    background-position:0 4%;
}

当我把它放在JsFiddle和Codepen上时,完全相同的代码在我的同事的浏览器中正常工作,但无论如何它在这里:http://jsfiddle.net/HgR2N/

以下是我尝试过的一些没有解决问题的方法:

• 将背景图像从数据URI编码的SVG更改为常规的.svg文件
• 使用像素background-position代替百分比
• 添加font-family:sans-serif;(我读到某处可能会修复它 - 不知道)
• 去掉边距box-sizing:border-box;等

如果您对可能导致此问题的原因以及如何解决问题有任何疑问,请与我们联系 - 谢谢!

更新:我将我的Chrome更新到版本35.0.1916.153,所以现在我的同事和我正在使用完全相同版本的Chrome for mac,而她的混乱,我的仍然很好......