Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

8,621 views

Published on

Here is how you can create a simple but advanced Game in QML with JavaScript.
Download code: http://tinyurl.com/AngryDeveloper

Published in: Technology

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

  1. 1. Creating a Game Angry Developer
  2. 2. Creating a Game using Qt Quick1. Cutting Edge UI 1 QML file & images2. JavaScript binding 1 JavaScript file3. Putting it Together
  3. 3. Game: Angry DeveloperPlaying Moving
  4. 4. Angry Developer: Missed MissedAngry
  5. 5. Angry Developer: Hit “Hurrah!” DestroyedHappy
  6. 6. QML Elements
  7. 7. State ChangePlaying Angry Happy Pig Moving Pig Destroyed
  8. 8. State Change
  9. 9. Ball AnimationBouncing Ball Animation Throw Transition
  10. 10. Bouncing Ball Animation
  11. 11. Throw Transition
  12. 12. QML Logic (2 Timers) Pig’s Random Movement Hit or Miss
  13. 13. Timer Pig’s Movement
  14. 14. Timer Hit or Miss
  15. 15. Step 2. Rich Mobile Apps JavaScript Expressions Import JavaScript Files RSS, XML, JSON, REST Multi Threaded JavaScript
  16. 16. JavaScript to build Rich Features Qt Container JavaScript QML C++ is not Required
  17. 17. JavaScript file: Clock.js
  18. 18. QML Binding
  19. 19. Putting the Game Together In 5 easy Steps
  20. 20. Step1/5: Create New Application1 Create new Mobile Qt Application Select Qt for PR1.3 Remove files • mainwindow.ui • mainwindow.h • mainwindow.cpp
  21. 21. 2/5 Add Qt Declarative2 In Project.pro file add QT += declarative In our case add this to NativeQMLJS.pro
  22. 22. 3/5 Add Qt Declarative3 In main.cpp, include QtDeclarative and add code
  23. 23. 4/5 Add Files QML file , Add Images and as resources JavaScript File* Make sure your JavaScript file name is lowercase
  24. 24. 5/5 Add the BindingAdd the binding in QML file and call JavaScript import "clock.js" as MyClock … Text { id:txttime text: MyClock.gettime() }
  25. 25. Demo Angry Developer

×