Time for action – setting up touch events

The handlers so far have been in the card script, the plan being to have different cards with different types of puzzle. The interactivity handlers can be placed in the stack script available for all the cards.

  1. Open the stack script. There is only one of the global variables that we will also need in the stack script, but there are a couple of initializing items we need to cover. Start the stack script with these lines:
    global snapdistance

on preopenstack
  if the platform contains "iphone" then iphoneUseDeviceResolution true
end preopenstack

on openstack
  set the compositorType of this stack to "Static OpenGL"
end openstack
  2. The preopenstack handler checks whether the app is on iPhone and requests that the device's native resolution be used. This will make sure that Retina displays show the best quality. The compositorType being set to "Static OpenGL" will help performance.
  3. The interactivity we'll use will make use of touch events. Each touch comes with an associated ID value. Here is the handler that detects the start of a touch event:
    on touchStart touchid
  put the short name of the target into n
  if word 1 of n is "p" then
    set the dropShadow of image n to the dropShadow of button "fromlibrary"
    set the relayerGroupedControls to true
    set the layer of the target to the number of images in group "pieces"
  end if
end touchstart
  4. The check of the target name is a quick way to make sure that we don't drag anything around except for the puzzle pieces. When a piece is touched, we use the relayerGroupedControls and layer functions to make that piece appear above the other pieces.
  5. Do you remember how we added a dropshadow to the two buttons? Aside from making them look nicer, we make use of it here too. By adding the same dropShadow to the puzzle piece, we create the illusion that the piece is floating above the screen.
  6. Next thing to watch for is movement, which we can do with the touchMove event:
    on touchMove touchid,touchx,touchy
  put the short name of the target into n
  if word 1 of n is "p" then
    set the loc of the target to touchx,touchy
  end if
end touchMove
  7. Again, there's a quick double check that you can perform to make sure that it's a puzzle piece; otherwise, it's a simple case of setting the location of the piece to the location of the user's finger.
  8. When the user releases the piece, we check whether it's near its starting place, and if it is near, we move the piece into its place and remove the dropShadow effect:
    on touchEnd touchid
  put the short name of the target into n
  if word 1 of n is "p" then
    checkdistance the short name of the target
    set the dropShadow of the target to empty
    checkfinished
  end if
end touchEnd
  9. This is the checkdistance handler and a distance function that it calls:
    on checkdistance dt
  if snapdistance is empty then put 100 into snapdistance
  put distance(item 1 of the loc of image dt - item 1 of the myloc of image dt,item 2 of the loc of image dt - item 2 of the myloc of image dt) into d
  if d<snapdistance then
    put max(.1,min(.2,d/200)) into t
    move image dt to the myloc of image dt in t seconds
    set the relayerGroupedControls to true
    set the layer of image dt to 2
  end if
end checkdistance

function distance dx,dy
  return sqrt(dx*dx+dy*dy)
end distance
  10. The distance function is based on the Pythagorean theorem, returning the number of pixels between the puzzle piece and its original myloc value. snapdistance is the global variable that is used to determine whether the piece is close enough to its starting place to be considered on target.
  11. The move line uses LiveCode's move function, which animates the piece into its place.
  12. One last thing, let's check whether the puzzle is complete. Add this handler to the stack script:
    on checkfinished
  repeat with a = 1 to the number of images in group "pieces"
    if the myloc of image a of group "pieces" <> the loc of image a of group "pieces" then exit checkfinished
  end repeat
  answer "You've done it!"
end checkfinished

What just happened?

The jigsaw puzzle should fully work now. Something that you can't easily guess from the touch functions we added is the fact that it works with multitouch. You can drag on up to 10 pieces at once (or whatever the multitouch limit is for your device). Here, each piece will show a drop shadow and all the pieces will animate into their place when you let go of them.

Have a go hero – one for the kids

Functions that relate to the puzzle itself are in the card script. Try making a new card that has bigger puzzle pieces and a higher value for snapdistance (the higher the value, the easier it is to get a piece into place). You could make an opening card for the stack that has a set of difficulty level buttons, one of which would jump to the easier puzzle. This would be ideal for younger players.

Adding some guide graphics will help players know where the edges of the finished puzzle are, and for simpler difficulty levels, you can even include outlines of the individual puzzle pieces.

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

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