{"id":2446,"date":"2013-09-29T23:55:19","date_gmt":"2013-09-29T20:55:19","guid":{"rendered":"http:\/\/unitycoder.com\/blog\/?p=2446"},"modified":"2015-01-14T02:54:27","modified_gmt":"2015-01-13T23:54:27","slug":"pixel-art-editor-plugin-unity","status":"publish","type":"post","link":"https:\/\/unitycoder.com\/blog\/2013\/09\/29\/pixel-art-editor-plugin-unity\/","title":{"rendered":"Pixel Art Editor Plugin (wip)"},"content":{"rendered":"<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"2447\" data-permalink=\"https:\/\/unitycoder.com\/blog\/2013\/09\/29\/pixel-art-editor-plugin-unity\/unity_pixel_editor_plugin_unipix_1\/\" data-orig-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/unity_pixel_editor_plugin_unipix_1.png?fit=680%2C582&amp;ssl=1\" data-orig-size=\"680,582\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"unity_pixel_editor_plugin_unipix_1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/unity_pixel_editor_plugin_unipix_1.png?fit=680%2C582&amp;ssl=1\" class=\"alignnone size-full wp-image-2447\" src=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/unity_pixel_editor_plugin_unipix_1.png?resize=680%2C582\" alt=\"unity_pixel_editor_plugin_unipix_1\" width=\"680\" height=\"582\" srcset=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/unity_pixel_editor_plugin_unipix_1.png?w=680&amp;ssl=1 680w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/unity_pixel_editor_plugin_unipix_1.png?resize=300%2C256&amp;ssl=1 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<p>** New version is being worked on here: <a title=\"http:\/\/unitycoder.com\/blog\/2015\/01\/13\/assetstore-unipix-pixel-art-tool\/\" href=\"http:\/\/unitycoder.com\/blog\/2015\/01\/13\/assetstore-unipix-pixel-art-tool\/\">http:\/\/unitycoder.com\/blog\/2015\/01\/13\/assetstore-unipix-pixel-art-tool\/<\/a><\/p>\n<p>Havent find any good pixel graphics editors.. so started making a simple pixel art editor plugin (meant only for maximum 32&#215;32 sized images). (Screenshot showing first test, 16&#215;16 image, 32x zoom, small preview on the right side.. no colors yet)<\/p>\n<p>I have tried these free ones already, but none of them really has all the necessary features in one, or they are just not user friendly enough..<br \/>\n&#8211; <a title=\"http:\/\/retroidea.com\/?p=9\" href=\"http:\/\/retroidea.com\/?p=9\" target=\"_blank\">D-Pixel<\/a><br \/>\n&#8211; <a title=\"http:\/\/teknopants.com\/pixothello\/\" href=\"http:\/\/teknopants.com\/pixothello\/\" target=\"_blank\">Pixothello<\/a><br \/>\n&#8211; <a title=\"http:\/\/www.aseprite.org\/\" href=\"http:\/\/www.aseprite.org\/\" target=\"_blank\">Asesprite<\/a><br \/>\n&#8211; <a title=\"http:\/\/www.humanbalance.net\/gale\/us\/\" href=\"http:\/\/www.humanbalance.net\/gale\/us\/\" target=\"_blank\">Graphics Gale<\/a><br \/>\n&#8211; <a title=\"http:\/\/www.icofx.ro\/\" href=\"http:\/\/www.icofx.ro\/\" target=\"_blank\">IcoFX <\/a>(not free anymore)<br \/>\n&#8211; <a title=\"http:\/\/code.google.com\/p\/grafx2\/\" href=\"http:\/\/code.google.com\/p\/grafx2\/\" target=\"_blank\">Grafx2<\/a><br \/>\n&#8211; ..<\/p>\n<p><strong>Current features of &#8220;UniPixel&#8221;<\/strong> (working name)<br \/>\n&#8211; Editor plugin<br \/>\n&#8211; Can draw with 3 mouse buttons (right click to erase!)<br \/>\n&#8211; Canvas with adjustable zoom<br \/>\n&#8211; Canvas background grid, with adjustable light and dark colors<br \/>\n&#8211; Preview (real size)<\/p>\n<p><strong>TODO:<\/strong><br \/>\n&#8211; Grid lines<br \/>\n&#8211; Toolbar (with shortcut keys also)<br \/>\n&#8211; Somekind of settings? (for grid colors, image size, filename?)<br \/>\n<del> &#8211; Saving<\/del><br \/>\n<del> &#8211; Loading<\/del><br \/>\n&#8211; Layers<br \/>\n<del> &#8211; Floodfill<\/del><br \/>\n&#8211; Gradients<br \/>\n<del>&#8211; Color picker<\/del><br \/>\n&#8211; Color palette<br \/>\n&#8211; Undo<br \/>\n&#8211; Mirror\/flip\/<del>scroll canvas<\/del><br \/>\n&#8211; Live preview toggle<br \/>\n<del> &#8211; Automatic black borders layer<\/del><br \/>\n&#8211;<\/p>\n<p><strong>Notes:<\/strong><br \/>\n&#8211; Problem: If you save image with File.WriteAllBytes(), how do you know when saving is done and file is ready (without sleeping \/ looping)? (because you would need to set image import settings to filtermode.point, but it will try too early..) ** For now, using loop with try catch..<br \/>\n&#8211; Problem: Drawing lines in EditorWindow.. this (<a title=\"http:\/\/wiki.unity3d.com\/index.php?title=DrawLine\" href=\"http:\/\/wiki.unity3d.com\/index.php?title=DrawLine\" target=\"_blank\">drawline<\/a>) is the only way? Oo..<br \/>\n&#8211; Building the GUI\/UI is *too painful*..i guess have to make GUI builder\/editor first, unless there are some in store?<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Image#2:<\/strong> first tests, can see the texture in scene\/game view also (if its already assigned to some material) &#8211; live previews after save! (some errors appear when pressing play, editorwindow gets reseted?)<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"2456\" data-permalink=\"https:\/\/unitycoder.com\/blog\/2013\/09\/29\/pixel-art-editor-plugin-unity\/pixel_art_editor_plugin_unity_test2\/\" data-orig-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test2.jpg?fit=680%2C368&amp;ssl=1\" data-orig-size=\"680,368\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"pixel_art_editor_plugin_unity_test2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test2.jpg?fit=680%2C368&amp;ssl=1\" class=\"alignnone size-full wp-image-2456\" src=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test2.jpg?resize=680%2C368\" alt=\"pixel_art_editor_plugin_unity_test2\" width=\"680\" height=\"368\" srcset=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test2.jpg?w=680&amp;ssl=1 680w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test2.jpg?resize=300%2C162&amp;ssl=1 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<p>&#8212;<\/p>\n<p><strong>Image#3:<\/strong> Flood fill works, also Loading, Saving, Save copy, Clear. (toolbar still needs work..)<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"2460\" data-permalink=\"https:\/\/unitycoder.com\/blog\/2013\/09\/29\/pixel-art-editor-plugin-unity\/pixel_art_editor_plugin_unity_test3\/\" data-orig-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test3.jpg?fit=686%2C661&amp;ssl=1\" data-orig-size=\"686,661\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"pixel_art_editor_plugin_unity_test3\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test3.jpg?fit=686%2C661&amp;ssl=1\" class=\"alignnone size-full wp-image-2460\" src=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test3.jpg?resize=686%2C661\" alt=\"pixel_art_editor_plugin_unity_test3\" width=\"686\" height=\"661\" srcset=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test3.jpg?w=686&amp;ssl=1 686w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test3.jpg?resize=300%2C289&amp;ssl=1 300w\" sizes=\"auto, (max-width: 686px) 100vw, 686px\" \/><\/p>\n<p>&#8212;<\/p>\n<p><strong>Image#4:<\/strong> Color picker, Extra previews with black and white backgrounds, mousewheel for lighten\/darken color, middle mouse button for pixel color pick..<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"2465\" data-permalink=\"https:\/\/unitycoder.com\/blog\/2013\/09\/29\/pixel-art-editor-plugin-unity\/pixel_art_editor_plugin_unity_test4\/\" data-orig-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test4.jpg?fit=618%2C711&amp;ssl=1\" data-orig-size=\"618,711\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"pixel_art_editor_plugin_unity_test4\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test4.jpg?fit=618%2C711&amp;ssl=1\" class=\"alignnone size-full wp-image-2465\" src=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test4.jpg?resize=618%2C711\" alt=\"pixel_art_editor_plugin_unity_test4\" width=\"618\" height=\"711\" srcset=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test4.jpg?w=618&amp;ssl=1 618w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test4.jpg?resize=260%2C300&amp;ssl=1 260w\" sizes=\"auto, (max-width: 618px) 100vw, 618px\" \/><\/p>\n<p>&#8212;<\/p>\n<p><strong>Image#5:<\/strong> Automatic black borders layer toggle, image scrolling.. (huh, unity gui is not fun when you would need to place lots of elements.. have to redesign the UI later completely)<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"2467\" data-permalink=\"https:\/\/unitycoder.com\/blog\/2013\/09\/29\/pixel-art-editor-plugin-unity\/pixel_art_editor_plugin_unity_test5a\/\" data-orig-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test5a.jpg?fit=622%2C778&amp;ssl=1\" data-orig-size=\"622,778\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"pixel_art_editor_plugin_unity_test5a\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test5a.jpg?fit=622%2C778&amp;ssl=1\" class=\"alignnone size-full wp-image-2467\" src=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test5a.jpg?resize=622%2C778\" alt=\"pixel_art_editor_plugin_unity_test5a\" width=\"622\" height=\"778\" srcset=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test5a.jpg?w=622&amp;ssl=1 622w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test5a.jpg?resize=239%2C300&amp;ssl=1 239w\" sizes=\"auto, (max-width: 622px) 100vw, 622px\" \/> <a href=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test5b.jpg\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"2468\" data-permalink=\"https:\/\/unitycoder.com\/blog\/2013\/09\/29\/pixel-art-editor-plugin-unity\/pixel_art_editor_plugin_unity_test5b\/\" data-orig-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test5b.jpg?fit=622%2C778&amp;ssl=1\" data-orig-size=\"622,778\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"pixel_art_editor_plugin_unity_test5b\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test5b.jpg?fit=622%2C778&amp;ssl=1\" class=\"alignnone size-full wp-image-2468\" src=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test5b.jpg?resize=622%2C778\" alt=\"pixel_art_editor_plugin_unity_test5b\" width=\"622\" height=\"778\" srcset=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test5b.jpg?w=622&amp;ssl=1 622w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/pixel_art_editor_plugin_unity_test5b.jpg?resize=239%2C300&amp;ssl=1 239w\" sizes=\"auto, (max-width: 622px) 100vw, 622px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>** New version is being worked on here: http:\/\/unitycoder.com\/blog\/2015\/01\/13\/assetstore-unipix-pixel-art-tool\/ Havent find any good pixel graphics editors.. so started making a simple pixel art editor plugin (meant only for maximum 32&#215;32 sized images). (Screenshot showing first test, 16&#215;16 image, 32x zoom, small preview on the right [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2447,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[485,3],"tags":[65,559,247,560,34,546,357],"class_list":["post-2446","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-assets","category-unity3d","tag-2d","tag-art","tag-draw","tag-graphics","tag-paint","tag-pixel","tag-sprite"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2013\/09\/unity_pixel_editor_plugin_unipix_1.png?fit=680%2C582&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p1KTaT-Ds","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/2446","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/comments?post=2446"}],"version-history":[{"count":16,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/2446\/revisions"}],"predecessor-version":[{"id":3577,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/2446\/revisions\/3577"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/media\/2447"}],"wp:attachment":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/media?parent=2446"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/categories?post=2446"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/tags?post=2446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}