BlackBerry Game Development Challenges Jeff Bacon, Sr. Smartphone Product Manager Simon Dale, Smartphone Services Team Lead J15

Agenda Buffering Strategies Parallax Scrolling Case Study: Worms A Space Oddity Optimizing with the JDE Navigation API Deficiencies

Magmic Experience Original & Licensed IP Over 45 Games Feature Phones (J2ME/MIDP) BlackBerry Feature Phones (BREW) Windows Mobile Licensed IP: 60+ Titles J2ME/MIDPBlackBerry BREWWindows Mobile 5+ years of BlackBerry game development

Tiles 110 x Graphics.drawBitmap 11 x Graphics.drawBitmap Buffering Strategies What do we mean by buffering? Raging Rivers, Magmic Games

Why do we need to buffer the screen? Customers think big screen == big performance Meet customer expectations Optimization is FUN! Motorola V3x (QVGA) SonyEricsson Z750i (QVGA) HTC Touch (QVGA) BlackBerry 8300 (QVGA) BlackBerry Kickstart (QVGA) BlackBerry BOLD (HVGA) BlackBerry 8120 (240x260) JBenchmark JBenchmark 2D MQ Buffering Strategies Motivations

Bitmap buffer = new Bitmap(screenWidth, screenHeight); private boolean bufferDirty = true; private void repaintBuffer() { synchronized (buffer) { // … draw all the static content onto the buffer … bufferDirty = false; } public void setBufferDirty() { synchronized (buffer) { bufferDirty = true; } } Buffering Strategies Full Screen Image

// OPTION 1: Paint Method public void paint(Graphics g) { if (buffer_is_dirty) { repaintBuffer(); } g.drawBitmap(0, 0, screenWidth, screenHeight, buffer, 0, 0); // … draw all dynamic content … } Buffering Strategies Full Screen Image // OPTION 2: Game Run Loop if (buffer_is_dirty) { repaintBuffer(); } Good: guarantee clean paints Bad: frame rate choppy Bad: long synchronization in paint Good: control when frame rate suffers Bad: can have dirty paints

Buffering Strategies Full Screen Image: Working and Live buffers Reduces maximum paint time Low variance in FPS Risk of stale paints private void repaintBuffer() { synchronized (workingBuffer) { // … draw all the static content onto the workingBuffer … synchronized (liveBuffer) { Graphics g = liveBuffer.getGraphics(); g.drawBitmap(... workingBuffer...); } bufferDirty = false; } public void paint(Graphics g) { synchronized (liveBuffer) { g.drawBitmap(... liveBuffer...); } // … draw all dynamic content … }

Buffering Strategies Larger-Than-Full Screen Image Content Area Viewport Same basic code as Full Screen Keep track of viewport co-ordinates Offset rendering in drawBitmap with viewport Call of Duty 3, HandsOn Mobile

int numBuffers = (screenWidth/ bufferWidth) + 1; Bitmap buffers[] = new Bitmap[numBuffers]; private boolean[] bufferIsDirty = new boolean[numBuffers]; private int leftBuffer = 0; private int leftOffset = 0; public synchronized void setBufferDirty(int bufferId) { synchronized (buffers) { bufferIsDirty[bufferId] = true; } private void repaintBuffer(int bufferId) { synchronized (buffers) { // … draw all the static content onto the buffer … bufferIsDirty[bufferId] = false; } Buffering Strategies Segmented Buffer

public void paint(Graphics g) { synchronized (buffers) { for (int i = 0; i < numBuffers; i++) { if (bufferIsDirty[i]) { repaintBuffer(i); } } int currentBuffer = leftBuffer; for (int i = 0; i < numBuffers; i++) { g.drawBitmap(… buffers[currentBuffer % numBuffers] …); ++currentBuffer; } // … draw all dynamic content … } Buffering Strategies Segmented Buffer Remember to respect the leftOffset Remember to start at leftBuffer index

Screen Area More buffers == smoother scrolling Less buffers == faster painting when not scrolling Horizontal Scroller: buffer height == screen height width can be varied (ex. above) Vertical Scroller: buffer width == screen width height can be varied Indiana Jones and the Kingdom of the Crystal Skull, THQ Wireless Buffering Strategies Segmented Buffer, Example

What is parallax scrolling? New Super Mario Bros., Nintendo, Nintendo DS Parallax Scrolling

Avoid tiled backgrounds Use fewer, larger images Buffer the background layer(s) Only paint visible areas Eagle Eye, Magmic Games Parallax Scrolling Optimization: Reduce Number of Paints

Case Study: Worms A Space Oddity

Can we Buffer? Can’t draw to a large Bitmap Difficult to maintain transparency in a buffer How do we efficiently deform the world? Why? Large level maps (1024x512) Repainting on every tick Repainting using Graphics.drawRGB() Updating all map data for all changes Stationary camera: 3-5 fps Moving camera (viewport): 1-2 fps Explosion: 0 fps Case Study: Worms A Space Oddity Problem: Very Slow Frame Rate

Use lookup-tables for trig functions Faster calculations, less accurate Localize painting to the current viewport Remove some detail Decreases production quality Performance often outweighs detail Full Screen buffer Stationary camera improved dramatically Stationary camera: 17 fps Moving camera (viewport): 8-12 fps Explosion: 0-3 fps Case Study: Worms A Space Oddity Stage 1: Basic Optimizations & Full Screen Buffer

Worms A Space Oddity, THQ Wireless Create a world buffer: 1024x512px Manipulate ARGB data for transparency Painting buffer done on load Allows parallax scrolling Optimize explosions & bounds checking Localize small changes 1024px 512px Stationary camera: 12 fps Moving camera: 12 fps Explosion: 8-10 fps Case Study: Worms A Space Oddity Stage 2: More Optimizations & Segmented Buffer

Worms A Space Oddity, THQ Wireless Stationary camera: fps Moving camera: fps Explosion: 8-10 fps Case Study: Worms A Space Oddity Stage 3: Double Buffering Improve stationary camera frame rate Paint 1 live buffer vs. 1-4 working buffers Possible panning improvement Painting off-screen faster than direct to screen