Photo image with Masking

Youtube Demo

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

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

Kwik Components

  • but_fish
  • drag_fish
  • anim_fish


  • Add button

  • Add External code - photo_popup.lua


  • Drag object

  • Auto flip images


  • Bounce widget

  • Starts: Wait request


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.


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


local _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.maskScaleX = 0.5
    child.maskScaleY = 0.5
        UI.scene:dispatchEvent({name = "action_".._target.."_act"})
        local _AC = require("commands.kwik.actionCommand")
        _AC.Animation:playAnimation("anim_" .. _target)

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

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


results matching ""

    No results matching ""