[Darren]

I am trying to create a level editor for my game. The BuildEntityButtons all should create the same object – a Background object.  I want to be able to change the properties of the Background object depending on which BuildEntityButton was selected.  I have tried to do this using variationType and also using creationProperties.  The problem is that the Background object always creates using just the default setting I set for it.  Specifying variationType or creationProperties in my BuildEntityButton does not appear to have any effect.

 

I have copied the code that I think is relevant below:

SceneBase {
  id:gameScene
  width: 320
  height: 480
  scaleMode: "letterbox"

 // the filename of the current level gets stored here, it is used for loading the
 property string activeLevelFileName
 // the currently loaded level gets stored here
 property variant activeLevel

  // set the name of the current level, this will cause the Loader to load the corresponding level
 function setLevel(fileName) {
   activeLevelFileName = fileName
 }

 Rectangle{
     id: sceneBackground
     anchors.fill: parent
     color: "white"
 }

 EntityManager {
     id: entityManager
     entityContainer: container
     // required for LevelEditor, so the entities can be created by entityType
     dynamicCreationEntityList: [ Qt.resolvedUrl("../entities/Background.qml")] //IT DOESN'T APPEAR TO MAKE A DIFFERENCE WHETHER I INCLUDE THIS LINE OR NOT
 }

 LevelEditingUI{
     id: levelUI
 }
}

 

Item{//THIS IS THE LevelEditingUI OBJECT
    id:levelUI
    visible: false
    anchors.left: gameWindowAnchorItem.left
    anchors.bottom: gameWindowAnchorItem.bottom
    height: 100
    width: 720 / 2
    z: 4000
    property variant entities: ["sand.png","grass.png"]
    
 
    // makes a grid of entities to be dragged into the level
    Grid {
      id: buildEntityButtons
      visible: true // only gets visible when in state levelEditing
      anchors.horizontalCenter: parent.horizontalCenter
      anchors.bottom: parent.bottom
      anchors.bottomMargin: 10
      height: 75
      z:1000
      spacing: 5
      rows: 2

      BuildEntityButton {
        toCreateEntityType: "../entities/Background.qml"
        width: 35
        height: 35

        TexturePackerAnimatedSpriteVPlay {
            id: image1
            source: "../../assets/img/background_fire_vehicles.json"
            frameNames: [entities[0]]
            anchors.fill: parent
        }
      }

      BuildEntityButton {////THIS IS THE BUTTON I AM USING TO TEST //////////////////////
        variationType: "grass.png" ///THE DEFAULT VARIATIONTYPE IS SAND. EVEN WITH THIS LINE, SAND ALWAYS GETS CREATED/////
        toCreateEntityType:  "../entities/Background.qml"
        width: 35
        height: 35
        TexturePackerAnimatedSpriteVPlay {
            id: image2
            source: "../../assets/img/background_fire_vehicles.json"
            frameNames: [entities[1]]
            anchors.fill: parent
        }
      }

 

EntityBaseDraggable { //THIS IS MY BACKGROUND ENTITY THAT SHOULD BE CREATED
    entityId: "background"
    entityType: "backgroundEntity"
    variationType: "sand.png" //DEFAULT VARIATIONTYPE
    poolingEnabled: true
    z: -1000
    width: 128
    height: 128
 
    selectionMouseArea.anchors.fill: mouseRectangle

    Rectangle{
        id: mouseRectangle
        anchors.fill: parent
    }
    TexturePackerAnimatedSpriteVPlay {
        id: image
        z:3001
        source: "../../assets/img/background_fire_vehicles.json"
        frameNames: [variationType]
        anchors.fill: parent
    }

    BoxCollider {
        id: boxCollider
        bodyType: Body.Static
        categories: Box.Category3
        collidesWith: Box.Category2 | Box.Category1
    }
}

 

 

[GüntherFelgo Team]

Hi Darren!

The dynamicCreationEntityList allows to create entities based on their entityType and variationType settings (combined with pooling, as a pooled entity of the same type and variation will be reused if possible and not created anew). To use pooling, also set poolingEnabled for the EntityManager.

With activated pooling and a correct creation list, the buttons should be able to create and initialize the entities with their variation type:

// the scene with EntityManager
Scene {
    id: scene
    // ...

    EntityManager {
      id: entityManager
      entityContainer: container

      // required for LevelEditor, so the entities can be created by entityType and variationType
      poolingEnabled: true
      dynamicCreationEntityList: [ Qt.resolvedUrl("Background.qml") ] // use correct path to entity here
    }

    LevelEditingUI{
      id: levelUI
      visible: true
    }
  }

These are the UI / Buttons I used for testing:

Item{ //THIS IS THE LevelEditingUI OBJECT
  id:levelUI
  visible: false
  anchors.left: parent.gameWindowAnchorItem.left
  anchors.bottom: parent.gameWindowAnchorItem.bottom
  width: 100
  height: 720 / 2
  z: 4000

  // i used colored Rectangles for testing instead of sprites
  property variant entities: ["red","green"] 

  // makes a grid of entities to be dragged into the level
  Grid {
    id: buildEntityButtons
    visible: true // only gets visible when in state levelEditing
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 10
    height: 75
    z:1000
    spacing: 5
    rows: 2

    BuildEntityButton {
      toCreateEntityTypeUrl: Qt.resolvedUrl("Background.qml")
      width: 35
      height: 35

      Rectangle {
        color: "red"
        anchors.fill: parent
      }
    }

    BuildEntityButton {
      variationType: "green"
      toCreateEntityTypeString: "backgroundEntity" // you can also use the entityType here together with variationType

      width: 35
      height: 35
      Rectangle {
        color: "green"
        anchors.fill: parent
      }
    }
  }
}

Background:

EntityBaseDraggable { //THIS IS MY BACKGROUND ENTITY THAT SHOULD BE CREATED
    entityId: "background"
    entityType: "backgroundEntity"
    variationType: "red" //DEFAULT VARIATIONTYPE
    poolingEnabled: true
    z: -1000
    width: 128
    height: 128

    selectionMouseArea.anchors.fill: mouseRectangle

    Rectangle{
        id: mouseRectangle
        anchors.fill: parent
    }

    Rectangle {
        id: image
        z:3001
        color: variationType
        anchors.fill: parent
    }

    BoxCollider {
        id: boxCollider
        bodyType: Body.Static
        categories: Box.Category3
        collidesWith: Box.Category2 | Box.Category1
    }
}

 

Hope this helps!
Cheers,
Günther

[Darren]

Hi Gunther!

Thank you for your speedy reply.  From what I can see, the only real difference you made was adding poolingEnabled to the EntityManager?

The parts where you showed the levelEditingUI visible were not needed – I had covered that elsewhere in my code (I didn’t show it because I thought it not necessary) – I make the levelEditngUI visible only when the gameScene is in the levelEditing state.

Apart from that, your code looks the same as mine…?

I added the poolingEnabled to EntityManager, but it still doesn’t work for me though.  I am able to drag the entities into the container, but they still do not apply the variationType.

I am now wondering if it is to do with the container where I am dragging my entity INTO?

To explain – the levelEditingUI sits in the gameScene.

The container that the entity is dragged into also sits in the gameScene – but is not the gameScene itself.

The container actually applies a rotation to objects inside it, to match the rotation of my tank (that the game is about).

The levelEditingUI appears beneath this container and does not rotate.  Could this be something to do with the problem?

A complete copy of my gameScene code is below – sorry if I didn’t provide enough information the first time.

 

import Felgo 3.0
import QtQuick 2.0
import "../common"
import "../entities"

SceneBase {
  id:gameScene
  width: 320
  height: 480
  scaleMode: "letterbox"

 // the filename of the current level gets stored here, it is used for loading the
 property string activeLevelFileName
 // the currently loaded level gets stored here
 property variant activeLevel

  // set the name of the current level, this will cause the Loader to load the corresponding level
 function setLevel(fileName) {
   activeLevelFileName = fileName
 }

// ItemEditor {
//     id: itemEditor
//     opacity: 0.7
//     z:1
     // start visible
//   }

// LevelEditor {
      // .. the usage is explained in the next step number 2.)
//}

 Rectangle{
     id: sceneBackground
     anchors.fill: parent
     color: "white"
 }

 EntityManager {
     id: entityManager
     entityContainer: container

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

 LevelEditingUI{
     id: levelUI

 }

 states: [
        State {
          // when the state is changed to levelEditing, the buildEntityButtons get visible and can be added to the level
          name: "levelEditing"
          PropertyChanges { target: levelUI; visible: true}
          PropertyChanges { target: turretController; visible: false}
          PropertyChanges { target: fireButton; visible: false}
          PropertyChanges { target: joystickController; visible: false}
        },
         State {
           // when the state is changed to levelEditing, the buildEntityButtons get visible and can be added to the level
           name: "playing"
           PropertyChanges { target: levelUI; visible: false}
           PropertyChanges { target: turretController; visible: true}
           PropertyChanges { target: fireButton; visible: true}
           PropertyChanges { target: joystickController; visible: true}
         }
      ]

  MenuButton {
     text: "Back"
     anchors.right: gameScene.gameWindowAnchorItem.right
     anchors.rightMargin: 10
     anchors.top: gameScene.gameWindowAnchorItem.top
     anchors.topMargin: 10
     onClicked: {
         backButtonPressed()
         activeLevel = undefined
         activeLevelFileName = ""
     }//onClicked
   }//MenuButton
  MenuButton {
     text: "Playing"
     anchors.left: gameScene.gameWindowAnchorItem.left
     anchors.leftMargin: 10
     anchors.top: gameScene.gameWindowAnchorItem.top
     anchors.topMargin: 10
     onClicked: {
         if(text == "Playing"){
             text = "Editing"
             gameScene.state = "levelEditing"
         }
         else {
             text = "Playing"
             gameScene.state = "playing"
         }
     }//onClicked
   }//Menubutton




  Item{
      id: container
      /*
      THIS IS WHERE THE MAGIC HAPPENS
      We transform the container with a Rotation element in order to be able to set a custom transform origin
     (the "transformOrigin" property of the Item only allows to use enums for certain edges or the center)
      The custom origin is the center of the player thats why we add half the width.*/
      transform: Rotation { origin.x: camera.zoom * (activeLevel.tank_player.x + activeLevel.tank_player.width/2); origin.y: camera.zoom * (activeLevel.tank_player.y + activeLevel.tank_player.height/2); angle: -activeLevel.tank_player.rotation-90;}
   /*   Rectangle {
                  id: background
                  width: parent.width //*1.8
                  height: parent.height //*1.8
                  z:5000
                  color: "black"
                  anchors.centerIn: parent
              }*/

      // use a physics world because we need collision detection
      PhysicsWorld {
          id: world
          updatesPerSecondForPhysics: 60

          debugDrawVisible : false
      }
      // load levels at runtime
     Loader {
       id: loader
       source: activeLevelFileName !== "" ? "../levels/" + activeLevelFileName : ""
       onLoaded: {
         // since we did not define a width and height in the level item itself, we are doing it here
         item.width = gameScene.width
         item.height = gameScene.height
         // store the loaded level as activeLevel for easier access
         activeLevel = item
       }
     }//Loader
  }//Container

  CameraVPlay {
    id: camera
    maxZoom: 1

    // set the gameWindowSize and entityContainer required for the camera
    gameWindowSize: Qt.point(gameScene.gameWindowAnchorItem.width, gameScene.gameWindowAnchorItem.height)
    entityContainer: container

    // the camera follows the player
    focusedObject: activeLevel.tank_player
  }
  VerticalSlider{
      id: cameraZoomController
      anchors.top: parent.top
      anchors.topMargin: 150
      anchors.right: gameWindowAnchorItem.right
      rotation: 180
      //anchors.rightMargin: 5
      onPositionChanged: camera.applyZoom(position, activeLevel.tank_player)
      opacity: 0.5
  }

  HorizontalAxisController{
      id: turretController
      anchors.bottom: gameWindowAnchorItem.bottom
      anchors.right: parent.right
      anchors.bottomMargin: 20
     // property variant playerTurretController: level.tank_player.getComponent("TurretController")
      onPositionChanged: activeLevel.tank_player.turretController = turretController.position
  }

  Item {
      id: fireButton
      width: 50
      height: 50

      anchors.bottom: gameWindowAnchorItem.bottom
      anchors.bottomMargin: 20
      anchors.horizontalCenter: parent.horizontalCenter
      Image {
          source: "../../assets/img/fire.png"
          anchors.fill: parent

          MouseArea {
            anchors.fill: parent
            //onPressed: activeLevel.tank_player.tankDamage = activeLevel.tank_player.tankDamage - 25
            onPressed: activeLevel.tank_player.fireButtonPressed()
          }
      }
  }

  JoystickControllerHUD {
      id: joystickController
      anchors.bottom: gameWindowAnchorItem.bottom

      // the joystick width is the space from the left to the start of the logical scene, so the radius is its half
      joystickRadius: 50 //scene.x/2

      // this allows setting custom images for the JoystickControllerHUD component
      source: "../../assets/img/joystick_background.png"
      thumbSource: "../../assets/img/joystick_thumb.png"

      // this is the mapping between the output of the JoystickControllerHUD to the input of the player's TwoAxisController
      // this is a performance improvement, to not have to bind every time the position changes
      property variant playerTwoxisController: activeLevel.tank_player.getComponent("TwoAxisController")
      onControllerXPositionChanged: playerTwoxisController.xAxis = controllerXPosition
      onControllerYPositionChanged: playerTwoxisController.yAxis = controllerYPosition;


  }


}

 

[GüntherFelgo Team]

Hi Darren!

I don’t think that the entity-container is related to whether the variationType property works.

Maybe the issue lies in how you use the variationType within Background.qml, I guess creating a binding within an array like you did for frameNames does not work:

 TexturePackerAnimatedSpriteVPlay {
        id: image
        z:3001
        source: "../../assets/img/background_fire_vehicles.json"
        frameNames: [variationType] // creating a binding within a JS array does not work
        anchors.fill: parent
    }

To create a new frameNames array when variationType changes you might need to add:

// set new frameNames array when variationType changes
onVariationTypeChanged: {
  image.frameNames = [variationType]
}

Best,
Günther

 

[Darren]

Hi Gunther,

I tried your solution using onVariationTypeChanged, but it still does not work.

The default variationType is sand.png, but when I try setting it to grass.png using the variationType in the BuildEntityButton, the image displayed is still sand.

I did some experiments.

1. I checked whether onVariationTypeChanged was being activated when I specified grass.png as the variationType.  I did this with a console log entry.  When I tried the grass.png the console log showed:qml: VARIATION TYPE CHANGED TO grass.png

   qml: entity got released, create it at the position if allowed to build (there are lots of this line, as I drag the entity around)

   qml: EntityManager: a component for this variationType was added before, use it

   qml: EntityManager: the creation was done vor another variationType before, but with the same entityType, so use this component for creation – other variationType: sand.png

   qml: EntityManager: found a component to create from entityType backgroundEntity and variationType grass.png : QQmlComponent(0x3b7f17d8)

   qml: VARIATION TYPE CHANGED TO grass.png

   qml: entity got released, create it at the position if allowed to build

   qml: DragEntity: no creationProperties were defined

2. It appears  onVariationTypeChanged IS being called – but the image on screen does not change and instead, still displays the default image (sand).
3. I experimented with setting creationProperties from BuildEntityButton – this also had no effect.  And the console log specifies – ‘no creation properties defined’ – even when I set the the creationPropeties.
4. I experimented with the entityManager.  If I remove the entityManager completely, the entity is not created – as expected.
5. If I remove dynamicCreationEntityList: [ Qt.resolvedUrl(“entities/Background.qml”)] – there does not appear to be ANY effect.  The entity is created whether this line is specified or not.  Could the entityManager be somehow part of the problem?  Should removal of this line mean the entity is not created?

Any other ideas?

Thank you

Darren.

 

[GüntherFelgo Team]

The creation looks fine if the variationType changed to “grass.png“, you can try adding an instance of the Background entity directly to the scene (without using EntityManger or LevelEditor). If you then change the variationType manually (e.g. after a click on a test-button) and the image still does not change, then the issue definitely comes from the Entity Implementation (probably related to what I posted above, the image switching implemented for the entity does not work.

Can you have a closer look at the entity implementation again to make sure that the image-switch works if the entity is used “standalone”.

If you still have troubles, can you please send a minimal example where it does not work to support@felgo.com?
We will have a direct look at the project then.

Best,
Günther

[Darren]

Gunther,

Thanks – I’ve  tried your test.  I manually created a standalone entity with a button to change the variationType.  This DOES work and it changes the image appropriately.

 

Darren.

[Darren]

 

Doing some more experiments, I have discovered that the manual button DOES work to change the image, even in the gameScene.

The problem seems to only occur when I use the dragging function.

[Darren]

When I use the entityBuildButton and drag my sand / grass onto the gameScene, it appears to create multiple implementations of the entity as I drag it around.  Below is the console log output from one click, drag and release of my grass.  Is this normal? (NOTE: the VARIATION TYPE CHANGED entry is from the code I put in where it outputs to the console log when the variation type changes.  Everything else was generated by qml).

 

qml: BuildEntityButton: entity got pressed: EntityBaseDraggable_QMLTYPE_134(0x30379480, “background”) , for toCreateEntityTypeUrl: or toCreateEntityTypeString:

qml: pos of createdEntity: 624.319898747817 479.5187108652682

qml: BuildEntityButton: entity got pressed: EntityBaseDraggable_QMLTYPE_134(0x30379480, “background”) , for toCreateEntityTypeUrl: or toCreateEntityTypeString:

qml: pos of createdEntity: 624.319898747817 479.5187108652682

qml: BuildEntityButton: entity got pressed: EntityBaseDraggable_QMLTYPE_134(0x30379480, “background”) , for toCreateEntityTypeUrl: or toCreateEntityTypeString:

qml: pos of createdEntity: 624.319898747817 479.5187108652682

qml: BuildEntityButton: entity got pressed: EntityBaseDraggable_QMLTYPE_134(0x30379480, “background”) , for toCreateEntityTypeUrl: or toCreateEntityTypeString:

qml: pos of createdEntity: 624.319898747817 479.5187108652682

qml: BuildEntityButton: entity got pressed: EntityBaseDraggable_QMLTYPE_134(0x30379480, “background”) , for toCreateEntityTypeUrl: or toCreateEntityTypeString:

qml: pos of createdEntity: 624.319898747817 479.5187108652682

qml: BuildEntityButton: entity got pressed: EntityBaseDraggable_QMLTYPE_134(0x30379480, “background”) , for toCreateEntityTypeUrl: or toCreateEntityTypeString:

qml: pos of createdEntity: 624.319898747817 479.5187108652682

qml: BuildEntityButton: entity got pressed: EntityBaseDraggable_QMLTYPE_134(0x30379480, “background”) , for toCreateEntityTypeUrl: or toCreateEntityTypeString:

qml: pos of createdEntity: 624.319898747817 479.5187108652682

qml: BuildEntityButton: entity got pressed: EntityBaseDraggable_QMLTYPE_134(0x30379480, “background”) , for toCreateEntityTypeUrl: or toCreateEntityTypeString:

qml: pos of createdEntity: 624.319898747817 479.5187108652682

qml: BuildEntityButton: entity got pressed: EntityBaseDraggable_QMLTYPE_134(0x30379480, “background”) , for toCreateEntityTypeUrl: or toCreateEntityTypeString:

qml: pos of createdEntity: 624.319898747817 479.5187108652682

qml: BuildEntityButton: entity got pressed: EntityBaseDraggable_QMLTYPE_134(0x30379480, “background”) , for toCreateEntityTypeUrl: or toCreateEntityTypeString: backgroundEntity

qml: pos of createdEntity: 624.319898747817 479.5187108652682

qml: BuildEntityButton: entity got pressed: EntityBaseDraggable_QMLTYPE_134(0x30379480, “background”) , for toCreateEntityTypeUrl: or toCreateEntityTypeString:

qml: pos of createdEntity: 624.319898747817 479.5187108652682

qml: BuildEntityButton: button MouseArea released

qml: EntityBaseDraggable: entityReleased position: 546.8559463213345 349.028786645418 snapped position: 512 384

qml: entity got released, create it at the position if allowed to build

qml: DragEntity: no creationProperties were defined

qml: entity got released, create it at the position if allowed to build

qml: DragEntity: no creationProperties were defined

qml: entity got released, create it at the position if allowed to build

qml: DragEntity: no creationProperties were defined

qml: entity got released, create it at the position if allowed to build

qml: DragEntity: no creationProperties were defined

qml: entity got released, create it at the position if allowed to build

qml: DragEntity: no creationProperties were defined

qml: entity got released, create it at the position if allowed to build

qml: DragEntity: no creationProperties were defined

qml: entity got released, create it at the position if allowed to build

qml: DragEntity: no creationProperties were defined

qml: entity got released, create it at the position if allowed to build

qml: DragEntity: no creationProperties were defined

qml: entity got released, create it at the position if allowed to build

qml: DragEntity: no creationProperties were defined

qml: VARIATION TYPE CHANGED TO grass.png

qml: entity got released, create it at the position if allowed to build

qml: EntityManager: a component for this variationType was added before, use it

qml: EntityManager: the creation was done vor another variationType before, but with the same entityType, so use this component for creation – other variationType: sand.png

qml: EntityManager: found a component to create from entityType backgroundEntity and variationType grass.png : QQmlComponent(0x302f4aa8)

qml: VARIATION TYPE CHANGED TO grass.png

qml: entity got released, create it at the position if allowed to build

qml: DragEntity: no creationProperties were defined