+ All Categories
Home > Technology > Graphics on the Go

Graphics on the Go

Date post: 06-Dec-2014
Category:
Upload: conoagil
View: 1,549 times
Download: 0 times
Share this document with a friend
Description:
Render 2D graphics in cross-platform mobile apps with HTML5, JavaScript, jQuery and PhoneGap. Learn how to draw in a way that will work across a variety of devices.
Popular Tags:
58
Graphics on the Go Gil Irizarry Conoa
Transcript
Page 1: Graphics on the Go

Graphics on the Go

Gil Irizarry

Conoa

Page 2: Graphics on the Go

About Me

• Launched VC News Daily app on iOS and Android. Over 1200 downloads so far.

• Owner and lead engineer at Conoa, a graphics and mobile software firm

[email protected]

• http://www.slideshare.net/conoagil/

Page 3: Graphics on the Go

About Me

• All examples and sample code in this presentation can be found at:

– http://conoa.com/hidden/example.zip

Page 4: Graphics on the Go

Why?

• There are nearly 2 million mobile apps available today. (http://www.pureoxygenmobile.com/how-many-apps-in-each-app-store/ )

• 1.5 years ago, there were 15K new mobile apps released each week. (http://www.nytimes.com/2011/12/12/technology/one-million-apps-and-counting.html )

• For many, interacting with software means interacting with mobile devices (or at least devices that run mobile software).

Page 5: Graphics on the Go

What we will do

• We will learn how to build lightweight mobile apps quickly, using open source tools.

• The apps will be cross-platform.

• However, we must actually pick a platform on which to build and test the apps.

• For this presentation, we will work in Android since the tools are free and easily available. We will do this on Windows.

Page 6: Graphics on the Go

What we will do

• (Mostly) everything presented today in the Android environment will apply to iOS, or has an equivalent in that environment.

• So, let’s get started…

Page 7: Graphics on the Go

Assumptions

• Setting up a development environment is covered in the Making Mobile Apps Quickly workshop.

• For this workshop, we assume that a development environment is in place.

Page 8: Graphics on the Go

PhoneGap

• PhoneGap allows HTML pages to be built as mobile apps.

• HTML pages can include JavaScript and JavaScript libraries, such as jQuery.

• HTML pages can also include HTML5 elements.

Page 9: Graphics on the Go

Canvas

• HTML5 includes a new <canvas> element.

• Canvas allows the rendering of 2D graphics via some low-level primitives.

• It does not include a scene graph API, so you must store rendering information yourself for redrawing a scene.

Page 10: Graphics on the Go

Canvas

• Canvas supports:– Basic shapes– Images– Transparency– Compositing– Transforms– Basic animation

Page 11: Graphics on the Go

Graphics Example 1 – Simple Canvas

• Select the Graphics Example 1 project in the Package Explorer in Eclipse.

• Select Run from the top menu bar

• Once the emulator starts and is finished installing the app, you should see something like this:

Page 12: Graphics on the Go

Graphics Example 1 - Create a Canvas

Page 13: Graphics on the Go

Graphics Example 1 – Simple Canvas

• This example creates a canvas, gets its drawing context, and draws into it.

• It follows a pattern that will soon be familiar: most of the action is happening in JavaScript.

• One problem with this example is that the canvas is a fixed size. Let’s fix that with Example 2.

Page 14: Graphics on the Go

Graphics Example 2 - Better Canvas

Page 15: Graphics on the Go

Graphics Example 2 – Better Canvas

• Example 2 queries the size of the window, then adds a canvas to fit the window. In this way, we can make a canvas that would fit any device.

• Notice that the position of the text is based on the size of the canvas, which is now based on the size of the device window. The text will be centered on any device the app is run, courtesy of a small amount of JavaScript.

• Let’s see what else we can draw.

Page 16: Graphics on the Go

Graphics Example 3 - More Drawing

Page 17: Graphics on the Go

Graphics Example 3 – More Drawing

• This example gives a sense of what can be drawn.

• Canvas uses a drawing system similar to Adobe PostScript or Mac OS QuickDraw. This is not surprising considering that Apple developed the initial implementation of canvas before it became a (nascent) standard.

• Obtain the graphics context of the canvas for issuing drawing commands

Page 18: Graphics on the Go

Canvas Drawing

• beginPath() … fill() or stroke () paradigm

• moveTo() / lineTo() for paths

• arc() for full or partial circles

• bezierTo() for complex curves

• fillText() / strokeText() for text

Page 19: Graphics on the Go

Canvas Drawing

• drawImage()

• colors, either by name or hex values

• gradients, linear or radial, and patterns

• stroke styles, including stipple patterns and line end caps

• push and pop transformations and state

Page 20: Graphics on the Go

Canvas Coordinate System

• (0, 0) is in the upper left corner of the canvas.

• Increasing y is “down” from the screen’s perspective. Increasing x is to the right.

(0, 0)

(0, height)

(width, 0)

Page 21: Graphics on the Go

Let’s make a pattern

• Find an image from the internet and save it to GraphicsExample3/assets/www

• Change this code:– context.fillStyle=gradient;– context.beginPath();– context.arc(55,155,40,0,2*Math.PI);– context.fill();

• To this code:

Page 22: Graphics on the Go

Let’s make a pattern– var img = new Image();– img.src = 'clouds.jpg'; // use your image name here– img.onload = function (e) {

• var pattern = context.createPattern(img, 'repeat'); • context.fillStyle=pattern;• context.beginPath();• context.arc(55,155,40,0,2*Math.PI);• context.fill();

– };

• Shapes that you fill will become masks for the underlying pattern.

Page 23: Graphics on the Go

Graphics Example 4 – Touch

• Everything so far has been static.

• JavaScript has an event system. We saw one in the previous example: onload

• Let’s use other events to add some interactivity.

Page 24: Graphics on the Go

Graphics Example 4 - Touch

Page 25: Graphics on the Go

Touch Events

• HTML5 canvas adds new events for devices:– ontouchstart– ontouchmove– ontouchend

• Note that events come back as arrays. Why?

• Because HTML5 supports multi-touch. We can have multiple simultaneous move events.

Page 26: Graphics on the Go

Touch Events

• Important to remember that event coordinates triggered by the canvas are relative to the full window.

• Events need to be converted to the canvas coordinate system in order to be relevant to the canvas.

• Look at function windowToCanvas (canvas, x, y) in Graphics Example 4 source code (found in assets/www folder).

Page 27: Graphics on the Go

Previewing

• Examples 1 through 3 work equally well as a PhoneGap-powered mobile app and as a web page. If you haven’t already done so, trying running assets/www/index.html in a browser.

• However, by incorporating touch events, we must run Example 4 and other examples incorporating touch in the mobile emulator.

Page 28: Graphics on the Go

Graphics Example 5 - Touch

Page 29: Graphics on the Go

Images

• In addition to stroked shapes, we can draw images.

• Images can be sourced locally or over the network.

• Note how images are loaded:– image.src = filename;– image.onload = function(e) {– };

• If you reference an image before it is loaded, you run the risk that you are trying to use an image before it is available.

Page 30: Graphics on the Go

Images

• Images can be scaled and transformed.

• Canvas supports compositing and alpha.

• Canvas also support shadows.

• The example uses an RGBA color value to render semi-transparent text and have it composited over the image. The text is given a drop shadow.

Page 31: Graphics on the Go

Images over the network

• To access images over the network (or any data at all), remember that network access must be enabled. On Android, network access is not the default. It must be enabled in the AndroidManifest.xml file:

• <uses-permission android:name="android.permission.INTERNET" />

Page 32: Graphics on the Go

Saving and restoring state

• save() pushes the current context onto a stack.

• In addition to the current transformation, attributes are also pushed.

• In the current example, because the text was given a shadow, the shadow applies to the paint object. If we want only the text to have a shadow, we could put the text rendering code inside a save() / restore() block.

Page 33: Graphics on the Go

Graphics Example 6 – Paint and Menus

• Since we can render images into the canvas, we can use a set of images and canvases to create menus.

• We could also draw into the canvases to render the menu options dynamically.

Page 34: Graphics on the Go

Graphics Example 6 – Paint and Menus

Page 35: Graphics on the Go

Graphics Example 6 – Paint and Menus

• Example 6 allows the color and size of the paint brush.

• Separate canvases are used for the icon images, and touch event handlers are attached to the canvases. How else could we accomplish this?

• The image selector and scale checkbox are standard HTML controls that trigger JavaScript events. We could make <div> elements with <img> elements containing the icons, and put event handlers on the images.

Page 36: Graphics on the Go

Animation

• Although we’ve added some interactivity, the examples so far have been a little static.

• Let’s add some animation.

Page 37: Graphics on the Go

Graphics Example 7 – Simple Animation

Page 38: Graphics on the Go

Animation

• self.setInterval () is used to have the page be called again.

• Note that the screen is not cleared and that we are adding to the canvas on each call.

• Instead, let’s clear the canvas each frame. We can transform the previous example into a simple clock app.

Page 39: Graphics on the Go

Graphics Example 8 – Simple Clock

Page 40: Graphics on the Go

Animation

• This example queries the time from the JavaScript Date() object and draws the hands accordingly.

• The canvas is cleared each frame and redrawn.

• If you haven’t already, try running the Graphics Example 8 in a browser (by running assets/www/index.html)

• There is something consistently missing in both the emulator and the browser. What is it?

Page 41: Graphics on the Go

Animation

• The answer is flicker. The same canvas is cleared and redrawn each frame, yet there is no flicker.

• This is because the canvas is inherently double-buffered.

• You could implement your own double buffering scheme because HTML5 allows drawing to off-screen drawables. You could draw off-screen, then swap the off-screen memory to the on-screen canvas. However, HTML5 canvas does this more efficiently.

Page 42: Graphics on the Go

Save and Restore

• Remember save() and restore()?

• Let’s use them to change the clock face so the text is oriented around the face, much like text on a path in some applications.

• Do this by using translate and rotate to change the coordinate system of the fillText() call.

• If you can’t figure out how to do this, look at the commented out code.

Page 43: Graphics on the Go

Graphics Example 8 – Simple Clock

Page 44: Graphics on the Go

Let’s Do Things the Right Way

• We have been cutting some corners, so let’s do things the right way.

• PhoneGap should load the JavaScript when it is ready, otherwise you potentially have the problem similar to when you reference an image before it is loaded.

• Set a device ready event:– document.addEventListener("deviceready", fnName, false);– fnName is the name of the event handler

Page 45: Graphics on the Go

Let’s Do Things the Right Way

• Setting the device ready event requires that the device get set in the config.xml file. This file is not in a default Eclipse project, so it needs to be added manually. It goes in the /res/xml folder.

• <feature name="Device">• <param name="android-package"

value="org.apache.cordova.Device" />• </feature>

Page 46: Graphics on the Go

Let’s Do Things the Right Way

• Look at the clock app. Also, try running it in a browser and look at it there.

• If you look closely enough, you’ll see a stutter on the second hand. This is because setInterval() is a general suggestion to the canvas on when to redraw and not a hard commitment.

• There is a better way: requestAnimationFrame()

Page 47: Graphics on the Go

Let’s Do Things the Right Way

• requestAnimationFrame() is designed to deliver 60 FPS and is made for games or animation.

• However, there is a problem. Many browsers don’t implement it!

• Remember that HTML5 is still not a standard!

Page 48: Graphics on the Go

Let’s Do Things the Right Way

• webkitRequestAnimationFrame() for Chrome, mozRequestAnimationFrame() for Firefox.

• Search for ‘robust polyfill code’ to find ways to deal with this.

• http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

Page 49: Graphics on the Go

Let’s Do Things the Right Way

• Unfortunately, Android and iOS do not support requestAnimationFrame(), at least at the versions we’ve been supporting in these examples.

• In this case, the polyfill code reverts back to setInterval() or setTimeout().

• Another solution is to support only later versions of the OS.

Page 50: Graphics on the Go

Let’s Do Things the Right Way

• http://caniuse.com/requestanimationframe

Page 51: Graphics on the Go

Let’s Do Things the Right Way

• Let’s stop the main Android activity from showing up before the HTML loads.

• <application android:theme="@android:style/Theme.NoTitleBar" >

Page 52: Graphics on the Go

Graphics Example 9 – Bouncing Balls

Page 53: Graphics on the Go

Playing Sound

• In the latest example, a sound is played when a ball bounces.

• To enable this, remember to set the correct permissions in both AndroidManifest.xml and config.xml.

• Create a PhoneGap media object. This requires the use of cordova.js in addition to cordova.jar.

Page 54: Graphics on the Go

Playing Sound

• If you listen closely, you hear that the sounds are not exactly in sync with the bounces.

• This is an inherent problem with PhoneGap’s Media class.

• To alleviate, use an uncompressed sound file.

• Also, there is the Low Latency Audio Plugin for PhoneGap.

Page 55: Graphics on the Go

Sprites

• HTML5 does not support sprites natively but, now that we know how to do animation and draw images, we can simulate them.

• drawImage() allows a subset of an image to be drawn.

• Every so many frames, we can draw a different part of a larger image. The larger image can be made up of different sprite images.

Page 56: Graphics on the Go

Graphics Example 10 – Bouncing Balls

Page 57: Graphics on the Go

What about 3D?

• An emerging standard for 3D graphics in a web page.

• However, it is not supported by iOS or Android browser and has no support within PhoneGap.

Page 58: Graphics on the Go

Thank You!


Recommended