Why is creating dynamic qml objects so slow and what are some reasonable alternatives?

Question

What I would like to achieve is like a board game. There is a 100 * 100 grid located inside the Item , which is located in Flickable .

Separate rectangles of the “playing field” are svg images, currently there are about 20 types of them, this can increase to low hundreds.

As a test test, I just tried filling the "world" with elements:

 Component.onCompleted: { var i,j; for (i=0; i<100; ++i) for (j=0; j<100; ++j) { var type = (i+j) % 20; Qt.createQmlObject('import QtQuick 2.0; Image {source:"qrc:///icons/img/symbol'+type+'.svg"; width: 32*scaling.factor; height: 32*scaling.factor; x:'+i*32+'*scaling.factor; y:'+j*32+'*scaling.factor}', mainScreen); } } 

It takes more than 5 seconds on a moderately good PC.

However, after everything is loaded, it works smoothly, both scrolling and scaling ( scaling.factor is a float specified by a slider or chipper).

Svg images are very simple, they contain only a few basic forms. If I try to just load a simple rectangle instead of an svg image

 Qt.createQmlObject('import QtQuick 2.0; Rectangle {color : "red"; width: 32; height: 32; x:'+i*32+'; y:'+j*32+'}', mainScreen); 

It takes about 3 seconds. Even in the absence of images and dynamic scaling, no.

I remember that 20 years ago there were strategic games on computers with single-core processors with a clock frequency of less than 400 MHz, and in these games there were much larger maps, more complex tiles, animations, paths, etc. And we're not even talking about 3d.

How can a modern computer suppress several thousand very simple forms? It should not be boot time from disk, because the elements are in the resource file, and even the test with rectangles instead of images was terribly slow.

Not keeping everything displayed, and only loading elements near the border of the visible screen, is obviously the way to go, or it would be if I had a card 10000 * 10000. I would expect 100 * 100 elements to be displayed in one and the same same time, especially on a screen with good resolution. Most of them will be visible.

Am I missing something obvious or should I completely forget Qt Quick, and should I do everything manually in OpenGL or in some kind of 2d engine?

Edit:

As pointed out in the comments, Qt.createQmlObject is very slow.

So I tried

 var component = Qt.createComponent("field.qml"); component.createObject(mainScreen, {"x": i*32, "y": j*32 }); 

Where field.qml contains only one Rectangle{} or, in the second test, only an empty Item{} . In both cases, 10,000 iterations took more than 3 seconds. Adding svg to field.qml increased the time by 0.8 seconds.

By the way, is image caching supposed to be? Even if I have the same simple svg (which contains only 3 simple rectangles) that repeat everywhere, it takes a lot of time.

Using Repeater{} makes everything significantly faster. An empty Rectangle displayed after about 0.2-0.3 seconds, svg images in one second. (This method, however, has other drawbacks. I will send an answer when I finish testing different approaches)

Answer 1

^{(Despite the fact that it does not completely solve my specific problem, I will send this as an answer, because it corresponds to the scope of the question and may be useful to others.)}

Although official examples use dynamic object creation, this method is useful if the number of objects is low enough. For a very large number of elements, a ListView or TableView has the advantage of only rendering elements that are actually within the borders of the view.

 TableView { anchors.fill: parent model: ListModel {} itemDelegate: MyField{} Component.onCompleted: { var i; for (i=0; i<10000; ++i) { model.append({}); } } 

an order of magnitude faster than Qt.createQmlObject or Component.createObject , and much easier to handle than Repeater