Google kick ass-game_programming_with_gwt
-
Upload
momobeijing -
Category
Technology
-
view
1.922 -
download
0
description
Transcript of Google kick ass-game_programming_with_gwt
![Page 1: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/1.jpg)
1Thursday, May 12, 2011
![Page 2: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/2.jpg)
2Thursday, May 12, 2011
![Page 3: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/3.jpg)
Kick-Ass Game Programmingwith Google Web ToolkitRay Cromwell, Philip RogersMay 11th, 2011
2Thursday, May 12, 2011
![Page 4: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/4.jpg)
3Thursday, May 12, 2011
![Page 5: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/5.jpg)
Demo time!
3Thursday, May 12, 2011
![Page 6: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/6.jpg)
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
4
4Thursday, May 12, 2011
![Page 7: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/7.jpg)
GWT = Game Web Toolkit?Why use GWT for games?
• Leverage familiar Java toolchain (debugger, IDE, etc.)
• Share code between client, server... and other platforms?
• Produce small, fast JavaScript & HTML5
5
5Thursday, May 12, 2011
![Page 8: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/8.jpg)
Port a physics engineLeveraging familiar Java tools and libraries
• 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.)
6
GWTBox2D
Java and
Javascript
JBox2D
Java
Box2D
C++
6Thursday, May 12, 2011
![Page 9: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/9.jpg)
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
7
7Thursday, May 12, 2011
![Page 10: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/10.jpg)
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
8
8Thursday, May 12, 2011
![Page 11: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/11.jpg)
9Thursday, May 12, 2011
![Page 12: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/12.jpg)
Architecting a game
9Thursday, May 12, 2011
![Page 13: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/13.jpg)
Overview of a game
10
The Game Loop init()
update(delta)
paint(delta)
I/O System keyboard, pointer, touch
audio, graphics
storage, network
Asset Management loading
saving
caching
10Thursday, May 12, 2011
![Page 14: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/14.jpg)
Challenges of a cross-platform game
11
The Game Loop I/O System Asset Management
Keeping graphics, update,
and I/O in sync.
RequestAnimationFrame
Interpolation in paint()
Not always available/accel:
WebGL, CSS3, Canvas
Audio
Inputs: touch, mouse, etc.
Loading
Caching assets
Application Cache
11Thursday, May 12, 2011
![Page 15: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/15.jpg)
12Thursday, May 12, 2011
![Page 16: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/16.jpg)
Abstraction is key
GWT abstracts away browser differences.Let’s apply that to cross-platform games.
12Thursday, May 12, 2011
![Page 17: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/17.jpg)
GWT abstraction layer for gamesIntroducing ForPlay
• 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
13
13Thursday, May 12, 2011
![Page 18: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/18.jpg)
Introducing ForPlay• Think: Service Provider Interface (SPI)
14
ForPlay API
Java impl. GWT/JS impl. Android impl. ... Flash impl?
14Thursday, May 12, 2011
![Page 19: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/19.jpg)
15Thursday, May 12, 2011
![Page 20: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/20.jpg)
Demo time
15Thursday, May 12, 2011
![Page 21: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/21.jpg)
Components of ForPlay
• ForPlay provides the cross platform magic to make these abstractions transparent– Core game has no platform-specific calls
16
The Game Loop I/O System Asset Management
Extend ForPlay.Game
init()
update(float delta)
paint(float delta)
import static core.ForPlay.*
audio(), graphics(), net()
Pointers & Keyboard input
Layers for fast graphics
assetManager()
.getImage(String path)
.getSound(String path)
.getText(String path)
also ResourceCallback
16Thursday, May 12, 2011
![Page 22: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/22.jpg)
• Just extend implement ForPlay.Game
Components of ForPlay
17
public class MyGame implements Game { public void init() { // init game } public void update(float deltaTime) { // update } public void paint(float deltaTime) { // paint }}
The Game Loop
I/O System Asset Management
17Thursday, May 12, 2011
![Page 23: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/23.jpg)
• Delta in paint() can be used for interpolation
Components of ForPlay
18
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); }
}
The Game Loop
I/O System Asset Management
18Thursday, May 12, 2011
![Page 24: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/24.jpg)
• Input devices
Components of ForPlay
19
The Game Loop
I/O System Asset Management
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
![Page 25: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/25.jpg)
• Images - using the ForPlay layer system
Components of ForPlay
20
The Game Loop
I/O System Asset Management
LayerScale, Rotate, Translate
GroupLayerList<Layer> children
ImageLayerImage image, setRepeat()
SurfaceLayerSurface surface
Imagewidth, height
SurfacedrawImage(), fillRect()
CanvasstrokePath(), drawArc(),
drawText()
20Thursday, May 12, 2011
![Page 26: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/26.jpg)
Components of ForPlay
21
The Game Loop
I/O System Asset Management
21Thursday, May 12, 2011
![Page 27: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/27.jpg)
Loading and displaying images
Components of ForPlay
22
The Game Loop
I/O System Asset Management
Image image = assetManager().getImage(“myImage.png”); image.addCallback(new ResourceCallback<Image>() { public void done(Image image) { // handle new image } }
22Thursday, May 12, 2011
![Page 28: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/28.jpg)
The AssetWatcher
Components of ForPlay
23
The Game Loop
I/O System Asset Management
AssetWatcher watcher = new AssetWatcher(new Listener() { public void done() { startMyGame(); } });
watcher.add(image1); watcher.add(image2); watcher.start();
23Thursday, May 12, 2011
![Page 29: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/29.jpg)
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:
24
public class MyGameHtml extends HtmlGame { public void start() { HtmlPlatform.register(); ForPlay.run(new MyGame()); }}
public class MyGameJava { public static void main(String[] args){ JavaPlatform.register(); ForPlay.run(new MyGame()); }}
24Thursday, May 12, 2011
![Page 30: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/30.jpg)
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!
25
25Thursday, May 12, 2011
![Page 31: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/31.jpg)
26Thursday, May 12, 2011
![Page 32: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/32.jpg)
Demo of building peas
26Thursday, May 12, 2011
![Page 33: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/33.jpg)
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
27
27Thursday, May 12, 2011
![Page 34: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/34.jpg)
Releasing to the Chrome Web Store1. 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...
28
28Thursday, May 12, 2011
![Page 35: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/35.jpg)
Releasing to the Chrome Web Store1. 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!
29
29Thursday, May 12, 2011
![Page 36: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/36.jpg)
One more thing...• That game we just built using ForPlay?
– It runs as a Java desktop app too
30
30Thursday, May 12, 2011
![Page 37: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/37.jpg)
One more thing...• That game we just built using ForPlay?
– It runs as a Java desktop app too– And an Android app
31
31Thursday, May 12, 2011
![Page 38: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/38.jpg)
ForPlay for Android• GWT code is already in Java• Compile straight to Dalvik and package as an APK
32
public class MyGameAndroid { public static void main(String[] args){ AndroidPlatform.register(); ForPlay.run(new MyGame()); }}
32Thursday, May 12, 2011
![Page 39: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/39.jpg)
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
33
33Thursday, May 12, 2011
![Page 40: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/40.jpg)
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
34
public class MyGameFlash { public static void main(String[] args){ FlashPlatform.register(); ForPlay.run(new MyGame()); }}
34Thursday, May 12, 2011
![Page 41: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/41.jpg)
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
35
35Thursday, May 12, 2011
![Page 42: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/42.jpg)
------
A special thanks to:Joel Webber for his work on ForPlay
Rovio, specifically Serdar Soğancı
Seth Ladd (Google)
Fred Sauer (Google)
Pablo Ruggia (GWTBox2D)
Daniel Cook (lostgarden)
Archie Cobbs (gwt-as)
Erin Catto (box2d)
Rovio
Links and Thanks• ForPlay (alpha)
– http://code.google.com/p/forplay
• Angry Birds– http://chrome.angrybirds.com
36
36Thursday, May 12, 2011
![Page 43: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/43.jpg)
------
A special thanks to:Joel Webber for his work on ForPlay
Rovio, specifically Serdar Soğancı
Seth Ladd (Google)
Fred Sauer (Google)
Pablo Ruggia (GWTBox2D)
Daniel Cook (lostgarden)
Archie Cobbs (gwt-as)
Erin Catto (box2d)
Rovio
Links and Thanks• ForPlay (alpha)
– http://code.google.com/p/forplay
• Angry Birds– http://chrome.angrybirds.com
36
36Thursday, May 12, 2011
![Page 44: Google kick ass-game_programming_with_gwt](https://reader034.fdocuments.in/reader034/viewer/2022051513/54572aa5b1af9fc0638b511b/html5/thumbnails/44.jpg)
37Thursday, May 12, 2011