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

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)

results matching ""

    No results matching ""