I need to create a sprite graphic, I hope that's the right name for it, to use that with jQuery to move that graphic from position to position to make it look like a gif animation.
As I have 400 graphics (all the same size) which should become one single image later, is there a way to create that sprite automated with Photoshop CS5 or any other Software?
So that it will create that sprite image from all my 400 pics?
I was searching for such a thing now for weeks ...
http://css-sprit.es/
This service might help you.
Also google "generate sprite"
Some css sprite generator are already available. Just upload your images and it will automatically give u the sprite image file and css for it.
http://spritegen.website-performance.org
http://www.csssprites.com
http://csssprites.org
You can use sprite-me. Just bookmark the link provided in the website than open your website and run sprite-me, it will automatically show images used in the website in groups and when clicking on generate sprite, you will get sprite image and css.
I found a little tutorial explaining how to create sprites. It might help you to write your own java program.
https://sites.google.com/site/javagamescorner/home/creating-sprites
Related
I am trying to make a copy of the popular browser game Travian.com. I am currently working on the maps and I was able to get the farms overview image as a png.
What I am trying to accomplish with that map is:
Each element (farm) should be clickable) and redirect to that specific farm page.
As you could see on the map, farms are not just simple squares.
Once I had the farms.png picture, I used on online tool to convert a png into a .svg file. Using a free software, I was able to draw circles around each map to build my svg.
This is the result:
I recently read about canvas and I was wondering if canvas would be a better option in my case rather using svg?
You need to try it yourself and see if it gets redrawn quickly enough that the game is sufficiently responsive for you. If the map is very detailed, the redraw may be too slow and make your game feel slow. You really need to try it and see. If it's too slow for you, then you may need to either:
use bitmap images, or
keep the maps as SVGs, but render them to a Canvas on first load. This way they'll be sharp at whatever resolution screen the user has.
I'm developing a gps tracking app for android using custom SVG maps. I can print my exact position at the SVG map through the device's GPS but I'm having some difficulties when I want to pan/center the screen at my position. Basically the idea is to keep moving/panning the map automatically while i'm moving so the user won't have to do it by himself. I'm using the jquery.panzoom (https://github.com/timmywil/jquery.panzoom). Has anyone did this before, would appreciate any suggestions. Thanks
You could try using SVG fragment identifiers.
http://www.w3.org/TR/SVG11/linking.html#SVGFragmentIdentifiers
Basically you can supply a viewBox in the URL of the SVG you are linking to. That's assuming you are using an external SVG file (ie not embedded).
So for instance, if you want to show the top left 200x200 of an SVG, you can do:
http://url.of.my.svg/map.svg#svgView(viewBox(0,0,200,200))
An example: http://upload.wikimedia.org/wikipedia/commons/2/21/New_Zealand_location_map.svg#svgView(viewBox(800,1600,400,400))
Then when the GPS position changes, you just update the URL. It saves having to mess about with the contents of the file.
The only proviso is that I haven't checked that the Android WebView supports it. I'm assuming you are using a WebView??
How to make thumbnail images for custom Liferay Layouts? If anyone has done it using any open-source software, please help!
In Liferay 6.1 source folder /liferay-portal-src-6.1.0-ce-ga1/portal-web/docroot/layouttpl there is a zip file called thumbnails.zip which in turn contains thumbnails.psd, which contains thumbnail images for all the bundled layout templates. As for an open-source image image editing software, there is Gimp. Unfortunately, I didn't have much luck opening the mentioned file with it - the glossy overlay lost it alpha value and the large background rectangles seemingly lost their gradients and are all solidly colored. You could try Paint.net as well, which also stands in high regard among free image editing software.
The latest version of liferay docs containing any mention of layout templates thumbnails are for Liferay 6.0 series and you can find it here. There is also an empty png layout thumbnail template with proper background gradient, but you would have to make your own gloss over the little light rectangles as well as make the corners round...
All in all, you could also try to make the thumbnails from scratch, give them a more unique look. The image from Liferay docs should give you the idea of what it should like to still look nice next to bundled layouts' thumbnails. I'd just suggest to try and use vector image editing software. The bundled thumbnails all look simple enough to draw them with vectors, which would give you more flexibility and ability to change your mind anytime about details without having to draw everything all over again.
And that's for a 121x121 px image...
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:
When the width of the brower is changed, the image's width or height is also changed dynamically, anyone knows how to do it?
And I found the image's max height of each rows is not the same.
Thank you very much.
I am sure Google's image application is a little more complicated than can be written in a single post, but you could mimic some of the effect with some clever use of jQuery. Here's a quick tutorial on a resizeable image grid using a slider -
Image resize tutorial
You would need to change the trigger from a slider to the resize event, but this has the basics you need.