I've created a single sprite sheet for my game app, with each frame 100x100 px.
Everything's been working well until after I added a few more rows to the sprite sheet, then suddenly nothing gets drawn onto the screen any more. I reverted the sprite sheet back to an earlier version, which had less rows, and everything works again.
The sprite that works is 400w*900h px, and the one that stopped working is 400w*1400h px... I suppose there's a middle ground somewhere I just haven't bothered to look for it.
My question is what is there a dimension limitation on the resource image files? And is there another way to get around what I just descripted other than splitting it into different files?
Thanks in advance
edit: getMaximumBitmapHeight() helped a little: On my testing device (nexus galaxy) it's only 2000 something... And on the emulator is in the 30k range :S Is there a way to set the allowed size? And if anyone knows... how different is it from phone to phone
The Canvas class has a method getMaximumBitmapHeight() (& width , naturally ) to give you this information for a given device, you can just print it in a log message.
On possible work-around is adding columns. Your image is only 400px wide but 1400 in height. It could be that 1400 is too wide but I very much doubt 400px is too wide.
Related
I have few scenes in my project. I was able to center all of the other scenes. But i cannot center the main scene in my project. Its fine when it opened on a mobile device(probably because resolution matches i guess). but when i opened it in tablet(its an old tab "xiaomi tab 3") its always align to the right on the screen. I was able to center other scenes but i cant center the main scene to screen for some reason. project setting set as 2D and Expand. I also tried to use Control nod, canves layers, margine containers.. but nothing works. If someone can give any suggestions, Thank you in advance.
img1
https://i.stack.imgur.com/FJOHl.jpg
project
1920 x 1080
I have seen this problem, or similar, in windowed mode. I don't know if this is the exact case, but if it doesn't mess with your project, try full-screen mode.
If it's that, you can also take care of the window bar size (which is a problem because it can change from different devices), since godot will count its pixels too.
Notice that you're only having this problem in one axis.
Also, I think you could take a look into the Viewport Stretch Mode. It could mess your graphics depending of the intended result—but other projects won't even notice, so judge for yourself.
The viewport setting sets the root scene’s Viewport to the base resolution. The rendered output of the root Viewport is then scaled to the display resolution. [...]
The viewport setting is a better choice than the 2d setting when pixel-perfect precision is required, since primary rendering still occurs at the base resolution.
Support multiple devices
Scaling correctly for all devices could be an odyssey, so bon voyage.
I'm in the beginning stages of developing my first app and wanted to know what I can do from now to make sure my app runs equally well across all Android devices. I don't have access to another device right now to test whether or not it will scale but have I noticed that if I rotate my device to landscape, the items in the view (e.g. buttons, icons) don't scale at all to fit the screen. This makes me worry that it won't be very compatible with other devices.
I find myself putting items in each view by messing with paddings and margins in the XML till I have it right - but now I realise that this makes the layouts specific to my device. Is there a "correct" way of doin this? For instance, if I had to draw 4 horizontal lines equally spaced across the width of a screen how would I achieve this so that the width between the lines are determined according to the size of the screen?
I have a large image in my MainActivity but for some reason it gets really small if I switch to landscape.
Can anybody shed some light on this? Would be really grateful, thanks.
This issue is addressed here:
http://developer.android.com/guide/practices/screens_support.html
I'm creating an iOs APP in adobe flash cs6 and everything works fine.
however the issue that I have now is the content of the app gets stretched in bigger iPhones like iPhone 5!
I am using the following code in my AS3 code on the first frame of the first layer:
import flash.display.Sprite;
import flash.display.Screen;
import flash.geom.Rectangle;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.system.Capabilities;
import flash.display.MovieClip;
import flash.display.*;
import flash.events.*;
import flash.geom.*;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.scaleMode = StageScaleMode.NO_BORDER;
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.EXACT_FIT;
I am using the code above so the entire APP will fit every screen and it works fine but everything (the content of the APP) gets stretched!
is there anything i can do to keep the aspect ratio of the content while fitting the APP to every screen like my code above?
Thanks in advance
EDIT:
I've removed the stage.scaleMode = StageScaleMode.EXACT_FIT; and when i viewed the APP in the iphone, it doesn't get stretched BUT everything's slightly gone to the right which result in hiding the small part of the APP on the right side of the screen!
Despite Daniel is right, a more detailed answer is needed.
The truth is that this is a bit more sophisticated than you think. There is no way that Flash knows how to position your elements - sometimes you would like your button to stretch, but not that much. Or to keep it's aspect ratio, but then some of the content will fall out.
How it's usually done? The best practices in this field is to have a fixed stage viewport (initial stage size). Usually this is fixed at 320x480. Then, you let your app stretch this (if you run a bigger screen, your 320 pixels would be awfully scaled, and so pixelized).
Here comes the tricky part - depending on device resolution and dpi, you provide specific assets. Let's say you run your app on device that is twice your 'initial fixed viewport'. Then everything will seems zoomed twice (640x960 is twice 320x480). Everything is in pixels.
But here you provide graphics that are also twice as big - 640x960. This means that if you run them on the basic stage, they will be downsized - becoming 320x480. But if you run them on a bigger screen, the stage gets zoomed in (as talked before), and the graphics now become their actual size.
Imagine that each phone has the same display size (let's say 4 inches). But every one has different resolution - 320x840, 640x960, 720x1280, and so on. So if you want your app to look exactly the same, having a button that is 100% wide - then provide a graphic for it that is 100% of the resolution! So your graphic should come in different sized for each display - 320px, 640px, etc.
Of course you cannot match all the devices. So here comes 'aspect ration' - a number that indicates how much the screen is bigger. If your base is 320x480, and you run on 640x960, your aspect ratio would be 2. So you get your assets from folder 'assetsx2' (or whatever you call it, as long as you got some system to read it). If you run on different display and the ration gets for example 2.8, you would round it to 3. This way images would get a little scaled, but scaling 3 to 2.8 is better than scaling 3 to 1, right? The more you scale, the blurry it gets.
I'm sorry for the long answer, but I tried to explain it not very technical. There are great articles about that. These two resources helped me the most when I started:
http://sebastien-gabriel.com/designers-guide-to-dpi/home - info what's going on
http://screensiz.es/phone - info about different devices, their size, resolution, aspect ratio, and info about how your folder should be named (there are conventions).
Hope that helps! :)
p.s.
Forgot to add that this is all about graphics, having in mind that you build an UI maybe, so you use graphics. Despite that, the whole idea works no matter what kind of graphics you use - you just need to work with fixed size stage, position everything according to it, and then think of the scale factor. So for having a 100% wide button on 640px wide screen, instead of making it 620px wide with 10px margins on each side, you make it 310px with 5 px margin on each side.
no.
There's no way to magically deal with this. You have to tell it how to arrange the content.
I created a sprite that is 18 frames long and it is supposed to be stationary and run through the frames and loop the animation, but when it runs it moves slowly across the screen as it animates until it hits the last frame then jerks back to the original position where it was suppose to stay at.
I don't know the reason it does this and have tried to make it smaller sizes and larger sizes, at some sizes it does not move but just animates likes its supposed to do.
If anyone has an answer to why this happens and how to stop it from moving and stay where it is supposed to be it would be greatly appreciated.
I use only 1 row for the sprite and I used gimp to create the sprite and saved it as a png.
The code is rather long thats why I didn't add it but it based on this tutorial
aquarium live wallpaper tutorial
I think I found my answer though, I had the png sprite in a folder I created named drawable, where I put all the images, I tried it again but put the sprite in the other folders this time and it didn't move, I tried scaling the sprite also which made it go a bit wonky, I was hoping on using scaling instead so it stayed the same size for all screens, this works for normal images but for sprites it causes some issues, maybe I'll try that with the largest size in the drawable-large-mdpi folder and see if it causes any issues that way.
I'll update with that method and let you know.
It would be nice to have just one image and scale it instead according to screen size.
Okay I found the answer finally and it might help those creating sprites,the width when divided into the amount frames has to be a whole number since the measurements are in int not float or double, so it moves because when the frame gets divided it came out to a fraction instead which caused it to moves (I guess) whatever that float extra measurement was.
Example: if the sprite was 100 pixels high and 1082 px wide and I had 15 frames the width of each frame would then be 72.133333333px wide for each frame causing an error that would move the image that extra length while keeping the animation looking nice. now if it was 1080px wide each frame would then be 72px wide a nice whole number and then would animate perfectly.
So for those creating there own sprites make sure the wide equals out to be a whole number when the frames get divided (My problem was I was creating one image scaling it down and not checking the width of each frame so only one image size usually work, sometimes I got lucky and got two, I should of figured this out because it all runs in int not float for measuring the width.
Hope this helps out someone else making sprites.
Sam
I have a problem that occurs on some displays (HTC Hero, Motorola Defy, HVGA emulator) where some bitmaps are distorted in a peculiar way: The image apparently is shifted by one or two pixels, e.g. to the left, and the resulting gap on the right side is filled by duplicating pixels from the right border of the bitmap. I use pre-computed LDPI/MDPI/HDPI versions of these bitmaps, e.g. a notification icon that fits the specs for notification icons.
I attached two images that show the effect. Please note: even though it might appear that the bitmap is tiled, this is not the case, other images consistently show that the pixels are not wrapped around but duplicated/stretched.
Has anybody ever had a similar problem?
Thanks in advance for any clues that could help me solve this issue,
Arne