Here is an example scenario
Project A has a 2048x2048 sprite sheet and when unpacked, has 50 png images spread over the sprite sheet.
Project B is needed to be a clone, however, it has 50 DIFFERENT png images recreated in exact same dimensions and file names however they are different images.
Can you make it so that the new images appear in EXACTLY the same place as in Project A? And the resulting sprite sheet is exactly the same dimensions, just different images?
Chris
There is no difference, what size your spritesheet has. And what images contents. For your program it is just texture with description, that allows to create spriteframes with different parts of this texture and make them alias with spriteframe names. You can split your spritesheet(create two instead of one), change pictures, etc. The only thing that you can worry about is that all spriteframes should have the same names if you don't want to change the code of your project. Oh, and if you don't want to change positions, new spriteframes must have the same dimensions. As you mentioned, you've already followed these requirements, so you can feel free to use new spritesheet.
Related
I am new to phaser and I am having hard time to find this, probably cause I don't know how to call it. I know you can very simply load image through url, give it name and then use it in a sprite.
But what if I want to load image, which contains lots of different tiled images and use each of them separately? I'd like to somehow define, that for example rectangle at (x,y), using (width, height) is an image, that I can then use in spritesheet. I found tilemap definition files, but they are usually one file per image.
I found createStaticLayer, where you can pass 2-dimensional array of numbers, where number is order of tile and that works pretty much similarly to how I'd like to use it, but it is for background only and I still can't extract single "image" for single sprite.
How do I do that? How is that called? I am sure it exists, I am just missing it :)
I try to create a 3D video using ImageJ and one of its plugins 3DViewer.
My image came from a 8-bit ANALYZE file. After opening it in ImageJ, I used the LUT to assign a colour to each of 4 entries. Is there a way to change the opaqueness of each colour? For example, red needs to be transparent, where as blue and green should be solid.
Many thanks for your time.
This may not be the best solution, but it worked. I saved the original NIfTI file as two separate files (one contains the entires that will be opaque and another with the entires that will be transparent). I opened both of them on ImageJ, launched 3DViewer with the first image, then added the one that needs to be transparent. There's an option in 3DViewer for making the image transparent.
I am making a deck of cards in Adobe Illustrator. Each card is saved as it's own .ai file so I can change it later if I want to. When using these images in an iOS app, I must convert everything to .png files. Then I must re-size those .png files to have retina and non retina versions. I'm hoping there is a way that will allow me to automatically take a folder of all my .ai files and give .pngs of 200px x 400px and 100 x 200px. Also I'd like the larger ones to automatically be named #2xNameOfOrginalFile.png and the others to be named nameOfOrginalFile.png. I see stuff about batch automated scripting that does stuff like that. I'm curious how simple that is to implement. Is what I'm suggesting possible? Is this an easy process?
Seems pretty easy to do. Someone has posted a script that will do what you want: http://forums.adobe.com/message/4915819
You'll have to change these lines,
pngExportOpts.horizontalScale = 250.0;
pngExportOpts.verticalScale = 250.0;
to calculated values. The scale is a percentage (see: the docs). You can use sourceDoc.width and sourceDoc.height to get the width and height of the original .ai file (in pixels? docs don't say).
You'll also want to modify the getNewName function.
ive used an online srpite service http://spritegen.website-performance.org/ but i want to know how to make them by myself.
How can i save an image that it should be so small but when used on my web site it comes out normal size?
Sprites aren't about making the image itself small, it's about decreasing filesize by packing several images into one.
Take a look at Yahoo's icon sprite. Notice that they have all their section icons stacked vertically in one large image. They then use CSS to position the background to only show a small window of the sprite image, thus giving you just the icon.
In the end, it's up to you how you arrange your sprite. Check out the bottom of Amazon's sprite.
Either way, hopefully that helps gives you a better idea of the concept of sprites.
From the very site you link:
CSS sprites are a way to reduce the
number of HTTP requests made for image
resources referenced by your site.
Images are combined into one larger
image at defined X and Y coorindates.
Having assigned this generated image
to relevant page elements the
background-position CSS property can
then be used to shift the visible area
to the required component image.
So there is nothing magical involved: you simply need to pack all your pictures into a single giant image with your favourite graphics tool and insert them as CSS background. Just look at this CSS sprite by Google:
I have a path I've created in Illustrator and saved as an SVG.
Now I want to programmatically place it at different sizes and coordinates on a large canvas.
Say I've got this image:
(source: omgtldr.com)
How would I reproduce that same image in different places and sizes in one SVG file, like this:
(source: omgtldr.com)
for example, one version shrunk by 20% at coordinates x,y; another enlarged by 30% at coordinates a,b and so on.
Please assume I'm going to be OK with the programming part, I'm comfortable working with XML files. It's the SVG parts I don't understand.
You need the transform attribute. You can move your paths with translate and resize them with scale.
Better to use the <use> element (transformed) than to copy your path for each instance.