ShopScene.qml Example File

demos/ChickenOutbreak2/qml/ShopScene.qml
 import QtQuick 2.0
 import Felgo 3.0

 SceneBase {
   id: shopScene

   property alias scene: shopScene

   onBackButtonPressed: {
     goBackToMenu()
   }

   function goBackToMenu() {
     audioManager.play(audioManager.idMENUCLICK)
     if(windowMainItem.lastState === "gameOver") {
       window.state = "gameOver"
     } else {
       window.state = "main"
     }
   }

   Component.onCompleted: opacity = 1

   MultiResolutionImage {
     source: "../assets/background-wood2.png"
     anchors.centerIn: parent
   }

   Image {
     source: "../assets/sign.png"
     anchors.horizontalCenter: parent.horizontalCenter
     y: -118
     width: 300
     height: 270
     z: 5
   }
   Image {
     source: "../assets/sign.png"
     x: 200
     y: 100
     width: 100
     height: 85
     z: 4
     mirror: true

     Row {
       anchors.horizontalCenter: parent.horizontalCenter
       y: 55
       spacing: 16
       rotation: 2

       CoinDisplay {
         customCoins: store.saveit.balance
         displayCustomCoins: true
         displayBonusCoins: false
         visible: !system.desktopPlatform
       }

       CoinDisplay {

       }
     }
   }

   Flickable {
     id: flickable
     z: 10
     width: shopScene.width
     height: shopScene.height

     contentWidth: row.width
     contentHeight: row.height

     flickableDirection: Flickable.HorizontalFlick
     //clip: true
     //boundsBehavior: Flickable.StopAtBounds
     maximumFlickVelocity: 1300
     //flickDeceleration: 1000

     // used to calculate the movement direction during picking
     property real __oldPos: 0
     property bool __movingRight: false

     // item which is "selected" so the middle of the 3 grid items
     // should be set once the snap to grid was finished to avoid wrong selected item (out of range, placeholder)
     //property int selectedItem: contentX/column.gridSize-1
     //property variant selectedCoil: column.children[selectedItem+2]

     onContentXChanged: {
       // calculate if moving up or down
       if(__oldPos-contentX > 0) {
         __movingRight = false
       } else {
         __movingRight = true
       }
       __oldPos = contentX

       // switch borders to we can have an endless scrolling
       //      if(flickable.contentY >= (flickable.contentHeight-column.gridSize*3)) {
       //        flickable.contentY = column.gridSize*2
       //      }
       //      if(flickable.contentY <= column.gridSize) {
       //        flickable.contentY = (flickable.contentHeight-column.gridSize*4)
       //      }
     }

     onMovementEnded: {
       snapToGrid()
     }

     function snapToGrid() {
       // snap to next grid Size
       var rest = flickable.contentX%row.gridSize
       console.debug("rest " + rest)
       if(rest) {
         if(!__movingRight) {
           if(rest > row.gridSize-row.gridSize/3) {
             numberanimation.to = flickable.contentX+(row.gridSize-rest)
           } else {
             numberanimation.to = flickable.contentX-rest
           }
         } else {
           if(rest > row.gridSize/3) {
             numberanimation.to = flickable.contentX+row.gridSize-rest
           } else {
             numberanimation.to = flickable.contentX-rest
           }
         }
         numberanimation.start()
       }
     }

     NumberAnimation on contentX {
       id: numberanimation
       duration: 250
       running: false
       onStopped: {
         // should be set once the snap to grid was finished to avoid wrong selected item (out of range, placeholder)
         //selectedItem = flickable.contentY/column.gridSize-1
       }
     }

     Row {
       id: row
       height: parent.height

       property real gridSize:  flickable.width

       Item {
         height: shopScene.height
         width: shopScene.width
         // facebook does not work on desktop
         visible: !(system.desktopPlatform && system.publishBuild) && !gameNetwork.facebookConnectionSuccessful && !settings.getValue("facebookLinked")

         MenuText {
           id: facebookTitle
           text: qsTr("Connect with Facebook")
           anchors.horizontalCenter: parent.horizontalCenter
           y: 43
           font.pixelSize: 40
           rotation: -2
         }
         Image {
           id: facebookImage
           source: "../assets/facebook_shop.png"
           anchors.horizontalCenter: parent.horizontalCenter
           y: 170
           width: 225
           height: 200
         }
         MenuText {
           text: qsTr("Earn 40 coins by connecting to facebook")
           anchors.horizontalCenter: parent.horizontalCenter
           y: 90
           rotation: -2
         }
         MenuText {
           text: qsTr("Challenge your friends via facebook")
           anchors.horizontalCenter: parent.horizontalCenter
           y: 113
           rotation: -2
           color: "#ffffff"
         }
         MenuButton {
           anchors.horizontalCenter: parent.horizontalCenter
           y: 385

           text: qsTr("Connect now")

           onClicked: {
             audioManager.play(audioManager.idMENUCLICK)
             gameNetwork.connectFacebookUser()
           }
         }
       }

       Item {
         height: shopScene.height
         width: shopScene.width
         // Adds do not work on desktop, so no need for Add removal
         visible: !(system.desktopPlatform && system.publishBuild)
         opacity: (store.noAdsGood.purchased === true) ? 0.5 : 1
         MenuText {
           id: noAddsTitle
           text: qsTr("No Ads")
           anchors.horizontalCenter: parent.horizontalCenter
           y: 43
           font.pixelSize: 40
           rotation: -2
         }
         MenuText {
           text: qsTr("Remove the advertisement from the game")
           anchors.horizontalCenter: parent.horizontalCenter
           y: 90
           rotation: -2
         }
         Image {
           id: buyNoAddsImage
           source: "../assets/buy_noads.png"
           anchors.horizontalCenter: parent.horizontalCenter
           y: 190
           width: 200
           height: 172
         }
         MenuButton {
           anchors.horizontalCenter: parent.horizontalCenter
           y: 385

           text: (store.noAdsGood.purchased === true) ? qsTr("Already purchased") : qsTr("Get from Store")

           onClicked: {
             audioManager.play(audioManager.idMENUCLICK)
             store.buyItem(store.noAdsGood.itemId)
             console.debug("buy No Ads pressed")
           }
         }
       }

       Item {
         height: shopScene.height
         width: shopScene.width
         // NonConsumableGoods do not work on desktops currently.
         visible:  !(system.desktopPlatform && system.publishBuild)
         opacity: (store.blackHen.purchased === true) ? 0.5 : 1
         MenuText {
           id: blackHenTitle
           text: qsTr("Black Hen")
           anchors.horizontalCenter: parent.horizontalCenter
           y: 43
           font.pixelSize: 40
           rotation: -2
         }
         MenuText {
           text: qsTr("A new badass looking skin for your hen")
           anchors.horizontalCenter: parent.horizontalCenter
           y: 90
           rotation: -2
         }
         Image {
           id: buyBlackHenImage
           source: "../assets/chicken2-fly.png"
           anchors.horizontalCenter: parent.horizontalCenter
           y: 170
           width: 200
           height: 200
         }
         MenuButton {
           anchors.horizontalCenter: parent.horizontalCenter
           y: 385

           text: (store.blackHen.purchased === true) ? qsTr("Already purchased") : qsTr("Get from Store")

           onClicked: {
             audioManager.play(audioManager.idMENUCLICK)
             console.debug("Get skin from store pressed")
             store.buyItem(store.blackHen.itemId)
           }
         }
       }

       Item {
         height: shopScene.height
         width: shopScene.width
         MenuText {
           id: teleportTitle
           text: qsTr("1x Teleport")
           anchors.horizontalCenter: parent.horizontalCenter
           y: 43
           font.pixelSize: 40
           rotation: -2
         }
         Image {
           id: buyTeleportImage
           source: "../assets/teleport.png"
           anchors.horizontalCenter: parent.horizontalCenter
           y: 170
           width: 225
           height: 200
         }
         Text {
           text: qsTr("20 Coins")
           anchors.right: teleportTitle.right
           anchors.rightMargin: -20
           anchors.top: teleportTitle.bottom
           anchors.topMargin: -16
           font.pixelSize: 24
           color: "#ffffff"
           font.family: fontHUD.name
           rotation: -2
         }
         MenuText {
           text: qsTr("Swipe up to stop time and teleport to safety")
           anchors.horizontalCenter: parent.horizontalCenter
           y: 90
           rotation: -2
         }
         MenuText {
           text: "( " + teleportCount + qsTr(" remaining )")
           anchors.horizontalCenter: parent.horizontalCenter
           y: 113
           rotation: -2
           color: "#ffffff"
         }
         MenuButton {
           anchors.horizontalCenter: parent.horizontalCenter
           y: 385

           text: qsTr("Buy with Coins")

           onClicked: {
             console.debug("Get with Coins pressed")
             if(store.money.balance >= 20) {
               teleportCount++
               store.takeItem("currency_money_id",20)
               audioManager.play(audioManager.idPLING)
             } else {
               if(!system.desktopPlatform) {
                 currencyPackPage.isMoney = true
                 currencyPackPage.opacity = 1
               }
             }
           }
         }
       }

       Item {
         height: shopScene.height
         width: shopScene.width
         MenuText {
           id: parachuteTitle
           text: qsTr("1x Parachute")
           anchors.horizontalCenter: parent.horizontalCenter
           y: 43
           font.pixelSize: 40
           rotation: -2
         }
         Image {
           id: buyParachuteImage
           source: "../assets/parachute.png"
           anchors.horizontalCenter: parent.horizontalCenter
           y: 170
           width: 180
           height: 200
         }
         Text {
           text: qsTr("10 Coins")
           anchors.right: parachuteTitle.right
           anchors.rightMargin: -20
           anchors.top: parachuteTitle.bottom
           anchors.topMargin: -16
           font.pixelSize: 24
           color: "#ffffff"
           font.family: fontHUD.name
           rotation: -2
         }
         MenuText {
           text: qsTr("Touch to pull out that little helper")
           anchors.horizontalCenter: parent.horizontalCenter
           y: 90
           rotation: -2
         }
         MenuText {
           text: "( " + parachuteCount + qsTr(" remaining )")
           anchors.horizontalCenter: parent.horizontalCenter
           y: 113
           rotation: -2
           color: "#ffffff"
         }
         MenuButton {
           anchors.horizontalCenter: parent.horizontalCenter
           y: 385

           text: qsTr("Buy with Coins")

           onClicked: {
             console.debug("Get with Coins pressed")
             if(store.money.balance >= 10) {
               parachuteCount++
               audioManager.play(audioManager.idPARACHUTE)
               audioManager.play(audioManager.idPLING)
               store.takeItem("currency_money_id",10)
             } else {
               if(!system.desktopPlatform) {
                 currencyPackPage.isMoney = true
                 currencyPackPage.opacity = 1
               }
             }
           }
         }
       }
       Item {
         height: shopScene.height
         width: shopScene.width
         // No real money on desktops, so no virtual money too.
         visible: !(system.desktopPlatform && system.publishBuild)
         MenuText {
           id: coinPacksTitle
           text: qsTr("Coins")
           anchors.horizontalCenter: parent.horizontalCenter
           y: 43
           font.pixelSize: 40
           rotation: -2
         }
         MenuText {
           text: qsTr("With coins you can buy power ups")
           anchors.horizontalCenter: parent.horizontalCenter
           y: 90
           rotation: -2
         }
         Image {
           id: buyCoinsImage
           source: "../assets/buy_currency_4.png"
           anchors.horizontalCenter: parent.horizontalCenter
           y: 170
           width: 200
           height: 200
         }
         MenuButton {
           anchors.horizontalCenter: parent.horizontalCenter
           y: 385

           text: qsTr("Get from Store")

           onClicked: {
             currencyPackPage.isMoney = true
             currencyPackPage.opacity = 1
           }
         }
       }

       Item {
         height: shopScene.height
         width: shopScene.width
         // No real money on desktops, so no virtual money too.
         visible: !(system.desktopPlatform && system.publishBuild)
         MenuText {
           id: saveitTitle
           text: qsTr("Angels")
           anchors.horizontalCenter: parent.horizontalCenter
           y: 43
           font.pixelSize: 40
           rotation: -2
         }
         MenuText {
           text: qsTr("Save your chicken from death")
           anchors.horizontalCenter: parent.horizontalCenter
           y: 90
           rotation: -2
         }
         Image {
           id: saveitImage
           source: "../assets/buy_saveit_1.png"
           anchors.horizontalCenter: parent.horizontalCenter
           y: 170
           width: 200
           height: 200
         }
         MenuButton {
           anchors.horizontalCenter: parent.horizontalCenter
           y: 385

           text: qsTr("Get from Store")

           onClicked: {
             currencyPackPage.isMoney = false
             currencyPackPage.opacity = 1
           }
         }
       }
     }
   }

   Image {
     id: arrowLeft
     source: "../assets/arrow-left.png"
     width: 15
     height: 70
     anchors.verticalCenter: parent.verticalCenter
     anchors.left: parent.left
     anchors.leftMargin: 5

     opacity: flickable.contentX <= 0 ? 0 : 0.5
     z: 10
     Behavior on opacity {
       // the cross-fade animation should last 350ms
       NumberAnimation { duration: 350 }
     }

     MouseArea {
       anchors.fill: parent
       onClicked: {
         if(flickable.contentX-row.gridSize/3 < 0)
           return
         flickable.contentX-=row.gridSize/3+10
         flickable.snapToGrid()
       }
     }
   }

   Image {
     id: arrowRight
     source: "../assets/arrow-left.png"
     width: 15
     height: 70
     mirror: true
     anchors.verticalCenter: parent.verticalCenter
     anchors.right: parent.right
     anchors.rightMargin: 5
     opacity: flickable.contentX >= row.width-shopScene.width*1 ? 0 : 0.5
     z: 10
     Behavior on opacity {
       // the cross-fade animation should last 350ms
       NumberAnimation { duration: 350 }
     }

     MouseArea {
       anchors.fill: parent
       onClicked: {
         if(flickable.contentX+row.gridSize/3 > row.width-shopScene.width)
           return
         flickable.contentX+=row.gridSize/3+10
         flickable.snapToGrid()
       }
     }
   }

   MenuButton {
     anchors.horizontalCenter: parent.horizontalCenter
     anchors.bottom: parent.bottom
     anchors.bottomMargin: 20
     z: 10

     text: qsTr("Back")

     onClicked: goBackToMenu()
   }

   Image {
     id: button

     // width & height must get set from outside, these are the default values!
     width: 40//buttonText.width+20
     height: 40//30
     source: "../assets/button.png"

     anchors.left: shopScene.gameWindowAnchorItem.left
     anchors.leftMargin: 4
     anchors.bottom: shopScene.gameWindowAnchorItem.bottom
     anchors.bottomMargin: 4
     z: 11
     // No IAP on desktops
     visible: !(system.desktopPlatform && system.publishBuild)

     Image {
       width: 30
       height: 30
       source: "../assets/restore.png"
       anchors.centerIn: parent
     }

     MouseArea {
       id: mouseArea
       anchors.fill: parent
       onClicked: {
         parent.scale = 1.0
         flurry.logEvent("MainScene.ShowDialog.VPlayWeb")
         nativeUtils.displayMessageBox(qsTr("Restore In App Purchases"), qsTr("Would you like to restore your In App Purchases?"), 2)
       }
       onPressed: {
         parent.scale = 0.85
       }
       onReleased: {
         parent.scale = 1.0
       }
       onCanceled: {
         parent.scale = 1.0
       }
     }
   }

   function enterScene() {}

   Connections {
     // nativeUtils should only be connected, when this is the active scene
       target: window.activeScene === shopScene ? nativeUtils : null
       onMessageBoxFinished: {
         audioManager.play(audioManager.idMENUCLICK)
         console.debug("the user confirmed the Ok/Cancel dialog with:", accepted)
         if(accepted) {
           audioManager.play(audioManager.idMENUCLICK)
           store.restoreAllTransactions()
         }
       }
   }

   CurrencyPackPage {
     id: currencyPackPage
     z:12
     opacity: 0
     isMoney: false

     onBoughtPack: {

     }

     onClosed: {

     }
   }
 }

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support