0
Catan WorldGrant GoodaleDean HudsonMason Browne                August 23, 2012                    #gamedevjs
A year ago:
+= ??
January 15: Go!Port server-side engine to JavaScriptRedesign client-side engine for canvas, mobileDesign & build for scala...
7 months later:
Catan World!
Catan World
Catan World
Catan++Single massive game worldreal time play - no turns!Exploration, global trade, technology, and more
Catan WorldHardware-accelerated canvas rendering on desktopand mobileRealtime, cross-platform playInifinitely large world w...
Churchill                A proper game engineA full-stack JavaScript game engineDual-pipeline client rendering (DOM and ca...
Churchill                 A proper game engine~ 186 classes~ 7412 lines of CoffeeScriptCompiles to ~10849 lines of JS, spl...
Churchill Engine
Front-End Architecture  Ignore the Single Responsibility       Principle At Your Peril
Game EntitiesManage positionManage velocityManage collision / point intersectionRespond to update() calls
Rendering Primitives Implement draw specifics Separate draw calls for different renderers (visitor pattern) Delegated to by...
Entity ManagerKeep track of entities in the gameInterface for adding, deleting, and retrieving entitiesProvides component ...
Multiple RenderersPluggable renderers, adhering to a common interfaceAllows canvas/DOM specific caching, double buffering,e...
Core LoopWrap it all togetherDispatch queued server/UI eventsMake update callsBuild render queueCall renderer.render()
Embracing ConstraintsUsing all canvas rendering in Catan World
Why?Excessive DOM manipulation is slow and prone toperformance/memory issuesMore consistent support for mobile wrappersBec...
But... The DOM does A LOT of work
Infinite Scrolling Computationally expensive-nearly every pixel is dirty so we have fewer tricks to save drawImage calls Ne...
Building UI/UX in canvas Needed to implement our own click detection, windows, buttons, dragging handlers, etc. Use a JSON...
Building UI/UX in canvas
DOM events !=Churchill events Need to normalize DOM events UI/UX events coming in on a single DOM element (the canvas) Tou...
Hit Detection See above Infer z-ordering Dispatch events to game entities based on x, y containment Bubbling behavior need...
Hit Detection
ChurchillServices
Sage Advice”Establish & Embrace Constraints” - @kevmoo                             (or something to that effect)
On Node, Not Of NodeChurchill clients and services are pure.Your JS engine is your runtime (V8, Nitro,SpiderMonkey)Node an...
Be Modular!Factor out platform-specific feature functionality intomodules: File I/O, Network I/O, DB accessSupporting a giv...
Use Channels!Discrete message & event channelsAbstraction lends itself well to composition andchainingIn turn makes transp...
Emergent Properties!Can run multiple, independent services in the sameruntimeMakes service composition a sane design decis...
Other Neat Stuff Message routing amongst cluster peers Leader election amongst cluster peers Locality-based message dispat...
DevelopingWith Churchill
CaveatsWe’re an OS X shopWe like UNIX-y things: emacs, bash, sed/awkWe’re highly opinionated and not very nice
Node!Development is node-centric  engine is a set of npm modules  express app for serving games in devCake (make-alike) ta...
We Need You!  Help us test before launch!      http://catanworld.goko.com
We Need You!     Come help us build the next   generation of connected games    iwanttowork@massivelyfun.com     http://ma...
Catan world and Churchill
Upcoming SlideShare
Loading in...5
×

Catan world and Churchill

4,384

Published on

Slides from Massively Fun's talk at the August JavaScript Game Development meetup in Seattle. In it we discuss our new title, Catan World, as well as our new HTML5 MMO game engine, Churchill.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,384
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Can easily separate CPU-bound services into their own processes and scale them independently with minimal code changes (swap out the message dispatch strategy). You incur I/O overhead, but free up frontline dispatch loops.\n\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Catan world and Churchill"

    1. 1. Catan WorldGrant GoodaleDean HudsonMason Browne August 23, 2012 #gamedevjs
    2. 2. A year ago:
    3. 3. += ??
    4. 4. January 15: Go!Port server-side engine to JavaScriptRedesign client-side engine for canvas, mobileDesign & build for scalability (up and down)
    5. 5. 7 months later:
    6. 6. Catan World!
    7. 7. Catan World
    8. 8. Catan World
    9. 9. Catan++Single massive game worldreal time play - no turns!Exploration, global trade, technology, and more
    10. 10. Catan WorldHardware-accelerated canvas rendering on desktopand mobileRealtime, cross-platform playInifinitely large world without sharding
    11. 11. Churchill A proper game engineA full-stack JavaScript game engineDual-pipeline client rendering (DOM and canvas)MMO server functionality with code parity betweenclient and server
    12. 12. Churchill A proper game engine~ 186 classes~ 7412 lines of CoffeeScriptCompiles to ~10849 lines of JS, split out by targetplatform
    13. 13. Churchill Engine
    14. 14. Front-End Architecture Ignore the Single Responsibility Principle At Your Peril
    15. 15. Game EntitiesManage positionManage velocityManage collision / point intersectionRespond to update() calls
    16. 16. Rendering Primitives Implement draw specifics Separate draw calls for different renderers (visitor pattern) Delegated to by GameEntity for calls that require per pixel information (image hit detection, etc.)
    17. 17. Entity ManagerKeep track of entities in the gameInterface for adding, deleting, and retrieving entitiesProvides component interfaceDispatches update calls and normalized events
    18. 18. Multiple RenderersPluggable renderers, adhering to a common interfaceAllows canvas/DOM specific caching, double buffering,etc.Builds render queueMakes draw calls to rects
    19. 19. Core LoopWrap it all togetherDispatch queued server/UI eventsMake update callsBuild render queueCall renderer.render()
    20. 20. Embracing ConstraintsUsing all canvas rendering in Catan World
    21. 21. Why?Excessive DOM manipulation is slow and prone toperformance/memory issuesMore consistent support for mobile wrappersBecause we can.
    22. 22. But... The DOM does A LOT of work
    23. 23. Infinite Scrolling Computationally expensive-nearly every pixel is dirty so we have fewer tricks to save drawImage calls Necessitates double buffering Relative positioning is hard
    24. 24. Building UI/UX in canvas Needed to implement our own click detection, windows, buttons, dragging handlers, etc. Use a JSON (esque) layout format to specify positioning
    25. 25. Building UI/UX in canvas
    26. 26. DOM events !=Churchill events Need to normalize DOM events UI/UX events coming in on a single DOM element (the canvas) Touch and mouse normalized into pointer events Canvas relative positioning
    27. 27. Hit Detection See above Infer z-ordering Dispatch events to game entities based on x, y containment Bubbling behavior needs to be handled explicitly (brew your own!)
    28. 28. Hit Detection
    29. 29. ChurchillServices
    30. 30. Sage Advice”Establish & Embrace Constraints” - @kevmoo (or something to that effect)
    31. 31. On Node, Not Of NodeChurchill clients and services are pure.Your JS engine is your runtime (V8, Nitro,SpiderMonkey)Node and browsers are platforms (runtime + features)All code should run in all supported runtimes
    32. 32. Be Modular!Factor out platform-specific feature functionality intomodules: File I/O, Network I/O, DB accessSupporting a given platform just means having thesupporting feature modules
    33. 33. Use Channels!Discrete message & event channelsAbstraction lends itself well to composition andchainingIn turn makes transport-agnostic message passingeasySupport for TCP socket, in-memory (direct dispatch),and socket.io (WebSocket, XHR, etc) transport
    34. 34. Emergent Properties!Can run multiple, independent services in the sameruntimeMakes service composition a sane design decision No I/O overhead incurred for in-memory (direct dispatch) between services in the same runtime Scale!
    35. 35. Other Neat Stuff Message routing amongst cluster peers Leader election amongst cluster peers Locality-based message dispatching
    36. 36. DevelopingWith Churchill
    37. 37. CaveatsWe’re an OS X shopWe like UNIX-y things: emacs, bash, sed/awkWe’re highly opinionated and not very nice
    38. 38. Node!Development is node-centric engine is a set of npm modules express app for serving games in devCake (make-alike) tasks for mobile client builds, tests
    39. 39. We Need You! Help us test before launch! http://catanworld.goko.com
    40. 40. We Need You! Come help us build the next generation of connected games iwanttowork@massivelyfun.com http://massivelyfun.com/jobs/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×