Time for action – creating the pieces and choosing an image

If you wish to follow along with the exact same image shown here, know that it was taken from the top-left section of the file present at:

http://static3.depositphotos.com/1004551/191/v/950/depositphotos_1914748-Jigsaw-puzzle-blank-templates.jpg.

The image is shown here:

Time for action – creating the pieces and choosing an image

The following steps will help in creating the pieces and choosing an image:

  1. Make a new Mainstack of the size 1024 x 768 (or the size of your tablet device). Name the stack jigsaw, set the title to Jigsaw Puzzle, and save it.
  2. Open the whole puzzle image in your image editor.
  3. Use the Magic Wand tool to pick up the inner part of the upper-left piece of the puzzle.
  4. Fill that with a color that makes it easy to spot any remaining gaps.
  5. Copy and paste into a new document (that has a transparent background) that is the size of the piece you copied.
  6. Repair any gaps using the brush tool that is set to the same fill color.
  7. Save it as a PNG file(with Photoshop, that would be save it for Web and devices, 24 bit, with transparency). Use a naming scheme that may help you identify the images easily. For example, tlcorner.png, p1.png, trcorner.png, and so on.
  8. Proceed through all the differently shaped areas. In the example image, there will be as few as 14 unique shapes. No need to save other pieces that are of the same shape and orientation as the ones you already have.
  9. The set of images will be similar to the ones shown in the following screenshot:
    Time for action – creating the pieces and choosing an image
  10. Import all the 14 images as Control/Image.
  11. Lay out a puzzle that covers most of the card window. In the following screenshot, the puzzle was of 900 x 622 pixels with 11 x 8 pieces. Make duplicates of the middle piece images to fill in the whole puzzle. You can accurately place a piece after selecting it using the arrow keys on your keyboard.
    Time for action – creating the pieces and choosing an image
  12. Name the images in a grid-like fashion. The top-left piece would be named p 1 1, the top-right edge piece would be named p 11 1 and the bottom-right piece would have the name p 11 8.
  13. Select all the pieces and group them. Name the group pieces.
  14. Make a button with the name fromcamera and a label with the name Take a Photo. Set the button scripts to this:
    on mouseUp
  loadimage "camera"
end mouseUp
Make another button, named "fromlibrary" and labeled "Load a Picture", with this script:
on mouseUp
  loadimage "library"
end mouseUp
  15. Set the buttons to get a drop shadow; use the options in the Graphic Effects pane of the Inspector palette.
  16. Edit the card script and add these global variables and functions that will initialize the values that will be needed by the other functions we'll make:
    global originalimage, puzzlewidth, puzzleheight, snapdistance, hcount, vcount

on opencard
   setvalues
end opencard

on setvalues
   put 900 into puzzlewidth
   put 662 into puzzleheight
   put 50 into snapdistance
   put 11 into hcount
   put 8 into vcount
end setvalues
  17. Now, add the loadImage handler, which the two buttons will call in order to get an image from the user's camera or photo album:
    on loadImage cameratype
  if puzzlewidth is empty then setvalues
  if there is an image "original" then delete image "original"
  mobilePickPhoto cameratype,puzzlewidth,puzzleheight
  if the result is empty then

    lock screen
    set the name of image the number of images to "original"
    set the width of image "original" to puzzlewidth
    set the height of image "original" to puzzleheight
    put the imageData of image "original" into originalImage
    delete image "original"
    --makepuzzle
    --scatter
    unlock screen
  else
    answer the result
  end if
end loadImage
  18. The makepuzzle and scatter lines are commented out for now, so that you can test the functions so far.

What just happened?

The puzzle pieces are now in place and are named in a way that we can take advantage of them later when we manipulate them. If you go to Standalone Application Settings and select iOS or Android, you can give the app a try.

Tip

Setting up some test images

If you use the iPad Simulator, you won't be able to test getting an image from the camera, and at first, you will just have the default images in the photo library. To add your own photo, drag images from Finder to the Simulator window, and the image will be added to the Photos library. You can switch to the simulator Home screen to reselect the Jigsaw app using the cmd + Shift + H key combination. This way, you can add a few images to the library in order to select one as the picture for the puzzle.

When LiveCode gets an image from the mobile device, both from the camera and the library or photo album, it places the picture as an image control that is the topmost object on the card. We don't need the image itself, just its imageData. In the loadImage handler, the image is made in the same size as the puzzle pieces group, imageData is stored in the global variable originalimage, and the image itself is deleted.

Next, we'll transfer the chosen picture to the puzzle pieces.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset