The document discusses creating a game called "Angry Developer" using Qt Quick. It describes using QML files and images for the cutting edge UI, JavaScript bindings to add logic and interactivity, and putting the pieces together into a playable game. Key aspects covered include using QML elements and state changes to control gameplay, JavaScript timers to handle random movement and hit/miss detection, and binding JavaScript logic to the QML UI. The document promotes Qt Quick as an easy way to build rich mobile apps by combining declarative QML and JavaScript.

1. Creating a Game using Qt Quick
Angry Developer

2. Creating a Game using Qt Quick
1. Cutting Edge UI
1 QML file & images
2. JavaScript binding
1 JavaScript file
3. Putting it Together

3. Game: Angry Developer
Playing Moving

4. Angry Developer: Missed
Missed
Angry

5. Angry Developer: Hit “Hurrah!”
Destroyed
Happy

6. QML Elements

7. State Change
Playing Angry Happy Pig Moving Pig Destroyed

8. State Change

9. Ball Animation
Bouncing Ball Animation Throw Transition

10. Bouncing Ball Animation

11. Throw Transition

12. QML Logic (2 Timers)
Pig’s Random
Movement
Hit or Miss

13. Timer Pig’s Movement

14. Timer Hit or Miss

15. Step 2. Rich Mobile Apps
JavaScript Expressions
Import JavaScript Files
RSS, XML, JSON, REST
Multi Threaded
JavaScript

16. JavaScript to build Rich Features
Qt Container
JavaScript QML
C++ is not Required

17. JavaScript file: Clock.js

18. QML Binding

19. Putting the Game Together
In 5 easy Steps

20. Step1/5: Create New Application
1 Create new Mobile Qt Application
Select Qt for PR1.3
Remove files
• mainwindow.ui
• mainwindow.h
• mainwindow.cpp

21. 2/5 Add Qt Declarative
2 In Project.pro file add QT += declarative
In our case add this to
NativeQMLJS.pro

22. 3/5 Add Qt Declarative
3 In main.cpp, include QtDeclarative and add code

23. 4/5 Add Files
QML file ,
Add Images and as resources
JavaScript File
* Make sure your JavaScript file name is lowercase

24. 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()
}

25. Demo
Angry Developer

26. 3 Steps for FAST development on
Develop
Download Logic
Qt SDK JavaScript
Create UI
QML

27. 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