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 :)
Related
I Have an image for a homepage screen. The top part of the image when clicked should lead to the second tab, the left hand side of the image when clicked goes to the third tab and so on.
Basically geotagging an image , so that i can make areas of the image clickable leading to different tabs
I tried implementing using a map chart where i added an image layer, and added this image. Some solutions asked me to add a marker layer with x,y coordinates but I'm unsure on how to proceed on my image
Kindly help with any alternative solution
it sounds like you want an image map. "geo tagging" is when geographic info like latitude and longitude are added to an image.
your best bet is to use a text area with a table filled with image-type action controls. if you have Photoshop, you can use a technique called Image Slicing to prepare your images.
FYI, this is probably not a simple task, especially if you don't know much about HTML. you may want to consider a different navigation scheme.
if you update your question with more detail about the end result you are trying to achieve, maybe someone can share a more fitting solution. http://mywiki.wooledge.org/XyProblem
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.
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:
Is it possible to move part of the texture into another texture part without performance hits?
I looked into opengl SDK, but haven't found anything that could do something like this.
glCopyPixels lets you to copy from one framebuffer area into another (I never used it).
glBlitFramebuffer lets you to copy pixels between framebuffers
glCopyTexImage lets you to copy pixels from framebuffer into a texture
Using these function you can accomplish the task by, for example, the following actions:
create FBO, attach texture-1 into the first color channel
bind fbo, set viewport to contain the source area
call glCopyTexSubImage into the texture-2 to get the contents
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.