Creating a Game        Angry Developer
Creating a Game using Qt Quick1. Cutting Edge UI  1 QML file & images2. JavaScript binding   1 JavaScript file3. Putting i...
Game: Angry DeveloperPlaying                 Moving
Angry Developer: Missed                       MissedAngry
Angry Developer: Hit “Hurrah!”                       DestroyedHappy
QML Elements
State ChangePlaying   Angry   Happy   Pig Moving   Pig Destroyed
State Change
Ball AnimationBouncing 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             ...
JavaScript to build Rich Features       Qt Container        JavaScript    QML          C++ is not Required
JavaScript file: Clock.js
QML Binding
Putting the Game Together     In 5 easy Steps
Step1/5: Create New Application1   Create new Mobile Qt Application    Select Qt for PR1.3    Remove files    • mainwindow...
2/5 Add Qt Declarative2   In Project.pro file add    QT += declarative                              In our case add this t...
3/5 Add Qt Declarative3   In main.cpp, include QtDeclarative and add code
4/5 Add Files             QML file ,    Add      Images and        as resources             JavaScript File* Make sure you...
5/5 Add the BindingAdd the binding in QML file and call JavaScript import "clock.js" as MyClock … Text {  id:txttime  text...
Demo       Angry Developer
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal
Nächste SlideShare
Wird geladen in …5
×

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

8.447 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
2 Kommentare
2 Gefällt mir
Statistik
Notizen
Keine Downloads
Aufrufe
Aufrufe insgesamt
8.447
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
567
Aktionen
Geteilt
0
Downloads
74
Kommentare
2
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×