{"id":273453,"date":"2016-02-02T20:01:03","date_gmt":"2016-02-02T17:01:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=273453"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=273453","title":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 2D \u0442\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u043a\u0430\u0440\u0442\u044b \u043d\u0430 QML"},"content":{"rendered":"

<\/p>\n

\u041f\u0435\u0440\u0432\u0430\u044f \u043c\u044b\u0441\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u0435\u043d\u044f \u043f\u043e\u0441\u0435\u0442\u0438\u043b\u0430: \u00ab\u0430 \u0447\u0442\u043e, \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e?\u00bb.
\u041d\u0443, \u0432\u0440\u043e\u0434\u0435, \u043d\u0438\u0447\u0435\u0433\u043e:
\u2022 \u0441\u043e\u0437\u0434\u0430\u0435\u0448\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0442\u0435\u043a\u0441\u0442\u0443\u0440,
\u2022 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0448\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u044b,
\u2022 \u043f\u0440\u043e\u0431\u0435\u0433\u0430\u0435\u0448\u044c\u0441\u044f \u0446\u0438\u043a\u043b\u043e\u043c \u043f\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0443, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u044b.
\u0418\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a \u044f \u0438 \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u043b \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0430\u2026
<\/a> <\/p>\n

\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/b><\/h5>\n

\u0412\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0442\u0430\u0439\u043b\u044b \u043c\u043d\u0435 \u043d\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f, \u0434\u0430 \u0438 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c \u0443\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0438\u0437\u043e\u043c\u0435\u0442\u0440\u0438\u044f \u0432 \u0438\u0433\u0440\u0430\u0445, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0442\u0430\u0439\u043b\u044b, \u0447\u0442\u043e \u043e\u043d\u0438 \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0438 \u043a\u0430\u043a \u0440\u0438\u0441\u0443\u044e\u0442\u0441\u044f. \u041d\u0430\u043f\u043e\u043c\u043d\u044e \u043b\u0438\u0448\u044c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u044b\u0439 \u0438\u0437\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0442\u0430\u0439\u043b \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0438 2 \u043a 1, \u0442. \u0435. \u0435\u0441\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0430 \u0442\u0430\u0439\u043b\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 2 \u0435\u0434\u0438\u043d\u0438\u0446\u044b, \u0442\u043e \u0435\u0433\u043e \u0432\u044b\u0441\u043e\u0442\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c 1 \u0435\u0434\u0438\u043d\u0438\u0446\u0443.
\u0425\u043e\u0447\u0443 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0432 \u043c\u043e\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0441\u0435\u0432\u0434\u043e-3D \u0442\u0430\u0439\u043b\u044b, \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 1 \u043a 1. \u0412\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043e\u043d\u0438 \u0442\u0430\u043a:<\/p>\n

<\/p>\n

\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u00ab\u043a\u0443\u0431\u0438\u043a\u0430\u00bb (\u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0430 \u043a\u0440\u0430\u0441\u043d\u044b\u043c). \u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043e\u0442\u0441\u0435\u0447\u0435\u043d\u043d\u043e\u0439 \u043d\u0438\u0436\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u044f \u043d\u0435 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b, \u043d\u043e \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0430 \u0434\u043b\u044f \u0433\u043e\u0440, \u0443\u0433\u043b\u0443\u0431\u043b\u0435\u043d\u0438\u0439 \u0438\u043b\u0438 \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u0440\u044b\u0432\u043e\u0432 \u043a\u0430\u0440\u0442. \u0422\u043e\u0433\u0434\u0430 \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c z-\u0438\u043d\u0434\u0435\u043a\u0441\u2026 \u043d\u043e \u044d\u0442\u043e \u0443\u0436\u0435 \u0434\u0440\u0443\u0433\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f<\/p>\n

\u041f\u0435\u0440\u0432\u044b\u0435 \u0448\u0430\u0433\u0438<\/b><\/h3>\n

\u0422\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043c\u043e\u0439 \u043a\u043e\u0434 \u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435 \u043c\u043e\u0435\u0433\u043e \u043f\u0443\u0442\u0438: <\/p>\n

property int mapcols: 4 \/\/ \u043a\u043e\u043b-\u0432\u043e \u0442\u0430\u0439\u043b\u043e\u0432 \u043f\u043e x (\u0441\u0442\u043e\u043b\u0431\u0446\u044b) property int maprows: mapcols * 3 \/\/ \u043a\u043e\u043b-\u0432\u043e \u0442\u0430\u0439\u043b\u043e\u0432 \u043f\u043e y (\u0441\u0442\u0440\u043e\u043a\u0438) \/\/ \u0447\u0438\u0441\u043b\u043e 3 \u0432\u044b\u0431\u0440\u0430\u043d\u043e \u043d\u0435 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e: \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c  \/\/ \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0439 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u043a\u0430\u0440\u0442\u044b  function createMap() {   \/\/ \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0446\u0438\u043a\u043b \u0432 \u0446\u0438\u043a\u043b\u0435 - \u043f\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430\u043c \u0438 \u0441\u0442\u0440\u043e\u043a\u0430\u043c   \/\/ (\u043d\u0443 \u043d\u0435 \u043d\u0440\u0430\u0432\u044f\u0442\u0441\u044f \u043e\u043d\u0438 \u043c\u043d\u0435!),   \/\/ \u0441\u0447\u0438\u0442\u0430\u0435\u043c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0430\u0439\u043b\u043e\u0432   var tilecount = mapcols * maprows    \/\/ \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0438\u0445   for(var tileid = 0; tileid < tilecount; tileid++) {     \/\/ \u0443\u0437\u043d\u0430\u0435\u043c \u043a \u043a\u0430\u043a\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0435 \u0438 \u0441\u0442\u0440\u043e\u043a\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0442\u0430\u0439\u043b     var col = tileid % mapcols     var row = Math.floor(tileid \/ mapcols)      \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0447\u0451\u0442\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0438     \/\/ \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u043d\u0435\u0447\u0435\u0442\u043d\u044b\u0435 \u0442\u0430\u0439\u043b\u044b     \/\/ \u0442\u0430\u043a \u043a\u0430\u043a \u0440\u0438\u0441\u0443\u044e\u0442\u0441\u044f \u043e\u043d\u0438 \u043d\u0435 \u0434\u0440\u0443\u0433 \u043f\u043e\u0434 \u0434\u0440\u0443\u0433\u043e\u043c, \u0430 \u043f\u043e \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u0438     var iseven = !(row&1)      \/\/ \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0442\u0430\u0439\u043b\u0430     var tx = iseven ? col * tilesizew : col * tilesizew + tilesizew\/2     var ty = iseven ? row * tilesizeh : row * tilesizeh - tilesizeh\/2          ty -= Math.floor(row\/2) * tilesizeh      \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0435\u043c\u0443 \u0432\u0441\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b     var component = Qt.createComponent("Tile.qml");     var tile = component.createObject(mapitem, {                                         "x": tx,                                         "y": ty,                                         "z": tileid,                                         "col": col,                                         "row": row,                                         "id": tileid                                     });   } } <\/code><\/pre>\n
  \u0412\u043e\u0442 \u0438 \u0432\u0441\u0451. \u041f\u0440\u0438\u043b\u043e\u0436\u0438\u0432 \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0443\u0441\u0438\u043b\u0438\u0439 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a\u0443\u044e \u0441\u0438\u043c\u043f\u0430\u0442\u0438\u0447\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0443:
  <\/p>\n
  \u0420\u0430\u0441\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 Tile.qml<\/b>, \u044f \u043d\u0435 \u0441\u0442\u0430\u043d\u0443, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f. \u0410 \u0432\u0441\u0451 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442! 
  \u041f\u043e\u044f\u0441\u043d\u044e: \u0440\u0438\u0441\u0443\u044f \u043a\u0430\u0440\u0442\u0443 \u0441 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 4\u044512 (mapcols * maprows<\/b>) \u0431\u044b\u043b\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043e 48 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u041d\u043e \u0442\u0430\u043a\u043e\u0435 \u0438\u0433\u0440\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u043c. \u0415\u0441\u043b\u0438 \u0436\u0435 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0435 \u043f\u043e\u0431\u043e\u043b\u044c\u0448\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u0432 20 \u0442\u0430\u0439\u043b\u043e\u0432, \u0442\u043e \u0435\u0433\u043e \u0432\u044b\u0441\u043e\u0442\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442 60 \u0442\u0430\u0439\u043b\u043e\u0432, \u0430 \u044d\u0442\u043e \u2014 1200 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432<\/b>! \u041d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u043c\u044f\u0442\u0438 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u043e \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u041e\u0434\u043d\u0438\u043c \u0441\u043b\u043e\u0432\u043e\u043c \u2014 \u043c\u043d\u043e\u0433\u043e.<\/p>\n
\u0420\u0430\u0437\u043c\u044b\u0448\u043b\u0435\u043d\u0438\u044f<\/b><\/h3>\n
  \u0414\u043e\u043b\u0433\u043e \u0434\u0443\u043c\u0430\u0442\u044c \u043d\u0430\u043c \u043d\u043e\u0432\u044b\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u044b \u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c. \u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u0431\u044b\u043b\u0438 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043a\u0430\u0440\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0443\u0442\u044b \u0432 \u043d\u043e\u0432\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0435:
  1. \u043a\u0430\u0440\u0442\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043f\u043e\u0434\u0432\u0438\u0436\u043d\u043e\u0439 (\u0438\u0433\u0440\u043e\u043a \u043c\u043e\u0436\u0435\u0442 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0443 \u0432 \u043b\u044e\u0431\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438);
  2. \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u043e\u043a\u043d\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f;
  3. \u043c\u0435\u0442\u043e\u0434 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442 \u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 %)<\/p>\n
  \u041f\u0435\u0440\u0432\u0443\u044e \u0445\u043e\u0442\u0435\u043b\u043a\u0443 \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 Flickable<\/b>. \u0410 \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u0438 \u043d\u0435\u0442? \u041d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043c\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043e \u0441\u043a\u0440\u043e\u043b\u0430\u043c\u0438, \u043b\u043e\u0432\u043b\u0435\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438\u2026 \u0432 \u043e\u0431\u0449\u0435\u043c \u0437\u0430\u043c\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0432\u043e\u043e\u0431\u0449\u0435, \u0447\u0442\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u044f\u0435\u0442 \u0442\u0440\u0435\u0442\u044c\u0435\u043c\u0443 \u043f\u0443\u043d\u043a\u0442\u0443 \ud83d\ude42 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0437\u0432\u0430\u043d map_area <\/b> \u2014 \u043e\u0431\u043b\u0430\u0441\u0442\u044c_\u043a\u0430\u0440\u0442\u044b.<\/p>\n
  \u0427\u0442\u043e\u0431\u044b \u0434\u0430\u0442\u044c Flickable <\/b>\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u0432\u0438\u0433\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0443, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u043e \u0444\u043b\u0438\u043a\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0441 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u0440\u0430\u0432\u043d\u044b\u043c\u0438 \u043f\u043e\u043b\u043d\u043e\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u043a\u0430\u0440\u0442\u044b \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 Item <\/b> \u2014 \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0447\u0435\u043c\u0443 \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u043d\u043e\u0439 \u043f\u0430\u043c\u044f\u0442\u0438. \u041e\u043d \u0438 \u0431\u0443\u0434\u0435\u0442 \u043d\u043e\u0441\u0438\u0442\u044c \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0438\u043c\u044f map <\/b> \u2014 \u043a\u0430\u0440\u0442\u0430.<\/p>\n
  \u0414\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0442\u0435\u043a\u0441\u0442\u0443\u0440 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 map<\/b>. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c map_area<\/b>, \u0430 \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0441\u044f \u00ab\u043d\u0430 \u0432\u0438\u0434\u0443\u00bb, \u0435\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u0443\u044e \u0441\u043a\u0440\u043e\u043b\u043b\u0443 \u043a\u0430\u0440\u0442\u044b. \u0422.\u0435. \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u0432\u0438\u0433\u0430\u0435\u0442 \u043a\u0430\u0440\u0442\u0443 \u0432\u043b\u0435\u0432\u043e, \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u0432\u043f\u0440\u0430\u0432\u043e \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f. 
  \u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0439 \u0438\u0434\u0435\u0438 \u043c\u043e\u0433\u043b\u0430 \u0431\u044b \u043f\u043e\u0434\u043e\u0439\u0442\u0438 \u0441\u0432\u044f\u0437\u043a\u0430 Image <\/b>\u0441 QQuickImageProvider<\/b>, \u043d\u043e \u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u043a\u0443\u0434\u043d\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043f\u0440\u0438\u0431\u0435\u0433\u043d\u0443\u0432 \u043a \u0442\u0435\u043c\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u2014 C++<\/b>. \u0411\u0443\u0434\u0443\u0449\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u043e\u043c QQuickPaintedItem <\/b>\u0438 \u0435\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u043e \u0438\u043c\u044f MapProvider<\/b>.<\/p>\n
\u041e\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043a\u2026 \u043f\u0440\u043e\u0441\u0442\u043e\u043c\u0443<\/b><\/h3>\n
  \u0412 \u043c\u043e\u0435\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e \u043a\u0430\u043a-\u0442\u043e \u0442\u0430\u043a:
  <\/p>\n
  \u0412 \u043a\u043e\u0434\u0435 \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:  <\/p>\n
Window {     id: root     visible: true      width: 600     height: 600      \/\/ \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0442\u0430\u0439\u043b\u0430      \/\/ \u0432\u0441\u0435 \u043f\u043e\u043c\u043d\u044f\u0442, \u0447\u0442\u043e \u043e\u043d \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0439? \u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c     \/\/ "\u0432\u0438\u0434\u0438\u043c\u0443\u044e" \u0447\u0430\u0441\u0442\u044c \u0442\u0430\u0439\u043b\u0430, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435 \u0438 \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435     property double tilesize: 128     property double tilesizew: tilesize      property double tilesizeh: tilesizew \/ 2          \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0430\u0439\u043b\u043e\u0432 \u043f\u043e X \u0438 \u043f\u043e Y (\u0441\u0442\u043e\u043b\u0431\u0446\u044b \u0438 \u0441\u0442\u0440\u043e\u043a\u0438 \u0441\u043e\u043e\u0442\u0432.)     property int mapcols: 20      property int maprows: mapcols * 3       Flickable {         id: maparea          width: root.width         height: root.height         contentWidth: map.width         contentHeight: map.height          Item {             id: map              width: mapcols * tilesizew             height: maprows * tilesizeh              Item \/*MapProvider*\/ {                 id: mapprovider             }         }     } } <\/code><\/pre>\n
  \u0418\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043c \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u044b. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 MapProvider<\/b>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 C++ \u043a\u043b\u0430\u0441\u0441:  <\/p>\n
class MapProvider : public QQuickPaintedItem {     Q_OBJECT  public:      MapProvider(QQuickItem *parent = 0);      void paint(QPainter *painter) {         \/\/ \u0432\u0441\u044f \u043c\u0430\u0433\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0442\u0443\u0442     } }; <\/code><\/pre>\n
  \u0421\u0440\u0430\u0437\u0443 \u0436\u0435 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 QML<\/b>, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0430\u0432\u0438\u043c main.cpp<\/b>. \u0415\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0438\u043c:<\/p>\n
#include <QGuiApplication> #include <QQmlApplicationEngine> #include "mapprovider.h"  int main(int argc, char *argv[]) {     QGuiApplication app(argc, argv);      \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u044d\u0442\u0430 \u0441\u0442\u0440\u043e\u043a\u0430:     qmlRegisterType<MapProvider>("game.engine", 1, 0, "MapProvider");      QQmlApplicationEngine engine;     engine.load(QUrl(QStringLiteral("qrc:\/main.qml")));      return app.exec(); } <\/code><\/pre>\n
  \u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439, \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 QML<\/b>.<\/p>\n
  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 main.qml<\/b> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u043c\u043f\u043e\u0440\u0442 \u043c\u043e\u0434\u0443\u043b\u044f:  <\/p>\n
import game.engine 1.0 <\/code><\/pre>\n
  \u0438 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u0443   <\/p>\n
Item \/*MapProvider*\/ { <\/code><\/pre>\n
  \u043d\u0430  <\/p>\n
MapProvider { <\/code><\/pre>\n
  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434, \u044f \u0441\u043e\u0437\u0434\u0430\u043b 2 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u0444\u043e\u0440\u043c\u0435: \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u043a\u043d\u0430 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u043b \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c game_area<\/b>, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u043b \u044d\u043b\u0435\u043c\u0435\u043d\u0442 map_area<\/b>. \u0420\u0430\u0437\u043c\u0435\u0440 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u044f \u043d\u0430\u043c\u0435\u0440\u0435\u043d\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u043c\u0435\u043d\u044c\u0448\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0444\u043e\u0440\u043c\u044b, \u0430 \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u044d\u0442\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0441\u043e\u0437\u0434\u0430\u043b \u043e\u0431\u044b\u0447\u043d\u044b\u0439 Rectangle<\/b>:  <\/p>\n
     \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0430\u0439\u043b\u043e\u0432 \u043f\u043e X \u0438 \u043f\u043e Y (\u0441\u0442\u043e\u043b\u0431\u0446\u044b \u0438 \u0441\u0442\u0440\u043e\u043a\u0438 \u0441\u043e\u043e\u0442\u0432.)     property int mapcols: 20      property int maprows: mapcols * 3       Item {         id: gamearea          width: root.width \/ 2         height: root.height \/ 2         x: width \/ 2         y: height \/ 2         clip: false          Flickable {             id: maparea              width: root.width             height: root.height             contentWidth: map.width             contentHeight: map.height              Item {                 id: map                  width: mapcols * tilesizew                 height: maprows * tilesizeh                  MapProvider {                     id: mapprovider                 }             }         }     }      Rectangle {         id: gameareaborder          width: gamearea.width         height: gamearea.height         x: gamearea.x         y: gamearea.y          border.width: 1         border.color: "red"         color: "transparent"     } } <\/code><\/pre>\n
\u041c\u043e\u043a\u0440\u044b\u0435 \u0440\u0430\u0441\u0447\u0435\u0442\u044b \u2014 \u0440\u0430\u0437\u0434\u0435\u043b, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0432\u043e\u0434\u044b<\/b><\/h3>\n
  \u041c\u044b \u043f\u043e\u0447\u0442\u0438 \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u043b\u0438\u0441\u044c \u043a \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0435 \u043a\u0430\u0440\u0442\u044b, \u043d\u043e \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u044e\u0430\u043d\u0441\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435. \u0418 \u043f\u0435\u0440\u0432\u044b\u0439 \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442 \u043a \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u044e \u2014 \u043a\u0440\u0430\u044f \u043a\u0430\u0440\u0442\u044b. \u0423 \u043d\u0430\u0441 \u043e\u043d\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442\u0441\u044f \u00ab\u0437\u0443\u0431\u0430\u0441\u0442\u044b\u043c\u0438<\/i>\u00bb. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u043d\u043e \u0432 \u043d\u043e\u0432\u043e\u043c \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f. \u0427\u0442\u043e\u0431\u044b \u0441\u043f\u0440\u044f\u0442\u0430\u0442\u044c \u0441 \u0433\u043b\u0430\u0437 \u0434\u043e\u043b\u043e\u0439 \u0437\u0443\u0431\u0430\u0441\u0442\u043e\u0441\u0442\u044c \u0441\u043b\u0435\u0432\u0430 \u0438 \u0441\u0432\u0435\u0440\u0445\u0443, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0443 (Item: map<\/b>) \u0432\u043b\u0435\u0432\u043e \u0438 \u0432\u0432\u0435\u0440\u0445 \u043d\u0430 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b \u0442\u0430\u0439\u043b\u0430:  <\/p>\n
            Item {                 id: map                  width: mapcols * tilesizew                 height: maprows * tilesizeh                 x: -tilesizew \/ 2                 y: -tilesizeh \/ 2 <\/code><\/pre>\n
  <\/p>\n
  \u0427\u0442\u043e\u0431\u044b \u0441\u043f\u0440\u044f\u0442\u0430\u0442\u044c \u0437\u0443\u0431\u0430\u0441\u0442\u043e\u0441\u0442\u044c \u0441\u043f\u0440\u0430\u0432\u0430 \u0438 \u0441\u043d\u0438\u0437\u0443, \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043d\u0433 \u043f\u0443\u0442\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 contentWidth <\/b>\u0438 contentHeight<\/b>. \u0422\u0443\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0447\u0435\u0441\u0442\u044c \u0442\u043e\u0442 \u0444\u0430\u043a\u0442, \u0447\u0442\u043e \u0441\u0430\u043c\u0443 \u043a\u0430\u0440\u0442\u0443 \u043c\u044b \u0443\u0436\u0435 \u0441\u043c\u0435\u0441\u0442\u0438\u043b\u0438 \u0432\u043b\u0435\u0432\u043e \u0438 \u0432\u0432\u0435\u0440\u0445 \u043d\u0430 \u043f\u043e\u043b\u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u0437\u043d\u0430\u0447\u0438\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u043b\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0442\u0430\u0439\u043b\u0430:  <\/p>\n
        Flickable {             id: maparea              contentWidth: map.width - tilesizew             contentHeight: map.height - tilesizeh <\/code><\/pre>\n
  \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 MapProvider <\/b>\u043f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043d\u0433\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:  <\/p>\n
                MapProvider {                     id: mapprovider                      width: gamearea.width + tilesizew * 2                     height: gamearea.height + tilesizeh * 2                     x: maparea.contentX + (tilesizew\/2 - maparea.contentX%tilesizew + map.x)                     y: maparea.contentY + (tilesizeh\/2 - maparea.contentY%tilesizeh + map.y) <\/code><\/pre>\n
  \u0436\u0443\u0442\u043a\u043e\u0432\u0430\u0442\u043e \ud83d\ude42 \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u043e\u044f\u0441\u043d\u044e \u0447\u0442\u043e \u0436\u0435 \u0442\u0443\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. <\/p>\n
  \u041f\u043e \u0441\u0443\u0442\u0438, \u043d\u0430\u0448\u0430 \u043a\u0430\u0440\u0442\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u0445 \u0431\u043b\u043e\u043a\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043f\u0438\u0441\u0430\u043d\u044b \u0440\u043e\u043c\u0431\u043e\u0432\u0438\u0434\u043d\u044b\u0435 \u0442\u0430\u0439\u043b\u044b. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u043e\u0442\u043f\u0430\u0434\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0435 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043a\u0430\u0440\u0442\u044b \u043f\u0440\u0438 \u043c\u0430\u043b\u0435\u0439\u0448\u0435\u043c \u0441\u043a\u0440\u043e\u043b\u043b\u0435, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u00ab\u0437\u0430\u0449\u0438\u0442\u043d\u0443\u044e \u0437\u043e\u043d\u0443<\/i>\u00bb (\u043d\u0435 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f) \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u043e\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e \u0432\u0441\u0435\u0439 \u043a\u0430\u0440\u0442\u043e\u0439, \u0430 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u043a\u0430\u0440\u0442\u0443 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043d\u0433 \u043f\u0440\u0435\u0432\u044b\u0441\u0438\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u0442\u043e\u0439 \u0437\u043e\u043d\u044b. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443, \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043e\u043a \u043a\u0430\u0440\u0442\u044b \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u0441\u044f \u0432 \u0441\u043e\u0442\u043d\u0438 \u0440\u0430\u0437 (\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0442\u0430\u0439\u043b\u0430).
  \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043a\u043e\u0434\u0435 \u044d\u0442\u0430 \u00ab\u0437\u0430\u0449\u0438\u0442\u043d\u0430\u044f \u0437\u043e\u043d\u0430\u00bb \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u0451\u043c \u043f\u0440\u0438\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a \u0448\u0438\u0440\u0438\u043d\u0435 \u0438 \u0432\u044b\u0441\u043e\u0442\u0435 MapProvider <\/b>\u0443\u0434\u0432\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0442\u0430\u0439\u043b\u0430. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u043c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u043f\u0440\u0430\u0432\u043e \u0438 \u0432\u043d\u0438\u0437 \u0440\u043e\u0432\u043d\u043e \u043d\u0430 2 \u0442\u0430\u0439\u043b\u0430. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 \u044d\u0442\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u0432\u0435\u0440\u0445 \u0438 \u0432\u043b\u0435\u0432\u043e, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0443 map_area <\/b>\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u0430\u0440\u0442\u044b map<\/b>:  <\/p>\n
        Flickable {             id: maparea              contentWidth: map.width - tilesizew * 1.5             contentHeight: map.height - tilesizeh \/ 2              \/* ... *\/              Item {                 id: map                  width: mapcols * tilesizew + tilesizew                 height: maprows * tilesizeh \/ 2 <\/code><\/pre>\n
  \u0424\u043e\u0440\u043c\u0443\u043b\u0430 \u0440\u0430\u0441\u0447\u0435\u0442\u0430 X<\/b> \u0438 Y<\/b> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 MapProvider <\/b>\u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0435\u043c\u0443 \u0441\u043a\u0430\u0447\u043a\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e\u0435 <\/i>\u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043d\u0433 \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u00ab\u0437\u0430\u0449\u0438\u0442\u043d\u043e\u0439 \u0437\u043e\u043d\u044b\u00bb. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043a \u044d\u0442\u0438\u043c \u0441\u043a\u0430\u0447\u043a\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u0430\u0440\u0442\u044b.<\/p>\n
\u0411\u043b\u0438\u0436\u0435 \u043a \u0442\u0435\u043b\u0443<\/b><\/h3>\n
  \u0418\u0442\u0430\u043a, \u0441 \u0440\u0430\u0441\u0447\u0435\u0442\u0430\u043c\u0438 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 QML \u043f\u043e\u043a\u043e\u043d\u0447\u0435\u043d\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u0441\u044f \u0441 \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u0434\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0439 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u00ab\u0442\u0435\u043b\u0430<\/i>\u00bb \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 MapProvider<\/b>:
  1. \u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 map_area<\/b> \u2014 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u043d\u043e\u043c\u0435\u0440\u043e\u0432 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0438 \u0441\u0442\u0440\u043e\u043a, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043a\u0430\u0440\u0442\u044b (\u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u0435\u0440\u0445\u0443 \u0441\u043b\u0435\u0432\u0430, \u0437\u043d\u0430\u0447\u0438\u0442 \u043c\u044b \u043d\u0430\u0439\u0434\u0435\u043c \u0438\u043d\u0434\u0435\u043a\u0441 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u0442\u0430\u0439\u043b\u0430). \u042d\u0442\u0438\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c \u044f \u0434\u0430\u043b \u0438\u043c\u0435\u043d\u0430 cx<\/b> \u0438 cy<\/b>.
  2. \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u0442\u0430\u0439\u043b\u043e\u0432 \u2014 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a.
  3. \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u0430\u0440\u0442\u044b \u2014 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0430 \u0442\u0430\u0439\u043b\u0430.
  4. \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0441\u0430\u043c\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0443\u0440 \u043a\u0430\u0440\u0442\u044b. \u0423 \u043c\u0435\u043d\u044f \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043e\u0434\u043d\u043e\u043c\u0435\u0440\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432.  <\/p>\n
                MapProvider {                     id: mapprovider                      width: gamearea.width + tilesizew*2                     height: gamearea.height + tilesizeh*2                      x: maparea.contentX + (tilesizew\/2 - maparea.contentX%tilesizew + map.x)                     y: maparea.contentY + (tilesizeh\/2 - maparea.contentY%tilesizeh + map.y)                      cx: maparea.contentX                     cy: maparea.contentY                      tilesize: root.tilesize                     tilesizew: root.tilesizew                     tilesizeh: root.tilesizeh                      mapcols: root.mapcols                     maprows: root.maprows                      mapdata: [                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004",                         "0004","0004","0004","0004","0004","0004","0004","0004"                     ]                 } <\/code><\/pre>\n
  \u043f.\u0441. \u0437\u0434\u0435\u0441\u044c \u00ab0004\u00bb \u2014 \u044d\u0442\u043e \u0438\u043c\u044f \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0431\u0435\u0437 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f.<\/i><\/p>\n
  \u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0432\u0441\u0435 \u044d\u0442\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 C++, \u0432\u0441\u0435 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043c\u0430\u043a\u0440\u043e\u0441\u0430 Q_PROPERTY<\/b>:  <\/p>\n
class MapProvider : public QQuickPaintedItem {     Q_OBJECT      Q_PROPERTY(double tilesize READ tilesize WRITE setTilesize NOTIFY tilesizeChanged)     Q_PROPERTY(double tilesizew READ tilesizew WRITE setTilesizew NOTIFY tilesizewChanged)     Q_PROPERTY(double tilesizeh READ tilesizeh WRITE setTilesizeh NOTIFY tilesizehChanged)     Q_PROPERTY(double mapcols READ mapcols WRITE setMapcols NOTIFY mapcolsChanged)     Q_PROPERTY(double maprows READ maprows WRITE setMaprows NOTIFY maprowsChanged)     Q_PROPERTY(double cx READ cx WRITE setCx NOTIFY cxChanged)     Q_PROPERTY(double cy READ cy WRITE setCy NOTIFY cyChanged)     Q_PROPERTY(QVariantList mapdata READ mapdata WRITE setMapdata NOTIFY mapDatachanged)  public: \/* ... *\/ } <\/code><\/pre>\n
  \u041c\u043e\u0449\u044c QtCreator<\/b>‘a \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0431\u0435\u0437 \u0442\u0440\u0443\u0434\u0430 \u0438 \u0431\u0435\u0437 \u0437\u0430\u043f\u0438\u043d\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0441\u0435 \u044d\u0442\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u0430\u0440\u043e\u0439 \u043a\u043b\u0438\u043a\u043e\u0432 (\u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0435 \u0432 \u043a\u0443\u0440\u0441\u0435: \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 Q_PROPERTY -> Refactor -> Generate Missing Q_PROPERTY Members…<\/i>)<\/p>\n
\u0424\u0438\u043d\u0430\u043b<\/b><\/h3>\n
  \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u044b \u0434\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0434\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 paint<\/b>. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043e\u043d \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 createMap()<\/b> \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432 \u043d\u0435\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a:  <\/p>\n
void MapProvider::paint(QPainter *painter) {     \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u043e\u043c\u0435\u0440\u0430 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0438 \u0441\u0442\u0440\u043e\u043a\u0438, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430     int startcol = qFloor(m_cx \/ m_tilesizew);     int startrow = qFloor(m_cy \/ m_tilesizeh);      \/\/ \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u0442\u0430\u0439\u043b\u043e\u0432     int tilecountw = qFloor(width() \/ m_tilesize);     int tilecounth = qFloor(height() \/ m_tilesize) * 4;     int tilecount = tilecountw * tilecounth;      int col, row, globcol, globrow, globid = 0;     double tx, ty = 0.0f;     bool iseven;     QPixmap tile;     QString tileSourceID;      for(int tileid = 0; tileid < tilecount; tileid++) {         \/\/ \u0443\u0437\u043d\u0430\u0435\u043c \u043a \u043a\u0430\u043a\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0435 \u0438 \u0441\u0442\u0440\u043e\u043a\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0442\u0430\u0439\u043b         col = tileid % tilecountw;         row = qFloor(tileid \/ tilecountw) ;          \/\/ \u0443\u0437\u043d\u0430\u0435\u043c \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0443, \u0441\u0442\u0440\u043e\u043a\u0443 \u0438 \u0438\u043d\u0434\u0435\u043a\u0441 \u0442\u0430\u0439\u043b\u0430         globcol = col + startcol;         globrow = row + startrow * 2;         globid = m_mapcols * globrow + globcol;          \/\/ \u0435\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u044b \u0431\u044b\u043b\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043e \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e         \/\/ \u0442\u043e \u043d\u0430 \u043a\u0430\u0440\u0442\u0435 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0431\u0435\u043b\u0430\u044f \u0434\u044b\u0440\u0430         if(globid >= m_mapdata.size()) {             return;         }         \/\/ \u043d\u0435 \u0440\u0438\u0441\u0443\u0435\u043c \u0442\u043e, \u0447\u0442\u043e \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438         else if(globcol >= m_mapcols || globrow >= m_maprows) {             continue;         }          \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0447\u0451\u0442\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0438         iseven = !(row&1);          \/\/ \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0442\u0430\u0439\u043b\u0430         tx = iseven ? col * m_tilesizew : col * m_tilesizew + m_tilesizew\/2;         ty = iseven ? row * m_tilesizeh : row * m_tilesizeh - m_tilesizeh\/2;          ty -= qFloor(row\/2) * m_tilesizeh;          \/\/ \u0432\u044b\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u043f\u043e \u0435\u0433\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443         tileSourceID = m_mapdata.at(globid).toString();          \/\/ \u0434\u043e\u0441\u0442\u0430\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438\u0437 \u043a\u0435\u0448\u0430, \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0442\u0430\u043c \u0435\u0441\u0442\u044c         if(tileCache.contains(tileSourceID)) {             tile = tileCache.value(tileSourceID);         }         \/\/ \u043b\u0438\u0431\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438 \u0441\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u0432 \u043c\u0430\u0441\u0441\u0438\u0432         else {             tile = QPixmap(QString(":\/assets\/texture\/%1.png").arg(tileSourceID))                     .scaled(QSize(m_tilesize, m_tilesize),                             Qt::IgnoreAspectRatio,                             Qt::SmoothTransformation);              tileCache.insert(tileSourceID, tile);         }          \/\/ \u0440\u0438\u0441\u0443\u0435\u043c \u0442\u0430\u0439\u043b         painter->drawPixmap(tx, ty, tile);          \/\/ \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u0430\u0439\u043b\u0435         painter->setFont(QFont("Helvetica", 8));         painter->setPen(QColor(255, 255, 255, 100));          painter->drawText(QRectF(tx, ty, m_tilesizew, m_tilesizeh),                           Qt::AlignCenter,                           QString("%1\\n%2:%3").arg(globid).arg(globcol).arg(globrow));     } } <\/code><\/pre>\n
  \u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043d\u0435 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u0430 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u043d\u0430 \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0442\u0430\u0439\u043b\u0430 (\u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c). \u041f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0441\u044a\u0435\u0434\u0430\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0433\u043b\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u0435 Qt::SmoothTransformation<\/b>.
  \u041a \u0441\u043b\u043e\u0432\u0443, \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0441\u0435\u0439\u0447\u0430\u0441, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043b\u0438\u0448\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0444\u0430\u043a\u0442\u043e\u0440 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 root.tilesize<\/b><\/i><\/p>\n
  \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f tileCache<\/b> \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 MapProvider<\/b>:  <\/p>\n
private:     QMap<QString, QPixmap> tileCache; <\/code><\/pre>\n
  \u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0448\u0442\u0440\u0438\u0445 \u2014 \u044d\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u0430\u0440\u0442\u044b \u043f\u0443\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0430\u0440\u044b \u043a\u043e\u043d\u043d\u0435\u043a\u0442\u043e\u0432:  <\/p>\n
MapProvider::MapProvider(QQuickItem *parent) :     QQuickPaintedItem(parent) {     connect(this, SIGNAL(xChanged()), this, SLOT(update()));     connect(this, SIGNAL(yChanged()), this, SLOT(update())); } <\/code><\/pre>\n
\u0420\u0435\u043b\u0438\u0437<\/b><\/h3>\n
  \u041d\u0443 \u0432\u043e\u0442 \u0438 \u0432\u0441\u0435, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0442\u0430\u043a\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443:
  
  \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e-\u0442\u043e \u0438 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u043d\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0435\u043d\u0435\u0435 \u043f\u0440\u043e\u0436\u043e\u0440\u043b\u0438\u0432\u043e\u0439.<\/p>\n
  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043a\u0430\u043a \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u0440\u0442\u0430 \u0432 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438, \u043d\u0443\u0436\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 root.mapcols<\/b>, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0432 \u0435\u0433\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 8<\/b> (\u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u043d\u043e\u0435 \u043d\u0430 root.maprows<\/b> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 mapprovider.mapdata<\/b>, \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b).<\/p>\n
  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u043f\u0440\u044f\u0442\u0430\u0442\u044c \u00ab\u0437\u0430\u0449\u0438\u0442\u043d\u0443\u044e \u0437\u043e\u043d\u0443\u00bb \u0437\u0430 \u043a\u0443\u043b\u0438\u0441\u044b, \u043e\u0441\u0442\u0430\u0432\u0438\u0432 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043a\u0430\u0440\u0442\u044b, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 gamearea.clip<\/b> \u0441 false<\/b> \u043d\u0430 true<\/b><\/p>\n
  \u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (vk.com)<\/a><\/b>               <\/p>\n
<\/div>\n
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habrahabr.ru\/post\/276457\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
       <\/p>\n
  \u041f\u0435\u0440\u0432\u0430\u044f \u043c\u044b\u0441\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u0435\u043d\u044f \u043f\u043e\u0441\u0435\u0442\u0438\u043b\u0430: \u00ab\u0430 \u0447\u0442\u043e, \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e?\u00bb.
  \u041d\u0443, \u0432\u0440\u043e\u0434\u0435, \u043d\u0438\u0447\u0435\u0433\u043e: 
  \u2022 \u0441\u043e\u0437\u0434\u0430\u0435\u0448\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0442\u0435\u043a\u0441\u0442\u0443\u0440,
  \u2022 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0448\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u044b, 
  \u2022 \u043f\u0440\u043e\u0431\u0435\u0433\u0430\u0435\u0448\u044c\u0441\u044f \u0446\u0438\u043a\u043b\u043e\u043c \u043f\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0443, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u044b.
  \u0418\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a \u044f \u0438 \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u043b \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0430\u2026  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-273453","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/273453","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=273453"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/273453\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=273453"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=273453"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=273453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}