Game Development with QML - chall3ng3r

33
Game Development with QML for Nokia Devices By Faisal Iqbal – Mobile Specialist

description

Game Development with QMLThe slide deck from my talk at Nokia Developers Workshop (28029 Feb 2012) in Islamabad-PK.You are free to download and modify this presentation howerver, if you are going to use this PowerPoint presentation, kindly mention me as the original author of the presentation.

Transcript of Game Development with QML - chall3ng3r

Page 1: Game Development with QML - chall3ng3r

Game Development with QML for Nokia DevicesBy Faisal Iqbal – Mobile Specialist

Page 2: Game Development with QML - chall3ng3r

About Me Faisal Iqbal a.k.a. chall3ng3r Adobe Flash, MS .Net, Nokia Qt 10+ Years Professional Experience 6+ Years with Mobile Technologies Nokia Developer Champion for 5 Years Won Local and International Mobile Dev.

Contests

Page 3: Game Development with QML - chall3ng3r

Highway Racer on Nokia Store

Page 4: Game Development with QML - chall3ng3r

Some Achievements Highway Racer

Developed in 1 Month - Graphics + Game Engine

Aug 2011 – Released on Nokia Store (previously Ovi)

September 2011Won Nokia & P@SHA MakeMyApp Challenge 2011

Feb 2011 – Over 280,000 Downloads!!!

Page 5: Game Development with QML - chall3ng3r

Agenda

Workshop Day 1

Introduction to QML Games Development with QML -- Lunch Break QML Plugins for Game

Development -- Tea Break Lets Make a Ping Pong Game

Page 6: Game Development with QML - chall3ng3r

- Qt and Qt Quick Platform Overview

- Future of Qt Quick

Introduction to QML

Page 7: Game Development with QML - chall3ng3r

Qt and Qt Quick Platform Overview Qt - Released publicly in 1995 by Trolltech Popular on Embedded platforms & Linux (KDE) 2010 - Nokia Qt SDK v1.0 was released (Qt 4.6) Qt Quick runs QML, introduced with Qt 4.7 - 2011 QML = Qt Meta Language / Qt Modeling Language

Page 8: Game Development with QML - chall3ng3r

Qt Quick - QML

import QtQuick 1.0

Rectangle { id: canvas width: 200 height: 200 color: "blue" Image {

id: logo source: "pics/logo.png“anchors.centerIn: parent x: canvas.height / 5

}}

JavaScript CSS GUI Layer for Qt Apps Animations and Transitions Fluid UI Performance

(60FPS) Media APIs Qt Mobility APIs Qt C++ Plugins

Page 9: Game Development with QML - chall3ng3r

Future of Qt Quick More Platforms like QNX, Android, iOS and maybe WP ;) Qt5 (summer 2012)

Powerful and high-performing C++ API QML as the best way to create rich interfaces Qt Quick 2 in Qt5 QML is our bet in "the next step in GUI programming" Should apply for most use-cases Qt Quick 2 uses the Google V8 Javascript Engine

Superfast JS support Architectures: x86, x86-64, ARM

Page 10: Game Development with QML - chall3ng3r

Future of Qt Quick – Continued… Qt Quick 3D QML bindings for Qt3D Access to OpenGL and 3D graphics hardware QML Item3D elements live in 3D space

OpenGL, 3D hardware, and C++ convert this to 2D on screen Desktop support will continue to exist

Qt Quick components for Desktop are ready Qt Webkit in Qt5

Webkit 2 architecture

Page 11: Game Development with QML - chall3ng3r

- QML User Interface Elements

- Graphics Performance

- Transitions & States

Game Development with QML

Page 12: Game Development with QML - chall3ng3r

QML User Interface Elements Basic UI Elements Containers or

Layout Managers Views or Pages Lets see in

action…

Page 13: Game Development with QML - chall3ng3r

QML User Interface Elements – Cont.

Qt Quick Components

More Components Streamline

Presentation on Meego and Symbian

Lets see in action…

Page 14: Game Development with QML - chall3ng3r

Graphics Performance Smooth & Fluid vs J2ME vs Flash Lite vs HTML5 Apps Lets see in

action…

Page 15: Game Development with QML - chall3ng3r

Transitions and States Built-in Easy Customizable Lets make

some…

Page 16: Game Development with QML - chall3ng3r

- Box2D QML Plugin - Basics

- Sound Engine

QML Plugins for Game Development

Page 17: Game Development with QML - chall3ng3r

Box2D QML Plugin - Basics What is Box2D Basic Concepts

World Bodies Joints

Lets play…

Why Use Box2D Examples

Angry Birds Moto Trial Racer Flying Bus – (No

Box2D)

Page 18: Game Development with QML - chall3ng3r

Sound Engine Qt Game Enabler Lets play…

Page 19: Game Development with QML - chall3ng3r

- Sketching Storyboard

- Defining and Locking Features

Lets Make a Ping Pong Game!

Page 20: Game Development with QML - chall3ng3r

Features & Sketching Storyboard

Pencil and Paper Write Everything Lets Draw…

Splash Screen Main Menu Level 1 Pause Menu Level End

Page 21: Game Development with QML - chall3ng3r

Lets Talk – Q&A

Contact Me: Web: chall3ng3r.com Email: [email protected] Twitter/FB/Skype: chall3ng3r

Page 22: Game Development with QML - chall3ng3r

Go home, but remember to come back tomorrow!

Page 23: Game Development with QML - chall3ng3r

Agenda

Workshop Day 2

Coding Ping Pong Game Adding Finishing Touches -- Lunch Break Preparing for Publishing -- Tea Break Advance QML Tips & Tricks Closing Notes by P@SHA and Telenor

Page 24: Game Development with QML - chall3ng3r

- Setting Up Qt Creator Project

- Box2D World and Bodies

- Game Logic

Coding Ping Pong Game

Page 25: Game Development with QML - chall3ng3r

Setting Up The Environment New Qt Creator Project Box2D Libraries and Plugin Game GUI Game Logic

Page 26: Game Development with QML - chall3ng3r

- Sound Effects and Music

Adding Finishing Touches

Page 27: Game Development with QML - chall3ng3r

Sound Effects and Music Qt GameEnabler Online Sound Libraries

http://www.freesound.org/

Page 28: Game Development with QML - chall3ng3r

- Developer Signing and On-Device Testing

- Icons and Packaging

Preparing for Publishing

Page 29: Game Development with QML - chall3ng3r

Developer Signing Visit: http://publish.nokia.com/ Request UIDs from Nokia Publisher

Team Install CODA and PerfMon on Device Sign and Test On Device

Page 30: Game Development with QML - chall3ng3r

Icons and Packaging PNG and SVG-Tiny SIS for Symbian OS DEB for Meego OS

Page 31: Game Development with QML - chall3ng3r

- Content Protection- OpenGL GPU Acceleration- Nokia Remote Device Access

Advance QML Tips & Tricks

Page 32: Game Development with QML - chall3ng3r

Tips & Tricks Content Protection

Decompress SIS Embed Code

OpenGL Acceleration Nokia Remote Device Access

Page 33: Game Development with QML - chall3ng3r

We Made It – Thank You

Contact Me: Web: chall3ng3r.com Email: [email protected] Twitter/FB/Skype: chall3ng3r