Serious Games in Silverlight Erik Vullings – TNO André van der Plas – Macaw Antoni Dol – Macaw May 28, 2009
Serious Games in Silverlight <ul><li>Agenda </li></ul><ul><ul><li>Functional view – Erik Vullings – TNO </li></ul></ul><ul...
The Problem <ul><li>Strategic decisions  based on gut feeling, and models (if any): </li></ul><ul><ul><li>Work in isolatio...
MiReCol Vision <ul><li>Support decision making by computing effects </li></ul><ul><li>Based on open source infrastructure ...
Strategic example: Embassy case DB M 1 M 2 M n++ … Rich Internet Application (Silverlight 3) … Police Firemen Community re...
 
Why Silverlight? <ul><li>Users expect slick designs </li></ul><ul><li>Scalability: </li></ul><ul><ul><li>Easier to convert...
Serious Games <ul><li>7 Functional Aspects  for making them successful </li></ul>
1. Truth vs. Perceived Truth
Modelling , Simulations & Games 101 <ul><li>What’s a model? </li></ul>
Modelling , Simulations & Games 101 <ul><li>What’s a model? </li></ul>Model Path Attitude Catwalk stroll Flood Model Rain ...
Modelling,  Simulations  & Games 102 <ul><li>What’s a simulation? </li></ul>Flood sim. Rain Elevation Water level in city ...
Modelling,  Simulations  & Games 103 <ul><li>What’s the truth? </li></ul><ul><li>Perceived truth? </li></ul>
Modelling,  Simulations  & Games 103 <ul><li>What’s the truth? </li></ul><ul><li>Example: </li></ul><ul><ul><li>Water at c...
2. Game Effectiveness game rules Based on the model  of Jeroen van Mastrigt (HKU) implementation social interaction declar...
3. Keep the right level and pace “ Easy to learn, hard to master” Flow concept: Mihaly Csikszentmihalyi  Game Flow Frustra...
4. Practice in a safe & relevant environment
5. Efficiency
6. Scalability #Users Costs Training Game
7. Just in time, not just in case 1953
Serious Game <ul><li>For professionals (mayor & staff) </li></ul><ul><li>For civilians: SafeCity </li></ul><ul><ul><li>Imp...
Development Process <ul><li>Define game phases  </li></ul><ul><ul><li>From preparation to after-care </li></ul></ul><ul><l...
Serious Gaming a technical point of view “It’s all elementary (for developers)” André van der Plas – Macaw
SafeCity demo
Silverlight <ul><li>.NET on the client </li></ul><ul><li>Designer/developer interaction </li></ul>
Serious Gaming – basic elements <ul><li>Game engine | Game loop | Game data | Game display </li></ul>
Serious Gaming – basic elements <ul><li>Game engine  | Game loop | Game data | Game display </li></ul><ul><ul><li>private ...
Serious Gaming – basic elements <ul><li>Game engine |  Game loop  | Game data | Game display </li></ul><ul><li>public Game...
Serious Gaming – basic elements <ul><li>Game engine | Game loop |  Game data  | Game display </li></ul><ul><ul><li>Domain ...
Serious Gaming – basic elements <ul><li>Game engine | Game loop | Game data |  Game display </li></ul><ul><ul><li>Silverli...
Serious Gaming – basic architecture Model Controller View Game engine Game loop Game data Game display
Serious Gaming – basic architecture Model Controller View City area clicked Update Info panel Update Current City area Bro...
<ul><li>Open Source </li></ul><ul><li>Silverlight 2.0 </li></ul><ul><li>DeepZoom (multi scale image) </li></ul><ul><li>Til...
 
 
 
 
Conclusion <ul><li>Serious Games in Silverlight: </li></ul><ul><ul><li>High productivity </li></ul></ul><ul><ul><li>Great ...
</ Serious Gaming - a technical point of view> </“It’s all elementary (for developers)”>
 
 
Deep Orange Antoni Dol – Macaw A Design point of view
Serious Games in Silverlight <ul><li>Agenda </li></ul><ul><ul><li>Motivation </li></ul></ul><ul><ul><li>Design </li></ul><...
Deep Orange – Why? <ul><li>Training: creating insights in the effects from various product and marketing strategies </li><...
Deep Orange - Motivation <ul><li>Client wants to train employees in car insurance strategy using a Serious Game </li></ul>...
UI Deep Orange - 1st Design
Deep Orange - Design <ul><li>Color/Mood examples from books/objects </li></ul><ul><li>Small sketches </li></ul><ul><li>Mee...
Small sketches
Small sketches
Elaborate sketches
Deep Orange - Structure <ul><li>Start </li></ul><ul><li>Settings </li></ul><ul><ul><li>Name </li></ul></ul><ul><ul><li>Ava...
 
 
 
Deep Orange – XAML Implementation <ul><li>High expectations, small amount of time </li></ul><ul><li>Convert Adobe Illustra...
 
Deep Orange – C# Implementation <ul><li>Game loop: a tick every 3 seconds </li></ul><ul><li>Daily builds, testing by clien...
 
Deep Orange - Collaboration <ul><li>Designer/Developer Collaboration </li></ul><ul><ul><li>Visual Studio Team System </li>...
Deep Orange – Demo
Deep Orange – Distribution <ul><li>Distributed to the stakeholders </li></ul><ul><li>Followed by distribution to employees...
Deep Orange – Instructions
Deep Orange – Instructions
Serious Games <ul><li>Serious alternative for training </li></ul><ul><li>Many aspects to consider </li></ul><ul><li>Keep i...
Serious Games in Silverlight <ul><li>Why Silverlight? </li></ul><ul><ul><li>Code, Data and UI integrate really well </li><...
<ul><li>Written especially for User Interface Designers </li></ul><ul><li>Dutch </li></ul><ul><li>Full Color </li></ul><ul...
<ul><li>Silverlight 3 project from beginning to end: </li></ul><ul><li>Design </li></ul><ul><li>Production </li></ul><ul><...
More information… <ul><li>Contact:  </li></ul><ul><ul><li>[email_address] </li></ul></ul><ul><ul><li>André.van.der.Plas@ma...
Upcoming SlideShare
Loading in …5
×

Mix Essentials, Serious Games With Silverlight

966 views

Published on

Mix Essentials - Serious Games With Silverlight
Erik Vullings - TNO
André van der Plas - Macaw
Antoni Dol - Macaw

Published in: Technology
  • Be the first to comment

Mix Essentials, Serious Games With Silverlight

  1. 1. Serious Games in Silverlight Erik Vullings – TNO André van der Plas – Macaw Antoni Dol – Macaw May 28, 2009
  2. 2. Serious Games in Silverlight <ul><li>Agenda </li></ul><ul><ul><li>Functional view – Erik Vullings – TNO </li></ul></ul><ul><ul><li>Technical View – André van der Plas – Macaw </li></ul></ul><ul><ul><li>Design View – Antoni Dol – Macaw </li></ul></ul>
  3. 3. The Problem <ul><li>Strategic decisions based on gut feeling, and models (if any): </li></ul><ul><ul><li>Work in isolation, in their own environment </li></ul></ul><ul><ul><li>PoV are not shared between stakeholders </li></ul></ul><ul><ul><li>Require much time to setup & update </li></ul></ul><ul><li>During operations or crisis , much time is lost: </li></ul><ul><ul><li>Obtaining a good situational awareness (what is vs. what if) </li></ul></ul><ul><ul><li>Discovering possible solutions </li></ul></ul><ul><li>Training & Serious Games : </li></ul><ul><ul><li>Train professionals & citizens with different types of games </li></ul></ul>
  4. 4. MiReCol Vision <ul><li>Support decision making by computing effects </li></ul><ul><li>Based on open source infrastructure and standards </li></ul><ul><li>Offer models as (licensed) Internet services to the public </li></ul><ul><li>And: </li></ul><ul><li>Mixing reality & virtual world (model/data-based predictions) </li></ul><ul><li>Coupling models </li></ul><ul><li>Generic platform, multiple levels of scale </li></ul><ul><li>Multiple users, each with their own view </li></ul><ul><li>Interactive usage </li></ul>
  5. 5. Strategic example: Embassy case DB M 1 M 2 M n++ … Rich Internet Application (Silverlight 3) … Police Firemen Community rep. … Public Internet (with authN/authZ) Web Server Publish/Subscribe Event Bus <ul><li>Models: </li></ul><ul><li>Explosion impact, Gasmal, … </li></ul><ul><li>Traffic mgmt, CO 2 , Noise, … </li></ul>Virtual Earth Police DB
  6. 7. Why Silverlight? <ul><li>Users expect slick designs </li></ul><ul><li>Scalability: </li></ul><ul><ul><li>Easier to convert existing desktop GUIs to browser </li></ul></ul><ul><ul><li>Easier to add new models (using CAL a.k.a. Prism) </li></ul></ul><ul><ul><li>Integrate existing models (diff.languages) </li></ul></ul><ul><ul><li>Cross-browser availability </li></ul></ul><ul><li>Staff @ TNO: </li></ul><ul><ul><li>Much dev. exp, but little web app exp. </li></ul></ul><ul><ul><li>Not yet another IDE to learn (exp./licenses VS) </li></ul></ul><ul><li>Personally: </li></ul><ul><ul><li>I don’t like browser quirks, but I really like C# </li></ul></ul>
  7. 8. Serious Games <ul><li>7 Functional Aspects for making them successful </li></ul>
  8. 9. 1. Truth vs. Perceived Truth
  9. 10. Modelling , Simulations & Games 101 <ul><li>What’s a model? </li></ul>
  10. 11. Modelling , Simulations & Games 101 <ul><li>What’s a model? </li></ul>Model Path Attitude Catwalk stroll Flood Model Rain Elevation Water level in city River level …
  11. 12. Modelling, Simulations & Games 102 <ul><li>What’s a simulation? </li></ul>Flood sim. Rain Elevation Water level in city at time T River level TIME Electricity Netwerk Telecom. Netwerk Other sims …
  12. 13. Modelling, Simulations & Games 103 <ul><li>What’s the truth? </li></ul><ul><li>Perceived truth? </li></ul>
  13. 14. Modelling, Simulations & Games 103 <ul><li>What’s the truth? </li></ul><ul><li>Example: </li></ul><ul><ul><li>Water at city hall </li></ul></ul><ul><ul><li>World Forum blackout </li></ul></ul><ul><ul><li>Road flooded </li></ul></ul><ul><li>Perceived truth? </li></ul><ul><li>Example: </li></ul><ul><ul><li>Water at city border </li></ul></ul><ul><ul><li>No blackout reported </li></ul></ul><ul><ul><li>Road clear, used for evacuating citizens </li></ul></ul>
  14. 15. 2. Game Effectiveness game rules Based on the model of Jeroen van Mastrigt (HKU) implementation social interaction declarative layer
  15. 16. 3. Keep the right level and pace “ Easy to learn, hard to master” Flow concept: Mihaly Csikszentmihalyi Game Flow Frustration Boredom Challenge Skill level Reflection Reflection Reflection Reflection Level 1 Level 2 Level 3 Level 4 Level .....
  16. 17. 4. Practice in a safe & relevant environment
  17. 18. 5. Efficiency
  18. 19. 6. Scalability #Users Costs Training Game
  19. 20. 7. Just in time, not just in case 1953
  20. 21. Serious Game <ul><li>For professionals (mayor & staff) </li></ul><ul><li>For civilians: SafeCity </li></ul><ul><ul><li>Improve a civilian’s chances of survival during a flood </li></ul></ul>
  21. 22. Development Process <ul><li>Define game phases </li></ul><ul><ul><li>From preparation to after-care </li></ul></ul><ul><li>Per phase, specify learning goals </li></ul><ul><li>Transform goals to game elements </li></ul><ul><li>Build game environment </li></ul><ul><ul><li>Models & simulations represent reality </li></ul></ul><ul><ul><li>Model perceived truth </li></ul></ul>
  22. 23. Serious Gaming a technical point of view “It’s all elementary (for developers)” André van der Plas – Macaw
  23. 24. SafeCity demo
  24. 25. Silverlight <ul><li>.NET on the client </li></ul><ul><li>Designer/developer interaction </li></ul>
  25. 26. Serious Gaming – basic elements <ul><li>Game engine | Game loop | Game data | Game display </li></ul>
  26. 27. Serious Gaming – basic elements <ul><li>Game engine | Game loop | Game data | Game display </li></ul><ul><ul><li>private Engine() </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>this.gameLoop = new GameLoopTimer(); </li></ul></ul><ul><ul><li>this.gameLoop.Update += new UpdateHandler(GameLoop_Update); } </li></ul></ul>
  27. 28. Serious Gaming – basic elements <ul><li>Game engine | Game loop | Game data | Game display </li></ul><ul><li>public GameLoopTimer() </li></ul><ul><li>{ </li></ul><ul><li>timer.Tick += timer_Tick; </li></ul><ul><li>} </li></ul><ul><li>private void timer_Tick(object sender, EventArgs e) </li></ul><ul><li>{ </li></ul><ul><li>if (this.Update != null) </li></ul><ul><li>{ </li></ul><ul><li> Update(this, new EventArgs()); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  28. 29. Serious Gaming – basic elements <ul><li>Game engine | Game loop | Game data | Game display </li></ul><ul><ul><li>Domain entities </li></ul></ul><ul><ul><li>WCF </li></ul></ul>
  29. 30. Serious Gaming – basic elements <ul><li>Game engine | Game loop | Game data | Game display </li></ul><ul><ul><li>Silverlight user controls </li></ul></ul><ul><ul><li>DeepEarth control </li></ul></ul>
  30. 31. Serious Gaming – basic architecture Model Controller View Game engine Game loop Game data Game display
  31. 32. Serious Gaming – basic architecture Model Controller View City area clicked Update Info panel Update Current City area Broadcast New City area State Update State Request
  32. 33. <ul><li>Open Source </li></ul><ul><li>Silverlight 2.0 </li></ul><ul><li>DeepZoom (multi scale image) </li></ul><ul><li>Tile sources for existing tile providers (OSM) </li></ul><ul><li>Map icons, map polygons, map layers </li></ul><ul><li>X,Y coordinates <-> Geocoordinates </li></ul>
  33. 38. Conclusion <ul><li>Serious Games in Silverlight: </li></ul><ul><ul><li>High productivity </li></ul></ul><ul><ul><li>Great fun  </li></ul></ul>
  34. 39. </ Serious Gaming - a technical point of view> </“It’s all elementary (for developers)”>
  35. 42. Deep Orange Antoni Dol – Macaw A Design point of view
  36. 43. Serious Games in Silverlight <ul><li>Agenda </li></ul><ul><ul><li>Motivation </li></ul></ul><ul><ul><li>Design </li></ul></ul><ul><ul><li>Implementation </li></ul></ul><ul><ul><li>Distribution </li></ul></ul>
  37. 44. Deep Orange – Why? <ul><li>Training: creating insights in the effects from various product and marketing strategies </li></ul><ul><li>Intended for internal sales departments </li></ul><ul><li>How hard is it to win from the computer? </li></ul><ul><li>Provoke a discussion </li></ul>
  38. 45. Deep Orange - Motivation <ul><li>Client wants to train employees in car insurance strategy using a Serious Game </li></ul><ul><li>Microsoft Developer needs time and attention for game engine and connecting models </li></ul><ul><li>Client realizes design is necessary => through Microsoft to Macaw </li></ul><ul><li>Technology was chosen (WPF-XAML) </li></ul><ul><li>Game was in development, but playing itself (!) </li></ul><ul><li>Take a few steps back: design GUI first! </li></ul>
  39. 46. UI Deep Orange - 1st Design
  40. 47. Deep Orange - Design <ul><li>Color/Mood examples from books/objects </li></ul><ul><li>Small sketches </li></ul><ul><li>Meeting </li></ul><ul><li>Elaborate sketches </li></ul><ul><li>Meeting </li></ul><ul><li>Create detailed proposals in Illustrator </li></ul><ul><li>Meeting </li></ul><ul><li>All in 2 weeks </li></ul>
  41. 48. Small sketches
  42. 49. Small sketches
  43. 50. Elaborate sketches
  44. 51. Deep Orange - Structure <ul><li>Start </li></ul><ul><li>Settings </li></ul><ul><ul><li>Name </li></ul></ul><ul><ul><li>Avatar </li></ul></ul><ul><ul><li>Gender </li></ul></ul><ul><li>Your Goal </li></ul><ul><li>Help </li></ul><ul><li>© </li></ul><ul><li>Game </li></ul><ul><ul><li>15 minutes </li></ul></ul><ul><ul><li>Pausing </li></ul></ul><ul><ul><li>Ending </li></ul></ul><ul><li>Product development </li></ul><ul><li>Client Offers </li></ul><ul><li>Profit & Loss </li></ul><ul><li>Strategy Radar </li></ul><ul><li>Result </li></ul><ul><li>Result </li></ul><ul><ul><li>Replay </li></ul></ul><ul><ul><li>Exit </li></ul></ul><ul><li>High Scores </li></ul><ul><li>Explanations </li></ul><ul><li>Credits </li></ul>
  45. 55. Deep Orange – XAML Implementation <ul><li>High expectations, small amount of time </li></ul><ul><li>Convert Adobe Illustrator to XAML </li></ul><ul><li>Basic screen layout </li></ul><ul><li>ControlTemplates for Buttons, Sliders </li></ul><ul><li>ControlTemplate for HyperGrid </li></ul><ul><li>Sound? </li></ul><ul><li>All in 1 week </li></ul>
  46. 57. Deep Orange – C# Implementation <ul><li>Game loop: a tick every 3 seconds </li></ul><ul><li>Daily builds, testing by client </li></ul><ul><li>Integrating UI en Game Engine using Data binding during a presentation of results. </li></ul><ul><li>Elements on invisible screens still clickable (significant transparency) </li></ul><ul><li>Controlling animations from code </li></ul><ul><li>In 3 Weeks </li></ul>
  47. 59. Deep Orange - Collaboration <ul><li>Designer/Developer Collaboration </li></ul><ul><ul><li>Visual Studio Team System </li></ul></ul><ul><ul><li>Repository via Internet </li></ul></ul><ul><ul><li>Initially work apart on UI and Engine </li></ul></ul><ul><ul><li>Continue working on parts of the UI while it is integrated with code </li></ul></ul><ul><ul><li>Autonomously including data binding to UI </li></ul></ul>
  48. 60. Deep Orange – Demo
  49. 61. Deep Orange – Distribution <ul><li>Distributed to the stakeholders </li></ul><ul><li>Followed by distribution to employees </li></ul><ul><li>Game instructions presentations to employees </li></ul>
  50. 62. Deep Orange – Instructions
  51. 63. Deep Orange – Instructions
  52. 64. Serious Games <ul><li>Serious alternative for training </li></ul><ul><li>Many aspects to consider </li></ul><ul><li>Keep it interesting and relevant </li></ul><ul><li>Learn something useful </li></ul><ul><li>Cost effective in case of many users </li></ul>
  53. 65. Serious Games in Silverlight <ul><li>Why Silverlight? </li></ul><ul><ul><li>Code, Data and UI integrate really well </li></ul></ul><ul><ul><li>Designer, Developer collaborate really well </li></ul></ul><ul><ul><li>Online: No deployment or installation issues </li></ul></ul><ul><ul><li>Browser penetration growing: > 25% </li></ul></ul><ul><li>Silverlight for Serious Games </li></ul><ul><ul><li>Substantial graphical possibilities with XAML </li></ul></ul><ul><ul><li>Connecting to data models </li></ul></ul><ul><ul><li>Connecting to game engine in C# </li></ul></ul>
  54. 66. <ul><li>Written especially for User Interface Designers </li></ul><ul><li>Dutch </li></ul><ul><li>Full Color </li></ul><ul><li>Color and Brushes </li></ul><ul><li>Document Layout , Text, Fonts and Typography </li></ul><ul><li>Shapes and Geometry </li></ul><ul><li>Screen Layout , UI Controls </li></ul><ul><li>Styles , Templates , Resources , Skins and Themes </li></ul><ul><li>Transformations, Animations, 3D , Bitmap Effects </li></ul><ul><li>Published: May 2008 </li></ul>
  55. 67. <ul><li>Silverlight 3 project from beginning to end: </li></ul><ul><li>Design </li></ul><ul><li>Production </li></ul><ul><li>Programming </li></ul><ul><li>Publication </li></ul><ul><li>In Dutch </li></ul><ul><li>Expected: Q3 2009 </li></ul>Silverlight 3
  56. 68. More information… <ul><li>Contact: </li></ul><ul><ul><li>[email_address] </li></ul></ul><ul><ul><li>André.van.der.Plas@macaw.nl </li></ul></ul><ul><ul><li>[email_address] </li></ul></ul><ul><li>Read more: www.macaw.nl/seriousgames </li></ul><ul><li>Blogs: http://www.antonidol.nl </li></ul><ul><li>Thank you! </li></ul>

×