HTML5: An early app

"Blobby." Drag and throw the orange creature:



http://trucdesignstesting.com/HTML5/sprite_anim/blobby_v008.html

Notes:

• Dragging is possible with touchscreen devices, but we're not capturing the dragging "start" event yet. 
• jQuery has a plugin that does not seem to work on Android: http://plugins.jquery.com/project/mobiledraganddrop
• This one has more promise: http://www.jqtouch.com/
• In either case, we need to detect the mobile browser and set a flag
  
• The character is a <div> using jquery.jmovie to control a sequence of png images exported from Flash. 
• Svgs are not used, to allow display in Android

• jmovie is not showing any animation, since it is called on each frame - flags are needed to show when the "turnLeft"/"turnRight" animations are completed. Some elegant logic is called for here.
  
  
• The VerletSystem from bit-101.com is used to create the structures in a Canvas tag, 
• Performance on mobile is very choppy
• I modified the js to allow "sticks" to be removed dynamically -- this creates a lot of possibilities for collapsing structures
• Further mods would allow sticks to collide and break
• A "_dragging" flag on the character div is crucial - when it is released, it is moved by a point in the VerletSystem, when dragging, the character div moves that point.
  
• Canvas aligns well with other divs, raising possibilities for integrating Canvas-based animations with images, text, etc.
• An Illustrator plugin allows export to Canvas code
  
• A script is required to make Cnavas work on IE8 - even then it's chopppy
• Early iterations used a canvas based "trail" of bubbles, and a fade-in of successive backgrounds - good effects, but probably not realistic on mobile.
  
• An actual game would need collision detection and (probably) an objective.

Our major issues and possible solutions:

Performance is choppy on mobile

• Make a smaller version (300 x 300 or similar)
• Smaller pngs (50 x 50 max) - use a few stills only - no jquery.jmovie
• Make the canvas elements smaller 
• Research canvas redraw optimization -- make sure canvas is cleared each frame

Drag and drop won't work on mobile

• Check out and test http://www.jqtouch.com/