[Todd]

New to Qt Creator –

Can someone explain to me how to put a image into an already made game?

I was working on tutorials with the flappy bird example and was simply trying to replace the image of the bird to a plane. When looking through tutorials it seemed that you can just source the image as long as the image is in your local library or something like that. Well when I went into the QML files to replace the ground it would not seem to work. Is it because of the sprite, and a new one must be created? Here is the code.

SpriteVPlay {
name: “running”

frameCount: 3
frameRate: 4

frameWidth: 368
frameHeight: 90
source: “../groundRock.png”

}

Also clarification on how to add new images into an already existing file tree would be good.

[Derick]

SpriteVPlay takes a sprite sheet with those parameters so if your png is just a single image it will not work properly. Refer to the original png from the flappy clone.

Images and other assets should be added to assets. I use assets/img for images. Also be aware of (default), +hd, ++hd if you plan on using MultiResolutionImages or see those sub folders in an example.

[Todd]

So to be clear when using qt creator do i need to upload images into a library to be able to use them? I’m very confused on the how to get my custom .PNG images into the game.

[Derick]

If you create a new vplay2 project from Qt Creator the file structure will include an “other files” directory which includes an “assets” folder. So to add your images find your project directory and move your images to the assets folder. To add a single image you can use Image qml type or MultiResolutionImage qml type. Refer to the qt qml documentation, their is a tremendous amount of information. I recommend looking at the http://doc.qt.io/qt-5/qmltypes.html and read up image components.

[GüntherFelgo Team]

Hi,

Thanks for helping out Derick!

As Derick pointed out, the easiest way to add your own images is to place them in the assets folder of your project. Components that are used to show images usually have a property source or something similar that let’s you specify the path to the image. In your example, the source “../groundRock.png” is set. This is a relative path that would search for this image in the parent directory of the QML file this code-part is placed.

When the QML file you are editing is not placed in a subfolder of the qml directory, you can reach the assets directory with “../assets/<path-to-img>“.

Best,
Günther