game development with qml - chall3ng3r

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

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

Highway Racer on Nokia Store

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!!!

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

- Qt and Qt Quick Platform Overview

- Future of Qt Quick

Introduction to QML

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

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

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

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

- QML User Interface Elements

- Graphics Performance

- Transitions & States

Game Development with QML

QML User Interface Elements Basic UI Elements Containers or

Layout Managers Views or Pages Lets see in

action…

QML User Interface Elements – Cont.

Qt Quick Components

More Components Streamline

Presentation on Meego and Symbian

Lets see in action…

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

action…

Transitions and States Built-in Easy Customizable Lets make

some…

- Box2D QML Plugin - Basics

- Sound Engine

QML Plugins for Game Development

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)

Sound Engine Qt Game Enabler Lets play…

- Sketching Storyboard

- Defining and Locking Features

Lets Make a Ping Pong Game!

Features & Sketching Storyboard

Pencil and Paper Write Everything Lets Draw…

Splash Screen Main Menu Level 1 Pause Menu Level End

Lets Talk – Q&A

Contact Me: Web: chall3ng3r.com Email: ifaisal@orison.biz Twitter/FB/Skype: chall3ng3r

Go home, but remember to come back tomorrow!

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

- Setting Up Qt Creator Project

- Box2D World and Bodies

- Game Logic

Coding Ping Pong Game

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

- Sound Effects and Music

Adding Finishing Touches

Sound Effects and Music Qt GameEnabler Online Sound Libraries

http://www.freesound.org/

- Developer Signing and On-Device Testing

- Icons and Packaging

Preparing for Publishing

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

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

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

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

Advance QML Tips & Tricks

Tips & Tricks Content Protection

Decompress SIS Embed Code

OpenGL Acceleration Nokia Remote Device Access

We Made It – Thank You

Contact Me: Web: chall3ng3r.com Email: ifaisal@orison.biz Twitter/FB/Skype: chall3ng3r