Pixel Studio - mobile pixel art editor
Greetings The idea to create my own pixel art editor (necessarily with blackjack) appeared on vacation, when I was completely tired of idleness and wanted to work out what I loved (and I work on games and applications). I didn’t take the laptop with me. Now Pixel Studio is actively gaining popularity, and the indiscreet title “Best Mobile Pixel Art Editor” needs to be justified) Under the cut, I’ll tell you how much, how and in what I develop, how I publish and promote, how the application develops and what plans for the future.
The very first question you need to ask yourself. Well, firstly, it took me myself) I am engaged in the development of games, applications and assets, I take a great interest in pixel art. Having a mobile drawing app on hand would be nice. Of course, I started looking for mobile editors in the stores. Just in case, I’ll clarify that I needed exactly the editor on the smartphone. Worthy pixel editors for the PC exist, for example, Photoshop or everyone's favorite Aseprite, which can do everything. I will not consider them. Run through the most popular applications. Of course, it makes no sense to describe everything; I spent a lot of time studying them.
Pixel Art editor (SPC Mobile)- The most popular editor, more than a million downloads, an average rating of 4.0. There is in Google Play, in the App Store, I did not find it. Last updated - 2011. The interface looks, to put it mildly, old-fashioned. However, many use it. Animation does not support.
dotpict - Easy to Pixel Arts (dotpicko) is a mimic editor, more than a million installations, estimate 4.5. I really liked it, despite all its primitiveness and a rather unusual way of drawing with the cursor. Animation does not support. But in it there is an online gallery of works with likes. And also mini-games are built into dotpict, it’s really very cool) Nevertheless, it’s rather a time killer than a professional editor.
8bit Painter (OneTap Japan)- the choice of the editors of Google Play, more than half a million downloads, an estimate of 4.6. Minimalistic design, can draw pixels and nothing more. No additional tools. I can assume that this is also a time killer rather than a professional editor.
Pixly - Pixel Art Editor (Gustavo Maciel) is a good editor, more than 100,000 installations, a rating of 4.1, last updated in 2016. The first professional editor I got caught, and even with animation. Very inconvenient and incomprehensible interface, which often complain about in reviews. The project is probably abandoned.
The selected application segment has a place to be, it has a wide audience, and there are no prevalent applications from major developers. So, we will work) How can we select a future editor? First, it must be “Better than everyone.” This means that it should have a modern, simple and intuitive interface, convenient management, export to popular formats and, of course, a wide range of tools. But most importantly, it must support animation! Looking ahead, I’ll say that it was this function that determined the popularity of the application and high marks. Who will be the target audience? I decided that I would make an editor for artists and game developers. But at the same time, the doors should be open for everyone, i.e. for the widest audience, including children. As the saying goes:
Basically, I make games on Unity. And although many people think that it’s a bit strange to make applications on Unity, I hold a different opinion. If it is appropriate - why not? Yes, the application on Unity will be "thick" and will weigh much more than a native application in the size of a hundred or other kilobytes. But the size of 20 megabytes for a simple drawing tool now is not to scare anyone) Yes, you have to do your UI / UX instead of using the OS interface. But we are not looking for easy ways! On the other hand, the use of Unity provides significant advantages:
In fact, I drew the interface on paper on the plane when I returned from vacation. It was 12 hours to fly, there was enough time) So, I had already seen enough of the UI of the most popular applications for pixel art, read reviews and compiled a list of how to do it and how not to do it. First, it was tempting to make the interface pixel. Well, after all, the editor is for pixel art, right? Yes, but pixel style, and especially pixel fonts, make the interface harder to read. Especially when you need to show a lot of information (buttons, tools, sockets), while not forgetting that the main element on the screen is, in fact, a canvas. I decided to borrow the experience from Photoshop. This is a simple font without any frills and simple gray buttons-panels without additional embellishments. In this interface, you can place more small items and with this all will be readable and clickable. But at the same time, I understood perfectly well that I was not making my Photoshop with a heavy and frightening interface, but a mobile editor. Everything should be super-easy and convenient, and additional functions should be hidden. But hide is not so that no one has ever found.
So, what is the minimum set of tools a user needs to start drawing pixel art? Probably, the pencil tool will definitely be needed. To him should be the choice of color. But there must be color presets (ready-made palette). Pipette for color selection does not hurt. And the eraser, where would it be without it?) There is no sense in hiding the fill either. And of course, there should be a button “return everything back” (while “return ahead” can also be hidden). The selected tools were also due to the vertical position of the screen, which I calculated by default. I wanted to draw even on a 5-inch phone with one hand. So, on top I arranged the palette in 2 rows of 12 colors. It seemed to me that 24 colors for pixel art would be sufficient in most cases. And in the future it will be possible to make a slide and scroll. In this case, 12 buttons wide 5-inch screen - this is the limit of clickability. At the bottom I placed the toolbar, 8 buttons in a row. The magic panel will be revealed (go below), showing additional tools.
This is what the user who just installed the application sees. Take and draw, is it really conceived?) No manuals and tips, everything should be as simple as possible!
And this is how the interface of the artist who creates the animation or character for the game looks like:
I plan to add a small tutorial on first launch. Well, as is usually the case - leaf through pages with pictures or animation. It just has matured - as it turns out, for example, not all users think of clicking on the arrow to expand the toolbar. In addition, for some functions that require clarification, I added a small question, when I clicked, a tooltip appears.
Of course, analytics play a very important role in optimizing the UI. By the way, I use Yandex AppMetrica and Unity embedded analytics. I log all button presses, all functions, as well as errors and unforeseen situations. Do not be afraid to send everything to the analyst, especially at first).
I did the translation into English myself. Before the release of the application, I also ordered a professional translation of promotional texts for stores on translated.net . Translations into the most popular languages (Spanish, French, German, Chinese and Japanese) came out at $ 20-30 (for a text of 150 words). In the process of localizing the application itself, I decided to put my work into an independent asset, which is now available in the Unity Asset Store . Read more about it in my article Localization of games and applications in Unity. Quick and convenient . The language of the application is determined when you first start using the system language, and you can change it through the settings:
When it came time to translate the application into other languages, I immediately figured that it would come out quite expensive) So, you need to turn on your wits. I made a small plus next to the choice of a language that throws the user onto a table with translations into Google Spreadsheets . Who wants to add your translation, may request permission to edit. Surprisingly, users themselves have made translations into German, Portuguese, Spanish, French, Polish and Chinese. And it did not cost me a penny) Yes, new texts appear in the process of development, which remain non-localized. But it doesn’t bother anyone much) Moreover, some authors sometimes supplement their translations themselves.
I’m probably already tired of you) Although I promised to tell you about the development, and about the promotion, about the statistics and about the plans for the future? Well, let's leave it for the second part?) There I will tell you how I wrote my GIF library, how habr helped me with its implementation, as a result of working on Pixel Studio in the Asset Store there were 6 new free assets, how, where and how promoted the application, about communication with users, about haters and about good people who translated Pixel Studio for free to a bunch of languages, about bugs and flaws in Pixel Studio, about the wonderful italki service that helped me with learning English and developing Pixel Studio. I would also like to tell you about my first experience of publishing in the Windows Store on UWP. In the meantime, thank you all for your attention, good luck!
I do not consider myself to be some kind of design guru or mega cool developer. On many technical issues I am not even ready to argue with you. But I manage to do quite good games, applications and assets (oh, how you want to believe it =). Tap Tap Builder is probably my most difficult project. And I have high hopes for Pixel Studio ) In the Unity Asset Store, we are a couple with an artist selling assets well , for example, our character editor Fantasy Heroes . I also like to communicate with users and other developers and attend various events and hackathons. So ask questions, write comments, if you want - plus and minus).
But better plyus ...
Who needs it at all?
The very first question you need to ask yourself. Well, firstly, it took me myself) I am engaged in the development of games, applications and assets, I take a great interest in pixel art. Having a mobile drawing app on hand would be nice. Of course, I started looking for mobile editors in the stores. Just in case, I’ll clarify that I needed exactly the editor on the smartphone. Worthy pixel editors for the PC exist, for example, Photoshop or everyone's favorite Aseprite, which can do everything. I will not consider them. Run through the most popular applications. Of course, it makes no sense to describe everything; I spent a lot of time studying them.
Pixel Art editor (SPC Mobile)- The most popular editor, more than a million downloads, an average rating of 4.0. There is in Google Play, in the App Store, I did not find it. Last updated - 2011. The interface looks, to put it mildly, old-fashioned. However, many use it. Animation does not support.
dotpict - Easy to Pixel Arts (dotpicko) is a mimic editor, more than a million installations, estimate 4.5. I really liked it, despite all its primitiveness and a rather unusual way of drawing with the cursor. Animation does not support. But in it there is an online gallery of works with likes. And also mini-games are built into dotpict, it’s really very cool) Nevertheless, it’s rather a time killer than a professional editor.
8bit Painter (OneTap Japan)- the choice of the editors of Google Play, more than half a million downloads, an estimate of 4.6. Minimalistic design, can draw pixels and nothing more. No additional tools. I can assume that this is also a time killer rather than a professional editor.
Pixly - Pixel Art Editor (Gustavo Maciel) is a good editor, more than 100,000 installations, a rating of 4.1, last updated in 2016. The first professional editor I got caught, and even with animation. Very inconvenient and incomprehensible interface, which often complain about in reviews. The project is probably abandoned.
findings
The selected application segment has a place to be, it has a wide audience, and there are no prevalent applications from major developers. So, we will work) How can we select a future editor? First, it must be “Better than everyone.” This means that it should have a modern, simple and intuitive interface, convenient management, export to popular formats and, of course, a wide range of tools. But most importantly, it must support animation! Looking ahead, I’ll say that it was this function that determined the popularity of the application and high marks. Who will be the target audience? I decided that I would make an editor for artists and game developers. But at the same time, the doors should be open for everyone, i.e. for the widest audience, including children. As the saying goes:
Easy to learn, hard to play!Want to just draw to kill time? No problem! Want to make a character storyboard for your game? You are welcome!
Choosing a development environment
Basically, I make games on Unity. And although many people think that it’s a bit strange to make applications on Unity, I hold a different opinion. If it is appropriate - why not? Yes, the application on Unity will be "thick" and will weigh much more than a native application in the size of a hundred or other kilobytes. But the size of 20 megabytes for a simple drawing tool now is not to scare anyone) Yes, you have to do your UI / UX instead of using the OS interface. But we are not looking for easy ways! On the other hand, the use of Unity provides significant advantages:
- cross-platform, this is iOS, and Android, and UWP
- a bunch of assets in the Asset Store that you can use to develop
- development speed (actually, the most important thing for me)
Interface (UI / UX)
In fact, I drew the interface on paper on the plane when I returned from vacation. It was 12 hours to fly, there was enough time) So, I had already seen enough of the UI of the most popular applications for pixel art, read reviews and compiled a list of how to do it and how not to do it. First, it was tempting to make the interface pixel. Well, after all, the editor is for pixel art, right? Yes, but pixel style, and especially pixel fonts, make the interface harder to read. Especially when you need to show a lot of information (buttons, tools, sockets), while not forgetting that the main element on the screen is, in fact, a canvas. I decided to borrow the experience from Photoshop. This is a simple font without any frills and simple gray buttons-panels without additional embellishments. In this interface, you can place more small items and with this all will be readable and clickable. But at the same time, I understood perfectly well that I was not making my Photoshop with a heavy and frightening interface, but a mobile editor. Everything should be super-easy and convenient, and additional functions should be hidden. But hide is not so that no one has ever found.
So, what is the minimum set of tools a user needs to start drawing pixel art? Probably, the pencil tool will definitely be needed. To him should be the choice of color. But there must be color presets (ready-made palette). Pipette for color selection does not hurt. And the eraser, where would it be without it?) There is no sense in hiding the fill either. And of course, there should be a button “return everything back” (while “return ahead” can also be hidden). The selected tools were also due to the vertical position of the screen, which I calculated by default. I wanted to draw even on a 5-inch phone with one hand. So, on top I arranged the palette in 2 rows of 12 colors. It seemed to me that 24 colors for pixel art would be sufficient in most cases. And in the future it will be possible to make a slide and scroll. In this case, 12 buttons wide 5-inch screen - this is the limit of clickability. At the bottom I placed the toolbar, 8 buttons in a row. The magic panel will be revealed (go below), showing additional tools.
This is what the user who just installed the application sees. Take and draw, is it really conceived?) No manuals and tips, everything should be as simple as possible!
And this is how the interface of the artist who creates the animation or character for the game looks like:
About training
I plan to add a small tutorial on first launch. Well, as is usually the case - leaf through pages with pictures or animation. It just has matured - as it turns out, for example, not all users think of clicking on the arrow to expand the toolbar. In addition, for some functions that require clarification, I added a small question, when I clicked, a tooltip appears.
About analytics
Of course, analytics play a very important role in optimizing the UI. By the way, I use Yandex AppMetrica and Unity embedded analytics. I log all button presses, all functions, as well as errors and unforeseen situations. Do not be afraid to send everything to the analyst, especially at first).
About localization
I did the translation into English myself. Before the release of the application, I also ordered a professional translation of promotional texts for stores on translated.net . Translations into the most popular languages (Spanish, French, German, Chinese and Japanese) came out at $ 20-30 (for a text of 150 words). In the process of localizing the application itself, I decided to put my work into an independent asset, which is now available in the Unity Asset Store . Read more about it in my article Localization of games and applications in Unity. Quick and convenient . The language of the application is determined when you first start using the system language, and you can change it through the settings:
When it came time to translate the application into other languages, I immediately figured that it would come out quite expensive) So, you need to turn on your wits. I made a small plus next to the choice of a language that throws the user onto a table with translations into Google Spreadsheets . Who wants to add your translation, may request permission to edit. Surprisingly, users themselves have made translations into German, Portuguese, Spanish, French, Polish and Chinese. And it did not cost me a penny) Yes, new texts appear in the process of development, which remain non-localized. But it doesn’t bother anyone much) Moreover, some authors sometimes supplement their translations themselves.
What's next?
I’m probably already tired of you) Although I promised to tell you about the development, and about the promotion, about the statistics and about the plans for the future? Well, let's leave it for the second part?) There I will tell you how I wrote my GIF library, how habr helped me with its implementation, as a result of working on Pixel Studio in the Asset Store there were 6 new free assets, how, where and how promoted the application, about communication with users, about haters and about good people who translated Pixel Studio for free to a bunch of languages, about bugs and flaws in Pixel Studio, about the wonderful italki service that helped me with learning English and developing Pixel Studio. I would also like to tell you about my first experience of publishing in the Windows Store on UWP. In the meantime, thank you all for your attention, good luck!
about the author
I do not consider myself to be some kind of design guru or mega cool developer. On many technical issues I am not even ready to argue with you. But I manage to do quite good games, applications and assets (oh, how you want to believe it =). Tap Tap Builder is probably my most difficult project. And I have high hopes for Pixel Studio ) In the Unity Asset Store, we are a couple with an artist selling assets well , for example, our character editor Fantasy Heroes . I also like to communicate with users and other developers and attend various events and hackathons. So ask questions, write comments, if you want - plus and minus).
But better plyus ...