iOS7 Parallax Effect

Mells · July 2013

Hi,

I was searching for some code sample showing this effect in action.
Has it been shared on the forums in the past?
How hard would it be to achieve that effect?
(Would like to use it for a storybook)

It has been used for years already, but here is an explanation.

Thanks

Mells · July 2013

@ar2rsawseen any idea? (I bump before it disappears in the undergrounds of the forum foreveeeeeeer

tkhnoman · July 2013

Well, easy to achieve, just setting a layer's position(or even each sprite) with a certain multiplier, in fact we did it for our game even before iOS 7 done that,
but then we drop it, since our game is side-scrolling action game, and it made the player feel dizzy. Totally worsen the game.

For story book, i've seen plenty use it even before iOS 7 also.

Mells · July 2013

@tkhnoman
Yes I do acknowledge the fact that's it's been used way before iOS7 already :

It has been used for years already,

Which I thought would increase the chances that a code sample would have been shared in the forums maybe?
Maybe you have some code sample to share?

tkhnoman · July 2013

Well, i deleted the code since i think i won't use it.
But it's just like obtaining from accelerometer, then do something like:
aGroup:setPosition(x,y)
bGroup:setPosition(x * 1.2,y * 1.2)
cGroup:setPosition(x * 0.5,y * 0.5)

Edit: forgot to say that you of course need to process x&y obtained from accelero a little bit.
And yes, there is a better thing to do this, so it would be smoother.
Like giving a target of transition instead of setting it directly.

ar2rsawseen · July 2013

@Mells sorry but I still don't understand the effect. I watched the video, he is rotating screen, but nothing really changes? :-/ should there be something specific to look for? What should I see?

Mells · July 2013

@ar2rsawseen
Do you see what is happening here?

or there :

I don't know well how to explain, all layers don't tilt with the same factor (depending on their virtual distance from the screen).

ar2rsawseen · July 2013

@Mells ok all I can do is set up the basics and you can try fiddling with parameters to achieve what you want. Give me a minute

ar2rsawseen · July 2013

Ok here is the code.
And I've also attached the sample project, hope that helps

application:setKeepAwake(true)--just to keep it awake
 
--paralax speed settings
--just to make it really visible
--you will probably want to use smaller values
local speedX = 100
local speedY = 100
local speedRatio = 0.5 --how many times slower should move the foregound
local filter = 0.5  -- the filtering constant, 1.0 means no filtering, lower values mean more filtering
 
--background image
local bg = Bitmap.new(Texture.new("ios7_bg.png", true))
bg:setAnchorPoint(0.5, 0.5)
bg:setPosition(application:getContentWidth()/2, application:getContentHeight()/2)
stage:addChild(bg)
 
--foreground image
local fg = Bitmap.new(Texture.new("ios7_icons.png", true))
fg:setScale(0.8)
fg:setAnchorPoint(0.5, 0.5)
fg:setPosition(application:getContentWidth()/2, application:getContentHeight()/2)
stage:addChild(fg)
 
 
--ACCELEROMETER STUFF
local accelerometer = Accelerometer.new()
accelerometer:start()
 
local fx, fy, fz = 0, 0, 0
 
local function onEnterFrame()
	-- get accelerometer values
	local x, y, z = accelerometer:getAcceleration()
 
	-- do the low-pass filtering
	fx = x * filter + fx * (1 - filter)
	fy = y * filter + fy * (1 - filter)
	fz = z * filter + fz * (1 - filter)
 
	--moving background
	bg:setPosition(speedX + fx * speedX, speedY + fy * speedY)
	--moving fore ground
	fg:setPosition(speedX*speedRatio + fx * speedX*speedRatio, speedY*speedRatio + fy * speedY*speedRatio)
 
	--we can even try to scale them a bit to achieve 3d effect
	--bg:setScale(1-fx*0.5, 1-fy*0.5) -- but it did not seem to work for me <img class="emoji" src="http://forum.gideros.rocks/resources/emoji/smile.png" title=":)" alt=":)" height="20" />
end
 
stage:addEventListener(Event.ENTER_FRAME, onEnterFrame)

fxone · July 2013

@ar2rsawseen with

filter = 0.1

it looks much better (less shaking) on my device (2,8"), great job! How is it at your devices? It must be calibrated at every device individually?

Mells · July 2013

@ar2rsawseen
Wow thank you, I certainly didn't want to reinvent the wheel but didn't expect you to provide a solution.
I have modified the script a little bit (it seems to be bg:setPosition(speedX ##-## fx * speedX (...) by looking at the videos, for example).

1. Would you know how to take the natural position of the phone (when holding it naturally) instead of having it flat as a reference point?
It should be a matter of applying an offset, I'm going to try too..
Or anyone? Arturs already kindly helped

2. On an iPod 5 the bg is totally offset. Don't need to work on it, you probably have better things to do.

thanks again

Edit : there is also a perspective effect. I don't know how to use Matrices (skew is not the right effect) but I believe it's the way to do it.

ar2rsawseen · July 2013

@Mells yes I've tried do the perspective thing with scaling (thought would work nicely but it does not seem to be).

And by taking reference point, you mean in the state phone launched the app, and then go relatively from there?

Mells · July 2013

@ar2rsawseen
Mmm how is Apple doing it with ios7?
It seems that they decided arbitrarily the position in which people are using their phone the most (unless they allow users to calibrate which I think won't happen).

From that position (instead of using the raw accelerometer datas when the phone is on a flat surface) they detect the tilt movement, I think.

ar2rsawseen · July 2013

Well theoretically, currently I'm using x and y coordinates which probably are more meant for the position of the phone where it is in parallel to the ground, like when you put it on the table.
if you want to hold it in your hand vertically so it faces your face with screen, you can try replace y value from accelerometer with z value

Mells · July 2013

I will play more with it and experiment, thanks for showing a way to get started @ar2rsawseen.

Platypus · July 2013

While you are viewing the iOS 7 home screen, perhaps the front-facing camera is monitoring the offset of your face from the centre of the field of view!

OZApps · July 2013

I will play more with it and experiment, thanks for showing a way to get started @ar2rsawseen.

If you use some really small values of movement, then you can use it in any orientation, a person has to really move the phone to an angle to see a tilt. Small values of movement would work best (in my opinion)

3D Perspective rendering in iOS also add to that sense of realism, maybe bhWax could help. However you will have to set up additional code to include the Transforms, etc into WAX as it is not included at the moment.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

iOS7 Parallax Effect

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

iOS7 Parallax Effect

Comments