angry developer: creating a game in qml and javascript for meego n9 @irajlal
DESCRIPTION
Here is how you can create a simple but advanced Game in QML with JavaScript. Download code: http://tinyurl.com/AngryDeveloperTRANSCRIPT
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 [email protected] @rajeshlalnokia