• Home

Density Independence Examples

 import Felgo 4.0
 import QtQuick 2.0
 import QtQuick.Window 2.0 // needed for the Screen type

 GameWindow {
   id: gameWindow
   activeScene: scene

   Scene {
     id: scene

     Column {

       // put 10dp right of the window rectangle
       //x: scene.dp(1/window.windowRect48Dp + 10) // thats wrong!
       // position to the very left of the window, like anchoring
       x: scene.gameWindowAnchorItem.x + scene.dp(200 + 10)
       // to position it always on the very top of the screen
       anchors.top: scene.gameWindowAnchorItem.top

       spacing: scene.dp(8)

       Rectangle {
         width: scene.dp(200)
         height: scene.dp(48)
         color: "green"
         // wrong! use scene.dp(), otherwise the gameWindow.dp() would be used
   //      width: dp(200)
   //      height: dp(48)

         Text {
           text: "48dp Scene"
           font.pixelSize: scene.sp(30)
           anchors.centerIn: parent
         }
       }// Rectangle

       Rectangle {
         width: 200
         height: 48 // these are "logical pixels", which get scaled based on the Scene::scaleMode
         color: "blue"
         Text {
           text: "48px Scene"
           font.pixelSize: 30
           anchors.centerIn: parent
         }
       }// Rectangle

     }// Column

   }// Scene

   Rectangle {
     id: windowRect48Dp
     width: dp(200)
     height: dp(48)
     color: "cyan"

     Text {
       text: "48dp Window"
       font.pixelSize: sp(30)
       anchors.centerIn: parent
     }
   }// Rectangle

   Rectangle {
     width: 200
     height: 48
     y: dp(48 + 8) // 8 is spacing
     color: "magenta"
     Text {
       text: "48px Window"
       font.pixelSize: 30
       anchors.centerIn: parent
     }
   }// Rectangle

   /*
    Screen.orientation always stays the same, depending on which orientation you started the app
    Screen.primaryOrientation changes when you turn the device
    */

   Text {
     anchors.bottom: parent.bottom
     text: "scene.scaleMode:" + scene.scaleMode +
           "\nscene.sceneAlignmentX: " + scene.sceneAlignmentX + ", scene.sceneAlignmentY: " + scene.sceneAlignmentY +
           "\nscene.size: " + scene.width + "*" + scene.height +
           "\nwindow pixel size: " + gameWindow.width + "*" + gameWindow.height + ", window physical pixel size: " + physicalPixels(gameWindow.width) + "*" + physicalPixels(gameWindow.height) +
           "\nwidthDp: " + dp(gameWindow.width).toFixed(2) + ", heightDp: " + dp(gameWindow.height).toFixed(2) +
           "\nscene.xScaleForScene: " + scene.xScaleForScene.toFixed(2) +", scene.yScaleForScene: " + scene.yScaleForScene.toFixed(2) +
           "\nUsed MultiResolutionImage Selector: +" + fileSelectorForImages + " (" + contentScaleFactorForImages + "x)" +
           "\ncontentScaleFactorDefault: " + contentScaleFactorDefault.toFixed(2) + ", fileSelectorListForImages: " + fileSelectorListForImages +
           "\nScreen.pixelDensity: " + Screen.pixelDensity.toFixed(2) + ", Screen.logicalPixelDensity: " + Screen.logicalPixelDensity.toFixed(2) +
           "\nScreen orientation: " + Screen.orientation + ", Screen primaryOrientation: " + Screen.primaryOrientation + " (1=portrait, 2=landscape)" +
           "\nappWindow contentOrientation: " + gameWindow.contentOrientation +
           "\ntablet: " + tablet + ", landscape: " + landscape + ", portrait: " + portrait +
           "\nscreenDpi: " + screenDpi + ", devicePixelRatio: " + devicePixelRatio +
           "\nwidthInInches: " + widthInInches.toFixed(2) + ", heightInInches: " + heightInInches.toFixed(2) + ", diameterInInches: " + diameterInInches.toFixed(2)