Note: Graphics 2.0 is now in public beta for all Corona SDK Pro and Enterprise subscribers. Please see Walter’s recent blog piece on the news.


Control-Center-ios 7One of the coolest things about Corona’s next-generation engine (currently in private alpha) is the ability to take individual features and put them together in powerful ways. And since Apple just released iOS 7 this week, I’m going to show you how to reproduce the cool translucent glass effect in Corona SDK!

We’re going to combine containers, anchor points, and the blur filter effect to make it come alive.

You can see this effect in iOS 7 anytime you bring up Control Center, you’ll notice that as the overlay comes up from the bottom, it blurs the background beneath it.

Here’s a mockup we made using Corona’s new Graphics 2.0 engine to achieve the same effect:

In the video, we show this as a progression of several steps:

  1. Create a container that changes height, blurring the background underneath
  2. Darken the container so it’s easier to see the blur effect
  3. Display the Control Center buttons (it’s just a single PNG)

Most of the trickiness is in that first step. There’s actually a trick where your eye thinks the background underneath is blurred, but it’s in fact a screenshot that’s blurred and placed on top. The screenshot clip changes in height to complete the illusion.

To achieve this, we just use a container that grows from the bottom of the screen. So first step is to create a container, and position it at the bottom of the screen. The initial height is 30:

-- Create container and position at bottom of screen
local initialH = 30
local finalH = 430
local container = display.newContainer( display.contentWidth, initialH )
container:translate( display.contentCenterX, display.contentHeight )
 

We have to set it up so that the container grows from the bottom of the screen, not its center (the default). We also set the ‘anchorChildren’ property to ‘false’. Otherwise, clip height changes will affect the position of the children:

-- Ensure container grows from the bottom, not the middle
container.anchorY = 1
container.anchorChildren = false
 

Next step is where the magic happens. We take a screen capture, apply a blur filter, and place it inside the container. The illusion that we create is that as the height of the container grows, the blurred screenshot exactly overlays the original screen. Your eye thinks there’s translucent glass, but it’s just really a blurred object sitting on top of the original screen:

local screenShot = display.captureScreen()
screenShot.fill.effect = "filter.blur"
screenShot.anchorY = 1
container:insert( screenShot )

-- Grow the container height
transition.to( container, { height=finalH, time=600, transition=easing.outQuad })
 

The last two steps are pretty straightforward:

-- Step 2: Darken the overlay with a translucent rectangle
local overlay = display.newRect( 0, 0, w, h)
overlay.anchorY = 1
overlay:setFillColor( 0.5, 0.5 )
container:insert( overlay )

-- Step 3: Add image of control center buttons
local control = display.newImageRect( "ControlCenter.png", 320, 430 )
control.y = -initialH
control.anchorY = 0
container:insert( control )

-- Pin the controls to the top of the container, as it grows
transition.to( control, { y=-finalH, time=600, transition=easing.outQuad })
 

* * *

With the launch of iOS 7, it’s becoming clear that Apple is really leveraging their graphics pipeline in ways that weren’t possible when the first iPhone came out. In fact, here’s how Apple’s Craig Federighi describes iOS 7’s new look linking it directly to advances in the graphics hardware:

“This is the first post-Retina (Display) UI (user interface), with amazing graphics processing thanks to tremendous GPU (graphics processing unit) power growth, so we had a different set of tools to bring to bear on the problem as compared to seven years ago (when the iPhone first launched).”

We agree — only we think you should be able to do this whether or not you’re on iOS!

  1. local screenShot = display.captureScreen()
    screenShot.fill.effect = “filter.blur”

    That’s butter. I’ve been wanting this effect for so long… I’m totally going to use this. Thanks!

  2. I was searching for some information regarding mapping older versions to newer iOS and came through this post. Nice post, will definitely share with my team and give it a try.
    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>