{"id":335962,"date":"2022-07-20T15:00:55","date_gmt":"2022-07-20T15:00:55","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=335962"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=335962","title":{"rendered":"<span>3D-\u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0432\u043e Flutter. \u0420\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c Flame<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412 \u043a\u043e\u043d\u0446\u0435 \u043f\u0440\u043e\u0448\u043b\u043e\u0433\u043e \u0433\u043e\u0434\u0430 \u0434\u0432\u0438\u0436\u043e\u043a Flame \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u0432\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 Flutter \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043b \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e 1.0 \u0438 \u0430\u043d\u043e\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043b \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432, \u043f\u043e\u0434\u0445\u043e\u0434\u0430\u0445 \u043a \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0441\u0446\u0435\u043d\u044b \u0438\u0437 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u0432 \u0440\u043e\u043b\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e Flame \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0430 \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u0443\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0443 (\u0441\u043f\u0440\u0430\u0439\u0442\u044b, \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0447\u0430\u0441\u0442\u0438\u0446, \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b), \u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Skia \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u044b\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0448\u0435\u0439\u0434\u0435\u0440\u0430\u043c\u0438, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0447\u0435\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u044c\u0441\u044f \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u044b\u0445 \u0438\u0433\u0440. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043e\u0431\u0441\u0443\u0434\u0438\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 Flame \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432.<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435, \u0447\u0435\u043c \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0435, \u043e\u0431\u0441\u0443\u0434\u0438\u043c \u043e\u0431\u0449\u0438\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u043e <a href=\"https:\/\/flame-engine.org\/\">Flame<\/a> \u0438 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a \u043e\u0431\u044a\u0435\u043a\u0442\u0443 \u0438\u043b\u0438 \u043a \u0438\u0433\u0440\u0435 \u0432 \u0446\u0435\u043b\u043e\u043c. \u0418 \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u0432\u0435\u0434\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Flame \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b update (\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u0430\u0434\u0440\u0435) \u0438 render (\u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 canvas). \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0439 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044e \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 (onMount), \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 (onLoad). \u0422\u0430\u043a\u0436\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0442\u0440\u0430\u0436\u0435\u043d \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\/\u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e, \u0441\u043c\u0435\u0449\u0435\u043d \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u043f\u043e\u0432\u0435\u0440\u043d\u0443\u0442 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u0443\u0433\u043e\u043b \u0438\u043b\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u0430\u0442\u0440\u0438\u0447\u043d\u044b\u0435 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 Skia, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0435 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 render). \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>FlameGame<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0432 \u0432\u0438\u0434\u0436\u0435\u0442 <code>GameWidget<\/code> \u0438 \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0433\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 Flutter-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0414\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043c\u0438\u043a\u0441\u0438\u043d\u044b. \u041d\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>FlameGame<\/code>) \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u043c\u0438\u043a\u0441\u0438\u043d\u044b, \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>HasTappables<\/code> \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043f\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c, <code>HasHoverables<\/code> \u0438 <code>HasDraggables<\/code> &#8212; \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0438 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e). \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u043c\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u043c\u0438\u043a\u0441\u0438\u043d\u0430\u043c\u0438 <code>Tappable<\/code>, <code>Hoverable<\/code> \u0438 <code>Draggable<\/code>. \u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0438 \u043c\u044b\u0448\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043c\u0438\u043a\u0441\u0438\u043d\u044b <code>TapDetector<\/code> (\u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442), <code>DoubleTapDetector<\/code>, <code>ForcePressDetector<\/code>, <code>KeyboardEvents<\/code>, <code>PanDetector<\/code> (\u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435), <code>ScrollDetector<\/code>, <code>ScaleDetector<\/code>, <code>VerticalDragDetector<\/code>, <code>HorizontalDragDetector<\/code>, <code>MouseMovementDetector<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435. <\/p>\n<p>\u041e\u0441\u043e\u0431\u043e\u0433\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0437\u0430\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u042d\u0442\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 (\u0435\u0441\u043b\u0438 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043c\u0438\u043a\u0441\u0438\u043d <code>HasCollisionDetection<\/code>) \u043f\u043e \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u043e\u0431\u043b\u0430\u0441\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a\u0430\u043a \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u0438\u043f\u0430 <code>*Hitbox<\/code> (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>RectangleHitbox<\/code> \u0438\u043b\u0438 <code>PolygonHitbox<\/code>). \u0414\u043b\u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0444\u0430\u043a\u0442\u0430 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043c\u0438\u043a\u0441\u0438\u043d <code>CollisionCallbacks<\/code>, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>onCollision<\/code> \u0434\u043b\u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c.<\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u0444\u0438\u0433\u0443\u0440\u0430 (\u043e\u0431\u0449\u0438\u0439 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c &#8212; <code>PositionComponent<\/code>, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f position \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 size \u0438 \u0435\u0433\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u0438 &#8212; <code>ShapeComponent<\/code>, <code>PolygonComponent<\/code> \u0438 \u0434\u0440.), \u0442\u0430\u043a \u0438 \u0438\u043d\u0430\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f (<code>MoveToEffect<\/code>), \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b (<code>ColorEffect<\/code>), \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 (<code>ScaleEffect<\/code>, <code>RotateEffect<\/code>), \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f (*Hitbox), \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0447\u0430\u0441\u0442\u0438\u0446 (<code>ParticleSystemComponent<\/code>), \u0442\u0435\u043a\u0441\u0442 (<code>TextboxComponent<\/code>), \u0441\u043f\u0440\u0430\u0439\u0442 (<code>SpriteComponent<\/code>, <code>SpriteAnimationComponent<\/code>), \u0438\u0437\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043a\u0430\u0440\u0442\u0430 (<code>IsometricTileMapComponent<\/code>), \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c \u043f\u0430\u0440\u0430\u043b\u043b\u0430\u043a\u0441\u0430 (<code>ParallaxComponent<\/code>), \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f (<code>HudButtonComponent<\/code>, <code>HudMarginComponent<\/code>), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b <code>FpsTextComponent<\/code>, <code>JoystickComponent<\/code> \u0438 <code>CameraComponent<\/code>.<\/p>\n<p>Flame \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f (\u0432 pub.dev \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043f\u043e \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0443 flame_), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 Component, \u0447\u0442\u043e \u043c\u044b \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0434\u043d\u0435\u0435 \u043f\u0440\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 3D-\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u041d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u043e\u043c-\u043d\u0430\u0436\u0430\u0442\u0438\u0439 \u043d\u0430 Flame. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0435\u0442\u0435\u043a\u0442\u043e\u0440 \u043d\u0430\u0436\u0430\u0442\u0438\u0439, \u043a\u043d\u043e\u043f\u043a\u0443 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 \u0441\u043e \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u043e\u043c. \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u043a\u0430\u0434\u0440\u043e\u0432 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 (FPS).<\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 pubspec.yaml \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0447\u0435\u0440\u0435\u0437 pub get:<\/p>\n<pre><code>dependencies:   flame: ^1.2.1<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043b\u0430\u0441\u0441-\u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a \u043e\u0442 <code>FlameGame<\/code> (\u0438 \u0441\u0440\u0430\u0437\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u043c <code>HasTappables<\/code> \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u0432 \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432):<\/p>\n<pre><code class=\"dart\">class CounterGame extends FlameGame with HasTappables { String _getCounter() => \"Counter value\";    @override Future&lt;void>? onLoad() async { super.onLoad();     add(FpsTextComponent()         ..position = Vector2(16, 16)         ..size = Vector2(128, 32));     add(TextBoxComponent(text: _getCounter(), anchor: Anchor.center)         ..position = Vector2(size.x \/ 2, size.y \/ 2 - 32)         ..size = Vector2(size.x \/ 2, 32));     add(TextBoxComponent(\"Press me\")..position = size \/ 2..size=Vector2(128, 32)); } }  void main() { runApp( MaterialApp(home: GameWidget(game: CounterGame())), ); }<\/code><\/pre>\n<p><code>MaterialApp<\/code> \u0437\u0434\u0435\u0441\u044c \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a\u0430\u0441\u0430\u043d\u0438\u044f \u044d\u043a\u0440\u0430\u043d\u0430. \u041c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0446\u0435\u043d\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 <code>CounterGame<\/code>). \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u0432\u0441\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f \u043e\u0442 <code>PositionComponent<\/code>) \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440, \u0438\u043d\u0430\u0447\u0435 \u043e\u043d \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043e\u043f\u043e\u0440\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 (anchor), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u0430\u043a\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0442\u043e\u0447\u043a\u0443, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0432 position. \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u043a\u043b\u0430\u0441\u0441\u0430 Vector2 (\u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 vector_math_64). \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0430\u0436\u0430\u0442\u0438\u044f:<\/p>\n<pre><code class=\"dart\">class Button extends TextBoxComponent with Tappable { Button(text) : super(text: text, size: Vector2(128, 32));    @override   bool onTapDown(TapDownInfo info) {     return true; } }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0441\u0432\u043e\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e <code>TextBoxComponent<\/code> \u0441 \u043f\u0440\u0435\u0434\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c (128dp \u0445 32dp), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u0430\u0441\u0430\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430. \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043f\u043e\u0434\u043f\u0438\u0448\u0435\u043c\u0441\u044f \u043d\u0430 \u043d\u0435\u0433\u043e \u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430:<\/p>\n<pre><code class=\"dart\">class CounterState with ChangeNotifier { int counter = 0; void increment() { counter++; notifyListeners(); } }  final state = CounterState();  class Button extends TextBoxComponent with Tappable { Button(text) : super(text: text, size: Vector2(128, 32));    @override    bool onTapDown(TapDownInfo info) {     state.increment();     return true;   } }  class CounterGame extends FlameGame with HasTappables {   late TextBoxComponent textBox;    String _getCounter() => \"You have been pressed ${state.counter} times\";    @override   Future&lt;void>? onLoad() async {     super.onLoad();     state.addListener(() {       textBox.text = _getCounter();     });     add(FpsTextComponent()         ..position = Vector2(16, 16)         ..size = Vector2(128, 32));     add(textBox = TextBoxComponent(text: _getCounter(), anchor: Anchor.center)         ..position = Vector2(size.x \/ 2, size.y \/ 2 - 32)         ..size = Vector2(size.x \/ 2, 32));     add(       Button(\"Press me\")..position = size \/ 2,     );   } }<\/code><\/pre>\n<p>\u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0432\u0438\u0434\u0435\u0442\u044c, \u0437\u0434\u0435\u0441\u044c \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0441\u043e\u043e\u0431\u0449\u0430\u0442\u044c \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u043a\u0430\u043a \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 State \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c setState). \u0412\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u044e\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0438\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u043c\u043e\u0433\u0443\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u043e \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438). \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 \u0432\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 render.<\/p>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u044d\u043a\u0440\u0430\u043d \u0441\u043f\u0440\u0430\u0439\u0442\u0430\u043c\u0438 (\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435, SpriteSheet &#8212; \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u0441\u0435\u0442\u043a\u043e\u0439 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u044b, \u0442\u0430\u043a \u0438 \u0438\u0445 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e), svg-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 (\u043f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 flame_svg), \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438 rive (\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c flame_rive) \u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f\u043c\u0438  (\u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>CustomPainterComponent<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 painter). <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u043d\u0430\u0448\u0435\u0439 \u0442\u0435\u043c\u0435 \u0438 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0435. \u0412 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u0435\u043a\u0446\u0438\u044e \u0442\u043e\u0447\u0435\u043a \u0438 \u043e\u0442\u0440\u0435\u0437\u043a\u043e\u0432, \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u0444\u0438\u0433\u0443\u0440\u0443, \u043d\u0430 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u0430, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u044d\u0444\u0444\u0435\u043a\u0442 \u0433\u043b\u0443\u0431\u0438\u043d\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0446\u0438\u0438 (\u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u044f\u043c\u044b\u0435, \u0443\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0432 \u0433\u043b\u0443\u0431\u0438\u043d\u0443, \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 \u043d\u0430 \u043b\u0438\u043d\u0438\u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430), \u044d\u0444\u0444\u0435\u043a\u0442 \u0442\u0443\u043c\u0430\u043d\u0430 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u044f\u0440\u043a\u043e\u0441\u0442\u0438, \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0430\u0440\u0430\u043b\u043b\u0430\u043a\u0441\u0430 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435. \u041c\u044b \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 3D-\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0432\u043e Flame.<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u044b \u0432 Skia \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u044b (\u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430) \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043a\u043b\u0430\u0441\u0441\u0430 Matrix4, \u0447\u0442\u043e \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0443 \u043b\u044e\u0431\u043e\u0433\u043e \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0442\u043e\u0447\u043a\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0442\u0440\u0435\u043c\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438 (\u043d\u043e \u0442\u0440\u0435\u0442\u044c\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 0 \u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435). \u0412 \u044d\u0442\u043e\u043c \u043b\u0435\u0433\u043a\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0435\u0441\u043b\u0438 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u0432 <code>Transform<\/code> \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>transform<\/code> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 Matrix4.translationValues(0,0,100), \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441\u0434\u0432\u0438\u043d\u0435\u0442 \u0432\u0438\u0434\u0436\u0435\u0442 \u043f\u043e \u043e\u0441\u0438 Z \u043d\u0430 100 \u0435\u0434\u0438\u043d\u0438\u0446, \u043d\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u044d\u0442\u043e \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c\u0441\u044f. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u044b, \u043d\u0443\u0436\u043d\u043e \u0432\u043d\u0435\u0441\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043f\u043e\u0437\u0438\u0446\u0438\u044e, \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u044e\u0449\u0443\u044e z \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>setEntry(3,2.0.005)<\/code> \u0434\u043b\u044f \u043c\u0430\u0442\u0440\u0438\u0446\u044b \u0438 \u0442\u043e\u0433\u0434\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0447\u0430\u0441\u0442\u0435\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0435 \u0432\u043e\u043a\u0440\u0443\u0433 \u043e\u0441\u0438 OX \u0438\u043b\u0438 OY). <\/p>\n<p>Matrix4 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 vector_math (\u043f\u0440\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c  package:vector_math\/vector_math_64.dart), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u043e\u0432 (\u043e\u0442 \u043e\u0434\u043d\u043e\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u0434\u043e \u0447\u0435\u0442\u044b\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u043e\u0433\u043e), \u043c\u0430\u0442\u0440\u0438\u0446 (Matrix2, Matrix3, Matrix4), \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0430\u0434 \u0432\u0435\u043a\u0442\u043e\u0440\u0430\u043c\u0438 \u0438 \u043c\u0430\u0442\u0440\u0438\u0446\u0430\u043c\u0438 (\u0441\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0432\u044b\u0447\u0438\u0442\u0430\u043d\u0438\u0435, \u0441\u043a\u0430\u043b\u044f\u0440\u043d\u043e\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u0434\u043b\u0438\u043d\u0430 \u0432\u0435\u043a\u0442\u043e\u0440\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044c \u043c\u0430\u0442\u0440\u0438\u0446\u044b, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u043c\u0430\u0442\u0440\u0438\u0446\u044b, \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u0442\u0440\u0438\u0446\u044b \u043d\u0430 \u0441\u043a\u0430\u043b\u044f\u0440 \u0438 \u043d\u0430 \u0432\u0435\u043a\u0442\u043e\u0440, \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u0442\u0440\u0438\u0446 \u0438 \u0434\u0440. \u0414\u043b\u044f \u043d\u0430\u0441 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u0430\u0436\u043d\u044b\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u0430\u0442\u0440\u0438\u0446\u044b \u0434\u043b\u044f \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u0432 2D\/3D, \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0442\u043e\u0447\u043a\u0438 \u0432 2D\/3D, \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u0445 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0438. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432 \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435 \u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Skia \u0434\u043b\u044f \u043c\u0430\u0442\u0440\u0438\u0447\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439.<\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 Flutter \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043b\u043e\u0441\u043a\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0432\u043d\u043e\u0433\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u043c\u0443 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u043d\u0430 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u0432\u043e\u0440\u043e\u0442 \u0432 \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0436\u043a\u043e \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0443 \u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0441 \u0432\u0435\u043a\u0442\u043e\u0440\u0430\u043c\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u0449\u0438\u0439 \u0432\u0438\u0434 \u043c\u0430\u0442\u0440\u0438\u0446 \u0434\u043b\u044f \u0430\u0444\u0444\u0438\u043d\u043d\u044b\u0445 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0439. \u0410\u0444\u0444\u0438\u043d\u043d\u044b\u043c\u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442 \u0444\u0438\u0433\u0443\u0440\u0443 \u0438 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u044f\u043c\u044b\u0435 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u043c\u0438, \u043a \u0442\u0430\u043a\u0438\u043c \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f\u043c \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043d\u043e\u0441 (translation), \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 (scale), \u043f\u043e\u0432\u043e\u0440\u043e\u0442 (rotation). <\/p>\n<p>\u041c\u0430\u0442\u0440\u0438\u0446\u0430 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u043a\u0430\u043a \u0432 \u0432\u0438\u0434\u0435 3\u04453, \u0442\u0430\u043a \u0438 \u0432 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u043e\u0439 \u043c\u0430\u0442\u0440\u0438\u0446\u0435 4\u04454. \u041c\u0430\u0442\u0440\u0438\u0446\u0430 \u0441\u0434\u0432\u0438\u0433\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0432 \u0432\u0438\u0434\u0435 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 1\u04453 (\u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442), \u043d\u043e \u044d\u0442\u043e \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043e\u0441\u043e\u0431\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u043c\u0430\u0442\u0440\u0438\u0446\u044b 4\u04454, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043a \u0447\u0435\u0442\u044b\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u043e\u043c\u0443 \u0432\u0435\u043a\u0442\u043e\u0440\u0443 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u0435\u0440\u0432\u044b\u0435 \u0442\u0440\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c x, y, z, \u0430 \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u043e\u0435 \u043e\u0431\u044b\u0447\u043d\u043e\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0437\u0430 1, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u044b\u0439 \u0441\u0442\u043e\u043b\u0431\u0435\u0446 \u043c\u0430\u0442\u0440\u0438\u0446\u044b \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u0434\u0432\u0438\u0433\u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u0438 \u043c\u0430\u0442\u0440\u0438\u0446\u044b \u043d\u0430 \u0432\u0435\u043a\u0442\u043e\u0440 (\u0438\u043b\u0438 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u043d\u044b\u0445 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0439 \u0447\u0435\u0440\u0435\u0437 \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u0442\u0440\u0438\u0446).<\/p>\n<p>\u041c\u0430\u0442\u0440\u0438\u0446\u0430 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u0432 \u043e\u0431\u0449\u0435\u043c \u0432\u0438\u0434\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"formula\" source=\"M_t =\\begin{pmatrix} 0 &amp; 0 &amp; 0 &amp; t_x\\\\ 0 &amp; 0 &amp; 0 &amp;t_y\\\\ 0 &amp;0 &amp;0 &amp;t_z\\\\0 &amp; 0 &amp;0 &amp;1 \\end{pmatrix}\" alt=\"M_t =\\begin{pmatrix} 0 &amp; 0 &amp; 0 &amp; t_x\\\\ 0 &amp; 0 &amp; 0 &amp;t_y\\\\ 0 &amp;0 &amp;0 &amp;t_z\\\\0 &amp; 0 &amp;0 &amp;1 \\end{pmatrix}\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/611\/3fb\/9ce\/6113fb9cedc9697598020c0d10249997.svg\" width=\"195\" height=\"105\"\/><\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432 Dart \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c factory-\u043c\u0435\u0442\u043e\u0434 <code>Matrix4.translationValues(tx, ty, tz)<\/code>.<\/p>\n<p>\u041c\u0430\u0442\u0440\u0438\u0446\u0430 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u0438:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"formula\" source=\"M_s = \\begin{pmatrix}s_x &amp; 0 &amp; 0 &amp; 0\\\\0 &amp; s_y &amp; 0 &amp; 0 \\\\ 0 &amp; 0 &amp; s_z &amp; 0 \\\\ 0 &amp; 0 &amp; 0 &amp; 1\\end{pmatrix}\" alt=\"M_s = \\begin{pmatrix}s_x &amp; 0 &amp; 0 &amp; 0\\\\0 &amp; s_y &amp; 0 &amp; 0 \\\\ 0 &amp; 0 &amp; s_z &amp; 0 \\\\ 0 &amp; 0 &amp; 0 &amp; 1\\end{pmatrix}\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2d2\/6cf\/47f\/2d26cf47f914f000c8894842dbf28f60.svg\" width=\"214\" height=\"105\"\/><\/p>\n<p>\u0412 Dart \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0430\u043a\u0443\u044e \u043c\u0430\u0442\u0440\u0438\u0446\u0443 \u0447\u0435\u0440\u0435\u0437 <code>Matrix4.diagonal3values(sx, sy, sz)<\/code>.<\/p>\n<p>\u041c\u0430\u0442\u0440\u0438\u0446\u0430 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u0430\u044f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u043e\u0432\u043e\u0440\u043e\u0442 \u0432\u043e\u043a\u0440\u0443\u0433 \u043b\u044e\u0431\u043e\u0439 \u043e\u0441\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u0435\u0442 \u0434\u043b\u044f \u0442\u043e\u0447\u043a\u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u0434\u0432\u0443\u043c \u043e\u0441\u044f\u043c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0432\u043e\u0440\u043e\u0442 \u0432\u043e\u043a\u0440\u0443\u0433 \u043e\u0441\u0438 OZ \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e x \u0438 y).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"formula\" source=\"M_r=\\begin{pmatrix}cos \\alpha &amp; -sin \\alpha &amp; 0 &amp; 0\\\\sin\\alpha &amp; cos \\alpha &amp; 0  &amp; 0\\\\0 &amp; 0 &amp; 0 &amp; 0\\\\0 &amp; 0 &amp; 0 &amp; 1\\end{pmatrix}\" alt=\"M_r=\\begin{pmatrix}cos \\alpha &amp; -sin \\alpha &amp; 0 &amp; 0\\\\sin\\alpha &amp; cos \\alpha &amp; 0  &amp; 0\\\\0 &amp; 0 &amp; 0 &amp; 0\\\\0 &amp; 0 &amp; 0 &amp; 1\\end{pmatrix}\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c39\/fab\/0b2\/c39fab0b2ce0d89ebf7d47762d252f46.svg\" width=\"264\" height=\"103\"\/><\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u043c\u0430\u0442\u0440\u0438\u0446\u044b \u0432 Dart \u0435\u0441\u0442\u044c factory-\u043c\u0435\u0442\u043e\u0434\u044b <code>Matrix4.rotationX<\/code> (\u043f\u043e\u0432\u043e\u0440\u043e\u0442 \u0432\u043e\u043a\u0440\u0443\u0433 \u043e\u0441\u0438 OX), <code>Matrix4.rotationY<\/code> (\u0432\u043e\u043a\u0440\u0443\u0433 OY), <code>Matrix4.rotationZ<\/code> (\u0432\u043e\u043a\u0440\u0443\u0433 OZ).<\/p>\n<p>\u041c\u0430\u0442\u0440\u0438\u0446\u044b \u043c\u043e\u0436\u043d\u043e \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u0435 (<code>multiplied<\/code>), \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043a \u0432\u0435\u043a\u0442\u043e\u0440\u0430\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 (<code>transform3<\/code> \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f Vector3 \u0432 \u043d\u043e\u0432\u044b\u0439 Vector3, <code>transform<\/code> \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0434 Vector4).<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u0430\u0442\u0440\u0438\u0446\u0443 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0445 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0439 \u0447\u0435\u0440\u0435\u0437 \u0432\u044b\u0437\u043e\u0432 Matrix4.compose, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0442\u0440\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f &#8212; Vector3 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430, \u043a\u0432\u0430\u0442\u0435\u0440\u043d\u0438\u043e\u043d \u0434\u043b\u044f \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0438 Vector3 \u0434\u043b\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430. \u0422\u0443\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u044f\u0441\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u043a\u0432\u0430\u0442\u0435\u0440\u043d\u0438\u043e\u043d (Quaternion) \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0435\u0439 \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 Gimbal Lock, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0438\u0437-\u0437\u0430 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0443\u044e\u0449\u0438\u0445 \u043c\u0430\u0442\u0440\u0438\u0446 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430. \u041a\u0432\u0430\u0442\u0435\u0440\u043d\u0438\u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d \u0438\u0437 \u043c\u0430\u0442\u0440\u0438\u0446\u044b \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 (<code>Quaternion.fromRotation<\/code>), \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d \u043a\u0430\u043a \u0443\u0433\u043e\u043b \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u0430\u043c\u0438 (<code>Quaternion.fromTwoVector<\/code>), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0447\u0435\u0440\u0435\u0437 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0432\u043e\u043a\u0440\u0443\u0433 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u043e\u0441\u0438 (<code>Quaternion.axisAngle<\/code>). \u0412\u0441\u0435 \u044d\u0442\u0438 \u0437\u043d\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430\u043c \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u0440\u043e\u0435\u043a\u0446\u0438\u0438 \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u043e\u0439 \u0444\u0438\u0433\u0443\u0440\u044b (\u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0441 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u0442\u043e \u043d\u0430\u0438\u043c\u0435\u043d\u044c\u0448\u0430\u044f \u0444\u0438\u0433\u0443\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u043b\u0435\u0436\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043e\u0434\u043d\u043e\u0439 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438) \u043d\u0430 canvas \u0432 Flutter.<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u043e\u0432\u043e\u0440\u043e\u0442 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0432 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u044c OXY (\u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u0430), \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u0432\u0430\u0442\u0435\u0440\u043d\u0438\u043e\u043d \u043c\u0435\u0436\u0434\u0443 \u0432\u0435\u043a\u0442\u043e\u0440\u0430\u043c\u0438 \u043d\u043e\u0440\u043c\u0430\u043b\u0435\u0439. \u041e\u0434\u043d\u0430 \u0438\u0437 \u043d\u043e\u0440\u043c\u0430\u043b\u0435\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043a \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 (\u043d\u043e\u0440\u043c\u0430\u043b\u044c \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u0435\u0433\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u043f\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0435\u0440\u043f\u0435\u043d\u0434\u0438\u043a\u0443\u043b\u044f\u0440\u043d\u043e \u043e\u0431\u043e\u0438\u043c \u0432\u0435\u043a\u0442\u043e\u0440\u0430\u043c \u0438, \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043f\u0435\u0440\u043f\u0435\u043d\u0434\u0438\u043a\u0443\u043b\u044f\u0440\u043d\u043e \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430), \u0432\u0442\u043e\u0440\u0430\u044f &#8212; \u043a \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430, \u043e\u043d\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 (0, 0, 1). \u0414\u0430\u043b\u0435\u0435 \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0432\u0435\u0440\u0448\u0438\u043d \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0432 \u0442\u043e\u0447\u043a\u0443 (0, 0, 0) \u0438 \u0434\u0430\u043b\u0435\u0435 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0438\u043c \u043f\u043e\u0432\u043e\u0440\u043e\u0442 \u0434\u0432\u0443\u0445 \u0432\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u0438\u043c\u0435\u044e\u0449\u0438\u0445 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0443\u044e \u043e\u0431\u0449\u0443\u044e \u0442\u043e\u0447\u043a\u0443, \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u0432\u0430\u0442\u0435\u0440\u043d\u0438\u043e\u043d\u0430. \u0417\u0434\u0435\u0441\u044c \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 point1, point2, point3 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0442\u043e\u0447\u0435\u043a \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 (Vector3): <\/p>\n<pre><code class=\"dart\">final vector1 = point2 - point1; final vector2 = point3 - point1; final normal = vector1.cross(vector2); final normalXY = Vector3(0, 0, 1); final rot = Quaternion.fromTwoVectors(normal, normalXY); final qp21 = rot1.asRotationMatrix().transform(vector1); final qp31 = rot1.asRotationMatrix().transform(vector2); final vertices = [Vector2.zero(), qp21.xy, qp31.xy];<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u043f\u0440\u043e\u0435\u043a\u0446\u0438\u044e \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u043d\u0430 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u0430, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u043c\u0430\u0442\u0440\u0438\u0446\u0430 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u044e, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u0432\u0430\u0442\u0435\u0440\u043d\u0438\u043e\u043d\u0430 \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0430\u0442\u0440\u0438\u0446\u0443 \u0434\u043b\u044f \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0438 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0432 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435:<\/p>\n<pre><code class=\"dart\">final matrix4 = (Matrix4.identity()..setEntry(3, 2, 0.005)) *         Matrix4.compose(point1.xyz, rot.inverted(), Vector3.all(1));<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u044b \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u0435\u0433\u043e \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u0442\u0440\u0438\u0446\u0443 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430:<\/p>\n<pre><code class=\"dart\">canvas.save(); canvas.transform(matrix4.storage); final path = Path(); path.moveTo(vertices[0].x, vertices[0].y); path.lineTo(vertices[1].x, vertices[1].y); path.lineTo(vertices[2].x, vertices[2].y); path.lineTo(vertices[0].x, vertices[0].y); canvas.drawPath(path, paint); canvas.restore();<\/code><\/pre>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u043d\u0430\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Flame \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u043d\u0435\u0439 \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u044b \u0432 \u0441\u043e\u0441\u0442\u0430\u0432\u043d\u044b\u0435 \u0444\u0438\u0433\u0443\u0440\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c obj-\u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u0442\u0435\u043a\u0441\u0442 \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0432\u0435\u0440\u0448\u0438\u043d \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u0433\u0440\u0430\u043d\u0435\u0439 \u0447\u0435\u0440\u0435\u0437 \u043d\u0430\u0431\u043e\u0440 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u043e\u0440\u043c\u0430\u043b\u0435\u0439 \u043a \u0433\u0440\u0430\u043d\u044f\u043c \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0442\u0435\u043a\u0441\u0442\u0443\u0440). <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 &#8212; \u0442\u043e\u0447\u043a\u0430 \u0432 \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0433\u0440\u0430\u043d\u0438 3D-\u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 \u0442\u0440\u0438 \u0442\u043e\u0447\u043a\u0438:<\/p>\n<pre><code class=\"dart\">typedef Point3D = Vector3; class Edge3D { Point3D point1; Point3D point2; Point3D point3; Paint? paint; Edge3D(this.point1, this.point2, this.point3, {this.paint}); }<\/code><\/pre>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f 3D-\u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u043a\u0440\u043e\u043c\u0435 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u043d\u0435\u0439, \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0432\u0435\u043a\u0442\u043e\u0440\u044b \u0438 \u043a\u0432\u0430\u0442\u0435\u0440\u043d\u0438\u043e\u043d \u0434\u043b\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0432 \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435. \u041f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0442\u043e\u0447\u0435\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u0430\u0442\u0440\u0438\u0446, \u043d\u043e \u0442\u0443\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e\u0433\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043c\u0430\u0442\u0440\u0438\u0446. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e Vector3 \u0438 Quaternion, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0438\u043a\u0441\u0438\u043d ChangeNotifier \u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u043e\u0432 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 (\u043f\u043e\u043b\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0432 github-\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438):<\/p>\n<pre><code class=\"dart\">class NotifyingVector3 extends Vector3 with ChangeNotifier {   factory NotifyingVector3(double x, double y, double z) =>       NotifyingVector3.zero()..setValues(x, y, z);    NotifyingVector3.zero() : super.zero();    factory NotifyingVector3.fromVector3(Vector3 vector) =>       NotifyingVector3(vector.x, vector.y, vector.y);    factory NotifyingVector3.all(double v) => NotifyingVector3.zero()..splat(v);    factory NotifyingVector3.copy(Vector3 v) =>       NotifyingVector3.zero()..setFrom(v);    @override   void applyQuaternion(Quaternion arg) {     super.applyQuaternion(arg);     notifyListeners();   }   \/\/... }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u043d\u0430\u043c \u043a\u043b\u0430\u0441\u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"dart\">class Component3D extends PositionComponent { List&lt;Edge3D> edges; Paint paint; NotifyingVector3? translate; NotifyingQuaternion? rotation; NotifyingVector3? scaled;    bool _invalidate = true; Component3D(this.edges,               {Vector3? translation,                Quaternion? rotation,                Vector3? scaled,                Paint? paint})     : translation = translation != null       ? NotifyingVector3.fromVector3(translation)       : null,   rotation = rotation != null     ? NotifyingQuaternion.fromQuaternion(rotation)     : null,   scaled = scaled != null ? NotifyingVector3.fromVector3(scaled) : null,   paint = paint ?? Paint()..color = Colors.white;    this.translation?.addListener(_applyTransformation); this.rotation?.addListener(_applyTransformation); this.scaled?.addListener(_applyTransformation);    void _applyTransformation() { transformed = []; final transform = Matrix4.compose(translate ?? Vector3.zero(), rotation ?? Quaternion.identity(), scaled ?? Vector3.all(5),); transformed = edges.map((element) {       return Edge3D(       transform.transformed3(element.point1),       transform.transformed3(element.point2),       transform.transformed3(element.point3),       paint: paint,     );     }).toList();   _invalidate = true;  }<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f, \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430 \u0438\u043b\u0438 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0442\u043e\u0447\u0435\u043a \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 transformed. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e update \u0438 render, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u0430\u0442\u0440\u0438\u0446\u044b \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0432 Skia.<\/p>\n<pre><code class=\"dart\">@override void update(double dt) {   if (!invalidate) return;   invalidate = false;   removeAll(children);   transformed.forEach((edge) {     add(Triangle(edge.point1, edge.point2. edge.point3, paint: edge.paint));   }); }<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043b\u0430\u0441\u0441 Triangle \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439 \u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0439:<\/p>\n<pre><code class=\"dart\">class Triangle extends PolygonComponent { final Vector3 point1; final Vector3 point2; final Vector3 point3; final Paint paint; Matrix4? matrix;      Triangle(Vector3 point1, Vector3 point2, Vector3 point3, {Paint? paint})     : this.point1 = Vector3(point1.x, point1.y, point1.z),   this.point2 = Vector3(point2.x, point2.y, point2.z),   this.point3 = Vector3(point3.x, point3.y, point3.z),   this.paint = paint ?? Paint()..color = Colors.white,   super([Vector2.zero(), Vector2.zero(), Vector2.zero()]) {}    @override void update(double dt) {   if (matrix==null) {     final vector1 = point2 - point1;     final vector2 = point3 - point1;     final normal = vector1.cross(vector2);     final normalXY = Vector3(0, 0, 1);     final rot = Quaternion.fromTwoVectors(normal, normalXY);     final qp21 = rot.asRotationMatrix().transform(vector1);     final qp31 = rot.asRotationMatrix().transform(vector2);     refreshVertices(newVertices: [Vector2.zero(), qp21.xy, qp31.xy]);     matrix = (Matrix4.identity()..setEntry(3, 2, 0.005)) *       Matrix4.compose(point1.xyz, rot1.inverted(), Vector3.all(1));   } }    @override void render(Canvas canvas) {   canvas.save();   canvas.transform(matrix.storage); super.render(canvas); canvas.restore(); } <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u0443\u044e \u0444\u0438\u0433\u0443\u0440\u0443 \u0447\u0435\u0440\u0435\u0437 \u043d\u0430\u0431\u043e\u0440 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u0438 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0435 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435:<\/p>\n<pre><code class=\"dart\">class Game extends FlameGame {   @override   Future&lt;void>? onLoad() async {     super.onLoad();     final point1 = Point3D(-5, 5, 5);     final point2 = Point3D(5, -5, 5);     final point3 = Point3D(5, 5, 5);     final point4 = Point3D(-5, -5, 5);     final point5 = Point3D(-5, 5, -5);     final point6 = Point3D(-5, -5, -5);     final point7 = Point3D(5, 5, -5);     final point8 = Point3D(5, -5, -5);     final edge1 = Edge3D(point1, point4, point2);     final edge2 = Edge3D(point1, point2, point3);     final edge3 = Edge3D(point1, point4, point6);     final edge4 = Edge3D(point1, point6, point5);     final edge5 = Edge3D(point5, point8, point7);     final edge6 = Edge3D(point5, point6, point8);     final edge7 = Edge3D(point3, point8, point7);     final edge8 = Edge3D(point3, point2, point8);     var angle = 0.0;     final tg = Component3D(       [         edge1,         edge2,         edge3,         edge4,         edge5,         edge6,         edge7,         edge8,       ],       paint: Paint()..color = Colors.yellow,       rotation: Quaternion.fromRotation(         Matrix3.rotationY(angle),       ),       scaled: Vector3.all(1),     )     ..position = size \/ 2     ..size = size;      add(tg);   Timer.periodic(Duration(milliseconds: 16), (_) {     angle += 0.05;     tg.rotation!.setFromRotation(Matrix3.rotationY(angle)); }); } } <\/code><\/pre>\n<p>\u0412 git-\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (<a href=\"https:\/\/github.com\/dzolotov\/flutter-3d-sample\">https:\/\/github.com\/dzolotov\/flutter-3d-sample<\/a>) \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 obj-\u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 Edge3D \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0445 3d-\u043c\u043e\u0434\u0435\u043b\u0435\u0439. <\/p>\n<p>\u041d\u043e \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u0430\u0436\u043d\u044b\u043c \u0432\u043e\u043f\u0440\u043e\u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043e\u043a\u0440\u0430\u0441\u043a\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 \u0442\u043e\u0447\u043a\u0438 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0444\u043e\u043d\u043e\u0432\u043e\u0433\u043e, \u0442\u043e\u0447\u0435\u0447\u043d\u043e\u0433\u043e \u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u044f. \u0412 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 \u043e\u0442\u0442\u0435\u043d\u043e\u043a \u0434\u043b\u044f \u0432\u0441\u0435\u0439 \u0433\u0440\u0430\u043d\u0438 (\u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 paint \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 Edge3D), \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e, \u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c. \u041d\u043e \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0440\u0430\u0441\u043a\u0440\u0430\u0441\u043a\u0438 \u0433\u0440\u0430\u043d\u0438?<\/p>\n<p>Skia \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0438 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c (\u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0432 \u0432\u0435\u0431 \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f) \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u044b\u0435 \u0448\u0435\u0439\u0434\u0435\u0440\u044b \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f Paint. \u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0448\u0435\u0439\u0434\u0435\u0440\u0430 (\u043d\u0430 GLSL) \u0432 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 (<a href=\"https:\/\/registry.khronos.org\/SPIR-V\/specs\/unified1\/SPIRV.html\">SPIR-V, Standard Portable Intermediate Representation<\/a>) \u0438 \u0437\u0430\u0442\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/pub.dev\/packages\/shader\">shader<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u0430\u044f \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e (\u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430) glsl-\u0444\u0430\u0439\u043b\u0430 \u0432 SPIR-V. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u043e\u0435 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435: <\/p>\n<pre><code class=\"cpp\">#version 320 es layout(location = 0) out vec4 fragColor; void main() { fragColor = vec4(gl_FragCoord.x\/50.0, gl_FragCoord.y\/50.0, 0.0, 0.5); }<\/code><\/pre>\n<p>\u0412 \u0448\u0435\u0439\u0434\u0435\u0440\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b (<code>gl_FragCoord<\/code>), \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b (<code>gl_TexCoord<\/code>) \u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u0442\u043e\u0447\u043a\u0438 (\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0432 out vec4 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438). \u041f\u0440\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e texture \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u0445 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b. \u0422\u0430\u043a\u0436\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0446\u0438\u043a\u043b\u044b \u0438 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 (\u0445\u043e\u0442\u044f \u0432\u0430\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438, \u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0435 \u0432 GLSL \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u044f\u0442 \u043e\u0448\u0438\u0431\u043a\u0443 \u043e \u043d\u0435\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 Skia).<\/p>\n<p>\u0420\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043c \u043a\u043e\u0434 \u0448\u0435\u0439\u0434\u0435\u0440\u0430 \u0432 assets \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e \u0432 SPIR-V:<\/p>\n<pre><code class=\"bash\">pub global activate shader shader -s --use-remote<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>shader -d<\/code> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0430 Dart \u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0448\u0435\u0439\u0434\u0435\u0440\u0430 \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 (SPIR-V \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430). \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 main \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e:<\/p>\n<pre><code class=\"dart\">import 'dart:ui' as ui; ui.FragmentProgram? program; void main() async { program = await ui.FragmentProgram.compile( spirv: (await Flame.bundle.load(\"stripe.sprv\")).buffer); }<\/code><\/pre>\n<p>\u0418 \u0434\u0430\u043b\u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0448\u0435\u0439\u0434\u0435\u0440 \u0447\u0435\u0440\u0435\u0437 \u0432\u044b\u0437\u043e\u0432 program.shader, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 (<code>floatUniforms<\/code>, \u0442\u0438\u043f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>Float32List<\/code>) \u0438 \u0441\u044d\u043c\u043f\u043b\u0435\u0440\u043e\u0432 (\u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0443\u0440, \u0432 <code>sampleUniforms<\/code>, \u0442\u0438\u043f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>ImageShader<\/code>, \u0432 \u0448\u0435\u0439\u0434\u0435\u0440\u0435 \u0442\u0438\u043f sampler2d). \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 <code>Paint()..shader = shader<\/code> \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0433\u0440\u0430\u043d\u0438.<\/p>\n<p>\u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c umbra, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438:<\/p>\n<pre><code class=\"dart\">dart pub global activate umbra_cli umbra install-deps umbra create sample umbra generate sample.glsl --output lib\/shaders\/<\/code><\/pre>\n<p>umbra \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043a\u0443 \u0434\u043b\u044f \u0448\u0435\u0439\u0434\u0435\u0440\u0430, \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c\u044e:<\/p>\n<pre><code class=\"cpp\">vec4 fragment(vec2 uv, vec2 fragCoord) {     return vec4(fragCoord.x\/50.0, fragCoord.y\/50.0, 0.0, 0.5); }<\/code><\/pre>\n<p>umbra \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u043e\u043c (<code>--target=dart-shader<\/code>), spirv (<code>--target=spirv<\/code>) \u0438 \u0434\u0430\u0436\u0435 \u0432\u0438\u0434\u0436\u0435\u0442 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u043c \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u043c (<code>--target=flutter-widget<\/code>). \u0417\u0434\u0435\u0441\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0442\u043e\u0447\u043a\u0438 \u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0438 fragment. \u0414\u0430\u043b\u044c\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0448\u0435\u0439\u0434\u0435\u0440\u0430 \u043d\u0438\u0447\u0435\u043c \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u0448\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f. <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0448\u0435\u0439\u0434\u0435\u0440\u0430 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f <code>Component3D<\/code> \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u043a\u0443\u0431 \u0431\u0435\u0437 \u0434\u0432\u0443\u0445 \u0433\u0440\u0430\u043d\u0435\u0439:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/749\/456\/7e3\/7494567e3877b71a8aa722c87f282819.png\" alt=\"3d-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u043c \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u043c\" title=\"3d-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u043c \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u043c\" width=\"427\" height=\"314\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/749\/456\/7e3\/7494567e3877b71a8aa722c87f282819.png\"\/><figcaption>3d-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u043c \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u043c<\/figcaption><\/figure>\n<p>\u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u0431 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f\u0445 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 Skia Shading Language \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/main.d1fnr9j76bdr39.amplifyapp.com\/nodes\/effects\/sksl-shader\/\">\u0437\u0434\u0435\u0441\u044c<\/a>. \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0448\u0435\u0439\u0434\u0435\u0440\u044b \u0441 \u0441\u0430\u0439\u0442\u0430 <a href=\"https:\/\/www.shadertoy.com\">ShaderToy<\/a>, \u043d\u043e \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430.<\/p>\n<p>\u0412\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u0441 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u043e\u0439 \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u044f (\u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u043d\u0430\u0448\u0438\u0445 \u043c\u0430\u0442\u0440\u0438\u0446 \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0432 3D-\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435), \u043e\u0431\u0441\u0443\u0434\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>canvas.drawVertices<\/code>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u0434\u043b\u044f 3d-\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u0433\u0440\u0430\u043d\u0435\u0439 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<p>\u041e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0441\u0438\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u043e\u0440\u043e\u043d Flutter, \u043a\u0440\u043e\u043c\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u0435-\u0444\u0430\u043a\u0442\u043e \u0441\u0442\u0430\u043b\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u043c \u0432\u043e \u0432\u0441\u0435\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u0445 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 Android\/iOS \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u044e. \u041f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u044e \u0432\u0430\u0441 \u043d\u0430 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0443\u0440\u043e\u043a \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430\u0445 \u043e\u0431\u043c\u0435\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043c\u0435\u0436\u0434\u0443 Flutter-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0438 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0438\u043b\u044c\u043d\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u043e\u043d, \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0441\u0438\u0433\u043d\u0430\u043b \u0432 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0440\u0435\u0436\u0438\u043c\u0435 \u0441\u043d\u0430 \u0432 Google Fit.<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/otus.pw\/Um3R\/\">\u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0443\u0440\u043e\u043a<\/a><\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/otus\/blog\/677844\/\"> https:\/\/habr.com\/ru\/company\/otus\/blog\/677844\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412 \u043a\u043e\u043d\u0446\u0435 \u043f\u0440\u043e\u0448\u043b\u043e\u0433\u043e \u0433\u043e\u0434\u0430 \u0434\u0432\u0438\u0436\u043e\u043a Flame \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u0432\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 Flutter \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043b \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e 1.0 \u0438 \u0430\u043d\u043e\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043b \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432, \u043f\u043e\u0434\u0445\u043e\u0434\u0430\u0445 \u043a \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0441\u0446\u0435\u043d\u044b \u0438\u0437 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u0432 \u0440\u043e\u043b\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e Flame \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0430 \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u0443\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0443 (\u0441\u043f\u0440\u0430\u0439\u0442\u044b, \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0447\u0430\u0441\u0442\u0438\u0446, \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b), \u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Skia \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u044b\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0448\u0435\u0439\u0434\u0435\u0440\u0430\u043c\u0438, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0447\u0435\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u044c\u0441\u044f \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u044b\u0445 \u0438\u0433\u0440. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043e\u0431\u0441\u0443\u0434\u0438\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 Flame \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432.<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435, \u0447\u0435\u043c \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0435, \u043e\u0431\u0441\u0443\u0434\u0438\u043c \u043e\u0431\u0449\u0438\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u043e <a href=\"https:\/\/flame-engine.org\/\">Flame<\/a> \u0438 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a \u043e\u0431\u044a\u0435\u043a\u0442\u0443 \u0438\u043b\u0438 \u043a \u0438\u0433\u0440\u0435 \u0432 \u0446\u0435\u043b\u043e\u043c. \u0418 \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u0432\u0435\u0434\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. <\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Flame \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b update (\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u0430\u0434\u0440\u0435) \u0438 render (\u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 canvas). \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0439 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044e \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 (onMount), \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 (onLoad). \u0422\u0430\u043a\u0436\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0442\u0440\u0430\u0436\u0435\u043d \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\/\u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e, \u0441\u043c\u0435\u0449\u0435\u043d \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u043f\u043e\u0432\u0435\u0440\u043d\u0443\u0442 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u0443\u0433\u043e\u043b \u0438\u043b\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u0430\u0442\u0440\u0438\u0447\u043d\u044b\u0435 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 Skia, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0435 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 render). \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>FlameGame<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0432 \u0432\u0438\u0434\u0436\u0435\u0442 <code>GameWidget<\/code> \u0438 \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0433\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 Flutter-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0414\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043c\u0438\u043a\u0441\u0438\u043d\u044b. \u041d\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>FlameGame<\/code>) \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u043c\u0438\u043a\u0441\u0438\u043d\u044b, \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>HasTappables<\/code> \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043f\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c, <code>HasHoverables<\/code> \u0438 <code>HasDraggables<\/code> &#8212; \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0438 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e). \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u043c\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u043c\u0438\u043a\u0441\u0438\u043d\u0430\u043c\u0438 <code>Tappable<\/code>, <code>Hoverable<\/code> \u0438 <code>Draggable<\/code>. \u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0438 \u043c\u044b\u0448\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043c\u0438\u043a\u0441\u0438\u043d\u044b <code>TapDetector<\/code> (\u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442), <code>DoubleTapDetector<\/code>, <code>ForcePressDetector<\/code>, <code>KeyboardEvents<\/code>, <code>PanDetector<\/code> (\u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435), <code>ScrollDetector<\/code>, <code>ScaleDetector<\/code>, <code>VerticalDragDetector<\/code>, <code>HorizontalDragDetector<\/code>, <code>MouseMovementDetector<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435. <\/p>\n<p>\u041e\u0441\u043e\u0431\u043e\u0433\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0437\u0430\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u042d\u0442\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 (\u0435\u0441\u043b\u0438 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043c\u0438\u043a\u0441\u0438\u043d <code>HasCollisionDetection<\/code>) \u043f\u043e \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u043e\u0431\u043b\u0430\u0441\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a\u0430\u043a \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u0438\u043f\u0430 <code>*Hitbox<\/code> (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>RectangleHitbox<\/code> \u0438\u043b\u0438 <code>PolygonHitbox<\/code>). \u0414\u043b\u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0444\u0430\u043a\u0442\u0430 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043c\u0438\u043a\u0441\u0438\u043d <code>CollisionCallbacks<\/code>, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>onCollision<\/code> \u0434\u043b\u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c.<\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u0444\u0438\u0433\u0443\u0440\u0430 (\u043e\u0431\u0449\u0438\u0439 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c &#8212; <code>PositionComponent<\/code>, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f position \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 size \u0438 \u0435\u0433\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u0438 &#8212; <code>ShapeComponent<\/code>, <code>PolygonComponent<\/code> \u0438 \u0434\u0440.), \u0442\u0430\u043a \u0438 \u0438\u043d\u0430\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f (<code>MoveToEffect<\/code>), \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b (<code>ColorEffect<\/code>), \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 (<code>ScaleEffect<\/code>, <code>RotateEffect<\/code>), \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f (*Hitbox), \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0447\u0430\u0441\u0442\u0438\u0446 (<code>ParticleSystemComponent<\/code>), \u0442\u0435\u043a\u0441\u0442 (<code>TextboxComponent<\/code>), \u0441\u043f\u0440\u0430\u0439\u0442 (<code>SpriteComponent<\/code>, <code>SpriteAnimationComponent<\/code>), \u0438\u0437\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043a\u0430\u0440\u0442\u0430 (<code>IsometricTileMapComponent<\/code>), \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c \u043f\u0430\u0440\u0430\u043b\u043b\u0430\u043a\u0441\u0430 (<code>ParallaxComponent<\/code>), \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f (<code>HudButtonComponent<\/code>, <code>HudMarginComponent<\/code>), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b <code>FpsTextComponent<\/code>, <code>JoystickComponent<\/code> \u0438 <code>CameraComponent<\/code>.<\/p>\n<p>Flame \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f (\u0432 pub.dev \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043f\u043e \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0443 flame_), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 Component, \u0447\u0442\u043e \u043c\u044b \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0434\u043d\u0435\u0435 \u043f\u0440\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 3D-\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u041d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u043e\u043c-\u043d\u0430\u0436\u0430\u0442\u0438\u0439 \u043d\u0430 Flame. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0435\u0442\u0435\u043a\u0442\u043e\u0440 \u043d\u0430\u0436\u0430\u0442\u0438\u0439, \u043a\u043d\u043e\u043f\u043a\u0443 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 \u0441\u043e \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u043e\u043c. \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u043a\u0430\u0434\u0440\u043e\u0432 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 (FPS).<\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 pubspec.yaml \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0447\u0435\u0440\u0435\u0437 pub get:<\/p>\n<pre><code>dependencies:   flame: ^1.2.1<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043b\u0430\u0441\u0441-\u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a \u043e\u0442 <code>FlameGame<\/code> (\u0438 \u0441\u0440\u0430\u0437\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u043c <code>HasTappables<\/code> \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u0432 \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432):<\/p>\n<pre><code class=\"dart\">class CounterGame extends FlameGame with HasTappables { String _getCounter() => \"Counter value\";    @override Future&lt;void>? onLoad() async { super.onLoad();     add(FpsTextComponent()         ..position = Vector2(16, 16)         ..size = Vector2(128, 32));     add(TextBoxComponent(text: _getCounter(), anchor: Anchor.center)         ..position = Vector2(size.x \/ 2, size.y \/ 2 - 32)         ..size = Vector2(size.x \/ 2, 32));     add(TextBoxComponent(\"Press me\")..position = size \/ 2..size=Vector2(128, 32)); } }  void main() { runApp( MaterialApp(home: GameWidget(game: CounterGame())), ); }<\/code><\/pre>\n<p><code>MaterialApp<\/code> \u0437\u0434\u0435\u0441\u044c \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a\u0430\u0441\u0430\u043d\u0438\u044f \u044d\u043a\u0440\u0430\u043d\u0430. \u041c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0446\u0435\u043d\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 <code>CounterGame<\/code>). \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u0432\u0441\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f \u043e\u0442 <code>PositionComponent<\/code>) \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440, \u0438\u043d\u0430\u0447\u0435 \u043e\u043d \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043e\u043f\u043e\u0440\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 (anchor), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u0430\u043a\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0442\u043e\u0447\u043a\u0443, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0432 position. \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u043a\u043b\u0430\u0441\u0441\u0430 Vector2 (\u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 vector_math_64). \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0430\u0436\u0430\u0442\u0438\u044f:<\/p>\n<pre><code class=\"dart\">class Button extends TextBoxComponent with Tappable { Button(text) : super(text: text, size: Vector2(128, 32));    @override   bool onTapDown(TapDownInfo info) {     return true; } }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0441\u0432\u043e\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e <code>TextBoxComponent<\/code> \u0441 \u043f\u0440\u0435\u0434\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c (128dp \u0445 32dp), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u0430\u0441\u0430\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430. \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043f\u043e\u0434\u043f\u0438\u0448\u0435\u043c\u0441\u044f \u043d\u0430 \u043d\u0435\u0433\u043e \u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430:<\/p>\n<pre><code class=\"dart\">class CounterState with ChangeNotifier { int counter = 0; void increment() { counter++; notifyListeners(); } }  final state = CounterState();  class Button extends TextBoxComponent with Tappable { Button(text) : super(text: text, size: Vector2(128, 32));    @override    bool onTapDown(TapDownInfo info) {     state.increment();     return true;   } }  class CounterGame extends FlameGame with HasTappables {   late TextBoxComponent textBox;    String _getCounter() => \"You have been pressed ${state.counter} times\";    @override   Future&lt;void>? onLoad() async {     super.onLoad();     state.addListener(() {       textBox.text = _getCounter();     });     add(FpsTextComponent()         ..position = Vector2(16, 16)         ..size = Vector2(128, 32));     add(textBox = TextBoxComponent(text: _getCounter(), anchor: Anchor.center)         ..position = Vector2(size.x \/ 2, size.y \/ 2 - 32)         ..size = Vector2(size.x \/ 2, 32));     add(       Button(\"Press me\")..position = size \/ 2,     );   } }<\/code><\/pre>\n<p>\u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0432\u0438\u0434\u0435\u0442\u044c, \u0437\u0434\u0435\u0441\u044c \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0441\u043e\u043e\u0431\u0449\u0430\u0442\u044c \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u043a\u0430\u043a \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 State \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c setState). \u0412\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u044e\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0438\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u043c\u043e\u0433\u0443\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u043e \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438). \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 \u0432\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 render.<\/p>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u044d\u043a\u0440\u0430\u043d \u0441\u043f\u0440\u0430\u0439\u0442\u0430\u043c\u0438 (\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435, SpriteSheet &#8212; \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u0441\u0435\u0442\u043a\u043e\u0439 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u044b, \u0442\u0430\u043a \u0438 \u0438\u0445 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e), svg-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 (\u043f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 flame_svg), \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438 rive (\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c flame_rive) \u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f\u043c\u0438  (\u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>CustomPainterComponent<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 painter). <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u043d\u0430\u0448\u0435\u0439 \u0442\u0435\u043c\u0435 \u0438 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0435. \u0412 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u0435\u043a\u0446\u0438\u044e \u0442\u043e\u0447\u0435\u043a \u0438 \u043e\u0442\u0440\u0435\u0437\u043a\u043e\u0432, \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u0444\u0438\u0433\u0443\u0440\u0443, \u043d\u0430 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u0430, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u044d\u0444\u0444\u0435\u043a\u0442 \u0433\u043b\u0443\u0431\u0438\u043d\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0446\u0438\u0438 (\u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u044f\u043c\u044b\u0435, \u0443\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0432 \u0433\u043b\u0443\u0431\u0438\u043d\u0443, \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 \u043d\u0430 \u043b\u0438\u043d\u0438\u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430), \u044d\u0444\u0444\u0435\u043a\u0442 \u0442\u0443\u043c\u0430\u043d\u0430 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u044f\u0440\u043a\u043e\u0441\u0442\u0438, \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0430\u0440\u0430\u043b\u043b\u0430\u043a\u0441\u0430 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435. \u041c\u044b \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 3D-\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0432\u043e Flame.<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u044b \u0432 Skia \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u044b (\u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430) \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043a\u043b\u0430\u0441\u0441\u0430 Matrix4, \u0447\u0442\u043e \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0443 \u043b\u044e\u0431\u043e\u0433\u043e \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0442\u043e\u0447\u043a\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0442\u0440\u0435\u043c\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438 (\u043d\u043e \u0442\u0440\u0435\u0442\u044c\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 0 \u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435). \u0412 \u044d\u0442\u043e\u043c \u043b\u0435\u0433\u043a\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0435\u0441\u043b\u0438 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u0432 <code>Transform<\/code> \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>transform<\/code> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 Matrix4.translationValues(0,0,100), \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441\u0434\u0432\u0438\u043d\u0435\u0442 \u0432\u0438\u0434\u0436\u0435\u0442 \u043f\u043e \u043e\u0441\u0438 Z \u043d\u0430 100 \u0435\u0434\u0438\u043d\u0438\u0446, \u043d\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u044d\u0442\u043e \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c\u0441\u044f. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u044b, \u043d\u0443\u0436\u043d\u043e \u0432\u043d\u0435\u0441\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043f\u043e\u0437\u0438\u0446\u0438\u044e, \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u044e\u0449\u0443\u044e z \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>setEntry(3,2.0.005)<\/code> \u0434\u043b\u044f \u043c\u0430\u0442\u0440\u0438\u0446\u044b \u0438 \u0442\u043e\u0433\u0434\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0447\u0430\u0441\u0442\u0435\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0435 \u0432\u043e\u043a\u0440\u0443\u0433 \u043e\u0441\u0438 OX \u0438\u043b\u0438 OY). <\/p>\n<p>Matrix4 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 vector_math (\u043f\u0440\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c  package:vector_math\/vector_math_64.dart), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u043e\u0432 (\u043e\u0442 \u043e\u0434\u043d\u043e\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u0434\u043e \u0447\u0435\u0442\u044b\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u043e\u0433\u043e), \u043c\u0430\u0442\u0440\u0438\u0446 (Matrix2, Matrix3, Matrix4), \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0430\u0434 \u0432\u0435\u043a\u0442\u043e\u0440\u0430\u043c\u0438 \u0438 \u043c\u0430\u0442\u0440\u0438\u0446\u0430\u043c\u0438 (\u0441\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0432\u044b\u0447\u0438\u0442\u0430\u043d\u0438\u0435, \u0441\u043a\u0430\u043b\u044f\u0440\u043d\u043e\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u0434\u043b\u0438\u043d\u0430 \u0432\u0435\u043a\u0442\u043e\u0440\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044c \u043c\u0430\u0442\u0440\u0438\u0446\u044b, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u043c\u0430\u0442\u0440\u0438\u0446\u044b, \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u0442\u0440\u0438\u0446\u044b \u043d\u0430 \u0441\u043a\u0430\u043b\u044f\u0440 \u0438 \u043d\u0430 \u0432\u0435\u043a\u0442\u043e\u0440, \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u0442\u0440\u0438\u0446 \u0438 \u0434\u0440. \u0414\u043b\u044f \u043d\u0430\u0441 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u0430\u0436\u043d\u044b\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u0430\u0442\u0440\u0438\u0446\u044b \u0434\u043b\u044f \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u0432 2D\/3D, \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0442\u043e\u0447\u043a\u0438 \u0432 2D\/3D, \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u0445 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0438. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432 \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435 \u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Skia \u0434\u043b\u044f \u043c\u0430\u0442\u0440\u0438\u0447\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439.<\/p>\n<p>\u041f<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-335962","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/335962","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=335962"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/335962\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=335962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=335962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=335962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}