tag:blogger.com,1999:blog-128427162024-03-19T04:58:56.980-07:00Springboard PillowPaddling in the murky bits of the byte streamEudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.comBlogger366125tag:blogger.com,1999:blog-12842716.post-86097467545195100642018-07-28T23:31:00.000-07:002018-07-28T23:31:20.635-07:00Sample CodeBunch of sample codes I've written for use in lua on the Corona SDK, utility and math libraries.<br />
Some of these may appear in both lists due to being a library within a demo.<br />
<br />
I have now added a third list of other people's libraries as they are proving quite useful.<br />
<br />
<br />
Tutorials:<br />
<br />
<ul>
<li>Extending Libraries Without Native Code<br /><a href="http://www.coronalabs.com/blog/2013/07/02/tutorial-extending-libraries-without-native-code/">http://www.coronalabs.com/blog/2013/07/02/tutorial-extending-libraries-without-native-code/</a></li>
<li>Implementing Pinch-Zoom-Rotate<br /><a href="http://www.coronalabs.com/blog/2013/01/22/implementing-pinch-zoom-rotate/"><strike>http://www.coronalabs.com/blog/2013/01/22/implementing-pinch-zoom-rotate/</strike></a><br /><a href="https://springboardpillow.blogspot.com/2018/07/handling-multitouch-input-tutorial-on.html">https://springboardpillow.blogspot.com/2018/07/handling-multitouch-input-tutorial-on.html</a></li>
<li>Radial Gravity and Predicting Trajectory (contributor)<br /><a href="http://www.coronalabs.com/blog/2013/04/09/physics-radial-gravity-and-predicting-trajectory/">http://www.coronalabs.com/blog/2013/04/09/physics-radial-gravity-and-predicting-trajectory/</a></li>
<li>Mobile Development From Mobile<br /><a href="http://coronalabs.com/blog/2015/01/27/tutorial-mobile-development-from-mobile/">http://coronalabs.com/blog/2015/01/27/tutorial-mobile-development-from-mobile/</a></li>
</ul>
<div>
<br />
GitHub:<br />
<br />
<ul>
<li>HoraceBury<br /><a href="https://gist.github.com/horacebury">https://gist.github.com/horacebury</a></li>
</ul>
</div>
<br />
Libraries:<br />
<ul>
<li>App Utilities<br /><a href="http://developer.coronalabs.com/code/app-utilities">http://developer.coronalabs.com/code/app-utilities</a></li>
<li>Custom display.setDefault()<br /><a href="http://developer.coronalabs.com/code/custom-displaysetdefault">http://developer.coronalabs.com/code/custom-displaysetdefault</a></li>
<li>Polygon Intersection<br /><a href="http://developer.coronalabs.com/code/polygon-intersection">http://developer.coronalabs.com/code/polygon-intersection</a></li>
<li>Elastic Physics Joint<br /><a href="http://developer.coronalabs.com/code/physicsnewjointelastic">http://developer.coronalabs.com/code/physicsnewjointelastic</a></li>
<li>Collated Print Statement<br /><a href="http://developer.coronalabs.com/code/collected-print-statement">http://developer.coronalabs.com/code/collected-print-statement</a></li>
<li>Physics Body Collision Location<br /><a href="http://developer.coronalabs.com/code/physics-body-collision-location">http://developer.coronalabs.com/code/physics-body-collision-location</a></li>
<li>Shape Creation for Use with Physics.addBody<br /><a href="http://developer.coronalabs.com/code/shape-creation-use-addbody">http://developer.coronalabs.com/code/shape-creation-use-addbody</a></li>
<li>Physics Body Modification<br /><a href="http://developer.coronalabs.com/code/body-modification">http://developer.coronalabs.com/code/body-modification</a></li>
<li>Touch Listener Function for quick Copy/Paste<br /><a href="http://developer.coronalabs.com/code/copypaste-touch-function">http://developer.coronalabs.com/code/copypaste-touch-function</a></li>
<li>PinchZoom Made Real Easy<br /><a href="http://developer.coronalabs.com/code/pinchzoom-made-real-easy">http://developer.coronalabs.com/code/pinchzoom-made-real-easy</a></li>
<li>Global Event Library<br /><a href="http://developer.coronalabs.com/code/global-eventlib">http://developer.coronalabs.com/code/global-eventlib</a></li>
<li>Timer Functions<br /><a href="http://developer.coronalabs.com/code/timer-functions">http://developer.coronalabs.com/code/timer-functions</a></li>
<li>Math Library<br /><a href="http://developer.coronalabs.com/code/maths-library">http://developer.coronalabs.com/code/maths-library</a></li>
<li>Line Intersection<br /><a href="https://developer.anscamobile.com/code/line-intersection">https://developer.anscamobile.com/code/line-intersection</a></li>
<li>Polygon Fill and Polygon Point Detection<br /><a href="https://developer.anscamobile.com/code/polygon-fill-and-point-polygon-detection">https://developer.anscamobile.com/code/polygon-fill-and-point-polygon-detection</a></li>
<li>Display Extensions<br /><a href="https://developer.anscamobile.com/code/display-extensions">https://developer.anscamobile.com/code/display-extensions</a></li>
<li>Simplified XML and Improved Dump Function<br /><a href="https://developer.anscamobile.com/code/much-improved-dump-function-and-xml-simplify">https://developer.anscamobile.com/code/much-improved-dump-function-and-xml-simplify</a></li>
<li>Storyboard SetScene<br /><a href="https://developer.anscamobile.com/code/storyboard-setscene-event">https://developer.anscamobile.com/code/storyboard-setscene-event</a></li>
<li>Pausable Transitions<br /><a href="https://developer.anscamobile.com/code/pausable-transitions">https://developer.anscamobile.com/code/pausable-transitions</a></li>
<li>Multi-point Pinch-Zoom-Rotate<br /><a href="https://developer.anscamobile.com/code/multi-point-pinch-zoom-rotate">https://developer.anscamobile.com/code/multi-point-pinch-zoom-rotate</a></li>
<li>Trajectory Plotting<br /><a href="https://developer.anscamobile.com/code/trajectory-plotting">https://developer.anscamobile.com/code/trajectory-plotting</a></li>
<li>XML to Table Parser (better above: Simplified XML and Improved Dump Function)<br /><a href="https://developer.anscamobile.com/code/xml-table-parser">https://developer.anscamobile.com/code/xml-table-parser</a></li>
<li>Calculating Area of an Object<br /><a href="https://developer.anscamobile.com/code/calculating-area-object">https://developer.anscamobile.com/code/calculating-area-object</a>
</li>
<li>Sanitised Touch Library<br /><a href="https://developer.anscamobile.com/code/sanitised-touch-library">https://developer.anscamobile.com/code/sanitised-touch-library</a></li>
</ul>
<div>
<br />
Sample/Demo code:</div>
<div>
<ul>
<li>Box2D Physics Water Buoyancy<br /><a href="http://developer.coronalabs.com/code/box2d-water-buoyancy">http://developer.coronalabs.com/code/box2d-water-buoyancy</a></li>
<li>Predictive Aiming / Tower Defense<br /><a href="http://developer.coronalabs.com/code/predictive-aiming-tower-defense">http://developer.coronalabs.com/code/predictive-aiming-tower-defense</a></li>
<li>Force Object Pass-Through<br /><a href="http://developer.coronalabs.com/code/force-object-pass-through">http://developer.coronalabs.com/code/force-object-pass-through</a></li>
<li>Chains<br /><a href="http://developer.coronalabs.com/code/chains">http://developer.coronalabs.com/code/chains</a></li>
<li>Resizable thumbnail viewer<br /><a href="http://developer.coronalabs.com/code/resizable-thumbnail-viewer">http://developer.coronalabs.com/code/resizable-thumbnail-viewer</a></li>
<li>Dynamic Text View Resizer<br /><a href="http://developer.coronalabs.com/code/dynamic-text-resizer">http://developer.coronalabs.com/code/dynamic-text-resizer</a></li>
<li>Reorder Table View Items<br /><a href="http://developer.coronalabs.com/code/reorder-table-view-items">http://developer.coronalabs.com/code/reorder-table-view-items</a></li>
<li>Improved WidgetDemo<br /><a href="https://developer.anscamobile.com/code/improved-widgetdemo-sample">https://developer.anscamobile.com/code/improved-widgetdemo-sample</a></li>
<li>Simple Polygon Triangulation<br /><a href="https://developer.anscamobile.com/code/simple-polygon-triangulation">https://developer.anscamobile.com/code/simple-polygon-triangulation</a>
</li>
<li>Polygon Fill and Polygon Point Detection<br /><a href="https://developer.anscamobile.com/code/polygon-fill-and-point-polygon-detection">https://developer.anscamobile.com/code/polygon-fill-and-point-polygon-detection</a></li>
<li>Asteroids<br /><a href="https://developer.anscamobile.com/code/asteroids">https://developer.anscamobile.com/code/asteroids</a></li>
<li>Non-Verlet Rope<br /><a href="https://developer.anscamobile.com/code/not-verlet-rope">https://developer.anscamobile.com/code/not-verlet-rope</a></li>
<li>Ragdoll<br /><a href="https://developer.anscamobile.com/code/ragdoll-example">https://developer.anscamobile.com/code/ragdoll-example</a></li>
<li>Catmull-Rom Spline Curve<br /><a href="https://developer.anscamobile.com/code/cat-mull-rom-open-and-closed">https://developer.anscamobile.com/code/cat-mull-rom-open-and-closed</a></li>
<li>Wellen<br /><a href="https://developer.anscamobile.com/code/wellen">https://developer.anscamobile.com/code/wellen</a></li>
<li>Draggable Fan<br /><a href="https://developer.anscamobile.com/code/simple-draggable-fan-demo-2">https://developer.anscamobile.com/code/simple-draggable-fan-demo-2</a></li>
<li>Multi-point Pinch-Zoom-Rotate<br /><a href="https://developer.anscamobile.com/code/multi-point-pinch-zoom-rotate">https://developer.anscamobile.com/code/multi-point-pinch-zoom-rotate</a></li>
<li>Trajectory Plotting<br /><a href="https://developer.anscamobile.com/code/trajectory-plotting">https://developer.anscamobile.com/code/trajectory-plotting</a></li>
<li>Basic Drawing<br /><a href="https://developer.anscamobile.com/code/basic-drawing-code">https://developer.anscamobile.com/code/basic-drawing-code</a></li>
<li>Orientation Rotation in Web Popup<br /><a href="https://developer.anscamobile.com/code/orientation-rotation-web-popup">https://developer.anscamobile.com/code/orientation-rotation-web-popup</a></li>
<li>Sanitised Touch Library<br /><a href="https://developer.anscamobile.com/code/sanitised-touch-library">https://developer.anscamobile.com/code/sanitised-touch-library</a></li>
<li>Customisable Slider<br /><a href="https://developer.anscamobile.com/code/customisable-slider">https://developer.anscamobile.com/code/customisable-slider</a></li>
</ul>
<div>
<br /></div>
<div>
Others:</div>
</div>
<div>
<ul>
<li>HTML to Text Cleanup:<br /><a href="http://developer.coronalabs.com/code/strip-html-tags-text">http://developer.coronalabs.com/code/strip-html-tags-text</a></li>
</ul>
</div>
Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com10tag:blogger.com,1999:blog-12842716.post-18812897793579158342018-07-28T23:28:00.001-07:002018-07-28T23:33:11.676-07:00Handling Multitouch Input - A tutorial on implementing pinch-zoom<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 14px; font-stretch: normal; line-height: normal; text-align: center;">
<span style="font-kerning: none;">Handling Multitouch Input</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 14px; font-stretch: normal; line-height: normal; min-height: 17px; text-align: center;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 14px; font-stretch: normal; line-height: normal; text-align: center;">
<span style="font-kerning: none;">A tutorial on implementing pinch-zoom</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px; text-align: center;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; text-align: center;">
<span style="font-kerning: none;"><i>Matthew Webster</i></span><br />
<span style="font-kerning: none;"><i><br /></i></span>
<div style="text-align: left;">
<u><span style="font-kerning: none;"><i>Originally posted here: </i></span><a href="http://www.coronalabs.com/blog/2013/01/22/implementing-pinch-zoom-rotate/" style="text-align: center;">http://www.coronalabs.com/blog/2013/01/22/implementing-pinch-zoom-rotate/</a></u></div>
</div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><i>Preface</i></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The files associated with this tutorial should be one at a time within the <i>main.lua</i> Uncomment only one <i>require</i> statement at a time to follow the workings in the logic below.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><i>Introduction</i></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Most applications (more than you'd expect) can perform perfectly fine with just one touch point. If you consider the large number of apps out there you can see that many have a huge feature set but still get by with just a single point of input because they are designed around buttons or individual swipe actions, etc.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Take Angry Birds, for example. This game requires that every tap, drag and swipe is performed by one finger. Navigating the menu, opening up settings options and firing the afore-mentioned birds with attitude is all done with one finger, and rightly so. It makes for a simple, intuitive and engrossing game.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">However, even this most basic interface requires one simple trick learned from iOS. This involves using two fingers to "pinch" zoom in and out of the parallax-scrolling action.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">So, that's simple, isn't it? The rule is: When one finger is used, perform the action for the object being touched. When two fingers a used, perform a gentle scaling of the top-level parent display group.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">This tutorial aims to show you how to handle these multiple touch scenarios with as little hassle as possible. It will also try to provide some insight into the oft-requested pinch zoom...</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><i>Touch Basics</i></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"><i></i></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">If you're reading this tutorial you probably already have some experience with the Corona touch model, so I will just highlight the core tenets.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<ul>
<ul style="list-style-type: disc;">
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;"><i>addEventListener()</i> is used to listen to a particular display object for user touches</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">There are two types of touch event: <i>touch</i> and <i>tap</i></span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">The touch event is comprised of phases: <i>began</i>, <i>moved</i> and <i>ended</i></span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Listening to one display object for both touch and tap events will fire the touch event phases before the tap event fires</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Returning <i>true</i> from an event function stops Corona from passing that event to any display objects beneath the object</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;"><i>system.activate("multitouch")</i> enables multitouch</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Once a touch event has begun future touch phases are directed to the same listener by calling display.getCurrentStage():<i>setFocus()</i></span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;"><i>setFocus</i> can only be called once per object per event (without cancellation)</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Calling <i>dispatchEvent()</i> on display objects fires artificial events</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Events fired with <i>dispatchEvent</i> do not propagate down the display hierarchy</span></li>
</ul>
</ul>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><i>The Tap Problem</i></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">As described above, touch events have a number of phases which literally describe the users interaction with the device: putting the finger on the screen, moving it around and letting go.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">When it is listened for, the normal tap event is fired if the above event phases occur within a given time span (iOS employs about 350 milliseconds) and without a distance between the began and end(ed) locations greater than (approx) 10 pixels.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">This means that if you are listening for both touch and tap events you need to actually detect a tap within your touch listener function to know that your tap listener function is going to be called. So, if you're already detecting taps you my as well <i>not</i> attach a tap listener at all.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">For the purposes of this tutorial that's exactly what we'll do: we will leave out tap events because they simply complicate our code.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><i>Single Touch</i></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none; text-decoration: underline;">Sample1.lua</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">To demonstrate the typical touch event lets create a display object with a standard touch listener and use it to move the display object around.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- single touch sample</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- create a user interface object</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">local circle = display.newCircle( 0, 0, 50 )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- make it less imposing</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">circle.alpha = .5</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- standard single-touch event listener</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">function circle:touch(e)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- get the object which received the touch event</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local target = e.target</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- handle each phase of the touch event life cycle...</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (e.phase == "began") then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- tell corona that following touches come to this display object</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>display.getCurrentStage():setFocus(target)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- remember that this object has the focus</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>target.hasFocus = true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- indicate the event was handled</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>elseif (target.hasFocus) then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- this object is handling touches</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (e.phase == "moved") then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- move the display object with the touch (or whatever)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>target.x, target.y = e.x, e.y</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>else -- "ended" and "cancelled" phases</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- stop being responsible for touches</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>display.getCurrentStage():setFocus(nil)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- remember this object no longer has the focus</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>target.hasFocus = false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- indicate that we handled the touch and not to propagate it</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- if the target is not responsible for this touch event return false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- listen for touches starting on the touch layer</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">circle:addEventListener("touch")</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The above function handles touch events when multitouch is not activated. This is not the simplest touch listener but it is practical and safe. It's also not the most complex, but any other work it could do should be performed by functions it can call. It caters for the following situations:</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<ul>
<ul style="list-style-type: disc;">
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">The touch starts on the object</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">The touch is used to move the object</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Touches which started away from the object are ignored</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Handled touches do not get passed to other display objects</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Ignored touches get propagated to other display objects</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">The display object has its own <i>:touch(e)</i> function and not a global function</span></li>
</ul>
</ul>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Note that the object will ignore touches which start elsewhere. This is because setting <i>hasFocus</i> indicates that the object should accept touch phases after <i>began</i>. Also, it will not lose the touch once it acquires it because <i>setFocus</i> tells Corona to direct all further input to this object.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><i>Multiple Touches</i></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none; text-decoration: underline;">Sample2.lua</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Fortunately, converting this function to be used by multiple display objects is not difficult. The catch with <i>setFocus</i> is that each display object can only listen for one touch because all other touch events are ignored on that object, once it begins handling a touch.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">To demonstrate multitouch we will convert the above code to create multiple objects which will handle one touch each.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- multi touch sample</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- turn on multitouch</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b>system.activate("multitouch")</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- creates an object to be moved</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b>local function newDragObj( x, y )</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- create a user interface object</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local circle = display.newCircle( x, y, 50 )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- make it less imposing</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>circle.alpha = .5</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- standard multi-touch event listener</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>function circle:touch(e)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- get the object which received the touch event</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local target = e.target</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- handle each phase of the touch event life cycle...</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (e.phase == "began") then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- tell corona that following touches come to this display object</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span><b>display.getCurrentStage():setFocus(target, e.id)</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span></b>-- remember that this object has the focus</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>target.hasFocus = true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- indicate the event was handled</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>elseif (target.hasFocus) then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- this object is handling touches</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (e.phase == "moved") then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- move the display object with the touch (or whatever)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>target.x, target.y = e.x, e.y</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>else -- "ended" and "cancelled" phases</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- stop being responsible for touches</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>display.getCurrentStage():setFocus(target, nil)</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- remember this object no longer has the focus</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>target.hasFocus = false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- indicate that we handled the touch and not to propagate it</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- if the target is not responsible for this touch event return false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- listen for touches starting on the touch layer</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>circle:addEventListener("touch")</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- return the object for use</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>return circle</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b>end</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- create layer for the draggable objects</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">local group = display.newGroup()</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- create 5 draggable objects</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">for i=1, 5 do</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- create object</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local circle = newDragObj( 100, i*100 )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- add it to the control layer</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>group:insert( circle )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Note the key differences in this code:</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<ul>
<ul style="list-style-type: disc;">
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">We have activated multitouch</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">We have wrapped the display object creation so that it can be called repeatedly</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;"><i>setFocus </i>accepts a specific touch ID to differentiate between user screen contacts</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">When ending the touch, <i>setFocus</i> accepts <i>nil</i> to release the object's touch input</span></li>
</ul>
</ul>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">With the code above we should be able to create 5 large circles and each one can be moved independently. Note that, as before, due to setting <i>hasFocus</i> and <i>setFocus</i> now accepting a specific touch ID, the display objects will ignore touches which start elsewhere and will not lose a touch once it begins.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><i>The Multitouch Problem</i></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Now, remember that the strength of the code above is that it can distinguish between multiple touches easily. This is because objects will not lose their touch once they acquire it. This is both a huge bonus and a bit of a problem...</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<ul>
<ul style="list-style-type: disc;">
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">The bonus is that <i>setFocus</i> allows us to say <i>"Send every move this user's touch makes to my object's event listener and nowhere else."</i></span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">The problem is that <i>setFocus </i>also stops our display object from receiving any other touch events.</span></li>
</ul>
</ul>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">If we have not yet called <i>setFocus, </i>using <i>hasFocus </i>conveniently allows our object to ignore touches which don't begin there. This is useful because users often make a swiping gesture (by accident) on the background (or inactive part of the screen) and swipe across our object. We want it to ignore touches which don't <i>begin</i> on it.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">So, the problem is <i>how do we convince Corona to let our objects receive multiple touches</i> when the functions which give us this great ease-of-use <i>stop exactly that</i>?</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The answer is to create a tracking object in the <i>began </i>phase.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"><i></i></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"><i></i></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><i>The Concept</i></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"><i></i></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">With a small change to the code above we can create a single object which spawns multiple<i> objects</i> in its <i>began</i> phase. These objects will then track each touch individually. We will also change the code further to remove the tracking object when the touch ends.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The complete code will have one function to listen for the touch event <i>began</i> phase and another to listen for <i>moved</i>, <i>ended</i> and <i>cancelled</i> phases. These two functions will be added to the target listening object and the tracking dot objects, repectively.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><i>Spawning Tracking Dots</i></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none; text-decoration: underline;">Sample3.lua</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">First, we need to create an object which will handle the <i>began </i>phase as before, but this time it will call a function to create a tracking dot.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- turn on multitouch</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">system.activate("multitouch")</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- create object to listen for new touches</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">local rect = display.newRect( 200, 200, 200, 100 )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">rect:setFillColor(0,0,255)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- standard multi-touch event listener</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">function rect:touch(e)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- get the object which received the touch event</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local target = e.target</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- handle began phase of the touch event life cycle...</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (e.phase == "began") then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- create a tracking dot</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span><b>local dot = newTrackDot(e)</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span></b>-- we handled the began phase</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- if the target is not responsible for this touch event return false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- listen for touches starting on the touch object</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">rect:addEventListener("touch")</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">This is pretty straightforward. It just creates a display object which listens for the <i>began</i> phase of any unhandled touch events. When it receives a touch with a <i>began</i> phase it calls the function which will create a new display object. This new object will be able to track the touch by directing the future touch phases to itself (instead of the <i>rect</i>) by calling <i>setFocus</i>.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Note that we are not setting the <i>hasFocus</i> value because multitouch objects only need to handle the <i>began</i> phase.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Next, we need to create the tracking dot. This code is almost identical to the previous multitouch function.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- creates an object to be moved</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b>local function newTrackDot(e</b>)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- create a user interface object</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local circle = display.newCircle( e.x, e.y, 50 )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- make it less imposing</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>circle.alpha = .5</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- standard multi-touch event listener</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>function circle:touch(e)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- get the object which received the touch event</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>local target = circle</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- handle each phase of the touch event life cycle...</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (e.phase == "began") then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- tell corona that following touches come to this display object</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>display.getCurrentStage():setFocus(target, e.id)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- remember that this object has the focus</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>target.hasFocus = true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- indicate the event was handled</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>elseif (target.hasFocus) then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- this object is handling touches</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (e.phase == "moved") then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- move the display object with the touch (or whatever)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>target.x, target.y = e.x, e.y</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>else -- "ended" and "cancelled" phases</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- stop being responsible for touches</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>display.getCurrentStage():setFocus(target, nil)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- remember this object no longer has the focus</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>target.hasFocus = false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- indicate that we handled the touch and not to propagate it</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- if the target is not responsible for this touch event return false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- listen for touches starting on the touch layer</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>circle:addEventListener("touch")</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- pass the began phase to the tracking dot</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>circle:touch(e)</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- return the object for use</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return circle</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b>end</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Note that the only two changes we’ve made to this function are:</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<ul>
<ul style="list-style-type: disc;">
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">We call <i>circle:touch(e)</i> because the circle has only been created and has not actually received the touch event’s <i>began</i> phase. Calling this allows the circle object to take control of the touch event away from the <i>rect</i> object and handle all future touch phases.</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">At the start of the <i>:touch()</i> function we also change to using the <i>circle</i> as the <i>target</i> because the <i>e.target</i> property is actually the <i>rect</i> object (where the touch began.)</span></li>
</ul>
</ul>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">When this code is used with the code above we will see a small blue rectangle which can create multiple white circles. Each circle is moved by an independent touch. It is this mechanism which we can use to direct all of the touch information to our blue <i>rect</i> and pretend that it is receiving multitouch input.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><i>Faking Multitouch Input</i></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none; text-decoration: underline;">Sample4.lua</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Our blue <i>rect</i> object is going to become the recipient of multiple touch inputs. To do this we need to first modify the touch listener function of the rect. At first we will simply add some <i>print()</i> statements for the <i>moved, ended </i>and <i>cancelled</i> phases.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Here is the modified <i>:touch()</i> listener function for the small blue rectangle:</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- standard multi-touch event listener</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">function rect:touch(e)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- get the object which received the touch event</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local target = e.target</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- handle began phase of the touch event life cycle...</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (e.phase == "began") then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>print( e.phase, e.x, e.y )</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- create a tracking dot</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local dot = newTrackDot(e)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- we handled the began phase</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>elseif (e.parent == rect) then</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>if (e.phase == "moved") then</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>print( e.phase, e.x, e.y )</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>else -- ‘ended’ and ‘cancelled’ phases</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>print( e.phase, e.x, e.y )</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>end</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>return true</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- if the target is not responsible for this touch event return false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The major change here is the addition of the <i>moved, ended</i> and <i>cancelled</i> phases. Doing this allows the tracking dots to call the :<i>touch()</i> function of the blue rectangle, passing in the event parameter received by the white circle’s touch function.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The <i>elseif</i> statement is also important here. If the tracking dots pass the event parameter to the <i>rect</i> the <i>e.target</i> will be a reference to the dot, not the <i>rect</i>. We will store the reference to the <i>rect</i> in the <i>.parent</i> property. This way, the <i>rect:touch()</i> function can determine if it is the rightful recipient of the touch event.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Of course, we haven’t changed the <i>circle</i>’s touch function to call the rectangle’s <i>:touch()</i> yet. Before we do that, we need to make sure that each circle keeps a reference to the <i>rect</i> object so that it can call the <i>rect:touch()</i> function and pass it the event parameter.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Here is the start of the <i>newTrackDot()</i> function, which needs to make a local copy of the original <i>.target </i>property of the event parameter.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- creates an object to be moved</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">function newTrackDot(e)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- create a user interface object</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local circle = display.newCircle( e.x, e.y, 50 )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- make it less imposing</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>circle.alpha = .5</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>-- keep reference to the rectangle</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>local rect = e.target</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- standard multi-touch event listener</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>function circle:touch(e)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"><i></i></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Keeping a reference to the object which received the original <i>began</i> event phase allows our tracking dots to send the multitouch events back to it.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Now, we don’t need our tracking dots to send the <i>began</i> phase event parameter to the <i>rect</i> because <i>rect</i> has already received that event. What we do need is to call <i>rect:touch(e)</i> in the <i>:touch()</i> function of the tracking dot so that the other phases get sent to our <i>rect</i> object.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- standard multi-touch event listener</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>function circle:touch(e)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- get the object which received the touch event</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local target = circle</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- make it less imposing</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>circle.alpha = .5</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>-- store the parent object in the event</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>e.parent = rect</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- handle each phase of the touch event life cycle...</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (e.phase == "began") then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- tell corona that following touches come to this display object</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>display.getCurrentStage():setFocus(target, e.id)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- remember that this object has the focus</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>target.hasFocus = true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- indicate the event was handled</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>elseif (target.hasFocus) then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- this object is handling touches</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (e.phase == "moved") then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- move the display object with the touch (or whatever)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>target.x, target.y = e.x, e.y</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>else -- "ended" and "cancelled" phases</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- stop being responsible for touches</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>display.getCurrentStage():setFocus(target, nil)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- remember this object no longer has the focus</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>target.hasFocus = false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>-- send the event parameter to the rect object</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>rect:touch(e)</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- indicate that we handled the touch and not to propagate it</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- if the target is not responsible for this touch event return false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Pretty simple. We now have a rectangle which creates a tracking dot for each touch it detects. Each of those dots also send their touch information back to the <i>rect</i>, using it’s original touch handler function. The <i>rect</i> will also know that it is the proper target.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The trick now is to make use of this multitouch information.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><i>Employing Multitouch</i></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none; text-decoration: underline;">Sample5.lua</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">We now have an object which can detect the start of multiple touch points. It spawns tracking dots for each point and receives the following touch events.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">To make some basic use of this multitouch information we will position the <i>rect</i> display object at the centre of the touch points. This can all happen within the :<i>touch()</i> function of the <i>rect</i> object.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">To position the <i>rect</i> object at the centre of our multiple touch points we first need to find the average <i>x</i> and <i>y</i> of all the touch points. We’ll use a separate function for that.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- calculates the average centre of a list of points</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">local function calcAvgCentre( points )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local x, y = 0, 0</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>for i=1, #points do</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local pt = points[i]</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>x = x + pt.x</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>y = y + pt.y</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return { x = x / #points, y = y / #points }</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">In order to call this function <i>rect</i> needs to keep a list of the tracking dots it creates. We will add this list to the <i>rect</i> object as a property when we create the <i>rect </i>display object.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- create object to listen for new touches</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">local rect = display.newRect( 200, 200, 200, 100 )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">rect:setFillColor(0,0,255)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b>-- keep a list of the tracking dots</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b>rect.dots = {}</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Now we’ll get the average centre of those dots and update the <i>x</i> and <i>y</i> position of <i>rect</i>:</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- standard multi-touch event listener</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">function rect:touch(e)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- get the object which received the touch event</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local target = e.target</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- handle began phase of the touch event life cycle...</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (e.phase == "began") then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>print( e.phase, e.x, e.y )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- create a tracking dot</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local dot = newTrackDot(e)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>-- add the new dot to the list</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>rect.dots[ #rect.dots+1 ] = dot</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- we handled the began phase</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>elseif (e.parent == rect) then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span><b>-- calculate the average centre position of all touch points</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>local centre = calcAvgCentre( rect.dots )</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span></b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>-- update the position of rect</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>rect.x, rect.y = centre.x, centre.y</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (e.phase == "moved") then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>print( e.phase, e.x, e.y )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>else -- ‘ended’ and ‘cancelled’ phases</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>print( e.phase, e.x, e.y )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- if the target is not responsible for this touch event return false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Run this code and you’ll see a small blue rectangle. Touch the rectangle and it produces a white circle. Moving this first circle will cause the blue rectangle to follow it precisely. Release the touch and create another white circle and you’ll see that the blue rectangle now stays at the midpoint between the two white circles. Create yet another and it will stay between the three circles, and so on.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><i>Debugging and Devices</i></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none; text-decoration: underline;">Sample6.lua</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">We now have a good simulator debugger for multitouch capable display objects. You’ll notice, however, that when you release your touch from one of the tracking dots the dot does not disappear. This is really great for debugging with a simulator because you can pretend to have multiple touch points. This is not so great on the device because you’re filling up the screen with white circles.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">To fix this, if it is running on a physical device, the <i>rect:touch() </i>function needs to remove the tracking dots in the <i>ended</i> phase. First, however, we need to store a variable at the start of our code which indicates whether we are running on a device.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- which environment are we running on?</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">local isDevice = (system.getInfo("environment") == "device")</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The <i>isDevice</i> variable will be <i>true </i>if the code is running on a real, physical device and can be used to automatically remove the tracking dot when the user lifts their finger.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (e.phase == "moved") then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>print( e.phase, e.x, e.y )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>else -- ‘ended’ and ‘cancelled’ phases</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>print( e.phase, e.x, e.y )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>-- remove the tracking dot from the list</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>if (isDevice or e.numTaps == 2) then</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>-- get index of dot to be removed</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>local index = table.indexOf( rect.dots, e.target )</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span></b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>-- remove dot from list</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>table.remove( rect.dots, index )</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span></b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>-- remove tracking dot from the screen</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>e.target:removeSelf()</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>end</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>end</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Notice that <i>or e.numTaps == 2</i> is used. This allows the tracking dot to have a tap listener which also calls the <i>rect:touch()</i> function so that in the simulator we can use a double tap to remove the tracking dot.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The tap listener should only listen for taps if the code is running in the simulator, so we'll use the <i>isDevice</i> variable again. The tap listener is added inside the <i>newTrackDot() </i>function which creates tracking dots.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- listen for a tap when running in the simulator</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>function circle:tap(e)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>if (e.numTaps == 2) then</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- set the parent</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>e.parent = rect</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- call touch to remove the tracking dot</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>rect:touch(e)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- only attach tap listener in the simulator</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span><b>if (not isDevice) then</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span></b>circle:addEventListener("tap")</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Note that we also:</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<ul>
<ul style="list-style-type: disc;">
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Check for two taps, so that only a double tap will remove a tracking dot</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Set the <i>.parent</i> property, just as we do in the <i>touch</i> function</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Only attach the tap listener if the code is running on the simulator</span></li>
</ul>
</ul>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"><i></i></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"><i></i></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><i>Making it Useful</i></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The code so far is useful but doesn’t do very much. We can move a small, blue rectangle around with more than one finger. The beauty of multitouch input devices is that the real world has an impact on the virtual. If all we want to do is move an image or collection of display objects around we can add this code to those objects and have them respond to the user’s touch. If we want it to be a bit more realistic, we should add some rotation and scaling.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><i>Relative Motion</i></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none; text-decoration: underline;">Sample7.lua</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Before we do that, however, take a look at how the rectangle moves when you use one finger. It centres itself directly under the touch point. To be believable it should really move relative to the motion of the touch point. Unfortunately, this is not as simple a change as it would appear, because we need to cater for removing a touch point. We now need to move some code into the <i>moved</i> and <i>ended</i> phases.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">To illustrate the complete change and to lay out the full <i>rect:touch(e): </i>code - it has changed a lot, after all - here’s the whole function:</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- advanced multi-touch event listener</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">function rect:touch(e)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- get the object which received the touch event</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local target = e.target</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- handle began phase of the touch event life cycle...</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (e.phase == "began") then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>print( e.phase, e.x, e.y )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- create a tracking dot</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local dot = newTrackDot(e)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- add the new dot to the list</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>rect.dots[ #rect.dots+1 ] = dot</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- pre-store the average centre position of all touch points</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>rect.prevCentre = calcAvgCentre( rect.dots )</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- we handled the began phase</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>elseif (e.parent == rect) then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (e.phase == "moved") then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>print( e.phase, e.x, e.y )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- calculate the average centre position of all touch points</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>local centre = calcAvgCentre( rect.dots )</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- update the position of rect</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>rect.x = rect.x + (centre.x - rect.prevCentre.x)</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>rect.y = rect.y + (centre.y - rect.prevCentre.y)</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- store the centre of all touch points</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>rect.prevCentre = centre</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>else -- ‘ended’ and ‘cancelled’ phases</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>print( e.phase, e.x, e.y )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- remove the tracking dot from the list</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (isDevice or e.numTaps == 2) then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- get index of dot to be removed</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local index = table.indexOf( rect.dots, e.target )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- remove dot from list</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>table.remove( rect.dots, index )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- remove tracking dot from the screen</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>e.target:removeSelf()</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- store the new centre of all touch points</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>rect.prevCentre = calcAvgCentre( rect.dots )</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- if the target is not responsible for this touch event return false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return false</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The fairly significant change here is to:</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<ul>
<ul style="list-style-type: disc;">
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Calculate the centre of all touches and store it for reference in the <i>began</i> phase</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Add the difference between the previous and current touch centres to the rect.x and rect.y in the <i>moved</i> phase</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Update the stored touches centre in the <i>ended</i> phase so that removing a finger does not throw off the next <i>moved</i> phase</span></li>
</ul>
</ul>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"><i></i></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The user can now place any number of fingers on the rect, even change them, and move it around as if shifting a photo on a table. Of course, what it doesn’t do is rotate with their touch.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"><i></i></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><i>Scaling</i></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none; text-decoration: underline;">Sample8.lua</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">With multitouch control of a display object, each transformation we want to apply to it requires taking the average of all the tracking dots and applying that to the image at the midpoint (the <i>average </i>location)<i> </i>of the display object.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">For scaling, this means that the mathematical process is:</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<ul>
<ul style="list-style-type: disc;">
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Sum the distances between the midpoint and the tracking dots</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Get the average distance by dividing the sum distance by the number of dots</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Get the same average distance for the previous location of the tracking dots</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Take the difference between the previous and the current average distance</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Apply the difference as a multiplication to the display object’s <i>.xScale</i> and <i>.yScale</i></span></li>
</ul>
</ul>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">This is only slightly more advanced from how we applied the average transition of the display object when moving multiple tracking dots.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">To help us get these scaling values we’ll need some basic library functions.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- returns the distance between points a and b</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">function lengthOf( a, b )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"> local width, height = b.x-a.x, b.y-a.y</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"> return (width*width + height*height)^0.5</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The most important library function calculates the distance between two points on the screen. This is a very typical trigonometry function and widely used.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">To get the midpoint of the tracking dots we’ll use the <i>calcAvgCentre()</i> function described above. To get and store the average distance between the midpoint and the tracking dots we’ll use these functions:</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- calculate each tracking dot's distance from the midpoint</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">local function updateTracking( centre, points )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>for i=1, #points do</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local point = points[i]</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>point.prevDistance = point.distance</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>point.distance = lengthOf( centre, point )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- calculates scaling amount based on the average change in tracking point distances</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">local function calcAverageScaling( points )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local total = 0</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>for i=1, #points do</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local point = points[i]</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>total = total + point.distance / point.prevDistance</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return total / #points</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The first of these gets the current distance for each dot, stores it in the tracking dot and also saves the previously known distance. The second function calculates the difference between the previous and current set of distances.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Using these functions is simple. For the <i>began</i> and <i>ended</i> phases of the <i>rect:touch()</i> we just call them and they update our tracking dots with the appropriate values. Here is the additional update call for the <i>began</i> phase:</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- pre-store the tracking dot scale and rotation values</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>updateTracking( rect.prevCentre, rect.dots )</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- we handled the began phase</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">And the update for the <i>ended</i> phase:</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- store the new centre of all touch points</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>rect.prevCentre = calcAvgCentre( rect.dots )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- refresh tracking dot scale and rotation values</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>updateTracking( rect.prevCentre, rect.dots )</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The <i>moved</i> phase is a little more complex because this is where the real work is done. Fortunately, all we need to do here is update the tracking dots again and only apply the scaling if there is more than one tracking dot.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">if (e.phase == "moved") then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>print( e.phase, e.x, e.y )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- declare working variables</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>local centre, scale, rotate = {}, 1, 0</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- calculate the average centre position of all touch points</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>centre = calcAvgCentre( rect.dots )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- refresh tracking dot scale and rotation values</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>updateTracking( rect.prevCentre, rect.dots )</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- if there is more than one tracking dot, calculate the rotation and scaling</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>if (#rect.dots > 1) then</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>-- calculate the average scaling of the tracking dots</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>scale = calcAverageScaling( rect.dots )</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span></b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>-- apply scaling to rect</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>rect.xScale, rect.yScale = rect.xScale * scale, rect.yScale * scale</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>end</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- update the position of rect</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>rect.x = rect.x + (centre.x - rect.prevCentre.x)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>rect.y = rect.y + (centre.y - rect.prevCentre.y)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- store the centre of all touch points</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>rect.prevCentre = centre</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">else -- "ended" and "cancelled" phases</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Above, we’ve made the following changes to the <i>moved</i> phase:</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<ul>
<ul style="list-style-type: disc;">
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Declared variables to work with the forthcoming transformation values</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Called <i>updateTracking</i> to refresh the stored distance values of the tracking dots</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Used those distance values to calculate the average change in tracking scaling</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Applied that scaling to the display object <i>rect</i></span></li>
</ul>
</ul>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The display object now translates (moves) and scales (zooms) along with our tracking dots (touch points.)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><i>Rotation</i></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none; text-decoration: underline;">Sample9.lua</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">To rotate our display object the basic logic follows that we work out how much each tracking dot has rotated around the midpoint (of all the tracking dots), get the average and add the difference between that and the previous amount to our object's <i>.rotation</i> value.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">This requires adding some more general purpose library maths functions to our code.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- returns the degrees between (0,0) and pt</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- note: 0 degrees is 'east'</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">function angleOfPoint( pt )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local x, y = pt.x, pt.y</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local radian = math.atan2(y,x)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local angle = radian*180/math.pi</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if angle < 0 then angle = 360 + angle end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return angle</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- returns the degrees between two points</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- note: 0 degrees is 'east'</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">function angleBetweenPoints( a, b )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local x, y = b.x - a.x, b.y - a.y</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return angleOfPoint( { x=x, y=y } )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The code above performs two standard operations. <i>angleOfPoint</i> returns the angle between (<i>0,0)</i> and <i>pt</i>. <i>angleBetweenPoints</i> uses <i>angleOfPoint</i> to return the angle between point <i>a </i>and<i> b</i>.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Because of an oddity in angle calculations, we will also need another function which can determine the smallest angle between two points on the perimeter of a circle. This is important because when we’re using the angle which a tracking dot has rotated we may accidentally end up with an angle which represents the larger angle, say, between <i>10 degrees</i> and <i>260 degrees</i>. What we would want here is the angle <i>90 degrees</i>, not <i>260 degrees</i>.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- returns the smallest angle between the two angles</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- ie: the difference between the two angles via the shortest distance</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">function smallestAngleDiff( target, source )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local a = target - source</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (a > 180) then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>a = a - 360</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>elseif (a < -180) then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>a = a + 360</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return a</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">As in the <i>calcAvgScaling</i> function, we’ll make use of the above function in the <i>calcAvgRotation</i> function to determine the average amount that all of the tracking dots have rotated around the midpoint:</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- calculates rotation amount based on the average change in tracking point rotation</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">local function calcAverageRotation( points )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local total = 0</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>for i=1, #points do</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local point = points[i]</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>total = total + smallestAngleDiff( point.angle, point.prevAngle )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return total / #points</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">We also want to update the difference between the tracking dot angles - and their previous angles at the same time. Fortunately, we’re already doing this for tracking dot distances from the midpoint, so we can add this code there:</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- calculate each tracking dot's distance and angle from the midpoint</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">local function updateTracking( centre, points )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>for i=1, #points do</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local point = points[i]</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>point.prevAngle = point.angle</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>point.prevDistance = point.distance</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>point.angle = angleBetweenPoints( centre, point )</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>point.distance = lengthOf( centre, point )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Now, due to this small addition of code, the <i>rect:touch()</i> function is already updating the appropriate values in the <i>began</i> and <i>ended</i> phases. All we have to do is apply rotation to the <i>rect</i> display object in the <i>moved</i> phase. Of course, we only need to do this if there is more than one tracking dot.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- if there is more than one tracking dot, calculate the rotation and scaling</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (#rect.dots > 1) then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- calculate the average rotation of the tracking dots</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>rotate = calcAverageRotation( rect.dots )</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- calculate the average scaling of the tracking dots</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>scale = calcAverageScaling( rect.dots )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- apply rotation to rect</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>rect.rotation = rect.rotation + rotate</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- apply scaling to rect</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>rect.xScale, rect.yScale = rect.xScale * scale, rect.yScale * scale</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">So, here we simply call the functions described earlier to calculate the average amount of rotation around the tracking dots’ midpoint and apply it to the display object.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><i>Pinch Centre Translation</i></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none; text-decoration: underline;">Sample10.lua</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Run the code now and you’ll notice that while the display object rotates, scales and moves with the tracking dots, it doesn’t quite shift <i>with</i> the tracking dots. This is because, unless the user is very lucky (or not paying attention,) they will never quite get the midpoint to be the very centre of the display object being manipulated.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">To solve this we don’t just need to apply the translation, scaling and rotation to the display object - we also need to apply it to the <i>centre point location of</i> the display object. This means that:</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<ul>
<ul style="list-style-type: disc;">
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Scaling should be applied to the distance between the midpoint and the <i>rect</i> centre</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">Rotation should be applied to the <i>rect</i> centre, rotated around the tracking dot midpoint</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">But, fortunately, we’re already applying translation, so that can be ignored.</span></li>
</ul>
</ul>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Ok, so what standard library maths functions do we need? Well, we want to <i>rotate a point</i> around <i>another point</i>, so there’s those:</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- rotates a point around the (0,0) point by degrees</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- returns new point object</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">function rotatePoint( point, degrees )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local x, y = point.x, point.y</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local theta = math.rad( degrees )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local pt = {</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>x = x * math.cos(theta) - y * math.sin(theta),</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>y = x * math.sin(theta) + y * math.cos(theta)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return pt</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- rotates point around the centre by degrees</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- rounds the returned coordinates using math.round() if round == true</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- returns new coordinates object</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">function rotateAboutPoint( point, centre, degrees, round )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local pt = { x=point.x - centre.x, y=point.y - centre.y }</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>pt = rotatePoint( pt, degrees )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>pt.x, pt.y = pt.x + centre.x, pt.y + centre.y</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (round) then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>pt.x = math.round(pt.x)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>pt.y = math.round(pt.y)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>return pt</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The <i>moved</i> phase also needs changing quite a bit. </span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- apply rotation to rect</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>rect.rotation = rect.rotation + rotate</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- apply scaling to rect</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>rect.xScale, rect.yScale = rect.xScale * scale, rect.yScale * scale</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- declare working point for the rect location</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>local pt = {}</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- translation relative to centre point move</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>pt.x = </b>rect.x + (centre.x - rect.prevCentre.x)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>pt.y = </b>rect.y + (centre.y - rect.prevCentre.y)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- scale around the average centre of the pinch</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- (centre of the tracking dots, not the rect centre)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>pt.x = centre.x + ((pt.x - centre.x) * scale)</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>pt.y = centre.y + ((pt.y - centre.y) * scale)</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- rotate the rect centre around the pinch centre</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- (same rotation as the rect is rotated!)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>pt = rotateAboutPoint( pt, centre, rotate, false )</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- apply pinch translation, scaling and rotation to the rect centre</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>rect.x, rect.y = pt.x, pt.y</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- store the centre of all touch points</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>rect.prevCentre = centre</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">else -- "ended" and "cancelled" phases</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The <i>moved</i> phase is now doing a number of things, whether there’s one tracking dot or many:</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<ul>
<ul style="list-style-type: disc;">
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;"><i>pt</i> is declared to use as a working space for the display object’s position</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">The midpoint translation is applied to the working object</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">The distance between the midpoint and the display object centre is scaled</span></li>
<li style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; margin: 0px;"><span style="font-size: 7.2px; font-stretch: normal; line-height: normal;"></span><span style="font-kerning: none;">The centre of the display object is rotated around the midpoint</span></li>
</ul>
</ul>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Run the code now and no matter where you place your fingers, real or virtual (in the simulator,) as long as the touch (tracking dot) is started on the display object it will pinch-zoom with the touch points.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">The effect is most obvious when using two fingers because the tracking points stay precisely relative to their starting location on the display object, but more can be used and the result is the same, just a little more averaged across the touch points.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><i>One More Thing</i></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none; text-decoration: underline;">Sample11.lua</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Everything so far has relied on a single display object being manipulated. When does that happen in the real world? Realistically, a program will need a group of objects to be pinch-zoomed. More importantly, what use is a complex function if it can’t be re-used?</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">To re-use the :<i>touch()</i> function so that it can be attached to any display object - image or group - simply change the references it uses. To show that, let’s create a display group with a number of objects contained.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- spawning tracking dots</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- create display group to listen for new touches</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b>local group = display.newGroup()</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- populate display group with objects</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">local rect = display.newRect( <b>group</b>, 200, 200, 200, 100 )</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">rect:setFillColor(0,0,255)</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b>rect = display.newRect( group, 300, 300, 200, 100 )</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b>rect:setFillColor(0,255,0)</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><b></b></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b>rect = display.newRect( group, 100, 400, 200, 100 )</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b>rect:setFillColor(255,0,0)</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- keep a list of the tracking dots</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b>group</b>.dots = {}</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- advanced multi-touch event listener</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">function<b> touch(self, e)</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- get the object which received the touch event</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>local target = e.target</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- get reference to self object</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span>local rect = self</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>-- handle began phase of the touch event life cycle...</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (e.phase == "began") then</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">Now, it’s the group which will be manipulated, so attach the listener and the function to the group.</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal; min-height: 14px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">end</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- attach pinch zoom touch listener</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b>group.touch = touch</b></span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">-- listen for touches starting on the touch object</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;"><b>group:</b>addEventListener("touch")</span></div>
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: "Courier New"; font-size: 9px; font-stretch: normal; line-height: normal; min-height: 10px;">
<span style="font-kerning: none;"></span><br /></div>
<br />
<div style="-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Helvetica; font-size: 12px; font-stretch: normal; line-height: normal;">
<span style="font-kerning: none;">And there we have it - a touch listener function which can be applied to any display object or group to implement multitouch pinch-zoom-rotation.</span></div>
Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com1tag:blogger.com,1999:blog-12842716.post-57983366926276785912016-05-20T23:24:00.000-07:002016-05-20T23:33:29.116-07:00Get Command Line Lua Working On Mac And WindowsHaving used Lua for a long time now, I realised that I've never actually run it as a stand-alone feature. So I figured I would find out how to run it from the command line. There are two routes to take and I stumbled a few times, until realising that it's way simpler than it can appear. I guess it depends on your mindset as to how you interpret some of the steps.<br />
<br />
<i>Note: This post was written when Lua 5.3.2 was the current version, but as none of the steps (or formal references) here have changed since v1, I don't see that it would be a different process for any other version.</i><br />
<br />
I should point out here that I have been using Lua during my use of <a href="http://coronalabs.com/">Corona SDK by CoronaLabs</a> and it is so easy and just a great language. It is a lot older than it might appear, having been created around 1991. Check the bottom of this post for all the references.<br />
<br />
So, here's how to get it working step by step...<br />
<br />
<b>Command Line Lua on Mac from the Binary:</b><br />
<ul>
<li>Download the latest version for "Mac OS X Intel Executables" from: <a href="http://luabinaries.sourceforge.net/download.html">http://luabinaries.sourceforge.net/download.html</a></li>
<ul>
<li>Steps:</li>
<ul>
<li><a href="https://www.lua.org/">https://www.lua.org</a> -> "Download"</li>
<li><a href="https://www.lua.org/download.html">https://www.lua.org/download.html</a> -> Under "Binaries" click "get a binary"</li>
<li><a href="http://lua-users.org/wiki/LuaBinaries">http://lua-users.org/wiki/LuaBinaries</a> -> Under "Mac OS" click "LuaForge Lua Binaries project"</li>
<li><a href="http://luabinaries.sourceforge.net/download.html">http://luabinaries.sourceforge.net/download.html</a> -> Click "Binaries"</li>
<li>Latest version: <a href="http://sourceforge.net/projects/luabinaries/files/5.3.2/Tools%20Executables/lua-5.3.2_MacOS1011_bin.tar.gz/download">http://sourceforge.net/projects/luabinaries/files/5.3.2/Tools%20Executables/lua-5.3.2_MacOS1011_bin.tar.gz/download</a> -> Click the link next to "Mac OS X Intel Executables"</li>
<li>Download here: <a href="http://downloads.sourceforge.net/project/luabinaries/5.3.2/Tools%20Executables/lua-5.3.2_MacOS1011_bin.tar.gz">http://downloads.sourceforge.net/project/luabinaries/5.3.2/Tools%20Executables/lua-5.3.2_MacOS1011_bin.tar.gz</a></li>
</ul>
</ul>
<li>This will get you a .tar file with a name like <b>"lua-5.3.2_MacOS1011_bin.tar"</b> (relevant to the version you downloaded) in your download location.</li>
<li>Decompress the .tar file and you will have a directory with the same name, minus the ".tar", something like "lua-5.3.2_MacOS1011_bin"</li>
<ul>
<li>At this point you have downloaded the Lua binary and have everything you need to run Lua code.</li>
</ul>
<li>Open <b>Terminal</b> by either going to Launchpad, Spotlight or Applications->Utilities->Terminal</li>
<ul>
<li>This is the command line program for Mac and lets you execute instructions on the Mac directly. It is similar to CMD.exe on Windows, but uses a Unix instruction set. (You don't need to worry about this.)</li>
</ul>
<li>If you have downloaded the Lua binary to Downloads in your own user folder you need to navigate to that. Steps:</li>
<ul>
<li>The full path for your own user directory will be something like: <b>/users/mattw</b> and the terminal is probably already there.</li>
<li>Type: <b>pwd</b> to find out where you are. You should see something like /<b>users/mattw</b></li>
<li>If you are in your user directory you can see what is in it by typing (this is not necessary): <b>ls</b></li>
<li>To go into the Downloads folder type: <b>cd Downloads</b></li>
<ul>
<li><i>Tip: To autocomplete any file or folder name you can type part of it and then hit Tab</i></li>
</ul>
<li>If you type <b>ls</b> again you will probably see a lot more - everything which is in your Downloads folder.</li>
<li>Type: <b>cd lua-5.3.2_MacOS1011_bin</b> to go into the decompressed Lua binary folder (you might want to type <b>cd lua</b> and press Tab here)</li>
<li>Type <b>ls</b> again to see what is inside the folder for your version of Lua.</li>
<li>You should now see two files. They will be called "<b>lua</b>" and "<b>luac</b>" plus the shortened version number of Lua which you have downloaded.</li>
<ul>
<li>Eg: "<b>lua53</b>" and "<b>luac53</b>"</li>
</ul>
</ul>
<li><i>Note: From here we will check that the Lua binary is working on the command then. You can skip ahead to run a lua program, if you have one.</i></li>
<li>Check that you can run Lua on the Terminal command line by typing: <b>./lua53</b> (The . and / are important!)</li>
<ul>
<li>You should see this (with the appropriate version and date):</li>
<ul>
<li><div style="font-family: Menlo; font-size: 11px; line-height: normal;">
<span style="font-variant-ligatures: no-common-ligatures;">Lua 5.3.2 Copyright (C) 1994-2015 Lua.org, PUC-Rio</span></div>
<div style="font-family: Menlo; font-size: 11px; line-height: normal;">
<span style="font-variant-ligatures: no-common-ligatures;">> </span></div>
</li>
</ul>
<li>Type:</li>
<ul>
<li><span style="font-family: "menlo"; font-size: 11px;">> print("Hello World!")</span></li>
</ul>
<li>You should see this:</li>
<ul>
<li><div style="font-family: Menlo; font-size: 11px; line-height: normal;">
<span style="font-variant-ligatures: no-common-ligatures;">> print("Hello World!")</span></div>
<div style="font-family: Menlo; font-size: 11px; line-height: normal;">
<span style="font-variant-ligatures: no-common-ligatures;">Hello World!</span></div>
<div style="font-family: Menlo; font-size: 11px; line-height: normal;">
<span style="font-variant-ligatures: no-common-ligatures;">> </span></div>
</li>
</ul>
<li>You have successfully installed Lua and executed your first line of Lua code!</li>
<li>One thing to note is that you are currently in the Lua command line - <i>not the Terminal command line any more.</i></li>
<li>To get back to regular Terminal, type CTRL+C</li>
<li>From here you can run Lua programs which are saved in "<b>.lua</b>" files.</li>
</ul>
<li>To run a Lua program create a new text file in a text editor (e.g. TextEdit) and save it in the same folder as the Lua binary - inside the decompressed Lua folder - and make sure it ends with "<b>.lua</b>" (all Lua programs must end in .lua)</li>
<ul>
<li>Create a file in a text editor.</li>
<li>In the text file, copy and paste this:</li>
</ul>
</ul>
<blockquote class="tr_bq">
math.randomseed( os.time() )<br />
print( os.date( "%c" ) )<br />
print( os.time() )<br />
for i=1, 10 do<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>print("Counter: "..i)<br />
end<br />
print(math.random(1,100))</blockquote>
<ul><ul>
<li>Save the file inside the decompressed Lua folder and name it: <b>main.lua</b></li>
<li>To run the program, go back to Terminal and type:</li>
<ul>
<li>./lua53 main.lua</li>
<li>Again, the "./" at the start is important and the "53" is for the version I am using. Yours may be different.</li>
</ul>
<li>You should now see something similar to this:</li>
</ul>
</ul>
<blockquote class="tr_bq">
<span style="font-variant-ligatures: no-common-ligatures;">Sat May 21 07:14:31 2016</span><span style="font-variant-ligatures: no-common-ligatures;">1463811271</span><span style="font-variant-ligatures: no-common-ligatures;">Counter: 1</span><span style="font-variant-ligatures: no-common-ligatures;">Counter: 2</span><span style="font-variant-ligatures: no-common-ligatures;">Counter: 3</span><span style="font-variant-ligatures: no-common-ligatures;">Counter: 4</span><span style="font-variant-ligatures: no-common-ligatures;">Counter: 5</span><span style="font-variant-ligatures: no-common-ligatures;">Counter: 6</span><span style="font-variant-ligatures: no-common-ligatures;">Counter: 7</span><span style="font-variant-ligatures: no-common-ligatures;">Counter: 8</span><span style="font-variant-ligatures: no-common-ligatures;">Counter: 9</span><span style="font-variant-ligatures: no-common-ligatures;">Counter: 10</span><span style="font-variant-ligatures: no-common-ligatures;">48</span></blockquote>
<ul><ul>
<li>As you can probably see in the program file, this is the current date, an integer representing the current date, a loop from 1 to 10 and a random number.</li>
<li>I'm not going to explain the Lua language here - there are plenty of references for that (see below) but you can start here: <a href="https://www.lua.org/manual/5.3/">https://www.lua.org/manual/5.3/</a></li>
<li>The Corona Labs site also has a very good documentation system, but it is heavily geared towards their libraries - Corona is a very good starting point to learn Lua: <a href="https://docs.coronalabs.com/api/index.html">https://docs.coronalabs.com/api/index.html</a></li>
</ul>
</ul>
<div>
<b>Command Line Lua on Mac from the Source:</b><br />
<b><br /></b>
Before we get started, I do need to point out that you will need XCode by Apple installed to be able to compile the Lua source into a binary. This is not a problem as it is available from the <a href="https://itunes.apple.com/gb/app/xcode/id497799835?mt=12">Mac App Store</a> and <a href="https://developer.apple.com/xcode/download/">Apple Developer website</a>, but if you do install it and don't run it first you will likely see a message about the license (this would happen when XCode gets updated, as well.) When this happens, simply run XCode and accept the update terms. You can quit it immediately, as it is not necessary to have it running to build the Lua source code.</div>
<div>
<ul>
<li>TBC</li>
</ul>
</div>
<div>
<b>Command Line Lua on Windows from the Binary:</b></div>
<div>
<ul>
<li>TBC</li>
</ul>
</div>
<div>
<b>Command Line Lua on Windows from the Source:</b></div>
<div>
<ul>
<li>TBC</li>
</ul>
</div>
<div>
<b>References:</b></div>
<div>
<ul>
<li>https://www.lua.org</li>
<li>https://www.lua.org/docs.html</li>
<li>https://www.lua.org/manual/5.3/</li>
<li>https://docs.coronalabs.com/api/index.html</li>
<li>http://lua-users.org</li>
<li>https://coronalabs.com</li>
<li>http://lua-users.org/wiki/LuaBinaries</li>
<li>http://luabinaries.luaforge.net</li>
<li>http://luabinaries.sourceforge.net/download.html</li>
<li>https://www.youtube.com/watch?v=Dqu63-MO4w4</li>
<li>http://stackoverflow.com/a/5496362/71376</li>
<li>http://stackoverflow.com/questions/26197347/agreeing-to-the-xcode-ios-license-requires-admin-privileges-please-re-run-as-r</li>
<li>https://itunes.apple.com/gb/app/xcode/id497799835?mt=12</li>
<li>https://developer.apple.com/xcode/download/</li>
</ul>
</div>
Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com2tag:blogger.com,1999:blog-12842716.post-14721993407519775562016-04-11T01:26:00.002-07:002016-04-11T01:29:35.278-07:00TextWrangler Document Drawer Next And Previous NavigationIf you are using <a href="http://www.barebones.com/">Bare Bones'</a> "little brother to BBEdit" app <a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a> (also available on the <a href="https://itunes.apple.com/gb/app/textwrangler/id404010395?mt=12">Mac App Store</a>) you might want to use the file drawer (CMD+0 to open on the left in version 5.0.2). It allows you to use one window to edit multiple files.<br />
<br />
<div>
There is a really handy keyboard shortcut to switch between those files, making navigating between all your documents quick and easy:</div>
<div>
<ul>
<li>CMD+Alt+[ for previous document and CMD+Alt+] for next document</li>
</ul>
The default setting, however, is to navigate from previous to next document in the order they have been opened. If you manually select a document with the mouse, the order is then switched to the order as opened, or loaded. This can be incredibly annoying as you really have no idea which document will be the 'next' document!</div>
<div>
<br />
You can search all day long for a Preferences setting but you will not find it. It is not there.<br />
<br />
Googling for answers on this can also be frustrating, though I have done the leg work for you and can reveal that the Mac's Terminal is to your rescue...</div>
<div>
<ul>
<li>Simply type Terminal into Spotlight (CMD+space) and hit return </li>
<li>Type: </li>
<li>defaults write com.barebones.textwrangler SurfNextPreviousInDisplayOrder -bool YES </li>
<li>Hit return and close Terminal</li>
</ul>
</div>
<div>
You should now find that TextWrangler navigates through your files in the order they are listed in the document drawer.<span style="font-family: inherit;">
</span><br />
<div>
<span style="font-family: inherit;"><br /></span></div>
<span style="font-family: inherit;">
</span>
<div>
<span style="font-family: inherit;">References:</span></div>
<span style="font-family: inherit;"><a href="https://www.blogger.com/goog_1434690399">
</a><div>
<ul>
<li><span style="font-family: inherit;"><a href="https://groups.google.com/forum/#!topic/textwrangler/vbm0-MOHZTs">https://groups.google.com/forum/#!topic/textwrangler/vbm0-MOHZTs</a></span></li>
</ul>
</div>
</span></div>
Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com0tag:blogger.com,1999:blog-12842716.post-37231640172785960692016-03-14T06:39:00.002-07:002016-03-14T06:39:44.953-07:00Understand Large Code BasesHaving been assigned a series of very large code bases over the past few months, I decided to do some digging on how different developers choose to understand them, in general. Being able to digest other people's code is important and the challenge increases hugely very quickly when you're working in an enterprise environment.<br />
<br />
While there is a lot of advice on how to do a great many things in software, much of it requires understanding all the tools around you and the business logic involved - often to a very deep level. The problem here is that you may not be familiar with those tools and the business logic probably is not written down, let alone digestible.<br />
<br />
Coping with these issues is often, glibly, described as getting experience with the tools and <i>just reading the code</i> as much as possible. This is not helpful. Firstly, it does not advise on how to approach a large system - where best to begin reading and what to do when what you're reading doesn't make sense - and how to cope with the deluge of information found when looking up toolsets being used on a large, often legacy, project.<br />
<br />
I fully intend to expand on this post at some point with truly useful information, but for now I will link to some helpful, though not oracle-like, posts found around the internets. These probably state the obvious techniques you've already tried - I know I have. They also might incite you to keep going, as maintaining will power can be a challenge, too.<br />
<br />
<ul>
<li>How do you dive into large code bases?<a href="http://programmers.stackexchange.com/questions/6395/how-do-you-dive-into-large-code-bases">http://programmers.stackexchange.com/questions/6395/how-do-you-dive-into-large-code-bases</a></li>
<li>What is the most effective way to add functionality to unfamiliar, structurally unsound code?<a href="http://programmers.stackexchange.com/questions/135311/what-is-the-most-effective-way-to-add-functionality-to-unfamiliar-structurally">http://programmers.stackexchange.com/questions/135311/what-is-the-most-effective-way-to-add-functionality-to-unfamiliar-structurally</a></li>
<li>I've inherited 200K lines of spaghetti code — what now?<a href="http://programmers.stackexchange.com/questions/155488/ive-inherited-200k-lines-of-spaghetti-code-what-now">http://programmers.stackexchange.com/questions/155488/ive-inherited-200k-lines-of-spaghetti-code-what-now</a></li>
<li>Time Management Techniques (PluralSight video)</li>
<li><a href="https://app.pluralsight.com/player?course=time-management-technical-professionals&author=doru-catana&name=time-management-technical-professionals-m3&clip=2&mode=live">https://app.pluralsight.com/player?course=time-management-technical-professionals&author=doru-catana&name=time-management-technical-professionals-m3&clip=2&mode=live</a></li>
</ul>
Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com1tag:blogger.com,1999:blog-12842716.post-4684166028555354312015-02-27T02:31:00.002-08:002015-02-27T02:31:53.823-08:00Innovation is Saying No to 1000 ThingsHaving just read <a href="http://daringfireball.net/linked/2015/02/26/moxie-marlinspike-gpg">this</a> over at <a href="http://daringfireball.net/">Daring Fireball</a> I was reminded of this video shown by Apple at WWDC in 2013:<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/6YDXBeGOtUk?rel=0" width="560"></iframe><br />
<br />
It made me think about the oft-debated and ongoing argument about why some companies produce as many varied products and Apple <i>doesn't</i>, while Apple is roundly criticised at every turn for <i>not</i> including every feature under the sun <i>while still making 90% of the market's profit.</i><br />
<i><br /></i>
Companies like Samsung see value in producing as many variations of a product to appeal to as many customers as possible. The failure in that strategy is that it <i>requires</i> the majority of those variations to <i>not be attractive</i> to most customers. The reason that strategy can be put into action at all is because those numerous variations can be produced at low cost, which itself incurs a penalty of <i>low quality</i>.Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com0tag:blogger.com,1999:blog-12842716.post-81364106139912640362015-02-25T06:14:00.003-08:002015-02-25T06:15:57.608-08:00Force VMWare Fusion Windows 7.1 on Retina Mac to Reasonable ResolutionRunning Windows 7.1 under VM Ware Fusion on a Retina MacBook Pro will cause each restart (whether shutdown or put into sleep mode) to start back up in the highest resolution available. Windows does not cater for this the same way that Mac OS does and the upshot is that everything on your screen will be tiny.<br />
<br />
To force Windows into a reasonable resolution the VMWare VMX config file for the instance needs to be modified to set the max width and height. Finding the config file is the first step. Adding three lines is the second.<br />
<br />
The long way is to follow the instructions on these two pages in order:<br />
<ul>
<li><a href="http://kb.vmware.com/selfservice/microsites/search.do?language=en_US&cmd=displayKC&externalId=1014782">http://kb.vmware.com/selfservice/microsites/search.do?language=en_US&cmd=displayKC&externalId=1014782</a></li>
<li><a href="http://kb.vmware.com/selfservice/microsites/search.do?language=en_US&cmd=displayKC&externalId=1003">http://kb.vmware.com/selfservice/microsites/search.do?language=en_US&cmd=displayKC&externalId=1003</a></li>
</ul>
<div>
The short version of those is to shutdown your VM Windows (not suspend) and open the following menu:</div>
<div>
<ul>
<li>Window -> Virtual Machine Library -></li>
<li>Then, while holding alt / option, open the menu over the Windows instance in the left menu</li>
<li>"Show in Finder" will change to "Open Config in File Editor"</li>
</ul>
<div>
Then, in your text editor, paste these three lines to the bottom of the config file and save it over the original (make a backup):</div>
</div>
<blockquote class="tr_bq">
svga.autodetect = "FALSE"<br />
svga.maxWidth = 1920<br />
svga.maxHeight = 1200</blockquote>
<div>
This will set the default resolution to 1920x1200. Choose whichever is best for you.</div>
Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com0tag:blogger.com,1999:blog-12842716.post-22439779216905748572014-10-29T05:39:00.004-07:002014-10-29T05:42:24.450-07:00Payment Security<div class="MsoNormal">
There has been a lot of talk in the tech and regular media
recently about digital security so I just wanted to write a word about some of these issues by passing on some links to read.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Firstly, a note about mobile payments in shops:</div>
<div class="MsoNormal">
</div>
<ul>
<li><a href="http://daringfireball.net/2014/10/nfc_apple_pay">http://daringfireball.net/2014/10/nfc_apple_pay</a></li>
</ul>
<o:p></o:p><br />
<div class="MsoNormal">
The gist here is that many shops are doing whatever they can
to deter people from using Apple Pay over other solutions because Apple Pay
stops the shops and related merchants from accessing personal information about
the people shopping with them.</div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
If you’re wondering why this would be a bad thing, here is
an article about the type of information that shops are trying to collect about
every single person who walks through their doors:</div>
<div class="MsoNormal">
</div>
<ul>
<li><a href="http://daringfireball.net/linked/2014/10/28/target-2012-tracking">http://daringfireball.net/linked/2014/10/28/target-2012-tracking</a></li>
</ul>
<o:p></o:p><br />
<div class="MsoNormal">
If you didn’t read that (TL; DR), it says that what Target
(huge chain in America) is trying to do is work out if you’re pregnant even if
you don’t want them to know <i>from your
spending habits.</i></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Yes, this stuff is possible. And we are at the start of an
enormous digital path. Many people thought that contactless payments would not
catch on because of the insecurity – if you have a mobile register you can walk
past someone’s pocket and charge them up to £20 without them knowing (<i>this has happened</i>) – however we now have
contactless everywhere because of the convenience.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
We have actually been on this path for a while – contactless
was introduced back in 1997. Consumers have been wanting a “pay by phone”
method for a long time (I even pay for parking using an iPhone app) simply for
the convenience.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
What we have gained in convenience we have lost in security.
Be careful out there. Choose what you pay with and who you pay with care.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Further reading: </div>
<div class="MsoNormal">
</div>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Contactless_payment">http://en.wikipedia.org/wiki/Contactless_payment</a></li>
<li><a href="http://en.wikipedia.org/wiki/Apple_Pay">http://en.wikipedia.org/wiki/Apple_Pay</a></li>
<li><a href="http://en.wikipedia.org/wiki/Google_Wallet">http://en.wikipedia.org/wiki/Google_Wallet</a></li>
</ul>
<o:p></o:p><br />
<div class="MsoNormal">
<o:p></o:p></div>
<br />
<div class="MsoNormal">
<o:p></o:p></div>
Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com3tag:blogger.com,1999:blog-12842716.post-50768319615789508432014-10-14T01:13:00.005-07:002014-10-14T01:13:50.153-07:00Project Planning<a href="http://www.dilbert.com/fast/2014-10-12/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.dilbert.com/dyn/str_strip/000000000/00000000/0000000/200000/20000/7000/800/227840/227840.strip.print.gif" width="400" /></a>Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com0tag:blogger.com,1999:blog-12842716.post-11174967336376264922014-09-16T04:57:00.000-07:002014-09-16T04:58:59.000-07:00Useful C# Links<div>
Doc links...</div>
<ul>
<li>Access modifiers<br /><a href="http://msdn.microsoft.com/en-us/library/ba0a1yw2.aspx">http://msdn.microsoft.com/en-us/library/ba0a1yw2.aspx</a></li>
<li>C# keywords<br /><a href="http://msdn.microsoft.com/en-GB/library/x53a06bb.aspx">http://msdn.microsoft.com/en-GB/library/x53a06bb.aspx</a></li>
</ul>
<div>
Blog articles...</div>
<div>
<ul>
<li>10 Keywords you should not use<br /><a href="http://www.codethinked.com/ten-c-keywords-that-you-shouldne28099t-be-using">http://www.codethinked.com/ten-c-keywords-that-you-shouldne28099t-be-using</a></li>
</ul>
</div>
Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com1tag:blogger.com,1999:blog-12842716.post-70102096007167425692014-09-16T04:54:00.001-07:002014-09-16T04:54:30.975-07:00Renounce!<a href="http://www.dilbert.com/fast/2014-09-16/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.dilbert.com/dyn/str_strip/000000000/00000000/0000000/200000/20000/9000/000/229087/229087.strip.print.gif" width="400" /></a>Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com0tag:blogger.com,1999:blog-12842716.post-32626216215277140992014-08-28T02:31:00.000-07:002015-01-29T22:00:53.092-08:00Fighting The Physics EngineI've seen way too many posts on the forums where a developer asks about the best way to control the absolute position of a dynamic physics object when using Box2D. This lead me to thinking that there should be a catch-all place for someone to read the right answer and as I've answered these questions on the forums many times, I'll start logging them here. Should have done this a long time ago.<br />
<br />
Here is a really great blog post on the subject of common physics problems, though I'll try to tackle even trickier issues below: <a href="http://coronalabs.com/blog/2011/08/08/solutions-to-common-physics-challenges/">http://coronalabs.com/blog/2011/08/08/solutions-to-common-physics-challenges/</a><br />
<ul>
<li><b>How do I control the position of an object in Box2D?</b><br /><i><br />Examples:</i><a href="http://forums.coronalabs.com/topic/48488-disable-the-y-axis/">http://forums.coronalabs.com/topic/48488-disable-the-y-axis/</a><br /><a href="http://forums.coronalabs.com/topic/53563-physicstransition/">http://forums.coronalabs.com/topic/53563-physicstransition/</a><br /><i><br />Description:</i><br />Dynamic objects in the Box2D physics engine are under the constant control (at least, while not asleep) of the physics engine. If you attempt to change their .x or .y values and move them with your own code you are trying to force the engine to accept a different world position for it's own, managed objects. Because of this change, sometimes it's own internal values will effectively break during computation and the result is that, in Corona SDK, the display objects will be lost from their physics object.<br />In short, forcing the physics engine to accept different positions for it's bodies is fighting the engine for control and it will break.<br /><i><br />Solution:</i><br />The way to control the position of physics bodies is to use the engine to position the them itself. This can be done by attaching a touch joint to the body and controlling the position of the joint and thus the position of the body.<br />It has been mentioned that static bodies can be used to absolutely position dynamic bodies, via a weld joint, but this is similarly inadvisable due to the the reasons above.<br /> </li>
<li><b>How can I group the physics bodies like I do with display objects?</b><br /><br /><i>Example: </i><a href="http://forums.coronalabs.com/topic/50626-pin-one-object-to-another/">http://forums.coronalabs.com/topic/50626-pin-one-object-to-another/</a><br /><br /><i>Description:</i><br />Many developers want to group many physics objects into a single display group so that they can move them all together. The physics engine uses the top level display group as the starting 0,0 point for all physics bodies, so trying to move a display object's parent group will not work, because 0,0 never moves.<br /><br /><i>Solution:</i><br />Grouping the display objects which have physics bodies attached into display groups is not a problem. You just can't move the parent groups at all. This is usually fine because moving a physics body should be done using a touch joint, which will cause any bodies attached by physics joints to move with it.<br /> </li>
<li><b>When I reset my physics scene the objects don't stop moving or reset wrong!</b><br /><br /><i>Examples:</i><a href="http://forums.coronalabs.com/topic/54020-correctly-removing-applylinearimpulse/">http://forums.coronalabs.com/topic/54020-correctly-removing-applylinearimpulse/</a><br /><a href="http://forums.coronalabs.com/topic/45014-re-stacking-of-blocks-have-some-unintended-random-behaviour/">http://forums.coronalabs.com/topic/45014-re-stacking-of-blocks-have-some-unintended-random-behaviour/</a><br /><br /><i>Description:</i>Some games provide a sandbox environment which allows the player to edit a scene. Whenever the player chooses they can hit a run button and test their scene. They physics objects will move around and then reset back to the player's edited positions, rather than continuing to roll around uncontrolled. Some developers find that resetting their physics scene is a problem because the physics bodies do not want to stay where they should.<br /><br /><i>Solution:</i><br />This problem is similar to the first problem discussed, but there is also one confusing factor: once physics bodies have been allowed to move, by collision impact, gravity or some other force, they will have built up energy and while energy can be mostly dissipated there will be momentum and other internal, Box2D values which cannot. The best way to avoid objects moving off on their own is to simply destroy them and rebuild. Use a non-physics body display object during the editing and create the physics bodies only when the player hits Run. Sometimes this is not possible. The solution here is also similar to the first problem- simply weld your objects in place either by creating a weld joint between the body and a static object or by using a touch joint. The touch joint is a great solution because you can have each body listening, on it's own free will, to the Runtime (or even the current scene, if you're using Composer) for freeze/reset and unfreeze/play events. When the freeze/reset event is received the physics on the body is turned off, the display object is moved absolutely (using .x and .y positioning) and the body turned back on. A touch joint is then added and used to keep the object in place. object.isFixedRotation=true can even be used to stop rotation. When the unfreeze/play event is received the touch joint is removed (and isFixedRotation=false) and the body runs free again.<br /> </li>
<li><b>Why do stacks of blocks keep falling down?</b><br /><br /><i>Examples:</i><br /><a href="http://forums.coronalabs.com/topic/44700-physics-stack-of-blocks-topples/">http://forums.coronalabs.com/topic/44700-physics-stack-of-blocks-topples/</a><br /><br /><i>Description:</i><br />In Angry Birds, and so many clones, objects are stacked - sometimes precariously - on top of each other and need to be knocked over. Because all objects in the Box2D world contain inertia, density and various energies, building a tower of even simple squares can be perilous. For now clear reason they will shudder and push each other out the way, collapsing the tower.<br /><br /><i>Solution:</i><br />The reason the blocks generate this energy is that they have nowhere to dissipate it other than the blocks around them. Those blocks then acquire that energy and need to dissipate it again, back into the blocks surrounding them. The pattern continues until the blocks fall onto something which does not return any energy or they simply drop off the screen. There are two things at play here and the solution, again, is similar to our first problem's solution. Firstly, all objects have energies that may (depending on your particular scenario) need to be controlled (these are the afore-mentioned inertia, density and gravity.) Secondly, holding objects down is usually a good way to make sure they don't wander off on their own. However, here we want the blocks to be able to fall down, just not when they feel like it. One popular solution is to weld them in place or even set their object.bodyType to "static". Static objects do not move and they absorb all energies applied to them. This can be a problem because, as anyone attempting to build a Box2D-Corona rag doll demo has discovered, static objects will absorb all your motion and tear otherwise reliable physics joints apart. The other solution is to set their linear and angular damping values to something small. Usually, this will help the bodies absorb any excess energy, rather than passing it to their neighbours. A compromise on the "nail them down" solution is to simply hold them in place with a touch joint (so useful!) until a pre-collision event occurs, then remove the joint. The best advice is simple: Never use static bodies if you can possibly avoid it. This will be explained in the next problem...<br /> </li>
<li><b>Where is this object going to go?</b><br /><br /><i>Examples:</i><br /><a href="http://forums.coronalabs.com/topic/48154-can-box2d-physics-be-made-deterministic/">http://forums.coronalabs.com/topic/48154-can-box2d-physics-be-made-deterministic/</a><br /><br /><i>Description:</i><br />Angry Birds, again, has another interesting element where the flight path of one of the moody projectiles is shown before the launch takes place. This is a common feature in many games but is a very difficult thing to calculate. This difficulty comes not because the mathematics for calculating trajectory is difficult (see: <a href="http://hyperphysics.phy-astr.gsu.edu/hbase/traj.html#tra12">http://hyperphysics.phy-astr.gsu.edu/hbase/traj.html#tra12</a>) but because the Box 2D physics engine is a real world simulation. This means that it does not guarantee the same result every time. In fact, it pretty much guarantees at least a slightly different result every time. It is also because other environmental factors, such as the weight (simplified: area*density) of your physics body, need to be taken into account.<br /><br /><i>Solution:</i><br />As you might have guessed, there are many ways to solve this problem. The first is simply to control the path of travel with a touch joint (see the first problem for why absolute positioning is not a good idea) after calculating it using the HyperPhysics link above. The second is to actually calculate the path for real. A great resource here is the iForce2D site: <a href="http://www.iforce2d.net/b2dtut/projected-trajectory">http://www.iforce2d.net/b2dtut/projected-trajectory</a> which deals with Box2D physics in many scenarios, though mostly with C++. However, the solutions are easy to translate. The third solution is to throw an invisible copy of our physics body which is created with collision masks such that it will not collide with anything in it's path. Allow the body to travel for a given amount of time or distance and plot it's travelled course with non-physics graphics objects. This gives the benefit of a nice, realistically animated series of dots or lines showing not just the path but the time taken, as well.<br /> </li>
<li><b>Textured surfaces are impossible!</b><br /><br /><i>Examples:</i><br /><a href="http://forums.coronalabs.com/topic/43662-about-physics/">http://forums.coronalabs.com/topic/43662-about-physics/</a><br /><br /><i>Description:</i><br />Imagine a plan (top-down) view of a race track. The race cars rush round and need to hit different road surface types. We're talking mud, ice, grass, etc. Of course, when one object hits another, with Box 2D, it will simply bounce off, so we can't layer physics objects on top of each other.<br /><br /><i>Solution:</i><br />Box 2D does give us sensors with the use of body.isSensor=true and this property can be set not just at creation time, but at any time. For this problem, we'll just set it at creation time. Taking just thick, gooey mud as the problem, let's say we've got a PNG of mud with a nice transparent background. Use the graphics.newOutline() function to get the physics outline of the mud. Then load the image as normal and apply the physics outline as per the documentation. Set the physics body to be a sensor and add a collision listener. When a car hits the mud it will not bounce off the mud but simply fire a collision event. You can now use one of many methods to apply the muddy drag effect to the car. We'll go with: Simply increase the linearDamping value of the car by a tiny amount to see the car slow down. You'll have to play around with the values to get the right effect, but if the mud needs to be layered on top of more mud you can have each muddy layer increase the amount of drag and make the ground even worse to drive through.</li>
</ul>
Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com0tag:blogger.com,1999:blog-12842716.post-29071461596295413522014-08-13T08:39:00.000-07:002014-08-13T08:39:49.727-07:00AutoMapper And LoaderExceptions ProblemsWhen setting up a website in IIS6 with a bunch of NuGet packages installed <i>and</i> having only just pulled down a fresh copy of the code base from SVN I discovered a number of baffling problems. They all boiled down to the same basic issue.<br />
<br />
Firstly, there was the "Retrieve the LoaderExceptions" message on the yellow screen of death. This was not helpful but the most I could discern was that the objects that AutoMapper was trying to instantiate were not accessible for some reason. Initially this looked like a database connectivity failure, but it turned out to be the wrong version of AutoMapper. Although the base project had the correct version of the DLL, one of the dependency projects was referencing the wrong DLL - all this through auto-update with NuGet. Here's what the exception looked like:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUNILEk5CDg7dpnkOcAWLZmjRwns0m0aKe9F5bNMin4FQHPMExpGj84oYFGbZapGFbFUxoryz5FuyCVSWm3TZUewogFE0_js4l0JHbn2VchD89k7UKyCPnxYzL3i3sCC4EQv2qzg/s1600/2014-08-13_1620.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUNILEk5CDg7dpnkOcAWLZmjRwns0m0aKe9F5bNMin4FQHPMExpGj84oYFGbZapGFbFUxoryz5FuyCVSWm3TZUewogFE0_js4l0JHbn2VchD89k7UKyCPnxYzL3i3sCC4EQv2qzg/s1600/2014-08-13_1620.png" height="154" width="640" /></a></div>
<br />
The second problem was the "Value cannot be null" which equates to the same problem - that one of the objects cannot be instantiated because AutoMapper is the wrong version and not compatible.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6EmNjvugNHlMevObYn_8LjwsGFj355Na4au5MbdEWI-3A8bBgqeD7_ERM1ClAVh1g9GlEkXYe3x3-ZCOI8mTwFX1B68CCeX3RShuJ9r1MdLzp2hETVuQkvco0JEsvbRCjQB0n6A/s1600/2014-08-13_1625.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6EmNjvugNHlMevObYn_8LjwsGFj355Na4au5MbdEWI-3A8bBgqeD7_ERM1ClAVh1g9GlEkXYe3x3-ZCOI8mTwFX1B68CCeX3RShuJ9r1MdLzp2hETVuQkvco0JEsvbRCjQB0n6A/s1600/2014-08-13_1625.png" height="220" width="640" /></a></div>
<br />
The last option is to try changing the App Pool in IIS if you see this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXiQA2jjQT7cB0y7aBXUrFpUSiUYQxb553-A429g2cKuovPt8ZNVNguriqTXOv7Y6Jtuw58e_gmc7qjYepRfAl-qm0N-P3-vWI0srdEUn1-onj1ISZM0H_71mL_qONWMcFmPxLXQ/s1600/2014-08-13_1634.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXiQA2jjQT7cB0y7aBXUrFpUSiUYQxb553-A429g2cKuovPt8ZNVNguriqTXOv7Y6Jtuw58e_gmc7qjYepRfAl-qm0N-P3-vWI0srdEUn1-onj1ISZM0H_71mL_qONWMcFmPxLXQ/s1600/2014-08-13_1634.png" height="299" width="640" /></a></div>
<br />
Here are some references from StackOverflow:<br />
<br />
<ul>
<li>http://stackoverflow.com/questions/8042493/could-not-load-file-or-assembly-automapper-or-one-of-its-dependencies</li>
<li>http://stackoverflow.com/questions/4667078/how-to-retrieve-the-loaderexception-property</li>
</ul>
<div>
<br /></div>
Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com0tag:blogger.com,1999:blog-12842716.post-22295507126778769802014-04-11T01:54:00.002-07:002014-04-11T01:54:43.126-07:00Improved SlicingThe previous post showed cutting an object with lines and a curve. I've worked the code and can now slice an image into many pieces.<br />
<br />
<object class="embeddedObject" data="http://content.screencast.com/users/HoraceBury/folders/Jing/media/3e378127-0292-41ab-b3f6-e3e314678cb4/jingswfplayer.swf" height="362" id="scPlayer" type="application/x-shockwave-flash" width="294">
<param name="movie" value="http://content.screencast.com/users/HoraceBury/folders/Jing/media/3e378127-0292-41ab-b3f6-e3e314678cb4/jingswfplayer.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="flashVars" value="containerwidth=294&containerheight=362&thumb=http://content.screencast.com/users/HoraceBury/folders/Jing/media/3e378127-0292-41ab-b3f6-e3e314678cb4/FirstFrame.jpg&content=http://content.screencast.com/users/HoraceBury/folders/Jing/media/3e378127-0292-41ab-b3f6-e3e314678cb4/SlicePieces.swf&blurover=false">
<param name="allowFullScreen" value="true">
<param name="scale" value="showall">
<param name="allowScriptAccess" value="always">
<param name="base" value="http://content.screencast.com/users/HoraceBury/folders/Jing/media/3e378127-0292-41ab-b3f6-e3e314678cb4/">
</object><br />
<br />
As before, if you would like this for your own projects, please get in touch on the CoronaLabs forums - user Horacebury.Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com0tag:blogger.com,1999:blog-12842716.post-69498908616322080592014-03-21T15:06:00.001-07:002014-03-29T01:31:43.796-07:00Polygon Slicing With Corona SDKAs we all know by now, <a href="http://coronalabs.com/">Corona SDK</a> includes the fantastic 2D physics engine <a href="http://box2d.org/">Box2D</a>. Play with this for long enough and knowing how to manipulate polygons becomes very useful indeed. I've wanted to implement everything from <a href="https://itunes.apple.com/en/app/angry-birds/id343200656?mt=8">Angry Birds</a> to <a href="https://itunes.apple.com/en/app/islash/id388130466?mt=8">iSlash</a>, so it was awesome to see Corona Labs include the new <a href="http://coronalabs.com/blog/2014/01/28/tutorial-create-physics-bodies-from-texture-assets/">display.newOutline()</a> function in a recent build.<br />
<br />
This cool function basically takes a PNG with web transparency and returns a table of x,y coordinates for the circumference polygon of the visible pixels in the PNG. That polygon can then be plugged into a new constructor parameter of the physics.addBody() function to actually create a physics body against an image for that image's outline.<br />
<br />
I wanted to take that further, ala iSlash, and decided to produce a library which would take the outline polygon and the end points of a line and separate the polygon into sliced parts. I won't go into the painful details of trying to dig up the code from the internet but suffice to say that code I found was either unintelligable enough to use or simply a mass of maths that I couldn't fathom.<br />
<br />
Fast forward a few days and having tried at least 3 different methods I finally hit upon a winner. Here's the proof, running on Mac Corona simulator...<br />
<br />
<object class="embeddedObject" data="http://content.screencast.com/users/HoraceBury/folders/Jing/media/f5e929f6-1831-4e2a-bc61-8c09a1b52951/jingswfplayer.swf" height="423" id="scPlayer" type="application/x-shockwave-flash" width="400">
<param name="movie" value="http://content.screencast.com/users/HoraceBury/folders/Jing/media/f5e929f6-1831-4e2a-bc61-8c09a1b52951/jingswfplayer.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="flashVars" value="containerwidth=400&containerheight=423&thumb=http://content.screencast.com/users/HoraceBury/folders/Jing/media/f5e929f6-1831-4e2a-bc61-8c09a1b52951/FirstFrame.jpg&content=http://content.screencast.com/users/HoraceBury/folders/Jing/media/f5e929f6-1831-4e2a-bc61-8c09a1b52951/00000133.swf&blurover=false">
<param name="allowFullScreen" value="true">
<param name="scale" value="showall">
<param name="allowScriptAccess" value="always">
<param name="base" value="http://content.screencast.com/users/HoraceBury/folders/Jing/media/f5e929f6-1831-4e2a-bc61-8c09a1b52951/">
</object>
<br />
<br />
<a href="http://screencast.com/t/4cCGQutAYL47">[View full size video]</a><br />
<br />
As you can see, the intersection code works both for a single line cutting straight through the object at any any angle and even re-entering the polygon multiple times. It also handles a hand-drawn curve which, likewise, can start anywhere and enter/exit the shape as often as required. This allows quite a powerful set of options ranging from effects seen in iSlash to cutting shapes into unordered pieces.<br />
<br />
I won't be posting the code this time as I fully intend to use this in my own productions. If you would like to implement this in your own production please get in touch via the <a href="http://forums.coronalabs.com/user/223483-horacebury/">Corona forums</a> or on twitter: <a href="https://twitter.com/horacebury">@horacebury</a>Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com1tag:blogger.com,1999:blog-12842716.post-39068491777216504942014-03-14T17:33:00.002-07:002014-03-22T02:11:13.736-07:00Corona Sample Code And LibrariesHere you can find my most recent Corona SDK samples, demos and libraries. I decided to create a new post because the date on the last one is really quite old and many things have changed in Corona SDK since I started it. You can consider everything here as compatible with Corona since the great Graphics 2.0 update of late 2013.<br />
<br />
You can find my Code Exchange posts here:<br />
<ul>
<li><a href="http://code.coronalabs.com/search/node/horacebury">http://code.coronalabs.com/search/node/horacebury</a></li>
</ul>
<div>
They are all submitted to github Gists:</div>
<div>
<ul>
<li><a href="https://gist.github.com/HoraceBury">https://gist.github.com/HoraceBury</a></li>
</ul>
<div>
<br /></div>
</div>
Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com0tag:blogger.com,1999:blog-12842716.post-73296063141294841662013-06-27T02:44:00.001-07:002015-02-20T07:27:48.049-08:00Angry Birds in 30 MinsIt's a bit old now, but the proof still stands and this is a very entertaining video: Seb Lee-Delisle teaching an audience how to code up a simple Angry Birds in 30 mins with CoronaLabs' CoronaSDK.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/LBnBml2KFFk?rel=0" width="560"></iframe></div>
<br />
You can follow Seb on Twitter: <a href="https://twitter.com/seb_ly">https://twitter.com/seb_ly</a> and browse his internet wanderings: <a href="http://seb.ly/">http://seb.ly/</a><br />
<br />Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com0tag:blogger.com,1999:blog-12842716.post-13993616047621490842012-11-30T00:49:00.000-08:002012-11-30T00:49:32.414-08:00The Daily Grind<a href="http://www.dilbert.com/fast/2012-11-28/"><img src="http://www.dilbert.com/dyn/str_strip/000000000/00000000/0000000/100000/70000/2000/300/172371/172371.strip.print.gif" width="400" /></a>
<a href="http://www.dilbert.com/fast/2012-11-29/"><img src="http://www.dilbert.com/dyn/str_strip/000000000/00000000/0000000/100000/70000/2000/300/172372/172372.strip.print.gif" width="400" /></a>
<a href="http://www.dilbert.com/fast/2012-11-30/"><img src="http://www.dilbert.com/dyn/str_strip/000000000/00000000/0000000/100000/70000/2000/300/172373/172373.strip.print.gif" width="400" /></a>Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com1tag:blogger.com,1999:blog-12842716.post-80790088916685040542012-10-29T06:10:00.002-07:002012-10-31T07:22:30.656-07:00Not A FanI'm not a massive Microsoft fan these days, so it's not hard to read these frankly funny reviews of the Microsoft Surface "tablet" (not the table)...<br />
<ul>
<li>No, MS does <i>not</i> have Google and Apple beaten, but this article was probably written by the MS Marketing dept anyway:<br /><a href="http://www.techradar.com/news/software/operating-systems/five-reasons-why-windows-8-has-apple-and-google-beaten-1107414">http://www.techradar.com/news/software/operating-systems/five-reasons-why-windows-8-has-apple-and-google-beaten-1107414</a></li>
<li>Painfully frank (and therefore, funny) experience on the Surface RT launch at a MS Store:<br /><a href="http://www.marco.org/2012/10/26/an-alternate-universe">http://www.marco.org/2012/10/26/an-alternate-universe</a></li>
<li>Is it a bug? Is it a feature? It's both! With Windows 8:<br /><a href="http://www.theregister.co.uk/2012/10/25/reg_kb_surviving_windows/">http://www.theregister.co.uk/2012/10/25/reg_kb_surviving_windows/</a></li>
<li>RT Still a headache:<br /><a href="http://www.techradar.com/us/news/software/operating-systems/windows-8-launch-disappoints-windows-rt-still-a-headache-1107573">http://www.techradar.com/us/news/software/operating-systems/windows-8-launch-disappoints-windows-rt-still-a-headache-1107573</a></li>
</ul>
<div>
And the follow up being the absolute pounding of Windows/Metro...</div>
<div>
<ul>
<li>No, Metro doesn't work for desktop users, but it is the default:<br /><a href="http://www.extremetech.com/computing/138847-the-metro-desktop-interaction-in-windows-8-is-an-absolute-train-wreck">http://www.extremetech.com/computing/138847-the-metro-desktop-interaction-in-windows-8-is-an-absolute-train-wreck</a></li>
<li>90% of the desktop market should warrant more than this:<br /><a href="http://www.extremetech.com/computing/139175-microsoft-sells-four-million-windows-8-copies-in-four-days-but-it-shouldve-sold-a-lot-more">http://www.extremetech.com/computing/139175-microsoft-sells-four-million-windows-8-copies-in-four-days-but-it-shouldve-sold-a-lot-more</a></li>
<li>Breaking down desktop:<br /><a href="http://www.extremetech.com/computing/138816-windows-8-the-desktop-review">http://www.extremetech.com/computing/138816-windows-8-the-desktop-review</a></li>
<li>Breaking down tablet:<br /><a href="http://www.extremetech.com/computing/138688-windows-8-the-tablet-review">http://www.extremetech.com/computing/138688-windows-8-the-tablet-review</a></li>
</ul>
</div>
Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com1tag:blogger.com,1999:blog-12842716.post-14511142247660012372012-09-14T09:13:00.000-07:002012-09-14T09:13:24.284-07:00Data Points for Indie DevsBeing a mobile game developer (well, part time, at least) is a pretty daunting challenge. It helps to get a real world view and here is a great one, with lots of useful links and plenty of facts about independent developer stats:<br />
<br />
<ul>
<li><a href="http://thegamebakers.com/money-and-the-app-store-a-few-figures-that-might-help-an-indie-developer.html">http://thegamebakers.com/money-and-the-app-store-a-few-figures-that-might-help-an-indie-developer.html</a></li>
</ul>
Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com0tag:blogger.com,1999:blog-12842716.post-36710217834660608632012-09-03T07:48:00.000-07:002012-09-03T07:48:16.420-07:00So, This Is A Good PointReading much on the Apple vs Samsung legal battle and the issue of patents, I've come to realise that the patent system, generally, is viewed as broken only in software circles - every other industry appears happy with it, whether they think there's improvements to be made in the details, or not.<br />
<br />
Here's a couple of articles I think are worth reading:<br />
<br />
<ul>
<li><a href="http://www.theregister.co.uk/2012/08/24/apple_patent_victory/" style="font-family: Calibri, sans-serif; font-size: 11pt;">http://www.theregister.co.uk/2012/08/24/apple_patent_victory/</a></li>
<li><a href="http://www.roughlydrafted.com/2012/08/26/devils-advocates-play-up-sympathy-for-samsung-after-apple-trial/" style="font-family: Calibri, sans-serif; font-size: 11pt;">http://www.roughlydrafted.com/2012/08/26/devils-advocates-play-up-sympathy-for-samsung-after-apple-trial/</a></li>
</ul>
<br />
However, here's an article which lays out what I was trying to put into words myself:<br />
<br />
<ul>
<li><a href="http://www.theregister.co.uk/2012/09/03/opinions4u_patents_are_broken_mailbag/">http://www.theregister.co.uk/2012/09/03/opinions4u_patents_are_broken_mailbag/</a></li>
</ul>
<br />
Specifically:<br />
<blockquote class="tr_bq">
<b>the iPhone and iPad iOS user interface no longer looks nor feels particularly modern despite all the cash Apple has spent defending it. But Apple's defence of its operating system in the courts has forced other people to innovate. This is a cause for celebration.</b></blockquote>
Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com0tag:blogger.com,1999:blog-12842716.post-87663858331991677392012-06-15T01:39:00.002-07:002012-06-15T01:40:13.315-07:00Building an iOS App in Corona Labs SDKCorona SDK - now Corona Labs SDK - is a great tool for building games for iOS and Android. What about building more traditional and standard looking apps? Well, Corona provides a number of widgets which look and behave just like regular iOS controls. Putting these together shows that a few items are missing, but can be built. Corona SDK's Sample Code directory contains a WidgetDemo, to show off the functions provided by the API's Widgets. Here's my list of posts for improving those features:<br />
<br />
<br />
<ul>
<li>Sliding multi-level menu<br /><a href="https://developer.anscamobile.com/forum/2012/06/08/ios-style-submenu-navigation-using-tableview">https://developer.anscamobile.com/forum/2012/06/08/ios-style-submenu-navigation-using-tableview</a></li>
<li>Search box<br /><a href="http://developer.anscamobile.com/forum/2012/06/15/ios-style-search-box">http://developer.anscamobile.com/forum/2012/06/15/ios-style-search-box</a></li>
<li>Easy to use wrapper for the tab bar widget<br /><a href="https://developer.anscamobile.com/forum/2012/06/07/encapsulated-ios-style-tab-bar">https://developer.anscamobile.com/forum/2012/06/07/encapsulated-ios-style-tab-bar</a></li>
<li>Fading visual scroll bar<br /><a href="https://developer.anscamobile.com/forum/2012/06/06/ios-style-fading-scrollbar">https://developer.anscamobile.com/forum/2012/06/06/ios-style-fading-scrollbar</a></li>
<li>Swipe to reveal delete buttons on menu rows<br /><a href="https://developer.anscamobile.com/forum/2012/05/21/swipe-delete-tableview">https://developer.anscamobile.com/forum/2012/05/21/swipe-delete-tableview</a></li>
<li>Scroll to top when tapping the status bar<br /><a href="https://developer.anscamobile.com/forum/2012/06/07/ios-style-scroll-top">https://developer.anscamobile.com/forum/2012/06/07/ios-style-scroll-top</a></li>
<li>Character index<br /><a href="https://developer.anscamobile.com/forum/2012/06/06/ios-style-alpha-strip">https://developer.anscamobile.com/forum/2012/06/06/ios-style-alpha-strip</a></li>
<li>Creating display groups quickly and easily<br /><a href="https://developer.anscamobile.com/forum/2012/06/08/easy-display-group-generation">https://developer.anscamobile.com/forum/2012/06/08/easy-display-group-generation</a></li>
</ul>
<br />Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com1tag:blogger.com,1999:blog-12842716.post-60915499205134137732012-05-29T02:14:00.000-07:002012-05-29T02:14:32.394-07:00You Know That Feeling<a href="http://www.dilbert.com/fast/2012-05-29/" imageanchor="1"><img border="0" src="http://www.dilbert.com/dyn/str_strip/000000000/00000000/0000000/100000/60000/1000/000/161038/161038.strip.print.gif" width="400" /></a>Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com0tag:blogger.com,1999:blog-12842716.post-89198732221675298622012-05-04T06:52:00.000-07:002012-05-04T06:52:10.284-07:00Polygon TriangulationMassive thanks to the super hero Nicholas Wellcome for this awesome piece of javascript. It allows you to draw a polygon in a clockwise order and then it breaks it into separate polygons - effectively allowing concave to multiple convex polygon conversion. And the best bit? He's provided his nicely commented source code!<br />
<br />
<ul>
<li><a href="http://www.sinc.sunysb.edu/Stu/nwellcom/ams345/triangulate.html">http://www.sinc.sunysb.edu/Stu/nwellcom/ams345/triangulate.html</a>
</li>
<li>Homepage:<br /><a href="http://nicholaswellcome.com/">http://nicholaswellcome.com/</a>
</li>
</ul>Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com0tag:blogger.com,1999:blog-12842716.post-55473210529999854852012-04-23T02:50:00.000-07:002012-04-23T02:50:17.916-07:00Happening In Europe Right Now<a href="http://dilbert.com/fast/2012-04-23/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://dilbert.com/dyn/str_strip/000000000/00000000/0000000/100000/50000/8000/300/158398/158398.strip.print.gif" width="400" /></a>Eudoxushttp://www.blogger.com/profile/03946790897073889887noreply@blogger.com0