Creating basic 2D map



  • I'm pretty new to creating GUI's using QT and would really appreciate if anyone could point me in the right direction. Essentially I need to divide up a screen so that there are several different distinct areas that a user can move to using arrow keys. This can really be as simple as rectangles with a specified location so that the arrow will just move the player to each location depending on the directional arrow used. Any help is greatly appreciated.
    Thanks.



  • Hi!

    I created a small example QML application that separates the screen into tiles and let the player move between the tiles (tiles and player are all Rectangles to keep it simple). I implemented the application using V-Play SDK, but you can also just use a Qt Quick Application and do the same:

    import VPlay 2.0
    import QtQuick 2.0
    
    GameWindow {
      id: gameWindow
      activeScene: scene
    
      screenWidth: 960
      screenHeight: 640
    
      Scene {
        id: scene
        property int mapRows: 4
        property int mapColumns: 5
        property real tileWidth: scene.width / scene.mapColumns
        property real tileHeight: scene.height / scene.mapRows
    
        // the scene content is auto-scaled to match the GameWindow size
        // this allows a consistent game experience across different device screen size and resolution
        width: 480
        height: 320
    
        // the map (with tiles)
        Repeater {
          model: scene.mapRows * scene.mapColumns
          onModelChanged: console.log("MODEL: "+model)
          delegate: Rectangle {
            property int column: index % scene.mapColumns
            property int row: index / scene.mapColumns
            x: column * scene.tileWidth
            y: row * scene.tileHeight
            width: scene.tileWidth
            height: scene.tileHeight
            color: "grey"
            border.width: 1
            border.color: "white"
    
            Text {
              anchors.centerIn: parent
              text: index
            }
          }
        }
    
        // the player
        Item {
          id: player
    
          property int column: x / scene.tileWidth
          property int row: y / scene.tileHeight
    
          Rectangle {
            width: 10
            height: width
            color: "red"
            // center in tile
            x: scene.tileWidth / 2
            y: scene.tileHeight / 2
          }
    
          Behavior on x {
            PropertyAnimation { id: xAnim; duration: 250 }
          }
          Behavior on y {
            PropertyAnimation { id: yAnim; duration: 250 }
          }
        }
    
        // move on key press
        Keys.onPressed: {
          if (event.key == Qt.Key_Left) {
            console.log("move left");
            if(player.column > 0)
              player.x = (player.column - 1) * scene.tileWidth
          }
          else if (event.key == Qt.Key_Right) {
            console.log("move right");
            if(player.column < scene.mapColumns - 1)
              player.x = (player.column + 1) * scene.tileWidth
          }
          if(event.key == Qt.Key_Up) {
            console.log("move up");
            if(player.row > 0)
              player.y = (player.row - 1) * scene.tileHeight
          }
          else if(event.key == Qt.Key_Down) {
            console.log("move down");
            if(player.row < scene.mapRows - 1)
              player.y = (player.row + 1) * scene.tileHeight
          }
        }
    
      }
    }
    
    

    Hope this helps!

    Cheers,
    GT


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.