Questions tagged [sprite]

A sprite is a two-dimensional image or animation that is integrated into a larger scene.

Sprite

A sprite is a two-dimensional image or animation that is integrated into a larger scene.

Spriting

The term is also used when taking subsections of a larger image file containing icons for display. This allows browsers to load only one image file and reuse it to display many icons by using offsets. This is known as spriting.

FAQs

Resources

4792 questions
25
votes
3 answers

SVG sprite in external file

I'm using an icon system for my app with SVG Sprite, created by IcoMoon App. In index.html I have now something like this: ...
leo
  • 1,243
  • 1
  • 18
  • 20
23
votes
5 answers

how to find pixel position of image from sprite image

I want to know how to find an image position(coordinates) while using sprite image for styling.
ArK
  • 20,698
  • 67
  • 109
  • 136
22
votes
3 answers

Flip a sprite in canvas

I'm using canvas to display some sprites, and I need to flip one horizontally (so it faces left or right). I can't see any method to do that with drawImage, however. Here's my relevant code: this.idleSprite = new Image(); this.idleSprite.src =…
James Dawson
  • 5,309
  • 20
  • 72
  • 126
21
votes
2 answers

Difference between sprite and texture?

Can you please explain the difference between texture and sprite? When we zoom in a sprite, it appears blurry because it's basically an image. Is it the same for a texture? I read this comment on the image below online: The background layers are…
user5622430
21
votes
8 answers

SpriteKit's SKPhysicsBody with polygon helper tool

I wonder if there is a tool that could be used for easy generation of complex physics bodies in SpriteKit. I would like to have a volume based physical bodies with polygon-type shapes. SpriteKit allows to create such bodies with that method: +…
Darrarski
  • 3,882
  • 6
  • 37
  • 59
20
votes
7 answers

Remove border around sprite image in Chrome

First time using this technique, seems that regardless what attributes I try to assign the border will not go away in Chrome. Other browsers are fine. I've tried outline:none, border:0; etc, etc. Also tried adding a colored border around the image,…
Z with a Z
  • 603
  • 2
  • 6
  • 12
20
votes
5 answers

Javascript Sprite Animation Library for Canvas Tag

Can you point me to a good Javascript sprite animation library using the HTML Canvas tag? A few Google searches only turned up some non-canvas projects. I am looking for something clean and simple. Thanks.
Devon
  • 5,786
  • 5
  • 38
  • 46
20
votes
2 answers

Emulating old-school sprite flickering (theory and concept)

I'm trying to develop an oldschool NES-style video game, with sprite flickering and graphical slowdown. I've been thinking of what type of logic I should use to enable such effects. I have to consider the following restrictions if I want to go…
Jeffrey Kern
  • 2,024
  • 20
  • 40
20
votes
1 answer

How to resize a sprite in Libgdx?

I have a problem with the method sprite.setSize(float x, float y) in Libgdx. It does not affect the size or the dimensions of the sprite. They remains fixed whatever I pass to the setSize() method. here is my code: public class GameScreen implements…
Wazani
  • 911
  • 1
  • 13
  • 28
18
votes
8 answers

When is a CSS Sprite too large?

Is the main purpose of sprites to reduce http requests made to the server for graphical elements on a page? Or do you want to try and fit as many elements to the sprite as possible. I guess what I'm asking is: when is the sprite too large?
Graham
  • 1,145
  • 4
  • 16
  • 25
18
votes
2 answers

Destroying sprites in Phaser

I'm having trouble destroying Sprites in Phaser. I have a JavaScript object, let's call it Block. Block has a sprite property, that gets set like so: this.sprite = this.game.add.sprite(this.x, this.y, 'blocks', this.color); At a certain point in my…
alexania
  • 2,395
  • 2
  • 13
  • 11
17
votes
2 answers

CSS: using image sprites with css pseudo classes :before and :after

I have never tried that before. I created an image sprite that is contains two icons. Each icon is 26px wide and high. So the sprite is 26x52px. I have an element that is either in a div.something or in a div.anything. Depending on which class it's…
matt
  • 42,713
  • 103
  • 264
  • 397
17
votes
4 answers

Animated sprite from few images

I've been searching for some good tutorial about making simple sprite animation from few images in Python using Pygame. I still haven't found what I'm looking for. My question is simple: how to make an animated sprite from few images (for an…
lbartolic
  • 1,165
  • 2
  • 12
  • 24
16
votes
5 answers

Scaling sprites in SDL

How can i scale sprites in SDL?
kmaxeg
  • 163
  • 1
  • 1
  • 4
16
votes
6 answers

background-size with background-position doesn't scale the position?

I've a sprite of 62 images of 91 * 91px, which makes the whole thing 91 * 5642 px. They're displayed in sort of a dynamic grid that grows and shrinks depending on user/pointer movement. Sometimes an element (std 91 * 91 px) zooms in to make it 120 *…
Rudie
  • 52,220
  • 42
  • 131
  • 173