我正在使用画布来显示一些精灵,我需要水平翻转一个(所以它面向左或右).但是,我无法看到任何方法drawImage.
这是我的相关代码:
this.idleSprite = new Image();
this.idleSprite.src = "/game/images/idleSprite.png";
this.idleSprite.frameWidth = 28;
this.idleSprite.frameHeight = 40;
this.idleSprite.frames = 12;
this.idleSprite.frameCount = 0;
this.draw = function() {
if(this.state == "idle") {
c.drawImage(this.idleSprite, this.idleSprite.frameWidth * this.idleSprite.frameCount, 0, this.idleSprite.frameWidth, this.idleSprite.frameHeight, this.xpos, this.ypos, this.idleSprite.frameWidth, this.idleSprite.frameHeight);
if(this.idleSprite.frameCount < this.idleSprite.frames - 1) { this.idleSprite.frameCount++; } else { this.idleSprite.frameCount = 0; }
} else if(this.state == "running") {
c.drawImage(this.runningSprite, this.runningSprite.frameWidth * this.runningSprite.frameCount, 0, this.runningSprite.frameWidth, this.runningSprite.frameHeight, this.xpos, this.ypos, this.runningSprite.frameWidth, this.runningSprite.frameHeight);
if(this.runningSprite.frameCount < this.runningSprite.frames - 1) { this.runningSprite.frameCount++; …我正在使用我的应用程序的图标系统与SVG Sprite,由IcoMoon App创建.在index.html中我现在有这样的事情:
<html>
<head>...</head>
<body>
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="752" height="80" viewBox="0 0 752 80">
<defs>
<g id="icon-home">
<path class="path1" d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z" />
</g>
<g id="icon-camera">
<path class="path1" d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875 0-4.902 3.973-8.875 8.875-8.875 4.902 0 8.875 3.973 8.875 8.875 0 4.902-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z" />
</g>
</defs>
</svg>
...some …我sprite.setSize(float x, float y)在Libgdx中的方法有问题.它不会影响精灵的大小或尺寸.无论我传递给setSize()方法,它们都是固定的.
这是我的代码:
public class GameScreen implements Screen {
OrthographicCamera camera;
SpriteBatch batch;
Texture carTexture;
Sprite carSprite;
public GameScreen()
{
}
@Override
public void render(float delta) {
// TODO Auto-generated method stub
Gdx.gl.glClearColor(0,0,0,0);
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
batch.begin();
carSprite.setSize(16, 32);
batch.draw(carSprite, 0 , 0);
batch.end();
camera.update();
}
@Override
public void resize(int width, int height) {
// TODO Auto-generated method stub
camera.viewportWidth=width;
camera.viewportHeight=height;
camera.update();
}
@Override
public void show() {
// TODO Auto-generated method stub
camera = new OrthographicCamera(); …sprite的主要目的是减少对页面上的图形元素对服务器的http请求吗？或者你想尝试尽可能多的元素适合精灵.
我想我要问的是:精灵什么时候太大了？
我在Phaser中摧毁精灵时遇到了麻烦.
我有一个JavaScript对象,我们称之为Block.Block有一个sprite属性,设置如下:
this.sprite = this.game.add.sprite(this.x, this.y, 'blocks', this.color);
在我的代码中的某个点,Block由两个不同的数组引用:
square[0] = Block;
destroy[0] = Block;
在某个Update()循环中,我需要销毁精灵,所以我使用以下代码:
square[0].sprite.destroy(true); //Destroy the sprite.
square[0] = null; //Remove the reference.
在下一个Update()循环中,当我查看destroy [0]时,我希望看到:
destroy[0].sprite: null
然而,我所看到的是:
destroy[0].sprite: b.Sprite
属性只是默认并设置为false.我担心的是,如果我现在将destroy [0]设置为null,那个sprite对象会发生什么？
它会浮动还是自动清理？我应该先以某种方式破坏Block对象吗？另外,如果destroy()没有使引用为空,那么它与kill()有什么不同？
任何有关此事的想法将不胜感激.
我以前从未尝试过.我创建了一个包含两个图标的图像精灵.每个图标宽26px.所以精灵是26x52px.
我有一个div.something或div.anything元素.根据它所在的课程,我想在左侧或右侧添加角帽.
因此,我正在定位.element相对,将:before伪类应用于img并将其置于绝对位置,高度和宽度为26px,因此只有精灵的一个图标适合.我还应用"overflow:hidden"以便隐藏精灵上的第二个图标.
.element {
position:relative;
}
.element:before{
content: url("../images/sprite.png");
position: absolute;
height:26px;
width:26px;
overflow:hidden;
}
.something .element:before {
top: -2px;
left: -2px;
}
anything .element:before {
top: -28px;
right: -2px;
}
这适用于左角,我使用精灵中的第一个顶部图标.但是现在我想知道如何只在精灵中显示"任何.element"中的第二个图标.
所以实际上"掩码"应该定位在-2px,-2px但是里面的精灵img应该从-26px开始,所以显示第二个图标.
这可能与我现在这样做的方式有关吗？
我期待使用WebGL构建一个2D游戏.我想要WebGL提供的硬件加速,而我无法从canvas标签中的2D画布上下文中获得这一点.
话虽如此,是否有使用webGL创建2D精灵的教程？或者,更好的是,是否有一个用于WebGL的2D精灵库？理想情况下,我正在寻找像移植到WebGL的cocos2d之类的东西.
毫不奇怪,我为WebGL找到的所有演示,教程和库都专注于3D操作.是否有支持2D精灵的WebGL库？
我在两年前开始使用图像精灵,因为我看到Apple和Facebook这样的网站在他们的网站上使用它们.
毫无疑问,如果您下载一个60kb图像而不是三个20kb图像,加载页面会更快,但是,我最近被告知精灵虽然加载速度更快,但实际上客户端的内存消耗更多.
在我眼里:
但是,在我的同事眼中:
这让我提出这个问题,精灵实际上是值得使用还是我的同事咆哮着错误的树？
我有一张62张91*91像素的精灵,这使得整件事情为91*5642像素.它们以动态网格的形式显示,根据用户/指针的移动而增长和缩小.有时一个元素(标准91*91像素)放大使其为120*120像素.显然,我希望背景增长,以便在整个120*120元素中显示整个91*91像素图像.
输入background-size: 100% auto以使宽度始终完美.现在的问题是background-position期望它的值也要更新!所有62个元素都有内联style=background-position etc.我无法从内联更新背景位置.我希望背景首先定位然后调整大小(缩放),不调整大小然后定位(缩放到错误的位置).
我不确定我是否有任何意义.有点澄清:
width: 91px; height: 91px; background-size: 100% auto;.background-position: 0 -91px.width: 120px; height: 120px;,然后它会显示第二个图像的大部分内容以及第一个图像的某些部分,因为在调整大小后会发生定位=(0 -120px,则它会正确对齐.(但显然在没有缩放/悬停时它是错误的.)一个非常简单的解决方案是使用实际zoom: 1.3或者transform: scale(1.3),但是过渡非常慢.
我肯定错过了什么.CSS必须比这更聪明.一个背景大小的精灵......这不是不可能的!？
精灵的外观取决于我,所以我可以让它有一个120*120的网格而不是91*91,如果这样会更简单......
编辑:用例子小提琴:http://jsfiddle.net/rudiedirkx/g4RQx/
智能答案1: background-position: 0 calc(100% / 61 * 2)(61因为62张图片,2张因为第3张图片)