Best way to handle image sizes upon import?
Muphins
Member Posts: 7
Hello
This really, really bothers me:
I have 2 separate images of the stick figure in my game. Image 1 is the stick figure holding nothing. Image 2 is the stick figure holding a sword.
More importantly, by searching these forums, it appears impossible to "constrain" the sword ITSELF to image 1 and have it remain there in the actor's hands.
*And so, I've created separate images. When you pick up the sword, the image changes to image 2. The result: it works, but the stick figure distorts to a smaller width than image 1 -_-*
However, I can see this as my fault, because the image size may not fit the iPhone landscape size. I've checked multiple times to see if that height and width fit the criteria...and it does.
My question:
How does one ensure that the image's 2 stick figure will remain the same size as image 1's stick figure?
Merp this really irritates me because I have no idea where to go about this. On top of that, I don't want to play around with image 2's width in gamesalad. That would take too long imo, and I'm sure there's a way around that... unless that really is the only way?
------------------------------------------------------------------------------------------------------
NOTE: I'm using Inkscape...lol. It's not that I'm poor, it's just that every professional program is costly, and I know I can make the best of what I have. Moreover, I'm sure Inkscape has to the same potential compared to Anime Studio, Boom Toom, etc. Or I could be wrong.
If there is a free, BETTER program than Inkscape...please do tell.
Thanks.
This really, really bothers me:
I have 2 separate images of the stick figure in my game. Image 1 is the stick figure holding nothing. Image 2 is the stick figure holding a sword.
More importantly, by searching these forums, it appears impossible to "constrain" the sword ITSELF to image 1 and have it remain there in the actor's hands.
*And so, I've created separate images. When you pick up the sword, the image changes to image 2. The result: it works, but the stick figure distorts to a smaller width than image 1 -_-*
However, I can see this as my fault, because the image size may not fit the iPhone landscape size. I've checked multiple times to see if that height and width fit the criteria...and it does.
My question:
How does one ensure that the image's 2 stick figure will remain the same size as image 1's stick figure?
Merp this really irritates me because I have no idea where to go about this. On top of that, I don't want to play around with image 2's width in gamesalad. That would take too long imo, and I'm sure there's a way around that... unless that really is the only way?
------------------------------------------------------------------------------------------------------
NOTE: I'm using Inkscape...lol. It's not that I'm poor, it's just that every professional program is costly, and I know I can make the best of what I have. Moreover, I'm sure Inkscape has to the same potential compared to Anime Studio, Boom Toom, etc. Or I could be wrong.
If there is a free, BETTER program than Inkscape...please do tell.
Thanks.
Comments
Constrain attribute: sword X position to stickman X position (+ or - a number) the + or - number after stickman X position is an "offset value". You will have to do this to find the sweet spot for the positioning that you want. You may have to do the same thing for the Y position.
"Depending on what all you plan on doing in the game with the sword performance wise it would be best to change images"
Well, I was planning to make a few animations where the stick figure swings the sword. Would it be best to have a separate image for this?
(I'll try out what you suggested btw)
And Socks,
"...the two images you are using are different sizes"
This is where it gets confusing...are you suggesting that I should correct Image 2's width (image with the stick figure with the sword) so that the sword aligns exactly with the width from image 1 (without sword)?
Personally, I do not like that because I want the sword to be it's own, independent size. If that is not a possibility...it appears as if I'll have to constrain the sword actor to the stick figure instead.
Also, as I side note, I just placed both images on the screen...both stick figures were the same size. It's just that when the image CHANGED, the size distorted. Perhaps a fix to this as well?
Thanks for the help, both of you
My icon shows a pelican and a coin. In the game the pelican moves the coin with its bill. This makes the image wider as his bill moves so I used a transparent background to keep all the image the same size.
EDIT: I haven't made a game with sword fighting and thinking about it I don't see how you could realistically strike an opponent with this method it would need to be a sword actor constrained as mentioned by others.
Universal Binary Template - Universal Binary Template Instructions Rev 4 (Short) - Custom Score Display Template
Basically you need to make sure the two images are the same size (have the same pixel dimensions).
If you have a 100x100 pixel image in a 100x100 actor - and then you change the image to a 200x100 pixel image . . . . then it will appear to be squashed horizontally, because the only way to fit a 200x100 pixel image into a 100x100 box (the actor) is to squash it.
I don't know what any of that means !
Lump Apps and My Assets
Updated . . .
Lump Apps and My Assets
But first I have some questions:
@Colander Please explain the "transparent background (for each image larger than your animations)". The only thing I can infer from "transparent background" is the space surrounding my image. Am I correct?
(I'm pretty sure Inkscape leaves the background transparent to begin with)
Also Colander,
"the pelican moves the coin with its bill"
So when you pick up the coin, does the image change?
Or is the coin constrained to the pelican's bill?
If the coin is constrained...then the image size shouldn't be an issue, considering the image didn't change. Thus there is no image size problem.
@Socks,
"I'm not 100% sure what you are asking here?"
I'm sorry, that's my fault completely. Ignore those confusing statements.
"...are the file sizes (the pixel dimensions of the image file) the same size?"
No.
***Both images are different pixel dimensions unfortunately -_- I do understand why they need to be they have to be the same pixel dimensions, I do, trust me. But...they NEED to be different pixel dimensions. And this is why:
http://i1020.photobucket.com/albums/af327/Muphins/wtf_zpsd65daa44.png
***
I'm a great artist, eh? Lol
My new problem is how I'm going to incorporate animations...without the image changing size
I incorporated Image 3, an animation image, in my Animate rule. The image is the sword just behind his head, ready to swing. HOWEVER, the image is squashed to image 2's actor dimensions. The result is the sword and the stick figure squashed.
Yeah, I think it would be best to constrain the sword actor rather than using two images. Agreed?
If I didn't do this the actor which is a set size say 64x64 px would shrink the images down to fit inside it. The first frame is 64x64 px but as the pelicans bill moves our the next one is 68x64 the one after that is 72*64,etc. These larger images keep getting shrunk to fit inside the pelican actor which has the unintended effect of shrinking the pelican image.
I use Inkscape and I do this by creating a square as large as my largest animation frame and I make it transparent. I then copy it and place the first pelican image in it and group it together then export it as a png file. I do this for every frame and I make my pelican actor the same size. Now everything is the same size, nothing is shrunk and in the animation the pelican remains the same size.
But like I said earlier this is probably not going to work if you are striking another actor with the sword because the image won't overlap the other actor's image.
Universal Binary Template - Universal Binary Template Instructions Rev 4 (Short) - Custom Score Display Template
I'd still offer the same advice, simply make the file sizes (pixel dimensions) the same.
There's no need resize the sword, simply make your file size big enough to accommodate the sword (as in my equally brilliant illustration in my earlier post above
This really isn't an issue, this is something people do all the time . . . . for instance image an animation (an animated image sequence) of someone running, the boundaries of the runner change all the time, as he bounces up and down, swings his arms out wide, then close to his body . . . it would be insane if we had constantly change the shape, size and position of the actor to track the boundaries of the runner, fortunately we don't as the solution is simple, in fact it's not even a solution as there isn't really a problem here, just make the animation frame (the file size in pixels) large enough to accommodate the motion.
e.g . .
Ooooooh. That entire reply makes so much sense now. And creating the backround transparent layer is an absolutely genius idea.
@Socks
Thank you as well. But...I think the reason I didn't understand part of your messages is because your image is just showing up as "image". Just text, no image. So...yeah.
Thanks. I believe that is all I have for now...
http://i44.tinypic.com/3u4c3.jpg
404 - Not Found
It's okay honestly.
Now I just need to figure out how constrain the sword properly...
----------------------------------
sword(prototype)
When actor collides with: actor of type > sword guy
do>
constrain: self.position.x to: ?????
----------------------------------
@mc (or anyone else)
"...to stickman X position (+ or - a number) the + or - number after stickman X position is an "offset value" "
Ah, to an "offset value". Quite intricate. So was the rest.
"...to stickman x position (+ or - a number)"
I'm lost here. How do I select the stickman's properties if I'm under the sword attributes? And how does the (+ or - a number) come into play?
I'd continue to ask more questions...but I'm like thrown off here.
Thanks again to all of you who have replied, you have patience
Ok, no problems, just trying to point something very basic out, like I say changing an image without effecting the size of the frame/actor is trivially easy and is less strain on the processor of your target device, but of course you are free to ignore that method and instead constrain individual character elements to each other . . . here's project I made to help GS users link objects, hopefully it might be some help to you (personally I'd just make your images the same size and avoid all the unnecessary hassle, but I suspect you know that already !
http://forums.gamesalad.com/discussion/62202/linkmachine
Here's my final attempt at showing you the image (new host):
If it's still not working for you take a look at this:
This is what you have:
Normal Image (just the man)
[........M.]
Second Image (man with sword)
[........M....S...]
They are not the same width.
This is what you should have:
Normal Image (just the man)
[........M.........]
Second Image (man with sword)
[........M....S...]
Yeah it just said image lol.
Your diagram makes sense. I see now. I just didn't want the collision to be messed up if I set that width for image 1...but thanks to that transparent background method, all is well.
And I'll make sure to check out that LinkMachine.
Until next time...