Questions tagged [sprite-sheet]

A spritesheet is a large image filled with smaller images. When you display each of the smaller images in the correct order, you get an animation. If you imagine an old celluloid movie reel, unrolled, chopped up, and laid out in a large square, you have the idea of a sprite sheet.

Sprite Sheet (also known as Atlas, or Texture Atlas) is an image file which contains many smaller images, evenly spaced, which usually comprise the frames of an animation.

Such an image makes it easier for various software to access specific frames within the image by coordinates. Sprite sheets are used extensively in 2D animations, allowing to group together frames of a specific movement of a character.

In Sprite sheets can be imported and used in the sprite editor to create animations in the scene, controlled by an Animator state machine.

An example of a sprite sheet can be seen here https://web.archive.org/web/20140715213314/http://gamemedia.wcgame.ru/game-sprite-sheet.html.

Texture Atlas Wikipedia Article

Unity sprite editor used to slice sprite sheets

500 questions
38
votes
8 answers

Animated .GIF vs Spritesheet + JS/CSS

Which will scale best for performance, file-size, (and my sanity): Animated .gifs or a spritesheet with animations using CSS (and JS when need be)? Filesize So, I'm honestly not sure which will be better here since I don't understand the compression…
LoveAndCoding
  • 7,857
  • 2
  • 31
  • 55
18
votes
2 answers

How can I use icon from .eps file and load them on my site?

I Have a filefile.eps that I downloaded from http://www.shutterstock.com/ , it looks like this : I want to export all those icons into its own piece so that I can use them on my site. I've tried doing this manually one-by-one it is very…
code-8
  • 54,650
  • 106
  • 352
  • 604
13
votes
4 answers

Set background color of SVG Material Design Icons

I make use of the Material Design Icons using the method described here: https://github.com/google/material-design-icons#using-svg-sprites However, the icons always end up in black. How am I supposed to change their color, say, into white? I am…
Marc
  • 4,327
  • 4
  • 30
  • 46
13
votes
2 answers

Use a one image sprite sheet in Sprite Kit iOS

I have a sprite sheet with the animation images for my sprite. How would I make put these images in to a SKTextureAtlas (so I can animate in an SKAction) without splitting up the individual files? I have seen and done this before, but not using…
Keely
  • 366
  • 1
  • 4
  • 19
9
votes
1 answer

Multiple icons stored in one image file

Is it possible to store multiple small images or icons as parts of a single image, so that my webpage can get all the icons it needs from a single GET request. This would help my page load faster. This is an example of the sort of composite image…
Paul B
  • 199
  • 1
  • 4
  • 13
8
votes
2 answers

Spritesheet in Silverlight

Does anyone have an example of using a spritesheet in Silverlight? I'd like to clip the image and, when a button is pressed, jump to the next frame. (If the user keeps tapping the button, it'll look like an animation). I've looked around but haven't…
Skoder
  • 3,983
  • 11
  • 46
  • 73
8
votes
1 answer

Pixi.js generate SpriteSheet Animation or MovieClip from an animated gif file

I am making a game that allows the player to link to their own gif images and immediately make them playable in the game, and need to convert animated .gif files into spritesheets. I have a jsfiddle that will load any image you past into the input,…
Brian
  • 81
  • 1
  • 2
7
votes
3 answers

How can I scale/stretch/skew a sprite from a sprite sheet with javascript?

Some background: I am making a raycaster, well... was making. But I decided to change it up a bit. I started off going on creating the ray caster and decided it would be so much easier to just display an icon and stretch/skew it instead of just…
Tgwizman
  • 1,469
  • 2
  • 19
  • 34
7
votes
1 answer

How do I use texSubImage2D to show sprites in webgl?

I can display my entire sprite (32x512) successfully with this call to gl.texImage2D: gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); It's squished horizontally, like I expected, but it renders on the screen at least. I'm…
Nick
  • 9,792
  • 7
  • 50
  • 60
7
votes
1 answer

SVG Fragment Sprite + CSS Background Image in Safari

I am working on a site where I am using a SVG fragments file and loading in particular SVGs via CSS background images. I also have a PNG fallback and I'm using the below as as basis for the work: …
redspark
  • 71
  • 2
7
votes
1 answer

How to use a sprite sheet in swift and sprite kit?

Title says it all. How do i use a sprite sheet in swift and sprite kit? I've searched google, stack exchange, and the apple documentation and I can't figure this one out.
ItsLolgical
  • 622
  • 4
  • 11
7
votes
2 answers

svg + Sprite sheet + d3 + clipPath + position + size

Need to apologize in advance: for length and for my ignorance. I'm trying to teach myself new concepts: d3.js and sprite sheets. The sprite sheet concept is simple to understand, but I'm confused how to integrate this into d3. Basically what I want…
James
  • 2,488
  • 2
  • 28
  • 45
7
votes
1 answer

Reverse engineering: Extract images/sprite sheet from apk

I'm learning about game development and I'm trying to extract some resources from some games that I love to play, I'm doing this just to learn more about sprites and resource organization. The problem is every game I extract the images come with…
Leandro Beni
  • 79
  • 1
  • 1
  • 3
7
votes
2 answers

Using Spritesheets in Tkinter

I'm writing a GUI in Python's Tkinter, and I can't find how to use the canvas's create_image method to only draw a single sprite from a spritesheet. Thanks in advance to anyone who can tell me what I need to do for this!
Derek Peirce
  • 337
  • 5
  • 10
7
votes
1 answer

Drawing a Circular Timer (AndEngine)

I'm using AndEngine, and within that framework, I'd like to make a circular timer graphic. Specifically, I'd like to display the wait period for reuse of an ability. The idea is to dynamically fill the arc as the timer progresses. Something like…
Cameron Fredman
  • 1,259
  • 11
  • 24
1
2 3
33 34