Hi Gideros community,
I'm a new user and I'm currently evaluating Gideros to see if it fits my requirements.
I have been working as a book author/illustrator for 8+years, and I'm currently working on a collection of story apps.
The discussions seem both friendly and professional here, I like the attitude of the team behind Gideros + the quality of the answers given on the forum by other devs.
So here is my simple question :
I'm working on a story app, and the pictures should take all the screen estate.
->
What is the image resolution that you recommend that I should work with? What is the best practice?I want to work at the highest resolution possible, and have my images scale down for little screens (phone).
Should I work at the new iPad resolution?
I have tried to find the solution in the related section in
the Ultimate Guide to Gideros Studio but this part was not completed yet.
Thank you for your help!
Comments
I'd use LetterBox scaling.
http://www.giderosmobile.com/documentation/automatic_screen_scaling.html
Then you can set up multiple images for different resolutions:
http://www.giderosmobile.com/documentation/automatic_image_resolution.html
It's good to have at least 2 different sizes for each image (one for phone and one for tablet), but you can have more, if you want.
I can tell you how I made Elephant's Bath, storybook. I prefer to design the book for the iPad using the high resolution images.
Then, on the properties screen of the project, I add a suffix like "@half" and 0.5 as the scaling factor.
Then, for each image, I select (in the IDE click the image with right mouse button) "Automatic downsizing" and add all the smaller resolution images (with suffix, they are automatically generated on the related folder) to the project.
After that, I test the book on the iPhone. I prefer to use "FitHeight" but it depends on the book, letterbox could also be used. If you design you book with the iPhone resolution and the scaling on mind, I suggest not to put the writings and important objects to the sides. It helped me.
You may want to check the book on the iPhone and iPad, it is free.
http://itunes.apple.com/tr/app/elephants-bath/id482034586?mt=8
http://itunes.apple.com/tr/app/elephants-bath-hd/id482040393?mt=8
Cheers!
Likes: avo, gorkem, OZApps
If you are only doing iOS devices its fairly straightforward to since there's only 2 aspect ratios to worry about.
It can get confusing quick for Android since there are so many resolutions, but generally you want to extend the background beyond what will normally be displayed so that you won't get black bars, and only place elements inside of an area you know all phones/tablets will display. You could also use logical h/w to place everything but that gets a bit tricky as well.
@ar2rsawseen
Thank you for the link Arturs, and your website is a gold mine.
@gorkem
I will search as much as I can in the documentation/web, but if I'm stuck I won't hesitate to ask here. Thank you
@deniz
Nice app!
The tip for "Automatic downsizing" will be very convenient.
Sounds like a detail, but I like the different effects that you have put on your texts (fade in, etc). Congratulations.
Is that something custom scripted, or is it available in Gideros?
@avo
I think I won't release for Android devices at first because I don't own any device yet to test on it and it seems like a nightmare (or maybe I'm just impressed).
Text placement is definitely something that I need to think about if I adventure myself on Android.
- - - -
From what I understand :
{ Resolution }
So typically I would have to work with images 2048-by-1536 (ex : image.png) to support the highest resolution of the iPad family (last iteration), then by setting several scaling factors and corresponding suffixes in the project properties panel I can generate automatically
image@half.png (1024x768)
But the iPhone 4s resolution is given at 960-by-640-pixel
Should I create a :
suffix @iphonelandscape | scale .45
So that I get the closest resolution being 960x690? (And it'll cut 25px both at top and bottom in LetterBox, or cut the width if set in FitHeight mode).
>>Did I get it well?
{ Dpi }
I know it sounds like a beginner's question, but it's ok I am a beginner.
I believe that requirements are different than in the traditional publishing industry.
So the new iPad can display 264 dpi.
The iPhone 4S 326 dpi.
>> Should I work in 326dpi?
>>>> { Should I work in 2048x1536 in 326dpi to ensure that my art looks as good as it can? }
I am glad you liked the effects!
Everything on the Elephant's Bath is made with Gideros only. I can share the code about the text effects if you like. You may want to check out GTween library, which you can find in : Gideros/Examples/Graphics/Gtween
It is very handy. Today I can send an sample of the text effects if you like.
On the Resolution... Up to now, I used 1024x768 images, but from now on, I will switch to the new resolution. Gideros automatically picks the best images available for the device resolution. If you use 0.45 It makes 921x 691. Since 921 < 960, 0.49 or 0.5 seems a better choice.
And you are right. It you use Fit Height, you loose from the sides. That's why, you may want to avoid to put something important on the sides.
If you put menus, texts or arrows, it is wise to place them with reference to the screen size. You can get the width : application:getDeviceWidth and put an arrow for instance on x = 0 and x = application:getDeviceWidth() - arrow:getWidth().
Or, if you choose to use letterbox, you may want to design accordingly. I would suggest to try both with one page and then decide which way to go.
The higher the resolution, the nicer it looks on the screen, so I would suggest to work in 2048x1536. In digital publishing, the image resolution is what really matters.
(Do you draw by hand? I think it is very cool. Can not wait to see... )
If you use 0.45 It makes 921x 691. Since 921 < 960, 0.49 or 0.5 seems a better choice.
Oh, I don't know why I wrote 0.45 while I've put 0.48 in my project
Today I can send a sample of the text effects if you like.
That would be very kind of you, whenever you have some time, it'd be great for learning purpose.
Do you draw by hand? I think it is very cool. Can not wait to see...
Whenever I can I draw by hand (pencil or sumi-e) but I'm often on the road so I use my wacom and more recently my ipad + Procreate. It works great at least for prototyping.
Thank you!
In digital publishing, the image resolution is what really matters.
So, should I not care about the dpi?
Typically, what are the dpi of your 2048x1536 layered files in The Gimp/Photoshop?
I do not know the dpi of our images, my illustrator friend does all the work. As long as the images are high resolution, I am happy.
Your example file is totally understandable.
About best practices, if it can be useful for somebody else, dpi has no influence when displayed on screen, but I will work myself in 2048x1536 300dpi so I can print artworks and display in an art gallery.
for the love of interactive books!:)
Likes: avo
ps. sorry for my english
kelebek means butterfly in Turkish. Have fun!
I tried your code, but the background is also moving too..
The first bitmap is the body of butterfly,
the kanats are, wings, open and closed states... 3 bitmaps required. I do not know about your images. Is self.bitmap a background image?
thanks for the correction. It works perfectly now
It depends on which automatic screen scaling you prefer to use.
http://www.giderosmobile.com/documentation/automatic_screen_scaling.html
If you use letterbox, the aspect ratio will remain untouched and it will look good on most Android devices.
I generally start with iPad resolutions(highest possible) then adjust iPhone and android resolutions.
If you use "Fit Height" or "Fit Width", I suggest to put interior objects in the middle, since the scene may not fit on the Android screen, so extra work is required.
Maybe after completing the design of one scene, you can test how it looks on different devices and decide, which way to go and design accordingly.
Elephant's Bath used Fit Height.
Does it make sense?
I think the highest is 1280x800 which is Galaxy Note But 800x480 seems more popular. You can go with it I think...