Forums

Overview › Felgo 3 Support (Qt 5) › Image doesn't appear

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
April 28, 2017 at 11:44 #16164
Patricia
Hi all,

I’m trying to do a basic thing. When a bird collision with a coin, the coin disappear and also if the bird collision with a box, the last one move.

But the image of the box and the coin don’t appear and I dont know why. (ALSO, I don’t know how to do that some image disappear)

————>Box.qml file:

import QtQuick 2.0
```
import Felgo 3.0
```
```
EntityBase {
```
```
  id: box
```
```
  entityType: "box"
```
```
     Image{
```
```
      height: 100
```
```
      width: 100
```
```
      source: "img/box.png"
```
```
    }
```
```
   BoxCollider {
```
```
         anchors.fill: box
```
```
         bodyType: Body.Dynamic
```
```
         collisionTestingOnlyMode: true
```
```
       }
```
```
}
```
```
--------->Coin.qml FILE:

import QtQuick 2.0
```
```
import QtQuick.Window 2.2
```
```
import QtQuick.Controls 2.1
```
```
import Felgo 3.0
```
```
EntityBase {
```
```
  id: coinElement
```
```
  width: spriteUpperPipe.width
```
```
  height: spriteUpperPipe.height+pipeGateway+spriteBottomPipe.height
```
```
  MultiResolutionImage {
```
```
    id: coin
```
```
    source: "coin.png"
```
```
    x: 1125
```
```
    y: 625
```
```
  }
```
```
  BoxCollider {
```
```
    id: collider
```
```
    width: coin.width
```
```
    height: coin.height
```
```
    bodyType: Body.Static
```
```
    collisionTestingOnlyMode: true
```
```
  }
```
```
  Component.onCompleted: {
```
```
    reset()
```
```
  }
```
```
}
```
```
------------->Main.qml file:
GameWindow {
```
```
    screenHeight: 768
```
```
    screenWidth: 1024
```
```
//definición de la pantalla de juego como pantalla completa.
```
```
    EntityManager{
```
```
        id:entityManager
```
```
        entityContainer: window
```
```
    }
```
```
    Scene{
```
```
    id: window
```
```
    visible: true
```
```
    width: 480
```
```
    height: 320
```
```
    }
```
```
 Background{
```
```
    id: background
```
```
    height: parent
```
```
    width: parent
```
```
    }
```
```
//posición y velocidad inicial del pollito.
```
```
    Bird{
```
```
    id: bird
```
```
    x: 100
```
```
    y: 550
```
```
    z: 1
```
```
    property double vx: move.vi*Math.cos(move.tita)
```
```
    property double vy: move.vi*Math.sin(-move.tita)
```
```
        Behavior on x{ //el tiempo que va a tardar en moverse en cada iteracción en el eje x
```
```
            NumberAnimation{
```
```
            duration: 10
```
```
            }
```
```
        }
```
```
        Behavior on y{ //el tiempo que va a tardar en moverse en cada iteracción en el eje y
```
```
            NumberAnimation{
```
```
                duration:10
```
```
            }
```
```
        }
```
```
    }
```
```
    Box{
```
```
        id:box
```
```
        x:1100
```
```
        y:625
```
```
        property double vx: 0
```
```
        property double vy: 0
```
```
}


 Coin{
```
```
        id: coin
```
```
        x: 1100
```
```
        y: 450
```
```
    }
}

thank you to everyone!
```
April 28, 2017 at 11:54 #16165
Patricia
sorry in Coin.qml file the code is the next one:

import QtQuick 2.0
```
import QtQuick.Window 2.2
```
```
import QtQuick.Controls 2.1
```
```
import Felgo 3.0
```
```
EntityBase {
```
```
  id: coinElement
```
```
  width: 50
```
```
  height: 50
```
```
  MultiResolutionImage {
```
```
    id: coin
```
```
    source: "coin.png"
```
```
    x: 1125
```
```
    y: 625
```
```
  }
```
```
  BoxCollider {
```
```
    id: collider
```
```
    width: coin.width
```
```
    height: coin.height
```
```
    bodyType: Body.Static
```
```
    collisionTestingOnlyMode: true
```
```
    fixture.onBeginContact: {
```
```
    }
```
```
  }
```
```
  Component.onCompleted: {
```
```
    reset()
```
```
  }
```
```
}
```
May 2, 2017 at 13:38 #16171

Günther
Felgo Team

Hi Patricia!

I assume you are working with the Flappy Bird demo?

One thing that I see with your code is that your window size is set to screenWidth: 1024, but both the Coin and Box element in your Main.qml are placed at x: 1100 (which is not in the visible area).

Does that help?

Best,
Günther from Felgo

May 3, 2017 at 08:53 #16175

Patricia

you’re right!, But now the coin appear but I can’t change the size of it, and the box doesn’t appear…

thank you!

May 3, 2017 at 09:30 #16176
Günther
Felgo Team
Hi Patricia,

every Item that you add in QML has it’s own position, size, scale, etc …
So your Coin Entity (the EntityBase Item) has a size of 50×50 and is placed at the coordinates specified in your Main.qml where you add the coin.
Other Items within this Coin Entity have their own size and position (x/y coordinates relative to the parent Item, the Coin Entity). This means that the size and position of the Image and Collider in your entity are independent from the entity size, unless you explicitly bind e.g the the image width to coinElement.width.
```
EntityBase {
  id: coinElement
  width: 50
  height: 50

  MultiResolutionImage {
    id: coin
    source: "coin.png"
    width: coinElement.width // property binding to coinElement.width
    height: coinElement.height
  }

  // ...
}
```
These are basic concepts of how Items in QML work in terms of size and positioning. I’m sure you can get a better understanding of these concepts by creating some games from scratch using our written step-by-step tutorials.

Hope this helps!

Best,
Günther
May 3, 2017 at 10:57 #16178
Patricia
Perfect! now it works now. But the box doesn’t appear yet. I don’t know why, I’ll write my code:

Box.qml file:

import QtQuick 2.0
```
import QtQuick.Window 2.2
```
```
import QtQuick.Controls 2.1
```
```
import Felgo 3.0
```
```
EntityBase {
```
```
  id: boxElement
```
```
  entityType: "box"
```
```
  width: 100
```
```
  height: 100
```
```
  MultiResolutionImage {
```
```
    id: box
```
```
    width: boxElement.width
```
```
    height: boxElement.height
```
```
    source: "img/box.png"
```
```
  }
```
```
  BoxCollider {
```
```
    id: collider
```
```
    width: box.width
```
```
    height: box.height
```
```
    bodyType: Body.Dynamic
```
```
    collisionTestingOnlyMode: true
```
```
    fixture.onBeginContact: {
```
```
        boxElement.removeEntity()
```
```
    }
```
```
}

main.qml file: (only the part of the box)

 Box{
```
```
        id:box
```
```
        x:900
```
```
        y:500
```
```
    }
I dont know what Im doing wrong in this case. Because with the coin element I did exactly the same and it works
```
May 4, 2017 at 08:41 #16182

Patricia

I discovered why my box doesn’t appear in my game!! it was because Felgo use the word “Box” like a rectangular physics shape.

so, the solution was change the name of my object! for example I named it “MyBox”.