Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Best practice - image resolution for a story app — Gideros Forum

Best practice - image resolution for a story app

MellsMells Guru
edited April 2012 in General questions
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!

Likes: deniz, bora

twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps
Tagged:
+1 -1 (+2 / -0 )Share on Facebook

Comments

  • ar2rsawseenar2rsawseen Maintainer
    Well, firstly you could set logical size in app property and set automatic scaling, which helps a lot with multiple resolutions.
    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.
  • gorkemgorkem Maintainer
    Welcome Mells, hope you'll be more productive with Gideros Studio. Do not hesitate to flood here with your questions if you are stuck :)
  • denizdeniz Maintainer
    Hello Mells,

    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

    +1 -1 (+3 / -0 )Share on Facebook
  • avoavo Member
    Yes you should work in the new ipad resolution so that your art is sharp on it, and have Gideros automatically scale it down or probably ideally create 1 or 2 more versions at lower resolutions for speed/memory purposes.

    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.
  • MellsMells Guru
    edited April 2012
    Thank you all for the quick and great answers.

    @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? }
    twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps
  • denizdeniz Maintainer
    Hi Mells,

    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... )
  • Hi Deniz,

    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?
    twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps
  • denizdeniz Maintainer
    Here is the text tween sample. Can you take a look? I hope it is understandable...

    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.
    zip
    zip
    TextTweenSample.zip
    843K
  • Thank you very much for your comment @deniz (I thought I had left a reply a few days ago but maybe I didn't submit my comment).
    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.
    twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps
  • denizdeniz Maintainer
    Very glad to hear that! I am currently toying with cool text effects nowadays, I think I can publish some more in a couple of days...
    for the love of interactive books!:)

    Likes: avo

    +1 -1 (+1 / -0 )Share on Facebook
  • @deniz I really like the butterfly animation on your ebook. It has great potential for another uses in children book. Could you share the sample source for learning purpose please? :D

    ps. sorry for my english :|
  • denizdeniz Maintainer
    Hello, glad to hear that. I am sharing the code... You can change the image names and use it.

    kelebek means butterfly in Turkish. Have fun!
    zip
    zip
    kelebek.zip
    942B
  • Wow! Thanks alot :)
  • marbolecmarbolec Member
    edited August 2012
    @deniz
    I tried your code, but the background is also moving too..
    Page6 = gideros.class(Sprite)
     
    function Page6:init()
    	self.bitmap = Bitmap.new(TextureRegion.new(Texture.new("gfx/hal02.png", true)))	
     
    	self.scale1 = scale1
    	self.scale2 = scale2
     
    	self.kanat = {}
    	self.kanat[1] = Bitmap.new(TextureRegion.new(Texture.new("gfx/mouse1.png", true)))	
    	self.kanat[2] = Bitmap.new(TextureRegion.new(Texture.new("gfx/mouse2.png", true)))		
     
    	self.kanat[1]:setX(550)
    	self.kanat[1]:setY(550)
    	self.kanat[2]:setX(550)
    	self.kanat[2]:setY(550)
     
    	self:addChild(self.bitmap)
    	self:addChild(self.kanat[1])
    	self:addChild(self.kanat[2])
     
     
    	self:setX(0)
    	self:setY(0)
     
    	self.kanat[2]:setVisible(false)	
     
    	self:addEventListener(Event.ADDED_TO_STAGE, self.onAddedToStage, self)	
    	self:addEventListener(Event.REMOVED_FROM_STAGE, self.onRemovedFromStage, self)	
     
    	self.animationOn = false
     
    	self.count = 1
     
    	self.x = -1
    	self.y = -1
     
    	self.count1 = 0
     
    	self.t = 0.001
     
    end
     
    function Page6:onAddedToStage()
    	self:addEventListener(Event.ENTER_FRAME, self.onEnterFrame, self)
    	self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self)	
     
    end
     
    function Page6:onRemovedFromStage()
    	self:removeEventListener(Event.ENTER_FRAME, self.onEnterFrame, self)
    end	
     
     
    function Page6:onEnterFrame(event)
    	if self.animationOn then
    		self:setX(self.x + self:getX())
    		self:setY(self.y + self:getY())
    		if (self.count == 10)	 then 
    			if (self.selected == 1) then
    				self.kanat[1]:setVisible(false)
    				self.kanat[2]:setVisible(true)
    				self.selected = 2
    			else
    				self.kanat[1]:setVisible(true)
    				self.kanat[2]:setVisible(false)
    				self.selected = 1
    			end	
    			self.count = 0
    		end	
    		self.count = self.count +1
     
    		if (self.count1 == 20) then
    			self.x = 2 *  math.sin(self.t) - 1
    			self.y =  self.t * self.t / 100 - 2 *  math.cos(self.t) - 1
    			self.count1 = 0
    			self.t = self.t + 1
     
    			if (self.t > 10) then
    				self.animationOn = false
    			end
    		end
     
    		self.count1 = self.count1 + 1
    		if (self:getX() < 0) then self:setX(760) end
    		if (self:getY() < 0) then self:setY(950) end	
    	end 
    end
     
    function Page6:onMouseDown(event)
    	if (self:hitTestPoint(event.x, event.y) == true) then
    		self.animationOn = true
    		self.t = 0
     
     
    		if (self:getX() < 0) then self:setX(760) end
    		if (self:getY() < 0) then self:setY(950) end
     
    	end	
    end
  • denizdeniz Maintainer
    Actually I thought you add the kelebek class itself. And create an instance of it in the Page6.

    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?
  • Ups,
    thanks for the correction. It works perfectly now :D
  • Hi @deniz, since Android has more screen size options, what is the image resolution that you recommend that I should work with?
  • denizdeniz Maintainer
    Hi @marbolec,

    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?

  • Well, the iPad and iPhone version is almost finished, but I want to reduce the file size for android version. Is it good if I start with 800x480? since it's the most popular resolution on Android...
  • denizdeniz Maintainer
    Here are all the android resolutions: http://en.wikipedia.org/wiki/Comparison_of_Android_devices

    I think the highest is 1280x800 which is Galaxy Note But 800x480 seems more popular. You can go with it I think...
Sign In or Register to comment.