Image Replacement From Camera (Intermediate)

This tutorial is by Greg Pugh, owner of Today he will show us how to use your device’s camera to replace an image in your Kwik 2 project!

The finished project will be similar to this:

Please Note: This is an example to demonstrate how you can use the camera on a 3rd Generation iPad to replace an image in your Kwik app. Other devices may require different scaling depending on the camera’s resolution. You will need to add and alter the external coding used in this example if you would like the ability to edit the photos or use them across multiple pages.

The first thing you’ll do is download the source files from here. Once the source files are downloaded and uncompressed, drag the CameraTutorial folder to the location of your choosing. In this example, I chose to save it to my Desktop.

Open Photoshop and in the Kwik 2 panel, click Settings and choose CameraStart as the project folder.

Screen Shot 2013-04-01 at 3.28.53 PM

Be sure to have Kwik export images and sample icons as well.

Screen Shot 2013-04-01 at 3.29.02 PM

In the folder you downloaded, navigate to CameraTutorial > CameraStart and open page1.psd in Photoshop.

Now in the Kwik 2 panel, choose New Project and start a project named CartoonBody for iPad in landscape mode and use page1.psd.

Screen Shot 2013-04-01 at 3.35.33 PM

With the Layers panel open, select both the head and body layers by holding down Shift and clicking on each layer. Then in the Kwik 2 panel, navigate to Project and Pages > Create Groups.

Screen Shot 2013-04-01 at 3.42.45 PM

Name the new group guy and click Create.

Screen Shot 2013-04-01 at 3.45.32 PM

Now in the Kwik 2 panel, navigate to Animations > Linear Animation.

Screen Shot 2013-04-01 at 3.46.53 PM

Name the Linear Animation guyMove and apply to Group – guy. Feel free to move the guy group wherever you’d like and for whatever duration you desire. The important part is that you apply the animation to the guy group. This is to demonstrate how you can replace an image that is already part of a group in Kwik.

Screen Shot 2013-04-01 at 3.48.25 PM

In the Layers panel, select the btn layer. Then in the Kwik 2 panel, navigate to Interactions > Add button.

Screen Shot 2013-04-01 at 3.52.44 PM

Name the button action myBtn and in Interactions, navigate to Code > External Code.

Screen Shot 2013-04-01 at 3.57.59 PM

Browse for ipad3camera.lua and create the new button actions.

Screen Shot 2013-04-01 at 3.58.15 PM

Screen Shot 2013-04-01 at 3.58.20 PM

Now is a good time to save your project and I’ll discuss the external code you just imported. If you find the ipad3camera.lua file and open it in your preferred text editor, you’ll see:

local onComplete = function(event)
— Create local variable named photo
local photo =
— Place photo over the body
photo.x = 745;
photo.y = 380;
— Scale down the photo to match the body scale
— Note that 0.07 scale is ideal for iPad 3rd Generation camera
— Other cameras may need different scaling
photo.xScale = 0.07;
photo.yScale = 0.07;
— Remove the head image placeholder from the group named “guy”
— Insert the newly taken picture in place of the head

— If a camera exists on the device, start camera function
if media.hasSource( media.Camera ) then media.Camera, onComplete )
— If camera doens’t exist, show alert popup
native.showAlert( “Corona”, “This device does not have a camera.”, { “OK” } )

All this code is doing is checking if the device has a camera. If it doesn’t, a popup box will appear notifying the user that a camera doesn’t exist. If a camera does exist, then the camera screen will appear, allowing the user to photograph an image that will replace the “?” on top of our guy’s body.

The important lines are:
photo.xScale = 0.07;
photo.yScale = 0.07;

“0.07” is the scale that I found works best in this instance using a 3rd Generation iPad’s camera. However, when testing in the Corona SDK Simulator, setting the scale numbers to “1” is better. You will have to adjust the scaling number as needed by your app and the device(s) you plan to support.

If you need to change the scale, simply change the number and save the ipad3camera.lua file. When you publish your Kwik project, it will automatically import the updated code from ipad3camera.lua.

To better understand this, click Publish in the Kwik 2 panel to export your project. Open the main.lua in the Corona SDK Simulator. You should see your guy moving around the screen and when you click on the button it will bring up a camera option. If you’re on a Macintosh with a webcam, you’ll see a window similar to the one below.

Screen Shot 2013-04-01 at 4.07.02 PM

You can choose a default image or take a new picture using the webcam. However, when you choose one, you’ll see the image is very small.

Screen Shot 2013-04-01 at 4.07.18 PM

This is because the scale is set to 0.07 as it was made to be exported for a 3rd Generation iPad, not for a Mac computer. When the app is built for iOS and tested on an iPad 3rd Generation, the result is the video shown in the beginning of this tutorial.

If you’d like to see the image the correct size in the Simulator, simply open ipad3camera.lua and change:

photo.xScale = 0.07;
photo.yScale = 0.07;


photo.xScale = 1;
photo.yScale = 1;

Then save the changes to ipad3camera.lua and republish your Kwik project.

Screen Shot 2013-04-01 at 4.21.27 PM

This is only a very basic example of how to implement a camera into your Kwik project. If you need to crop/edit the image, have it stored to be used on multiple pages, etc. you will need to create more extensive external code functions, but this is a great place to get started using a camera in your apps!