YUI is a free and open source JavaScript library for building interactive web applications. The document discusses the author's experiences using YUI to create a "dodgy shoot-em-up" game as part of an internal competition at their company. It provides background on YUI, including its history and current version. The author chose YUI because its documentation was good, it could do what was needed like animation, and it had interesting features. Issues encountered included having to code their own collision detection due to performance impacts. Key handling also proved trickier than expected. Sound was added using the SoundManager2 library.

1. ADVENTURES WITH YUI
FE Suffolk
Robin Meehan
March 2013

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. SOME BACKGROUND
Used YUI to create a dodgy shoot-em-up tenuously related to cloud
computing as part of a Smart421 internal “Play with Azure” competition
BRIEF 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. 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. What suspicious behaviour looks like!
This is what you get if you send out a weakly secured demo in a
technology company 

6. Creating the background image – a gradient sky with a sun…

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 use
a flag from “key up” to stop the gun animation…
…and had to roll my own collision detection…

8. SOUND
I used SoundManager2 for sound control – it did what it said on the tin…
www.schillmania.com/projects/soundmanager2/

9. OK – enough talk. Always dangerous…now a demo!

10. THANKS!