Creating basic 2D map

[qtuser20]

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.

[GTDev]

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