• Home

BuildEntityButton

A drag and drop button for placing game entities with the LevelEditor. More...

• List of all members, including inherited members

Properties

• createdEntity : variant
• creationProperties : variant
• entityManagerItem : variant
• initialEntityPosition : point
• toCreateEntityTypeString : string
• toCreateEntityTypeUrl : url
• variationType : string

Signals

• clicked()
• entityPressed()
• entityReleased()
• entityWasBuilt(string)
• pressed()
• released()

Detailed Description

The BuildEntityButton allows to set an entity type that should be draggable into the game with the LevelEditor. This component works together with the EntityBaseDraggable, the base class for entities that should be create-able from the LevelEditor. The BuildEntityButton takes care of the creation of the entity at the dragged position, if it does not collide with other entities.

The collision check is possible, because an instance of the entity defined with toCreateEntityType is added. It is marked as invisible, until the button gets pressed. Thus it is important to set a button size, so the internal MouseArea knows when the entity dragging should start. It then activates the colliders and reports whether the dragged position is available based on the collider information.

Defining the BuildEntityButton Appearance

Every game has different requirements to display the entity that should be draggable into the level. Thus you can add any QML element you want your button to look like, as child of the BuildEntityButton. In most cases, displaying an Image will be sufficient, but you could also add an animation of the entity with a SpriteSequence for example.

Example Usage

This example shows how to define a button for creating the entity type Obstacle.qml. Its base class is EntityBaseDraggable, and performs collision checks if the entity is dragged to a free space in the level automatically. The visual appearance of the button is added with the Image element. However, you could use any element, for example a SpriteSequence. The visual representation is decoupled from the actual entity that is built, which makes it more flexible.

 import QtQuick 2.0
 import Felgo 3.0

 BuildEntityButton {

   width: 50
   height: 50

   // an instance of this entity is created when the entity is dragged to a free spot in the level
   toCreateEntityType: "entities/Obstacle.qml"

   // this is decoupled from the entity, can be set to any QML element that should be displayed
   Image {

     // make it the size of the parent
     anchors.fill: parent
     source: "obstacle-creationbutton.png"
   }
 }

Advanced Usage

You can add all your game entities that should be draggable into a level as buttons. In the following example, the base component MyGameBuildEntityButton.qml adds an Image element for the visual appearance of the dragging item. From the HUD.qml file, this component is then added multiple times and placed in a row for all the entities that should be draggable into the level:

MyGameBuildEntityButton.qml:

 BuildEntityButton {

   width: 50
   height: 50

   // an instance of this entity is created when the entity is dragged to a free spot in the level
   toCreateEntityType: "entities/Obstacle.qml"

   Image {
     anchors.fill: parent
     // there are multiple images, based on the variationType
     // e.g. obstacle-chocolate.png, obstacle-teddy.png, etc.
     source: "obstacle-" + variationType + ".png"
   }
 }

HUD.qml:

 Row {
   // place the buttons next to each other in a Row

   MyGameBuildEntityButton {
     variationType: "teddy"
   }

   MyGameBuildEntityButton {
     variationType: "chocolate"
   }

   MyGameBuildEntityButton {
     variationType: "pillow"
   }

   // ... add soccerball, toys and book here as well
 }

The above example will then look like the following image:

In this image, the pillow was dragged into the level, and a collision with the path was detected. Thus the collider turned red. This behavior is also customizable, in the EntityBaseDraggable.

Note: The BuildEntityButton can also be used as part of the game design - for example a tower defense game, has the ability to drag entities (the towers) into the scene. This image is a screenshot from the Squaby Demo, where this approach is used:

Also see the Platformer with Level Editor for an example of the LevelEditor.

Property Documentation

 BuildEntityButton {
   creationProperties: { "levelDraggingMode" : true }
   toCreateEntityType: "Fish.qml"
 }

 EntityBaseDraggable {
   // if normally created, this is false
   // if it is created for dragging into the level, it gets set to true from BuildEntityButton
   property bool levelDraggingMode: false

   Image {
     // either use the normal fish image, or another one when it is dragged for level creation
     source: levelDraggingMode ? "fish-levelmode.png" : "fish.png"
   }
 }

Signal Documentation

 BuildEntityButton {
   //...
   onEntityWasBuilt: {
     console.log("created entityId: "+builtEntityId)
     // get the entity with the given entityId from the entityManagerItem
     var newEntity = entityManagerItem.getEntityById(builtEntityId)
   }
 }