Magnifying Glass Effect in Corona SDK

In this tutorial, we are going to create a magnifying glass effect by using bitmap mask. Before starting to write code let’s play with Fireworks or your favorite drawing tool and make images we need for this effect.

Creating Necessary Images

First open a new file in Fireworks with black background color, 150px width and 150px height.

New File

Draw a white circle with 120 px radius to the center of canvas and export image as maskImage.jpg

maskImage

Now open a new file with transparent background, 300 px width and 300 px height.

newFile2

Draw a circle to the center with 240px width and height. Fill circle with white color. Add linear transparency from top to bottom and add 10 px gray stroke.

Circle

Now export your circle as magnify@2x.png.

For the background image I used this beautiful underwater scene image but you can use any image you want.

Artwork (c)  Ani Roschier
Artwork (c) Ani Roschier

Writing Code

Open your favorite code editor and write the code below

local myImage = display.newImageRect("underwater.png",480,320)
myImage.x = display.contentWidth*0.5
myImage.y = display.contentHeight*0.5

local scaleMultiplier = 2
local myBigImage = display.newImageRect("underwater.png",480,320)
myBigImage.xScale = scaleMultiplier
myBigImage.yScale = scaleMultiplier

local maskedGroup = display.newGroup()
maskedGroup : insert(myBigImage)
myBigImage.x = display.contentCenterX
myBigImage.y = display.contentCenterY

local mask = graphics.newMask( "maskImage.jpg" )
maskedGroup:setMask( mask )
maskedGroup.maskX = display.contentCenterX
maskedGroup.maskY = display.contentCenterY

local magnify = display.newImageRect("magnify.png",150,150)
magnify.x = display.contentWidth*0.5
magnify.y = display.contentHeight*0.5

local initialX
local initialY


function magnify : touch(e)
	local dx
	local dy 

	if e.phase == "began" then
		display.getCurrentStage():setFocus( self )
		initialX = e.x
		initialY = e.y
	end

	if e.phase == "moved" then
		dx = e.x - initialX
		dy = e.y -initialY

		self.x = self.x + dx
		self.y = self.y + dy
		maskedGroup.maskX = maskedGroup.maskX + dx
		maskedGroup.maskY = maskedGroup.maskY + dy
		myBigImage.x = myBigImage.x - (scaleMultiplier - 1)*dx
		myBigImage.y = myBigImage.y - (scaleMultiplier - 1)*dy

		initialX = e.x
		initialY = e.y
	end

	if e.phase == "ended" then
		
		display.getCurrentStage():setFocus( nil )
	end
	
end

magnify : addEventListener("touch",magnify)

Lines 1-3 : Add your background image to the scene

Line 5 : Define a local variable scaleMultiplier. This variable will determine how much our magnifying glass will scale the image.

Lines 6-8 : Add same background image again but this time name it as myBigImage and make it’s xScale and yScale equal to scaleMultiplier.

Lines 10-13 : Add new display group to the scene and insert myBigImage in it. We will not directly mask myBigImage instead we will mask the display group that it is inserted in because we will need to move myBigImage later and if we directly mask it we can not move it.

Lines 15-18 : Set maskImage.jpg as a mask of maskedGroup and place it to the center of the scene.

Lines 20-22: Add magnify.png to the scene and place it exactly to the top of the maskImage.jpg

Lines 24-25: We will add touch event to our magnifying glass to be able to drag it. We need variables that hold the x and y coordinates of the touch when it begins.

Lines 28-58 : At the “began” phase, equal the event.x and event.y to the initialX and initialY. Now you have where the touch event has began.

At the “moved” phase subtract initialX and initialY from event.x and event.y and find the distance vectors dx and dy.

Add distance vectors to the x and y coordinates of the magnify to drag it. Add dx and dy to the position of the mask to drag it exactly same with magnify.

At line 46-47 you have to move myBigImage to the opposite direction of drag with the magnitude of (scaleMultiplier -1)*dx and (scaleMultiplier -1)*dy. Let me explain it.

Look at the image below. Let red rectangle be our small image, blue one be big image and green circle be magnifying glass. To make the big image, assume we scaled the small one n times. So if the distance of a point to the center is equal to “A” in the small image then it is equal “n*A” in the big image. If we want to see the same point in the magnifying glass then we should move big image to the opposite direction as (n-1)*A times.

mask_explanation

That’s all. If you have any question please don’t hesitate to ask it in your comments.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s