Best practice - image resolution for a story app

Mells · April 2012

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!

ar2rsawseen · April 2012

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.

gorkem · April 2012

Welcome Mells, hope you'll be more productive with Gideros Studio. Do not hesitate to flood here with your questions if you are stuck

deniz · April 2012

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!

avo · April 2012

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.

Mells · 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? }

deniz · April 2012

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... )

Mells · April 2012

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?

deniz · April 2012

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.

Mells · May 2012

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.

deniz · May 2012

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!:)

marbolec · August 2012

@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?

ps. sorry for my english

deniz · August 2012

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!

marbolec · August 2012

Wow! Thanks alot

marbolec · 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

deniz · August 2012

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?

marbolec · August 2012

Ups,
thanks for the correction. It works perfectly now

deniz · September 2012

Great!:)

marbolec · October 2012

Hi @deniz, since Android has more screen size options, what is the image resolution that you recommend that I should work with?

deniz · October 2012

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?

marbolec · October 2012

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...

deniz · October 2012

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...

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Best practice - image resolution for a story app

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Best practice - image resolution for a story app

Comments