Your SlideShare is downloading. ×
  • Like
Google   kick ass-game_programming_with_gwt
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Google kick ass-game_programming_with_gwt

  • 1,481 views
Published

 

Published in Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,481
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
15
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Thursday, May 12, 2011 1
  • 2. Thursday, May 12, 2011 2
  • 3. Kick-Ass Game Programming with Google Web Toolkit Ray Cromwell, Philip Rogers May 11th, 2011Thursday, May 12, 2011 2
  • 4. Thursday, May 12, 2011 3
  • 5. Demo time!Thursday, May 12, 2011 3
  • 6. What’s covered in this session • Intro / Why GWT? • Architecting a game • Introducing ForPlay • Let’s build a game – and share it • Advanced Topics – Android – Flashy 4Thursday, May 12, 2011 4
  • 7. Why use GWT for games? GWT = Game Web Toolkit? • Leverage familiar Java toolchain (debugger, IDE, etc.) • Share code between client, server... and other platforms? • Produce small, fast JavaScript & HTML5 5Thursday, May 12, 2011 5
  • 8. Leveraging familiar Java tools and libraries Port a physics engine Box2D JBox2D GWTBox2D C++ Java and Java Javascript • Box2D – C++ 2D Physics engine by Erin Catto • JBox2D – A port of Box2D from C++ to Java • GWTBox2D – A port of JBox2D from Java to JavaScript – “Porting” 11,000 lines took ~30 minutes. (removed ThreadLocal, etc.) 6Thursday, May 12, 2011 6
  • 9. Faster and Smaller • GWT Compiler optimizes code for size – Removes unused code – Evaluates, when possible, code at compile time – Inlines functions – Heavily obfuscates the result • Smaller code loads faster • Perfect Caching avoids need for network I/O • Inlining helps code run faster 7Thursday, May 12, 2011 7
  • 10. HTML5 for games • Formal HTML5 – New HTML Elements • 2D Canvas, great for curves and text (GWT 2.2) • Audio, Video (GWT 2.2) – Application Cache (GWT 3.0) – Much, much more... • Colloquial “HTML5” – 3D Canvas (WebGL) (GWTGL) • OpenGL ES 2.0 made JavaScript friendly • Important for 2D games due to acceleration – CSS3 • Supports hardware accelerated transforms 8Thursday, May 12, 2011 8
  • 11. Thursday, May 12, 2011 9
  • 12. Architecting a gameThursday, May 12, 2011 9
  • 13. Overview of a game The Game Loop I/O System Asset Management init() keyboard, pointer, touch loading update(delta) audio, graphics saving paint(delta) storage, network caching 10Thursday, May 12, 2011 10
  • 14. Challenges of a cross-platform game The Game Loop I/O System Asset Management Keeping graphics, update, Not always available/accel: Loading and I/O in sync. WebGL, CSS3, Canvas Caching assets RequestAnimationFrame Audio Application Cache Interpolation in paint() Inputs: touch, mouse, etc. 11Thursday, May 12, 2011 11
  • 15. Thursday, May 12, 2011 12
  • 16. Abstraction is key GWT abstracts away browser differences. Let’s apply that to cross-platform games.Thursday, May 12, 2011 12
  • 17. Introducing ForPlay GWT abstraction layer for games • A small API for building fast cross-platform games – Core game can be platform-agnostic • Written in Java so you get a familiar language and toolset – And a great debugging environment • GWT-compatible so you can compile to JavaScript/HTML5 • Free and open source (alpha version) – http://code.google.com/p/forplay 13Thursday, May 12, 2011 13
  • 18. Introducing ForPlay • Think: Service Provider Interface (SPI) ForPlay API Java impl. GWT/JS impl. Android impl. ... Flash impl? 14Thursday, May 12, 2011 14
  • 19. Thursday, May 12, 2011 15
  • 20. Demo timeThursday, May 12, 2011 15
  • 21. Components of ForPlay The Game Loop I/O System Asset Management Extend ForPlay.Game import static core.ForPlay.* assetManager() init() audio(), graphics(), net() .getImage(String path) update(float delta) .getSound(String path) paint(float delta) Pointers & Keyboard input .getText(String path) Layers for fast graphics also ResourceCallback • ForPlay provides the cross platform magic to make these abstractions transparent – Core game has no platform-specific calls 16Thursday, May 12, 2011 16
  • 22. The Game I/O System Asset Components of ForPlay Loop Management • Just extend implement ForPlay.Game public class MyGame implements Game { public void init() { // init game } public void update(float deltaTime) { // update } public void paint(float deltaTime) { // paint } } 17Thursday, May 12, 2011 17
  • 23. The Game I/O System Asset Components of ForPlay Loop Management • Delta in paint() can be used for interpolation public class MyGame implements Game { public void paint(float delta) { float xInterp = (delta) * x + (1-delta) * prevX; float yInterp = (delta) * y + (1-delta) * prevY; layer.setTranslation(xInterp, yInterp); } } 18Thursday, May 12, 2011 18
  • 24. The Game I/O System Asset Components of ForPlay Loop Management • Input devices public class MyGame implements Game, Pointer, Keyboard { public void onPointerMove(int x, int y) { // handle pointer movement } public void onPointerScroll(int velocity) { // handle zoom, etc. } public void onKeyDown(int keyCode) { // handle keypress } } 19Thursday, May 12, 2011 19
  • 25. The Game I/O System Asset Components of ForPlay Loop Management • Images - using the ForPlay layer system Layer Scale, Rotate, Translate GroupLayer ImageLayer SurfaceLayer List<Layer> children Image image, setRepeat() Surface surface Image Surface Canvas width, height drawImage(), fillRect() strokePath(), drawArc(), drawText() 20Thursday, May 12, 2011 20
  • 26. The Game I/O System Asset Components of ForPlay Loop Management 21Thursday, May 12, 2011 21
  • 27. The Game I/O System Asset Components of ForPlay Loop Management Loading and displaying images Image image = assetManager().getImage(“myImage.png”); image.addCallback(new ResourceCallback<Image>() { public void done(Image image) { // handle new image } } 22Thursday, May 12, 2011 22
  • 28. The Game I/O System Asset Components of ForPlay Loop Management The AssetWatcher AssetWatcher watcher = new AssetWatcher(new Listener() { public void done() { startMyGame(); } }); watcher.add(image1); watcher.add(image2); watcher.start(); 23Thursday, May 12, 2011 23
  • 29. ForPlay cross platform magic • Game uses core ForPlay abstractions, is unaware of which platform is running • The only platform-specific code is in the entry point for each platform: public class MyGameHtml extends HtmlGame { public class MyGameJava { public void start() { public static void main(String[] args){ HtmlPlatform.register(); JavaPlatform.register(); ForPlay.run(new MyGame()); ForPlay.run(new MyGame()); } } } } 24Thursday, May 12, 2011 24
  • 30. ForPlay wrap-up • Open source, cross-platform game abstraction layer – Where the core game is platform-agnostic • ForPlay abstracts away the core components of a game – The game loop, I/O system, and asset management • Write in Java, get performance on multiple platforms – Java provides a great debug environment – GWT allows compilation to fast JavaScript/HTML5 • Lets build a game! 25Thursday, May 12, 2011 25
  • 31. Thursday, May 12, 2011 26
  • 32. Demo of building peasThursday, May 12, 2011 26
  • 33. Building Peas • Familiar tools – Write and debug in Java – Eclipse and GPE – Compile to Java and JavaScript/HTML5 – Hosting on AppEngine is a click away 27Thursday, May 12, 2011 27
  • 34. Releasing to the Chrome Web Store 1. Visit http://appmator.com, enter the URL of your game, and download a zip file. 2. Upload the zip file to the Chrome Web Store using the Developer Dashboard ... 28Thursday, May 12, 2011 28
  • 35. Releasing to the Chrome Web Store 1. Visit http://appmator.com, enter the URL of your game, and download a zip file. 2. Upload the zip file to the Chrome Web Store using the Developer Dashboard ... 3. Profit! 29Thursday, May 12, 2011 29
  • 36. One more thing... • That game we just built using ForPlay? – It runs as a Java desktop app too 30Thursday, May 12, 2011 30
  • 37. One more thing... • That game we just built using ForPlay? – It runs as a Java desktop app too – And an Android app 31Thursday, May 12, 2011 31
  • 38. ForPlay for Android • GWT code is already in Java • Compile straight to Dalvik and package as an APK public class MyGameAndroid { public static void main(String[] args){ AndroidPlatform.register(); ForPlay.run(new MyGame()); } } 32Thursday, May 12, 2011 32
  • 39. One more thing... • That game we just built using ForPlay? – It runs as a Java desktop app too – And an Android app – And in Flash 33Thursday, May 12, 2011 33
  • 40. ForPlay for Flash • GWT to Flex compiler – Compiles to ActionScript3/Flex4 SDK – Provides Java overlay types for flash.{events|net|display|media|etc} API – Specialized GWT linker produces SWF public class MyGameFlash { public static void main(String[] args){ FlashPlatform.register(); ForPlay.run(new MyGame()); } } 34Thursday, May 12, 2011 34
  • 41. Wrap-up • Why GWT? – Performance, ease of writing code, portability • Architecting a game – Core components: the game loop, I/O system, and asset management • Abstraction is key – ForPlay is a cross-platform game abstraction layer – Easy to write in, performant • Go build a game! – ForPlay is open source, easy to use, and really fun! – http://code.google.com/p/forplay 35Thursday, May 12, 2011 35
  • 42. Links and Thanks • ForPlay (alpha) – http://code.google.com/p/forplay • Angry Birds – http://chrome.angrybirds.com ------ 36Thursday, May 12, 2011 36
  • 43. Links and Thanks • ForPlay (alpha) – http://code.google.com/p/forplay • Angry Birds – http://chrome.angrybirds.com 36Thursday, May 12, 2011 36
  • 44. Thursday, May 12, 2011 37