哪个将最适合性能,文件大小,(和我的理智):动画.gifs或带有动画的spritesheet使用CSS(和JS需要时)？

文件大小

所以,老实说我不确定哪个会更好,因为我不了解帧的压缩.gif.我的猜测是,如果我可以正确地摆动它们,它们最终会大致相等,但是如果这是错误的,或者这是因为不同的原因让我知道.

在我看来,这里的主要优点是Spritesheets,因为我可以在一张纸上包含多个动画(我们在这里谈论数百个动画精灵).基于我以前的一个问题,我知道我可以轻松地在CSS中使用单个框架image-rect().与.gif文件一样,我实际上只能包含一个动画,因为每个动画可能会有不同的持续时间.

附录:此外,一些动画重复给定的精灵,所以spritesheet只需要有一个帧的副本,其中.gif需要有所有帧(至少据我所知).

性能

在这里再次猜测,我的直觉告诉我,动画.gif的速度会明显加快,因为我不必管理所有的动画,同时我正在为其他事情做很多JS代码.但是,我不确定,也许浏览器会受到30多个动画片.gif的重大影响.

我的理智

spritesheets是为我而制作的,所以我的工作一开始就很高(写作和动画引擎和手工编码一张/每张).但是一旦编写,它就可以正常使用,并且spritesheet中的更改需要对代码进行最少的更改.

另一方面,动画.gif文件不是Photoshop中的蛋糕(如果你有更好的程序,请告诉我).每个人都必须手工制作,这是一个漫长的过程.但是,一旦它们制成,我真的不需要改变它们.我的spritesheets不太可能很快改变,所以很有可能它会成为一个完成.

我的问题(tl; dr)

在文件大小方面,它可以更好地扩展到数百个动画(包括HTTP报头传输,因为它将通过网络传输),现代浏览器中的性能以及易于创建(最低优先级,但如果您可以让我的工作更轻松,或者争论这个,我将不胜感激),.gif从spritesheets构建的动画文件,或者只是使用CSS和我已经拥有的spritesheets？

例子

VS

我有一个精灵表,上面有我的精灵的动画图片.我如何将这些图像放入SKTextureAtlas(因此我可以在SKAction中制作动画)而不拆分单个文件？我以前见过这样做过,但是没有使用SpriteKit和/或SKTextures.

如果不拆分文件,这是否可行？最糟糕的情况:我需要使工作表单独的图像.

在过去,我只使用精灵大小和总精灵数来制作一个方法,然后将代码中的图像分开,然后进行动画制作.

在此先感谢您的帮助!

PS我是SpriteKit的新手,但不是游戏编程或iOS

我使用此处描述的方法使用Material Design Icons:

https://github.com/google/material-design-icons#using-svg-sprites

但是,图标总是以黑色结束.我该怎么把它们的颜色改成白色呢？

我知道可以编辑SVG源代码以达到效果,但这似乎不是规范的方法.材料设计图标存储库的CSS图像精灵在不同的版本中取决于颜色,而SVG只有一种颜色(事实上,没有颜色,因为SVG代码中没有提到任何颜色).如果我需要不同的SVG精灵文件用于白色或黑色图标,它们会包含不同的版本,就像他们在CSS图像精灵的情况下那样,不是吗？

我有

file.eps我从http://www.shutterstock.com/下载的文件,它看起来像这样:

我想要

将所有这些图标导出到自己的部分,以便我可以在我的网站上使用它们.

我试过了

一个接一个地手动执行此操作非常耗时,现在我正在寻找更好的方法来导出所有这些.

我有一些问题

有没有任何Mac应用程序帮助我导出/切片我的file.eps多个icon.png文件？

我甚至需要提取它们吗？

我的主要目标是:

• 将它们加载到我的网站上
• 保持最低HTTP请求
• 在视网膜显示设备上看起来很棒.

有没有人有一个在Silverlight中使用spritesheet的例子？我想剪辑图像,按下按钮时,跳转到下一帧.(如果用户不断点击按钮,它看起来就像一个动画).我环顾四周但却找不到我正在寻找的东西.谢谢你的帮助.

我正在制作一款游戏,允许玩家链接到他们自己的gif图像,并立即让它们在游戏中可玩,并需要将动画.gif文件转换为精灵表格.

我有一个jsfiddle,它会将你过去的任何图像加载到输入中,但它只加载第一帧:

http://jsfiddle.net/40k7g0cL/

var animatedGif = PIXI.Sprite.fromImage('http://i.imgur.com/egzJbiI.gif');

但是pixi.js资源加载器似乎只能加载动画.gif文件的第一帧而不是其他文件.

我可以在这个主题上找到的所有信息都说我应该提前将动画.gif文件转换为SpriteSheet,但这是不可能的,因为播放器将在播放时提供.gif图像,所以我不能提前预处理它们.

有没有一种简单的方法来加载动画.gif图像,让它自动转换为SpriteSheet或MovieClip,甚至是一组Texture对象？

如果pixi.js中没有一个简单的解决方案,我是否需要编写自己的插件,可能使用像jsgif这样的东西来处理.gif并手动分离每个帧？

关于如何从浏览器中的动画.gif客户端生成SpriteSheet的任何建议(在javascript中)都可能有用.

我正在一个网站上工作,我正在使用SVG片段文件,并通过CSS背景图像加载特定的SVG.

我也有一个PNG后备和我使用的是下面作为作为工作基础: https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#fallback-svg-css-background -图片

例

.ico-arrow-right {
  background: url(ico-arrow-right.png);
  background: url(sprite-collection.svg#arrowright),
    linear-gradient(transparent, transparent);
}

问题是,它似乎在大多数浏览器上运行良好,但在桌面和IOS浏览器的Safari中,SVG不会出现,只显示一个空格.考虑到这一点,似乎设备上的Safari/webkit,在使用CSS背景图像时不喜欢SVG片段精灵.

有没有解决方案/解决这个问题？我还是想用CSS背景图像中的PNG/SVG拉,不希望恢复使用单独的SVG文件,有超过60个svgs,我不希望所有这些服务器的请求!

谢谢大家

我可以通过调用gl.texImage2D成功显示我的整个精灵(32x512):

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

它像我预期的那样水平压扁,但它至少在屏幕上呈现.我试图只显示工作表中的第一个32x32精灵,我认为我可以简单地使用gl.texSubImage2D来实现这种效果.我尝试用texSubImage2D(带有修改的参数)简单替换texImage2D,但我只是在屏幕上看到一个黑盒子.这是我正在使用的代码:

gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, image);

我错过了一些关于texSubImage2D实现的内容吗？我还有其他一些步骤吗？或者texSubImage2D不是做精灵表的正确方法吗？

我正在使用AndEngine,在该框架内,我想制作一个循环计时器图形.具体来说,我想显示重用能力的等待时间.这个想法是在计时器进行时动态填充弧.像这样的东西:

java.awt.Graphics对象有一个fillArc()方法,对我来说似乎很合适.实际上,上面的图形是使用fillArc(50,5,100,100,75,-40)绘制的.大!现在问题在于:

AndEngine不使用Graphics()对象,它使用自己的Shape实现(对于OpenGL)并且没有定义的"Circle"形状,更不用说使用fillArc()方法的圆形.

可能的解决方案及其各自的问题

为了找到解决方案,我遇到了" 使用Andengine绘制圆圈 ".问答对我来说没什么用,因为唯一的答案是"确实,你不能直接绘制一个圆圈"提供了两种选择:(1)"渲染带有圆形纹理的四边形" - 这对我来说不起作用我需要动态修改圆圈以产生arcfill; (2)"渲染一个实际上是连接三角形圆的圆".也许选项二可行,但是没有指导如何做到这一点.

我还遇到了" 通过box2d在android andengine创建圈子？ ".我怀疑有人可能会说,你可以简单地创建一个这样的圆圈:

Body circleBody = PhysicsFactory.createCircleBody(pWorld,pSprite,BodyType.StaticBody,FixtureDef);

这对我没有帮助.我不打算创建一个圆形的2D物理体.我想要显示一个.

最后,我发现这个讨论很有希望.特别是,有一个建议:

使用Canvas将[it]绘制到Bitmap中,并将该Bitmap作为TextureSource加载.

听起来很合理,虽然我还不清楚该怎么做.

更新:我的作弊"解决方案"

而不是纠缠于此,我决定作弊(至少目前).我做了一个看起来像这样的spritesheet:

我没有实际让计时器显示完美的fillArc(),而是基于将完成的比例(从0到1)四舍五入到spritesheet上的相应索引,从spriteesheet中提取精灵的相应索引.像这样:

public void setTimer(float amount) {
    this.setCurrentTileIndex(Math.round(amount * 20));
}

为了我的目的,这实际上工作正常 - 我使用超过2秒的计时器,所以你真的没有看到缺乏细节.但是,如果有人发布,我可能会用"正确的"解决方案替换它.此外,也许这个spritesheet对于做同样事情的人有用.这是使用透明度而不是绿色背景的版本.(所以它在stackoverflow的白色背景上是白色的,但它就在那里):

需要提前道歉:长度和我的无知.我正在尝试自学新概念:d3.js和精灵表.精灵表概念很容易理解,但我很困惑如何将它整合到d3中.基本上我想要做的是从精灵表中选择我想用作图像的精灵,然后使用d3在页面上的其他地方显示这个选定的精灵,并且很可能是同一精灵的多个副本.

实际的精灵表供参考(见下文免责声明):

以下是问题:1)我将精灵表添加到我的html中,硬编码<clipPath>现在,这显示了我想要的特定精灵,但是,精灵的尺寸/位置就像显示整个精灵表一样.我怎样才能"捕捉"精灵本身,而不仅仅是隐藏未使用的精灵？在下图中,我想在d3鼠标悬停事件中使用单个"图标"(第2部分).

修改此示例:SO:在不使用foreignObject的情况下在SVG中显示CSS图像精灵

HTML

<svg id="mySvg1" width="100%" height="100%">
    <defs>
        <clipPath id="c">
            <rect x="135" y="0" width="150" height="150"/>
        </clipPath>
    </defs>
        <image transform="scale(1.0)" x="0" y="0" width="550" height="420" xlink:href="static/img/iconSheet.png" clip-path="url(#c)"/>
<svg>

结果

2)我可以<pattern>用来确定要在d3对象/事件中显示的图像.就像在矩形中显示图形一样.但这似乎不适用于大型图像(精灵表)？如果我尝试使用精灵表本身及其在模式中的原生尺寸,它会变得奇怪和模糊.如果我们解决第1部分,我们可能会忽略第2部分,但是对于一般知识/将来的使用,这将是很好的理解.

修改此示例:SO:在d3 javascript中在圆形对象中添加图像？

HTML

<svg id="mySvg" width="550" height="420">
  <defs id="mdef">
    <pattern id="image" x="0" y="0" height="550" width="420">
      <image transform="scale(1.0)" x="0" y="0" width="550" height="420" xlink:href="static/img/iconSheet.png"></image>
    </pattern>
  </defs>
</svg>

使用Javascript:

var svgContainer = d3.select("div#content-main").append("svg")
                                    .attr("width", 740)
                                    .attr("height", 760)
                                    .attr("class", "mySvg")
                                    .style("border", "none");

svgContainer.append("rect")
         .attr("class", "logo")
         .attr("x", 0)
         .attr("y", …