LevelScene.qml Example File

demos/PlatformerWithLevelEditor/qml/scenes/LevelScene.qml
 import QtQuick 2.0
 import Felgo 3.0
 import "../common"
 import "dialogs"
 import "sceneElements"

 SceneBase {
   id: levelScene

   property int timeLimit: 0

   // can be: "created_at", "average_quality", "times_downloaded"
   property string order: "created_at"

   // this alias enables access to the dialog from the outside
   property alias removeLevelDialog: removeLevelDialog

   // holds the currently active level grid
   property var activeLevelGrid

   // visibility settings
   property bool demoLevelsVisible: state == "demoLevels"
   property bool myLevelsVisible: state == "myLevels"
   property bool myCreatedLevelsVisible: myLevelsVisible && subState == "createdLevels"
   property bool myDownloadedLevelsVisible: myLevelsVisible && subState == "downloadedLevels"
   property bool communityLevelsVisible: state == "communityLevels"

   // signals
   signal newLevelPressed
   signal playLevelPressed(var levelData)
   signal editLevelPressed(var levelData)
   signal removeLevelPressed(var levelData)
   signal backPressed

   // can be: "demoLevels", "myLevels", "communityLevels"
   state: "myLevels"
   // can be: "createdLevels", "downloadedLevels"
   property string subState: "createdLevels"

   // handle state changes
   onStateChanged: reloadLevels()
   onSubStateChanged: reloadLevels()

   // reload levels, when time limit or order is changed
   onTimeLimitChanged: reloadLevels()
   onOrderChanged: reloadLevels()

   onActiveLevelGridChanged: {
     // if the communityLevelGrid is active, show the loading screen
     if(activeLevelGrid === communityLevelGrid) {
       activeLevelGrid.startLoading()
     }
     // all other level grids don't need any loading time, so we can immediately
     // call finishLoading(), which displays all levels
     else {
       activeLevelGrid.finishLoading()
     }
   }

   // background
   Rectangle {
     id: background

     anchors.fill: parent.gameWindowAnchorItem

     gradient: Gradient {
       GradientStop { position: 0.0; color: "#4595e6" }
       GradientStop { position: 0.9; color: "#80bfff" }
       GradientStop { position: 0.95; color: "#009900" }
       GradientStop { position: 1.0; color: "#804c00" }
     }
   }

   Rectangle {
     id: mainBar

     width: parent.gameWindowAnchorItem.width
     height: 40

     anchors.top: parent.gameWindowAnchorItem.top
     anchors.left: parent.gameWindowAnchorItem.left

     // background gradient
     gradient: Gradient {
       GradientStop { position: 0.0; color: "transparent" }
       GradientStop { position: 0.5; color: "#80ffffff" }
       GradientStop { position: 1.0; color: "transparent" }
     }

     Row {
       height: 30

       anchors.centerIn: parent

       spacing: 5

       PlatformerSelectableTextButton {
         id: demoLevels

         screenText: "Demos"

         width: 80

         // this button is selected if the state is demoLevels
         isSelected: levelScene.state == "demoLevels"

         // set state to demoLevels
         onClicked: levelScene.state = "demoLevels"
       }

       PlatformerSelectableTextButton {
         id: myLevels

         screenText: "My Levels"

         width: 80

         // this button is selected if the state is myLevels
         isSelected: levelScene.state == "myLevels"

         // set state to myLevels
         onClicked: levelScene.state = "myLevels"
       }

       PlatformerSelectableTextButton {
         id: communityLevels

         screenText: "Community"

         width: 80

         // this button is selected if the state is communityLevels
         isSelected: levelScene.state == "communityLevels"

         // set state to communityLevels
         onClicked: levelScene.state = "communityLevels"
       }
     }

     // back to menu button
     PlatformerImageButton {
       id: menuButton

       image.source: "../../assets/ui/home.png"

       width: 40
       height: 30

       anchors.verticalCenter: parent.verticalCenter
       anchors.right: parent.right
       anchors.rightMargin: 5

       // go back to MenuScene
       onClicked: backPressed()
     }
   }

   Rectangle {
     id: subBar

     width: parent.gameWindowAnchorItem.width
     height: 40

     anchors.top: mainBar.bottom
     anchors.left: parent.gameWindowAnchorItem.left

     // make mainBar and subBar overlap a little bit
     anchors.topMargin: -1

     // background gradient
     gradient: Gradient {
       GradientStop { position: 0.0; color: "transparent" }
       GradientStop { position: 0.5; color: "#80ffffff" }
       GradientStop { position: 1.0; color: "transparent" }
     }

     // show subBar when myLevels or communityLevels are visible
     visible: myLevelsVisible || communityLevelsVisible

     /**
      * MyLevels
      */
     Row {
       height: 30

       anchors.centerIn: parent

       spacing: 5

       // only visible if myLevels are selected
       visible: myLevelsVisible

       // add new level button
       PlatformerImageButton {
         id: newLevelButton

         width: 50
         height: 30

         // image
         image.source: "../../assets/ui/add.png"

         // background color
         color: "#00d900"

         // emit newLevelPressed signal
         onClicked: newLevelPressed()
       }

       PlatformerSelectableTextButton {
         id: createdLevelsButton

         screenText: "Created"

         width: 80

         // this button is selected, if the subState is createdLevels
         isSelected: subState == "createdLevels"

         // set subState to createdLevels
         onClicked: subState = "createdLevels"
       }

       PlatformerSelectableTextButton {
         id: downloadedLevelsButton

         screenText: "Downloaded"

         width: 80

         // this button is selected, if the subState is downloadedLevels
         isSelected: subState == "downloadedLevels"

         // set subState to downloadedLevels
         onClicked: subState = "downloadedLevels"
       }
     }

     /**
      * CommunityLevels
      */
     Row {
       height: 30

       anchors.centerIn: parent

       spacing: 5

       // only visible if communityLevels are selected
       visible: communityLevelsVisible

       PlatformerTextButton {
         id: orderButton

         // set text depending on order
         screenText: order == "created_at" ? "Newest" : order == "average_quality" ? "Highest Rated" : order == "times_downloaded" ? "Most Downloaded" : ""

         // open dialog to set another order
         onClicked: levelOrderDialog.opacity = 1
       }

       PlatformerTextButton {
         id: timeLimitButton

         // set text depending on timeLimit
         screenText: timeLimit == 0 ? "All Time" : timeLimit == 24 * 7 ? "This Week" : timeLimit == 24 ? "Today" : ""

         // set width to orderButton width, to make sure that these two buttons
         // always have the same width
         width: orderButton.width

         // open dialog to set another time limit
         onClicked: levelTimeLimitDialog.opacity = 1
       }
     }
   }

   // this displays all demo levels
   LevelGrid {
     id: demoLevelGrid

     visible: demoLevelsVisible

     levelMetaDataArray: gameWindow.levelEditor.applicationJSONLevels
   }

   // this displays all created levels
   LevelGrid {
     id: createdLevelGrid

     visible: myCreatedLevelsVisible

     // we only show authorGeneratedLevels
     levelMetaDataArray: gameWindow.levelEditor.authorGeneratedLevels
   }

   // this displays all downloaded levels
   LevelGrid {
     id: downloadedLevelGrid

     visible: myDownloadedLevelsVisible

     // we only show authorGeneratedLevels
     levelMetaDataArray: gameWindow.levelEditor.downloadedLevels
   }

   // this displays all community levels
   LevelGrid {
     id: communityLevelGrid

     visible: communityLevelsVisible

     // we only show authorGeneratedLevels
     levelMetaDataArray: gameWindow.levelEditor.communityLevels
   }

   /**
    * DIALOGS --------------------------------------------------
    */
   LevelOrderDialog {
     id: levelOrderDialog
   }

   LevelTimeLimitDialog {
     id: levelTimeLimitDialog
   }

   // this dialog pops up, when the user clicks the remove button of
   // one of the levels
   RemoveLevelDialog {
     id: removeLevelDialog
   }

   UnpublishDialog {
     id: unpublishDialog
   }

   RatingDialog {
     id: ratingDialog

     onLevelRated: reloadLevels()
   }

   /**
    * JAVASCRIPT FUNCTIONS
    */

   // reload levels
   function reloadLevels() {
     var params = {}
     if(timeLimit > 0) {
       params.timeLimit = timeLimit
     }
     params.order = order

     if(state == "demoLevels") {
       levelEditor.loadAllLevelsFromStorageLocation(levelEditor.applicationJSONLevelsLocation)
       activeLevelGrid = demoLevelGrid
     }
     else if(state == "myLevels") {
       if(subState == "createdLevels") {
         levelEditor.loadAllLevelsFromStorageLocation(levelEditor.authorGeneratedLevelsLocation)
         activeLevelGrid = createdLevelGrid
       }
       else if(subState == "downloadedLevels") {
         levelEditor.loadAllLevelsFromStorageLocation(levelEditor.downloadedLevelsLocation)
         activeLevelGrid = downloadedLevelGrid
       }
       else {
         console.debug("invalid subState", subState)
       }
     }
     else if (state == "communityLevels") {
       levelEditor.loadCommunityLevels(params)
       activeLevelGrid = communityLevelGrid
     }
     else {
       console.debug("invalid state", state)
     }
   }
 }

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