Photo image with Masking

Photo image with Masking

Youtube Demo

• https://youtu.be/EjubRnoS9DA

This tutorial updates the previous camera tutorial of Greg Pugh

photo_popup.lua is used as an external code of a button action to load a photo image from device’s galley. When the photo is loaded, it triggers an animation or action.

Sample project is here

• https://kwiksher.com/tutorials/Kwik4/QRPopUp.zip

please open the page 2. The fish layer is configured as a button to load the photo.

Art Layers

• fish shape
• fishMask group
  • fish
  • bg

fishMask is automatically set with the external code. So if you create the same thing for a cat, catMask art group must be created.

• {layer name}Mask

The width and the hight of the mask layers must be divisible by 4

https://docs.coronalabs.com/guide/media/imageMask/index.html

Kwik Components

• but_fish
• drag_fish
• anim_fish

but_fish

• Add button

• Add External code - photo_popup.lua

drag_fish

• Drag object

• Auto flip images

anim_fish

• Bounce widget

• Starts: Wait request

Publish

You need to publish twice. For the first time to generate fishMask.png and for the second time to exclude fishMask.png from image display objects.

On Corona simulator, for the first time, click the fish layer to load a photo image will report the following error in the console.

ERROR: The file (assets/images/p2/fishmask@2x.png) has already been loaded as an image display object, so it cannot be used as a mask.

So we need to stop fishMask to be included in display objects. We only need fishMask.png. The png files have been generated, let’s turn off fishMask

• Turn off fishMask from publishing

  

And then you can publish again.

Notes

• this tutorial does not tell how to take a photo with camera within the app. The photo should be taken by a standard camera application equipped with a real device beforehand.

• the photo to be loaded to the app should be trimmed by a standard photo application in advance. Kwik does not offer the photo edit function.

  For instance, iPad’s photo edit

  With masking and layer’s blend option(multiply) set by the external code, the white background of a photo will be masked out.

  

photo_popup.lua

local _target = params.event.tap.target.name
print(_target)
--
local function photoSelector(param)
	local _target    = param.message
	local child      = layer[param.message]
	local onComplete = function(event)
		-- Create local variable named photo
		print("onComplete", _target .. ".jpg")
		child.fill = {
			type     = "image",
			filename = _target .. ".jpg",
			baseDir  = system.TemporaryDirectory
		}
		child.blendMode = "multiply"
		--
    --local imageSuffix = display.imageSuffix or ""
    local imageSuffix = "@2x"

    -- print(imageSuffix)
    local mask = graphics.newMask( "assets/images/p"..UI.curPage.."/".._target.."mask"..imageSuffix..".png")
    child:setMask(mask)
    child.maskScaleX = 0.5
    child.maskScaleY = 0.5
		--anim_
		UI.scene:dispatchEvent({name = "action_".._target.."_act"})
		--
		local _AC = require("commands.kwik.actionCommand")
		_AC.Animation:playAnimation("anim_" .. _target)

	end
	-- If a camera exists on the device, start camera function
	if media.hasSource(media.PhotoLibrary) then
		media.selectPhoto(
			{
				mediaSource = media.PhotoLibrary,
				listener = onComplete,
				destination = {baseDir = system.TemporaryDirectory, filename = _target .. ".jpg"}
			}
		)
	else
		-- If camera doens’t exist, show alert popup
		native.showAlert("Alert", "This device does not have a camera", {"OK"})
	end
end
--
local param = {message = _target}
photoSelector(param)

Photoshop tips

For instance, a cat image is configured with a color overlay white to make a mask image.

Edit > Stroke is used to a layer to make an edge around a shape and the shape is filled with white

[OUTLINE TEXT IN PHOTOSHOP PHOTOSHOP TUTORIAL] (https://photoshopcafe.com/tutorials/outline/outline.htm) from photoshopcafe.com