WWX 2013 - Cocktail for game UIs Cocktail is a HTML/CSS rendering engine written in Haxe.

1. Cocktail for Game UIs
http://www.silexlabs.org/haxe/cocktail/

2. Yannick Dominguez
Developer
Cocktail Lead developer
Contributor
@ Silex Labs
Co-founder & developer
@ Intermedia Paris
Raphaël Harmel
Developer
Cocktail contributor
Contributor
@ Silex Labs
Co-founder & developer
@ Intermedia Paris
Speakers

3. What is Cocktail ?

5. HTML & CSS implementation

6. HTML & CSS implementation
uses HTML DOM API

7. HTML & CSS implementation
uses HTML DOM API
open source

8. Features

9. Features
HTML for markup

10. Features
HTML for markup
CSS for design

11. Features
HTML for markup
CSS for design
W3C DOM API for behaviour

12. Features
HTML for markup
CSS for design
W3C DOM API for behaviour
application oriented

13. Features
HTML for markup
CSS for design
W3C DOM API for behaviour
application oriented
Works in stand-alone mode
or embedded in other applications

15. Uses Haxe JS API

16. Why JS API ?

17. Why JS API ?
Designed for UI's

18. Why JS API ?
Designed for UI's
Widely used

19. Why JS API ?
Designed for UI's
Widely used
Standard

20. Workflow

21. Workflow
Design in HTML / CSS

22. Workflow
Design in HTML / CSS
Add interactivity with Haxe JS

23. Workflow
Design in HTML / CSS
Add interactivity with Haxe JS
Compile with Haxe JS, Haxe Flash and NME

24. Demo time !

25. Demo time !
Mixing Cocktail and NME

26. After

27. ...comes
WastedLand !
http://demos.silexlabs.org/cocktail/wastedland/

28. WastedLand
code

29. Web engine overview

30. Web engine overview
HTML and CSS parsing

31. Web engine overview
HTML and CSS parsing
Building the DOM and CSSOM

32. Web engine overview
HTML and CSS parsing
Building the DOM and CSSOM
Cascading styles

33. Web engine overview
HTML and CSS parsing
Building the DOM and CSSOM
Cascading styles
Layout

34. Web engine overview
HTML and CSS parsing
Building the DOM and CSSOM
Cascading styles
Layout
Rendering

35. Web engine overview
HTML and CSS parsing
Building the DOM and CSSOM
Cascading styles
Layout
Rendering
Then loop

36. Portability

37. Portability
core and port

38. Portability
core and port
core cross-platform

39. Portability
core and port
core cross-platform
port platform specific

40. Portability
core and port
core cross-platform
port platform specific
Flash/Air and NME port

41. Status

42. Status
DOM

43. Status
DOM
DOMEvent

44. Status
DOM
DOMEvent
CSS parser

45. Status
DOM
DOMEvent
CSS parser
CSS 2.1

46. Status
DOM
DOMEvent
CSS parser
CSS 2.1
HTML4

47. Status
DOM
DOMEvent
CSS parser
CSS 2.1
HTML4
HTML5

48. What's next ?

49. What's next ?
CSS 3

50. What's next ?
CSS 3
end of CSS 2.1

51. What's next ?
CSS 3
end of CSS 2.1
HTML parser

52. Performance

53. Performance
adequate

54. Performance
adequate
not 60fps

55. Performance
adequate
not 60fps
cascade and layout

56. Performance
adequate
not 60fps
cascade and layout
software rendering

57. Issues

58. Issues
layout quirks

59. Use cases

60. THE LEADING GLOBAL PLATFORM FOR
SOCIAL VIDEO ADVERTISING
Video player
Video player allowing:
● Youtube and DailyMotion
video streaming
● advertising injection
● social network sharing
15 million impressions / month
Cocktail
Realisations

61. Brix + Cocktail
Realisations
My TF1 Connect

62. Cocktail for Game UIs
http://www.silexlabs.org/haxe/cocktail/
http://demos.silexlabs.org/trycocktail/