• Save
GG WORKSHOP GAMES & APPS IN JAVASCRIPT
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

GG WORKSHOP GAMES & APPS IN JAVASCRIPT

on

  • 3,964 views

Slides from 'GAMES & APPS IN JAVASCRIPT' workshop organized by GG Network and Michal Budzynski on 09.04.2011 in Warsaw.

Slides from 'GAMES & APPS IN JAVASCRIPT' workshop organized by GG Network and Michal Budzynski on 09.04.2011 in Warsaw.

Statistics

Views

Total Views
3,964
Views on SlideShare
1,832
Embed Views
2,132

Actions

Likes
3
Downloads
0
Comments
0

40 Embeds 2,132

http://michalbe.blogspot.com 1572
http://michalbe.blogspot.de 84
http://michalbe.blogspot.in 64
http://michalbe.blogspot.com.br 51
http://michalbe.blogspot.co.uk 45
http://michalbe.blogspot.fr 37
http://michalbe.blogspot.com.es 37
http://michalbe.blogspot.ca 22
http://michalbe.blogspot.se 20
http://michalbe.blogspot.fi 18
http://michalbe.blogspot.com.au 18
http://michalbe.blogspot.com.ar 15
http://michalbe.blogspot.hk 12
http://michalbe.blogspot.nl 10
http://michalbe.blogspot.be 9
http://michalbe.blogspot.it 9
http://michalbe.blogspot.cz 8
http://michalbe.blogspot.ch 8
http://michalbe.blogspot.pt 8
http://michalbe.blogspot.ro 8
http://michalbe.blogspot.co.il 7
http://michalbe.blogspot.tw 7
http://michalbe.blogspot.jp 7
http://michalbe.blogspot.ie 7
http://michalbe.blogspot.co.nz 5
http://michalbe.blogspot.hu 5
http://michalbe.blogspot.co.at 5
http://michalbe.blogspot.gr 4
http://michalbe.blogspot.ru 4
http://michalbe.blogspot.sk 4
http://michalbe.blogspot.mx 4
http://www.michalbe.blogspot.com 3
http://michalbe.blogspot.dk 3
url_unknown 3
http://michalbe.blogspot.sg 3
http://www.slideshare.net 2
http://michalbe.blogspot.kr 1
http://michalbe.blogspot.no 1
http://translate.googleusercontent.com 1
http://newsvi.be 1
More...

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

GG WORKSHOP GAMES & APPS IN JAVASCRIPT Presentation Transcript

  • 1. GG Team Workshop GAMES & APPS IN JAVASCRIPT 2011 by Michal Budzynski
  • 2. GG Team Workshop 2011 by Michal Budzynski Development of a game:
    • Preproduction
    • 3. Prototype
    • 4. Alpha
    • 5. Beta
    • 6. RC
    • 7. Gold Master
    • 8. Localization
  • 9. GG Team Workshop 2011 by Michal Budzynski
  • 10. GG Team Workshop 2011 by Michal Budzynski DOM manipulation – direct appending
    • Creating nodes & elements
    • 11. Assembling them into DOM tree
    • 12. Connecting created tree into main DOM structure
  • 13. GG Team Workshop 2011 by Michal Budzynski DOM manipulation – direct appending
  • 14. GG Team Workshop 2011 by Michal Budzynski DOM manipulation – document fragment
    • Creating documentFragment
    • 15. Append all nodes & elements to it
    • 16. Connecting documentFragment to the main DOM structure
  • 17. GG Team Workshop DOM manipulation – document fragment
  • 18. GG Team Workshop 2011 by Michal Budzynski Result:
  • 19. GG Team Workshop 2011 by Michal Budzynski DOM manipulation – concatenation + innerHTML
    • Write HTML for each node & element
    • 20. Put it directly into innerHTML of the parent node
    • 21. Use methods like .childNodes() or .getElementsByTagName()
  • 22. GG Team Workshop DOM manipulation – document fragment 2011 by Michal Budzynski
  • 23. GG Team Workshop For single string using array buffer instead of += makes perfect sense – huge performance difference in older browsers and comparable results in newer ones. Doing join() on multiple arrays for concatenation is not a good idea. It takes way more time than simple +! http://kasia.drzyzga.pl/2011/04/never-concatenate-strings-with-really/ 2011 by Michal Budzynski
  • 24. GG Team Workshop 2011 by Michal Budzynski
  • 25. GG Team Workshop 2011 by Michal Budzynski
  • 26. GG Team Workshop 2011 by Michal Budzynski Canvas API – 2d context
    • .beginPath()
    • 27. .fillStyle = “”
    • 28. .fillRect(a, b, c, d)
    • 29. .moveTo(x, y)
    • 30. .lineTo(x, y)
    • 31. .bezierCurveTo()
    • 32. .arc(x, y, radius, startAngle, endAngle, anticlockwise)
    • 33. .stroke()
    • 34. .fill()
  • 35. GG Team Workshop 2011 by Michal Budzynski Canvas
    • Use .width & .height directly, not as 'style'
    • 36. ctx.clearRect()
    • 37. canvas.toDataURL();
  • 38. GG Team Workshop 2011 by Michal Budzynski checker.draw('#f00') Result: checker.draw('#00f') Result:
  • 39. GG Team Workshop 2011 by Michal Budzynski Result:
  • 40. GG Team Workshop 2011 by Michal Budzynski Global variables and 'Namespace Pattern'
    • Avoid globals!
    • 41. More specific position of variable – better performance
  • 42. GG Team Workshop 2011 by Michal Budzynski Global variables and 'Namespace Pattern'
    • Avoid globals!
    • 43. More specific position of variable – better performance
  • 44. GG Team Workshop 2011 by Michal Budzynski Result:
  • 45. GG Team Workshop 2011 by Michal Budzynski Events
    • Inline method (DOM lvl 0)
    • 46. Events by attributes (DOM lvl 1)
    • 47. Event Listeners (DOM lvl 2)
  • 48. GG Team Workshop 2011 by Michal Budzynski Events
    • Inline method (DOM lvl 0)
    • 49. Events by attributes (DOM lvl 1)
    • 50. Event Listeners (DOM lvl 2)
    • 51. Removing event-handlers
  • 52. GG Team Workshop 2011 by Michal Budzynski Removing event handlers
  • 53. GG Team Workshop 2011 by Michal Budzynski Removing event handlers
  • 54. GG Team Workshop 2011 by Michal Budzynski Removing event handlers
  • 55. GG Team Workshop 2011 by Michal Budzynski Result:
  • 56. GG Team Workshop 2011 by Michal Budzynski Coma and question mark operators
    • Complex if() statements using questionmarks
  • 57. GG Team Workshop 2011 by Michal Budzynski Coma and question mark operators
    • Complex if() statements using questionmarks
  • 58. GG Team Workshop 2011 by Michal Budzynski Coma and question mark operators
    • Complex if() statements using comas
  • 59. GG Team Workshop 2011 by Michal Budzynski Coma and question mark operators
    • Complex if() statements using comas
  • 60. GG Team Workshop 2011 by Michal Budzynski Coma and question mark operators
    • Complex if() statements using comas
    • 61. http://javascriptweblog.wordpress.com/2011/04/04/the-javascript-comma-operator/
  • 62. GG Team Workshop 2011 by Michal Budzynski Result:
  • 63. GG Team Workshop 2011 by Michal Budzynski Communication
    • XHR
    • 64. Long polling
    • 65. JSONP polling
    • 66. Forever iframes
    • 67. FlashSockets (tfuuuuuuuuuu!)
    • 68. WebSockets
  • 69. GG Team Workshop 2011 by Michal Budzynski Communication One to rule them all!
  • 70. GG Team Workshop 2011 by Michal Budzynski Communication One to rule them all!
  • 71. GG Team Workshop 2011 by Michal Budzynski Communication How to use Socket.io without server-side parts of our game?
  • 72. GG Team Workshop 2011 by Michal Budzynski Communication How to use Socket.io without server-side parts of our game? We cannot.
  • 73. GG Team Workshop 2011 by Michal Budzynski Communication
    • EasyWebSocket - a WebSocket client to broadcast messages to webpages
    • 74. http://easywebsocket.org/
  • 75. GG Team Workshop 2011 by Michal Budzynski Result:
  • 76. GG Team Workshop 2011 by Michal Budzynski Different approach to sending packages in client-client communication
    • Ask for players
  • 77. GG Team Workshop 2011 by Michal Budzynski Different approach to sending packages in client-client communication
    • Ask for players
    • 78. Take players - if no free places – disconnect (?)
  • 79. GG Team Workshop 2011 by Michal Budzynski Different approach to sending packages in client-client communication
    • Ask for players
    • 80. Take players - if no free places – disconnect (?)
    • 81. Say hello
  • 82. GG Team Workshop 2011 by Michal Budzynski Different approach to sending packages in client-client communication
    • Ask for players
    • 83. Take players - if no free places – disconnect (?)
    • 84. Say hello
    • 85. Show when you will be ready
  • 86. GG Team Workshop 2011 by Michal Budzynski Different approach to sending packages in client-client communication
    • Ask for players
    • 87. Take players - if no free places – disconnect (?)
    • 88. Say hello
    • 89. Show when you will be ready
    • 90. Send & receive all the movements
  • 91. GG Team Workshop 2011 by Michal Budzynski Result:
  • 92. GG Team Workshop 2011 by Michal Budzynski Touch devices
    • 'tap' is the new 'click'
    • 93. 'touchstart' is the new 'mousedown'
    • 94. Etc.
    • 95. http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/
  • 96. GG Team Workshop 2011 by Michal Budzynski Touch devices
    • <meta name=&quot;viewport&quot;>
    • 97. content=&quot;width=device-width, initial-scale=1, maximum-scale=1&quot;
    • 98. A pixel is not a pixel
    • 99. “ The iPhone and many popular Android phones have 3- to 4-inch (7–10 cm) screens with 320—480 pixels (~160 dpi). Firefox for Maemo runs on the Nokia N900, which has the same physical size but 480—800 pixels (~240 dpi).”
    • 100. http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
  • 101. GG Team Workshop 2011 by Michal Budzynski Result:
  • 102. GG Team Workshop 2011 by Michal Budzynski Social Networks APIs
  • 103. GG Team Workshop 2011 by Michal Budzynski Social Networks APIs
  • 104. GG Team Workshop 2011 by Michal Budzynski Social Networks APIs
    • Javascript API
    • 105. REST API with backend libraries
    • 106. http://dev.gg.pl/api/pages/ggapi.html
    • 107. http://developers.facebook.com/docs/reference/javascript/
  • 108. GG Team Workshop 2011 by Michal Budzynski Result:
  • 109. GG Team Workshop 2011 by Michal Budzynski What's next?
    • http://michalbe.blogspot.com
    • 110. http://twitter.com/michalbe
    • 111. http://ongamestart.com
    • 112. http://googlepolska.blogspot.com
    • 113. http://falsyvalues.com
  • 114. GG Team Workshop 2011 by Michal Budzynski What's next?
    • http://frontendday.com
    • 115. http://jsday.it
    • 116. http://braziljs.com.br
    • 117. http://nodecamp.eu