33
Computer Graphics on Mobile Devices on Mobile Devices VL SS2010 3.0 ECTS Peter Rautek

Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Embed Size (px)

Citation preview

Page 1: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Computer Graphics on Mobile Deviceson Mobile Devices

VL SS2010 3.0 ECTS

Peter Rautek

Page 2: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

MotivationSmartphonemarkt starkwachsendI t tiIntegration von

Kamera3D Grafik3D GrafikInternetPCTelefon

AnwendungenS i lSpieleAugmented RealityVisualisierung (GoogleVisualisierung (Google Earth, Maps, etc.)TV

Peter Rautek 1

Page 3: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Vorlesungsteil

3 EinheitenEi h it IEinheit I

Vorbesprechung der LaborübungAndroid Basics

Einheit IIEinheit IIAdvanced Android TopicsOpenGL ES

Einheit IIIEinheit IIIPlattformübergreifende Entwicklung

Peter Rautek 2

Page 4: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Fähigkeiten für die VL

Mobile PlattformenAndroidAndroid

ComputergraphikOpenGL ES 1.0 (und 2.0)Ev Bildbearbeitung Modellierung etcEv. Bildbearbeitung, Modellierung, etc.

Software EngineeringVersion ControlEclipse oder andere EntwicklungsumgebungEclipse oder andere EntwicklungsumgebungJava

Peter Rautek 3

Page 5: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Laborübungsteil

ZieleEntwicklung eines gemeinsamen Spielesg g pOpen Source VeröffentlichungEv. Veröffentlichung am Android Marketg

Gruppenarbeit (in 2er Gruppen)Implementieren eines Levels (zu Hause oder im VisLab)Implementieren eines Levels (zu Hause oder im VisLab)

ZwischengesprächAbgabegesprächAbgabegesprächPräsentation

OptionalOptionalFAQ Event (vorraussichtlich 2 Events)

Peter Rautek 4

Page 6: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

FAQ Events

Informelles Treffen (offen und ohne fixe Struktur)Kurzer Vortragsteil über häufige Probleme undKurzer Vortragsteil über häufige Probleme und LösungenKurz Probleme und Erfolge besprechenKurz Probleme und Erfolge besprechen

Level Entwürfe disskutierenM i i h lMeinungen einholen

Coding SessionAblauf:

Probleme postenpCode commitLaptop mitbringen!p p g

Peter Rautek 5

Page 7: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Zwischengespräch

Interne Präsentation der (vorläufigen) ErgebnisseErgebnisse15-30 Minuten pro GruppeStatusbestimmungFeedback zuFeedback zu

StatusGameplay

Peter Rautek 6

Page 8: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

The Big and Incredibly Funny (Inverse) Treasure Hunt

Inverse SchatzsucheH f d G ldHerausforderung: Gold

VerlierenVersteckenAusgebenAusgeben

Individuelle Levels Originelle UmsetzungGame PlayGame PlayAnsprechende Graphik

Peter Rautek 7

Page 9: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Laborübungsframework

MenüLauncher für SpielHelpHelpAboutCreditsEnable/DisableEnable/Disable Debugging

Peter Rautek 8

Page 10: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Laborübungsframework

MapZ fälliZufällige Zuordnung von LevelsLauncher für LevelsLauncher für LevelsSpielerfortschrittLevelicons

Peter Rautek 9

Page 11: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Laborübungsframework

DebugI di id ll H l A ti itIndividuelle Help ActivityIndividuelle Level Activity

CheckboxAutomatischer Start desAutomatischer Start des spezifizierten Levels

Explizite Zuordnung der Levels

Peter Rautek 10

Page 12: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Demo

Peter Rautek 11

Page 13: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Spielentwurf

Von Anfang an beachtenSpielgeschichteSpielgeschichteGame playAbbildung von Game play auf HardwareInput/OutputInput/Output

EinschränkungenEmulator ist nicht ident mit HardwareInhalteInhaltePerformance

Peter Rautek 12

Page 14: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Inhalte

Creative Commons2D G hik2D Graphik3D ModelleLevel editorA l it /HilfAnleitung/HilfeTutorialSound

Peter Rautek 13

Page 15: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Laborübungsablauf

3 PhasenPhase I – Alles ausprobieren und Level spezifizierenPhase I – Alles ausprobieren und Level spezifizieren

Aufsetzen der EntwicklungsumgebungAndroid „Hello World“VL Framework ausprobierenEigenes Level EntwerfenLevel Beschreibung (Hilfe) integrierenLevel Beschreibung (Hilfe) integrierenLevel einchecken (=Anmeldung zur VL)

Ph II I l i d F k i li äPhase II – Implementieren der FunktionalitätPhase III – Testen und Verschönern

Peter Rautek 14

Page 16: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Laborübungsablauf

Peter Rautek 15

Page 17: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Phase I

DemoDemoVoraussetzung

EclipseEclipseSVNAndroidAndroid

EclipseLevel IntegrationLevel IntegrationAndroidManifestH l A i iHelpActivityEmulator

Peter Rautek 16

Page 18: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Integration der Levels

Zwei MöglichkeitenDirekt im “trunk” arbeiten (empfohlen)Direkt im “trunk” arbeiten (empfohlen)Eigenes Setup – Level später integrieren

Auf jeden FallNamenskonflikte vermeidenNamenskonflikte vermeidenConventions (lxx_...)

LayoutStringsStringsView Ids (User-interface)M sic So nds Te t res etcMusic, Sounds, Textures, etc.

Peter Rautek 17

Page 19: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Überblick

Ei l it VLEinleitung zur VL

Fragen ?Android

Peter Rautek 18

Page 20: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Android

Software stack for mobile devices

Peter Rautek 19

Page 21: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Android Framework

SDK JavaNDK C d C++NDK C and C++No native applicationsppEmulator / Hardware

Peter Rautek 20

Page 22: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Android Specific Concepts

ActivityA screen the user can see and interact with

ContentProviderExchanging contentg g

PermissionsUser will have to grant permissions at install timeUser will have to grant permissions at install time

ServiceA background processA background process

BroadcastEvents that might be of interestEvents that might be of interest

IntentLate binding mechanismLate binding mechanism

Peter Rautek 21

Page 23: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Demo

HomeActivity ManagerActivity ManagerContent ProviderNotification ManagerLocation ManagerPackage ManagerCameraCameraIntentsM kMarketPermissions

Peter Rautek 22

Page 24: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Activity

Basic concept for user interactionVi & L tViews & LayoutsStarted with intentReturn result to calling activityR i it th dRuns in its own thread

Must be kept reactivepActivity not responding (ANR) dialog(ANR) dialog

Peter Rautek 23

Page 25: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Activity Lifecycle

State changesCreateCreateStart ResumePausePause StopDestroy

MultitaskingMultitaskingMaintain continuoususer interaction

Peter Rautek 24

Page 26: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Activity Lifecycle

ExampleUser plays a gameUser plays a game Answers a phone callEnters info into calendarService syncs calendar email etcService syncs calendar, email, etc.User continuous the conversationEnds the phone callGoes to toilet - phone enters sleep modeGoes to toilet phone enters sleep modeUser continuous playing game

Peter Rautek 25

Page 27: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Activity Lifecycle

Activity might be Paused:Paused:

Pause all running threadsStore the state

Resumed:Resumed:Restore stateR ll th dResume all threads

Destroyed:Stop all threadsStore persistent objectsStore persistent objects

Peter Rautek 26

Page 28: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Persistence

Xml File Name value pairsName, value pairsE.g., store text, store user progress

InstanceStateE g store cursor position music track etcE.g., store cursor position, music track, etc.onSaveInstanceState(Bundle out)onRestoreInstaceState(Bundle in)onCreate(Bundle in)onCreate(Bundle in)

DatabasePlain text files

Peter Rautek 27

Page 29: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Resources

Resource (./res folder)DrawablesDrawablesLayoutsValuesRaw (sound video etc )Raw (sound, video, etc.)

Automatically generated R file (./gen folder)Easy to referenceEclipse auto-completionEclipse auto-completion

Configuration dependentChanged automatically

Peter Rautek 28

Page 30: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Emulator

Android Virtual Device (AVD)C fi tiConfigurationAVD ManagergInteraction withEclipseEclipse Functionkeys

F1-F12F6: TrackballF6: TrackballCtrl F12: Landscape – Portrait ModeOpenGL ES: no performance estimate

Peter Rautek 29

Page 31: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Development with Eclipse

BreakpointsV i blVariablesPerspectivespLogCat

FiltFiltersCallstackSubclipse

T itTeam itemBrowserImport

Peter Rautek 30

Page 32: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Where to Start? – Links!

Download these slides and explore the linksCGMD Homepagep ghttp://www.cg.tuwien.ac.at/courses/CGMD/

Google IO Videos:A d id b iAndroid basics

http://sites.google.com/site/io/building-an-android-application

Real time games for Androidghttp://code.google.com/events/io/2009/sessions/WritingRealTimeGamesAndroid.html

Khronos OpenGL EShttp://www.khronos.org/opengles/1 X/p // o os o g/ope g es/ _ /

Blogs about Android and OpenGL ESRobert Green http://www.rbgrn.net/topic/programming/allp g p p g g

Replica Island http://replicaisland.blogspot.com/

Per-Erik Bergman http://blog.jayway.com/author/pererikbergman/Per Erik Bergman http://blog.jayway.com/author/pererikbergman/

Peter Rautek 31

Page 33: Computer Graphics on Mobile Deviceson Mobile Devices · 3D Grafik Internet PC Telefon Anwendungen SilSpiele Augmented Reality Visualisierung (Google Earth, Maps, etc.) TV Peter Rautek

Danke für Ihre Aufmerksamkeit

F ?Fragen?

Viel Spass beim Coden!Peter Rautek 32

Viel Spass beim Coden!