{"action":"created","issue":{"url":"https://api.github.com/repos/CreateJS/EaselJS/issues/595","repository_url":"https://api.github.com/repos/CreateJS/EaselJS","labels_url":"https://api.github.com/repos/CreateJS/EaselJS/issues/595/labels{/name}","comments_url":"https://api.github.com/repos/CreateJS/EaselJS/issues/595/comments","events_url":"https://api.github.com/repos/CreateJS/EaselJS/issues/595/events","html_url":"https://github.com/CreateJS/EaselJS/issues/595","id":65447785,"number":595,"title":"image artifacts when scaling sprites","user":{"login":"assafsahar","id":2690737,"avatar_url":"https://avatars.githubusercontent.com/u/2690737?v=3","gravatar_id":"","url":"https://api.github.com/users/assafsahar","html_url":"https://github.com/assafsahar","followers_url":"https://api.github.com/users/assafsahar/followers","following_url":"https://api.github.com/users/assafsahar/following{/other_user}","gists_url":"https://api.github.com/users/assafsahar/gists{/gist_id}","starred_url":"https://api.github.com/users/assafsahar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/assafsahar/subscriptions","organizations_url":"https://api.github.com/users/assafsahar/orgs","repos_url":"https://api.github.com/users/assafsahar/repos","events_url":"https://api.github.com/users/assafsahar/events{/privacy}","received_events_url":"https://api.github.com/users/assafsahar/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/CreateJS/EaselJS/labels/question","name":"question","color":"bfe5bf"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-03-31T13:16:38Z","updated_at":"2016-06-20T16:54:03Z","closed_at":"2015-03-31T14:52:12Z","body":"hi,\r\nI've created a simple interactive presentation of animations, where there are 2 characters on the screen and pressing on any of them make it play an animation. After the animation ends, another one replaces it. \r\nThere are 6 animations in total.\r\nIt runs well on pc machines, but because the assets are very big I've decided to make a mobile version with dedicated assets which are low-quality.\r\n\r\nHere is the link for your conviniency: http://codactive.com/work/gingim/turtles/\r\nwhen browsing from pc it redirects to: http://codactive.com/work/gingim/turtles/index_pc.html\r\nwhen browsing from a mobile device it redirects to: http://codactive.com/work/gingim/turtles/index_mobile.html\r\n\r\nEventually, the low-quality images look OK on some devices, but on others the are small artifacts that are added to it and make the experience not pleasant..(see screenshots for example, it looks as small lines which are a part of the image's invisible framing square). \r\n![screenshot_2015-03-30-20-56-55](https://cloud.githubusercontent.com/assets/2690737/6919222/eb475f56-d7bd-11e4-9f35-30f210e51b62.jpg)\r\n![screenshot_2015-03-30-20-57-15](https://cloud.githubusercontent.com/assets/2690737/6919223/eb4a89ce-d7bd-11e4-94ae-40c7a0106571.jpg)\r\n![screenshot_2015-03-30-20-57-53](https://cloud.githubusercontent.com/assets/2690737/6919224/eb4d407e-d7bd-11e4-92af-0b75a52bcc27.jpg)\r\n\r\nThis is the way I created my assets:\r\nMy Flash animations' stage size is 960x540.\r\nI use ZOE to create sprite sheets from the animations.\r\nThe pc version of the html loads a canvas sized 960x540 and using fgl-scaler.js scales to fit the screen size.\r\nFor the mobile version I use ZOE to create the spriteshhets (from the same flash movies) with a scaling of 0.5. Then the canvas is loaded with a size of 480x270 and again using fgl-scaler.js that scales to fit the screen size.\r\nThe resulting mobile assets are smaller in weight (to allow smaller loading time and use less memory) but there are still those artifacts I've mentioned above (that - as far as i understand - are not a part of the image, but created due to the scaling process).\r\n\r\nCan anyone here think of a better way to make the assets for the mobile version? or maybe you have experienced those type of artifacts and know how to deal with it?\r\nI have to mention that I've already reduced the files weight using https://tinypng.com/ to the minimum possible (for the pc version), so I can't use this solution any further.\r\n\r\nAny idea will be appreciated.\r\nThanks!\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/CreateJS/EaselJS/issues/comments/227201519","html_url":"https://github.com/CreateJS/EaselJS/issues/595#issuecomment-227201519","issue_url":"https://api.github.com/repos/CreateJS/EaselJS/issues/595","id":227201519,"user":{"login":"gattaka","id":1938708,"avatar_url":"https://avatars.githubusercontent.com/u/1938708?v=3","gravatar_id":"","url":"https://api.github.com/users/gattaka","html_url":"https://github.com/gattaka","followers_url":"https://api.github.com/users/gattaka/followers","following_url":"https://api.github.com/users/gattaka/following{/other_user}","gists_url":"https://api.github.com/users/gattaka/gists{/gist_id}","starred_url":"https://api.github.com/users/gattaka/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gattaka/subscriptions","organizations_url":"https://api.github.com/users/gattaka/orgs","repos_url":"https://api.github.com/users/gattaka/repos","events_url":"https://api.github.com/users/gattaka/events{/privacy}","received_events_url":"https://api.github.com/users/gattaka/received_events","type":"User","site_admin":false},"created_at":"2016-06-20T16:54:03Z","updated_at":"2016-06-20T16:54:03Z","body":"Hi, \r\nI have the same problem as assafsahar, but unlike him I am experiencing it in Chrome (on PC). I've noticed that the issue occures only when I am trying to create multiple instances of the same sprite at one time. Then some of these instances have \"lines\" above them. There is no scaling applied, no effects, just a plain sprite.\r\n\r\nSprite:\r\n\r\n![corpse_animation](https://cloud.githubusercontent.com/assets/1938708/16202733/4e3e28e2-3717-11e6-9200-1c1e65bcadd0.png)\r\n\r\nProblem:\r\n\r\n![problem](https://cloud.githubusercontent.com/assets/1938708/16202840/c751f1e6-3717-11e6-8c02-53c8949e324f.png)\r\n\r\nI am using the createjs-2015.11.26.combined.js version and PNG files from Gimp. I tried converting them with tinypng as well, but it didn't make any difference.\r\n\r\nThanks for any advice :)"}}
{"actor":{"display_login":"gattaka"}}