{"id":350,"date":"2009-07-19T07:51:20","date_gmt":"2009-07-19T14:51:20","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=1790"},"modified":"2009-07-19T07:51:20","modified_gmt":"2009-07-19T14:51:20","slug":"isometric-transformation-matrix","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=350","title":{"rendered":"Isometric Transformation Matrix"},"content":{"rendered":"<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\nvar grid:Sprite = Sprite(addChild(new Sprite()));\r\nvar matrix:Matrix = new Matrix();\r\n\/\/ make the grid sprite look isometric using the transform.matrix property\r\nmatrix.rotate(Math.PI \/ 4);\r\nmatrix.scale(1, 0.5);\r\nmatrix.translate(stage.stageWidth \/ 2, stage.stageHeight \/ 2);\r\ngrid.transform.matrix = matrix;\r\n\r\n\/\/ draw a grid of circles to show that it does in fact look isometric\r\nvar rowCol:Number = 8;\r\nvar num:Number = rowCol * rowCol;\r\n\r\nvar diameter:Number = 40;\r\nvar radius:Number = diameter \/ 2;\r\nvar space:Number = diameter + 10;\r\nvar halfGridSize:Number = rowCol * space \/ 2;\r\n\r\ngrid.graphics.beginFill(0xFF0000);\r\nfor (var i:int = 0; i&lt;num; i++){\r\n   grid.graphics.drawCircle(i % 8 * space - halfGridSize, int(i \/ 8) * space - halfGridSize, radius);\r\n}\r\n<\/pre>\n<p>This snippet shows how to use transform.matrix to make a DisplayObject look isometric. This can also be achieved with nesting.<\/p>\n<p>In the case of this grid of red circles, we rotate it 45 degrees, scale it 50% on the y and move it to the center of the stage (lines 4-6).<br \/>\n<img decoding=\"async\" src=\"https:\/\/actionsnippet.com\/wp-content\/matrix_trans.gif\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>var grid:Sprite = Sprite(addChild(new Sprite())); var matrix:Matrix = new Matrix(); \/\/ make the grid sprite look isometric using the transform.matrix property matrix.rotate(Math.PI \/ 4); matrix.scale(1, 0.5); matrix.translate(stage.stageWidth \/ 2, stage.stageHeight \/ 2); grid.transform.matrix = matrix; \/\/ draw a grid of circles to show that it does in fact look isometric var rowCol:Number = 8; var [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,94],"tags":[],"class_list":["post-350","post","type-post","status-publish","format-standard","hentry","category-displayobject","category-misc"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=350"}],"version-history":[{"count":1,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/350\/revisions"}],"predecessor-version":[{"id":565,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/350\/revisions\/565"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}