[PanflamCutie]

Dear Felgoteam,

I want to add entityies with a Level Editor, but if i want to add it to the row 0 or the column 0 (defined properties in Tree.qml)
they aren't positioned there.

I hope you can help me with my issue.
Best regards,
PanflamCutie



main.qml


import VPlay 1.0
import QtQuick 1.1
import "entities"

GameWindow {
    activeScene: scene
    // the size of the Window can be changed at runtime by pressing the number keys 1-7
    // the content of the logical scene size (480x320 by default) gets scaled to the window size based on the scaleMode
    // you can set this size to any resolution you would like your project to start with, most of the times the one of your main target device
    // this resolution is for iPhone 4 & iPhone 4S
    // change this to a portrait resolution (e.g. 640x960) for games in portrait mode
    width: 960
    height: 640
    



    EntityManager {
        id: entityManager
        entityContainer: scene

        // required for LevelEditor, so the entities can be created by entityType
        dynamicCreationEntityList: [ Qt.resolvedUrl("entities/Tree.qml") ]
    }


    Scene {
        id: scene
        // the "logical size" - the scene content is auto-scaled to match the GameWindow size
        // change this to 320x480 for games in portrait mode
        width: 480
        height: 320



        gridSize: scene.height/9

        BackgroundImage {
            source: "img/forestground.png"
            anchors.fill: parent
        }


        Tree {
            column: 0
            row: 0
        }

        Tree {
            column: 1
            row: 0
        }
        Tree {
            column: 0
            row: 8
        }

        Tree {
            column: 12
            row: 8
        }



            // state: "levelEditing" enables dragging and clicking of obstacles
            // change the state in the next line to start in levelEditing mode:
            state: "playing" //state: "levelEditing"

            onStateChanged: {
              if(state === "levelEditing") {
                //stopGame()
              }
            }

            function stopGame() { //needs to be modified in actual game ^^
              // remove all entities of type "tree", but not the walls
              entityManager.removeEntitiesByFilter(["tree"]);
            }

            LevelEditor {
              id: levelEditor
              toRemoveEntityTypes: [ "tree" ]
              toStoreEntityTypes: [ "tree" ]
            }

            Column {
              anchors.right: parent.right

              spacing: 5

              SimpleButton {
                text: scene.state === "playing" ? "Level Mode" : "Game Mode"
                onClicked: {
                  if(text === "Level Mode")
                    scene.state = "levelEditing"
                  else
                    scene.state = "playing"
                }

                anchors.right: parent.right
              }

              BuildEntityButton {
                visible: scene.state === "levelEditing"
                toCreateEntityType: "entities/Tree.qml"

                width: 50
                height: 50
                anchors.right: parent.right

                // the obstacle is just a grey entity, we can customize the look of the button here
                Rectangle {
                  color: "purple"
                  anchors.fill: parent
                }
              }
            }


    }
}



Tree.qml



 import QtQuick 1.1
 import VPlay 1.0
 import Box2D 1.0 // needed for Box category

 //Item {
 // use an EntityBase for the base item, to be able to create, destroy and access the tntity by type with the EntityManager (and to be able to save/load it through the EM!)
 EntityBaseDraggable {
     id: tree

     // columnn & row may be set from outside, for easier positioning along the grid
     property int column
     property int row

     property real gridSize: scene.gridSize

     entityType: "tree"
     // the variationType may be blockBrown, blockRed
     variationType: "standard"

     // when e.g. column = 0 is specified, the block should be placed centered at column 0
     x: column*gridSize//+gridSize*0.5
     y: row*gridSize//+gridSize*0.5

     // these properties must be set for EntityBaseDraggable
     selectionMouseArea.anchors.fill: sprite
     //colliderComponent: collider

     selectionMouseArea.onPressAndHold: removeEntity()//onEntityPressAndHold: removeEntity()

     Image {
         id: sprite
         source: "../img/tree.png"

         // make it 1 pixel wider, otherwise there is a transparent pixel around the borders!
         width: gridSize+1
         height: gridSize+1
         anchors.left: parent.left
     }
 }

 

 

importQtQuick1.1

importVPlay1.0

importBox2D1.0//neededforBoxcategory

//Item{

//useanEntityBaseforthebaseitem,tobeabletocreate,destroyandaccessthetntitybytypewiththeEntityManager(andtobeabletosave/loaditthroughtheEM!)

EntityBaseDraggable{

id:tree

//columnn&rowmaybesetfromoutside,foreasierpositioningalongthegrid

propertyintcolumn

propertyintrow

propertyrealgridSize:scene.gridSize

entityType:"tree"

//thevariationTypemaybeblockBrown,blockRed

variationType:"standard"

//whene.g.column=0isspecified,theblockshouldbeplacedcenteredatcolumn0

x:column*gridSize//+gridSize*0.5

y:row*gridSize//+gridSize*0.5

//thesepropertiesmustbesetforEntityBaseDraggable

selectionMouseArea.anchors.fill:sprite

//colliderComponent:collider

selectionMouseArea.onPressAndHold:removeEntity()//onEntityPressAndHold:removeEntity()

Image{

id:sprite

source:"../img/tree.png"

//makeit1pixelwider,otherwisethereisatransparentpixelaroundtheborders!

width:gridSize+1

height:gridSize+1

anchors.left:parent.left

}

}

[ChristianFelgo Team]

Hi,

please format your post so it is readable (you mixed up the code field), and prepare the code so it is runnable without your images (i.e. replace the Image element with a Rectangle).

Cheers, Chris

[PanflamCutie]

Here is the code of the Tree.qml:

 

import QtQuick 1.1
import VPlay 1.0
import Box2D 1.0 // needed for Box category

//Item {
// use an EntityBase for the base item, to be able to create, destroy and access the tntity by type with the EntityManager (and to be able to save/load it through the EM!)
EntityBaseDraggable {
    id: tree

    // columnn & row may be set from outside, for easier positioning along the grid
    property int column
    property int row

    property real gridSize: scene.gridSize

    entityType: "tree"
    // the variationType may be blockBrown, blockRed
    variationType: "standard"

    // when e.g. column = 0 is specified, the block should be placed centered at column 0
    x: column*gridSize//+gridSize*0.5
    y: row*gridSize//+gridSize*0.5

    // these properties must be set for EntityBaseDraggable
    selectionMouseArea.anchors.fill: sprite
    //colliderComponent: collider

    selectionMouseArea.onPressAndHold: removeEntity()//onEntityPressAndHold: removeEntity()

    Rectangle {
        id: sprite
        color: "blue"

        width: gridSize+1
        height: gridSize+1
        anchors.left: parent.left
    }
}

 

and here is the code of the main.qml:

 

import VPlay 1.0
import QtQuick 1.1
import "entities"

GameWindow {
    activeScene: scene
    // the size of the Window can be changed at runtime by pressing the number keys 1-7
    // the content of the logical scene size (480x320 by default) gets scaled to the window size based on the scaleMode
    // you can set this size to any resolution you would like your project to start with, most of the times the one of your main target device
    // this resolution is for iPhone 4 & iPhone 4S
    // change this to a portrait resolution (e.g. 640x960) for games in portrait mode
    width: 960
    height: 640
    
    EntityManager {
        id: entityManager
        entityContainer: scene

        // required for LevelEditor, so the entities can be created by entityType
        dynamicCreationEntityList: [ Qt.resolvedUrl("entities/Tree.qml") ]
    }

    Scene {
        id: scene
        // the "logical size" - the scene content is auto-scaled to match the GameWindow size
        // change this to 320x480 for games in portrait mode
        width: 480
        height: 320



        gridSize: scene.height/9

        //        BackgroundImage {
        //            source: "img/forestground.png"
        //            anchors.fill: parent
        //        }


        Tree {
            column: 0
            row: 0
        }

        Tree {
            column: 1
            row: 0
        }
        Tree {
            column: 0
            row: 8
        }

        Tree {
            column: 12
            row: 8
        }



        // state: "levelEditing" enables dragging and clicking of obstacles
        // change the state in the next line to start in levelEditing mode:
        state: "playing" //state: "levelEditing"

        onStateChanged: {
            if(state === "levelEditing") {
                //stopGame()
            }
        }

        function stopGame() { //needs to be modified in actual game ^^
            // remove all entities of type "tree", but not the walls
            entityManager.removeEntitiesByFilter(["tree"]);
        }

        LevelEditor {
            id: levelEditor
            toRemoveEntityTypes: [ "tree" ]
            toStoreEntityTypes: [ "tree" ]
        }

        Column {
            anchors.right: parent.right

            spacing: 5

            SimpleButton {
                text: scene.state === "playing" ? "Level Mode" : "Game Mode"
                onClicked: {
                    if(text === "Level Mode")
                        scene.state = "levelEditing"
                    else
                        scene.state = "playing"
                }

                anchors.right: parent.right
            }

            BuildEntityButton {
                visible: scene.state === "levelEditing"
                toCreateEntityType: "entities/Tree.qml"

                width: 50
                height: 50
                anchors.right: parent.right

                // the obstacle is just a grey entity, we can customize the look of the button here
                Rectangle {
                    color: "purple"
                    anchors.fill: parent
                }
            }
        }
    }
}

 

I replaced the image with and Rectangle and commented the part with the background-image.

[AlexFelgo Team]

Hi,

I just tested your code and can’t quite understand the problem that you are having.

Here is a screenshot of what i see when i run your code : http://felgo.com/wp-content/uploads/2014/01/forum-issue.png

Can you try to explain me what exactly is wrong there?

Cheers,
Alex

[PanflamCutie]

Hi,
the problem is when I change to the Level Mode (click the button) and I want to position a new element (in this case its a rectangle) to the left column (column-property is set to 0) or in the top row (row-property is set to 0) then it won’t allow me to place it there dynamically (by using the level editor).

 

Best regards,PanflamCutie

[AlexFelgo Team]

Hi again,

i changed the Tree.qml like this to make it work, my changes are highlighted with “// !!!!“:

import QtQuick 1.1
import VPlay 1.0
import Box2D 1.0 // needed for Box category

//Item {
// use an EntityBase for the base item, to be able to create, destroy and access the tntity by type with the EntityManager (and to be able to save/load it through the EM!)
EntityBaseDraggable {
    id: tree

    // columnn & row may be set from outside, for easier positioning along the grid
    property int column
    property int row

    property real gridSize: scene.gridSize

    // !!!!
    // the default not allowed to build rectangle has its position at x:-width/2 and y:-height/2
    notAllowedRectangle.x: 0
    notAllowedRectangle.y: 0
    // !!!!
    // this is used internally (it was initially added for our squaby demo game) so the towers cannot be built at the edges of the level, however that is just what you want, so set this internal value to 0
    __towerSizeInGridsHalf: 0

    entityType: "tree"
    // the variationType may be blockBrown, blockRed
    variationType: "standard"

    // when e.g. column = 0 is specified, the block should be placed centered at column 0
    x: column*gridSize//+gridSize*0.5
    y: row*gridSize//+gridSize*0.5

    // these properties must be set for EntityBaseDraggable
    selectionMouseArea.anchors.fill: sprite
    colliderComponent: collider

    selectionMouseArea.onPressAndHold: removeEntity()//onEntityPressAndHold: removeEntity()

    Rectangle {
        id: sprite
        color: "blue"

        width: gridSize
        height: gridSize
        anchors.left: parent.left
    }
    // !!!!
    // you should always use a collider in your EntityBaseDraggable, it is used for collision detection while building it, e.g. to prevent that 2 entities are built in the same spot
    BoxCollider {
      id: collider
      width: gridSize
      height: gridSize
      anchors.left: parent.left
      bodyType: Body.Static
    }
}

Now that there is a collider used, you also need to add a PhysicsWorld to your scene. After that, it should work as you requested.


Cheers,
Alex

 

[PanflamCutie]

Hi,

thanks to the added code its working now (although I don’t fully understand what the code does).

Furthermore now it’s also possible to add the element in the row 10 (count started with 0) and column 13 (count started with 0), despite the fact that we wanted to restrict the grid to 9×13 (rows x columns). But this is not much of a problem here, because we just want to use the level editor to create our own levels (I just wanted to let you know 😉 ).

 

Thanks for the help and best regards,

PanflamCutie