Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal
3 likes6,660 views
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.
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal
- 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
- 11. Throw Transition
- 12. QML Logic (2 Timers) Pig’s Random Movement Hit or Miss
- 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
- 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