Fe suffolk adventures-withyui-march2013

922 views

Published on

Lightning presentation given at Front End Suffolk in March 2013 - about experiences of using YUI javascript library for animation, key handling, HTML5 canvas stuff etc

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
922
On SlideShare
0
From Embeds
0
Number of Embeds
788
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Fe suffolk adventures-withyui-march2013

  1. 1. ADVENTURES WITH YUI FE Suffolk Robin Meehan March 2013
  2. 2. I mean this… http://yuilibrary.com/ “YUI is a free, open source JavaScript and CSS library for building richly interactive web applications. ” Not this…  (Japanese singer-songwriter)Image taken from http://combpank.deviantart.com/art/YUI-2-198206705
  3. 3. SOME BACKGROUNDUsed YUI to create a dodgy shoot-em-up tenuously related to cloudcomputing as part of a Smart421 internal “Play with Azure” competitionBRIEF HISTORY OF YUI• Yahoo! User Interface Library (YUI) - came out of Yahoo! web development team from 2005, first released to public in 2006• YUI3 released in Sept 2009 – a rewrite• I used YUI version v3.4.1• It’s now at v3.9.0 (released on March 13th)WHY DID I USE/CHOOSE IT?• Documentation seemed good & accessible, good examples• Did what I needed – animation mainly• Interesting features – module based
  4. 4. ISSUES I HAD• No browser-support related issues at all • Ran on iPhone 4 fine except for the key handling (but YUI does have mobile gesture support, just didn’t try it out)• All client-side, so struggled to secure the transfer of scores back to the server• Animation control was good, but…had to code my own collision detection, which had performance consequences • Maintain own array of object locations • Update them on every “move” event • Check for collisions on every “move” event• Key handling – trickier than I expected • Couldn’t avoid auto key repeat
  5. 5. What suspicious behaviour looks like!This is what you get if you send out a weakly secured demo in atechnology company 
  6. 6. Creating the background image – a gradient sky with a sun…
  7. 7. Animation code example – easy for the bullet and the clouds……not so easy for the gun, due to need to control it with keys…had to usea flag from “key up” to stop the gun animation……and had to roll my own collision detection…
  8. 8. SOUNDI used SoundManager2 for sound control – it did what it said on the tin…www.schillmania.com/projects/soundmanager2/
  9. 9. OK – enough talk. Always dangerous…now a demo!
  10. 10. THANKS!

×