Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal

Creating a Game using Qt Quick

Angry Developer

1. Cutting Edge UI 1 QML file & images

2. JavaScript binding

1 JavaScript file

3. Putting it Together

Creating a Game using Qt Quick

Game: Angry Developer

Playing Moving

Angry Developer: Missed

Angry Missed

Angry Developer: Hit “Hurrah!”

Happy Destroyed

QML Elements

State Change

Playing Angry Happy Pig Moving Pig Destroyed

State Change

Ball Animation

Bouncing Ball Animation Throw Transition

Bouncing Ball Animation

Throw Transition

QML Logic (2 Timers)

Pig’s Random

Movement

Hit or Miss

Timer Pig’s Movement

Timer Hit or Miss

Step 2. Rich Mobile Apps

JavaScript Expressions

Import JavaScript Files

RSS, XML, JSON, REST

Multi Threaded JavaScript

JavaScript to build Rich Features

Qt Container

QML JavaScript

C++ is not Required

JavaScript file: Clock.js

QML Binding

Putting the Game Together

In 5 easy Steps

Step1/5: Create New Application

Create new Mobile Qt Application 1

Select Qt for PR1.3

Remove files

• mainwindow.ui

• mainwindow.h

• mainwindow.cpp

2/5 Add Qt Declarative

QT += declarative In Project.pro file add 2

In our case add this to

NativeQMLJS.pro

3/5 Add Qt Declarative

3 In main.cpp, include QtDeclarative and add code

4/5 Add Files

QML file ,

Images and

JavaScript File

* Make sure your JavaScript file name is lowercase

as resources Add

5/5 Add the Binding

Add the binding in QML file and call JavaScript

import "clock.js" as MyClock

…

Text {

id:txttime

text: MyClock.gettime()

}

Demo

Angry Developer

3 Steps for FAST development on

Download Qt SDK

Create UI QML

Develop Logic

JavaScript

Thank You

Download MeeGo http://meego.com/downloads

Get Qt SDK with Qt Quick http://get.qt.nokia.com

Know MADDE http://wiki.maemo.org/MADDE

Questions Rajesh.Lal@nokia.com @rajeshlalnokia