Salutations! L'idée de créer votre propre éditeur de pixel art (toujours avec le blackjack) est venue en vacances quand j'étais complètement fatigué de déconner et que je voulais faire mon truc préféré (et je m'occupe des jeux et des applications). Je n'ai pas pris d'ordinateur portable avec moi. Maintenant, Pixel Studio gagne activement en popularité, et le titre indiscret "Le meilleur éditeur de pixel art mobile" doit être justifié.) Sous le chat, je vais parler de combien, comment et dans ce que je développe, comment je publie et fais la promotion, comment l'application se développe et quels sont mes plans pour l'avenir.
Qui en a besoin?
La toute première question que vous devez vous poser. Eh bien, d'abord, j'en avais besoin moi-même) Je développe des jeux, des applications et des actifs, j'aime le pixel art. Avoir un dessin mobile sous la main serait bien. Bien sûr, j'ai commencé à chercher des éditeurs mobiles dans les magasins. Au cas où, je précise que j'avais besoin de l'éditeur sur le smartphone. Il existe des éditeurs de pixels décents pour PC, par exemple Photoshop ou le bien-aimé Aseprite, qui sait tout. Je ne les considérerai pas. Passons en revue les applications les plus populaires. Bien sûr, cela n'a aucun sens de tout décrire, j'ai passé pas mal de temps à les étudier.
Éditeur Pixel Art (SPC Mobile) - l'éditeur le plus populaire, plus d'un million de téléchargements, une note moyenne de 4,0. Il y en a sur Google Play, dans l'App Store je ne l'ai pas trouvé. Dernière mise à jour - 2011. L'interface semble, pour le moins, démodée. Cependant, beaucoup l'utilisent. L'animation ne prend pas en charge.
dotpict - Easy to Pixel Arts (dotpicko) - un éditeur de
synoptique , plus d'un million d'installations, note 4,5. Je l'ai vraiment aimé, malgré toute sa primitivité et une façon plutôt inhabituelle de dessiner avec le curseur. L'animation ne prend pas en charge. Mais il y a une galerie en ligne d'œuvres avec des likes. Et dotpict a également des mini-jeux intégrés, c'est vraiment cool) Cependant, cela ressemble plus à un tueur de temps qu'à un éditeur professionnel.
8bit Painter (OneTap Japan) - le choix des éditeurs de Google Play, plus d'un demi-million de téléchargements, une note de 4,6. Conception minimaliste, peut dessiner des pixels et rien de plus. Pas d'outils supplémentaires. Je peux supposer que c'est aussi un tueur de temps plutôt qu'un éditeur professionnel.
Pixly - Pixel Art Editor (Gustavo Maciel) est un bon éditeur, plus de 100 000 installations, note 4.1, dernière mise à jour en 2016. Le premier éditeur professionnel que j'ai rencontré, et même avec de l'animation. Interface très incommode et incompréhensible, qui est le plus souvent critiquée dans les critiques. Le projet est probablement abandonné.
Conclusions
Le segment d'application sélectionné a sa place, il a un large public, alors qu'il n'y a pas d'applications dominantes des principaux développeurs. Nous allons donc travailler) Comment mettre en avant le futur éditeur? Tout d'abord, ce doit être «Le meilleur de tous». Cela signifie qu'il devrait avoir une interface moderne, simple et intuitive, une gestion pratique, une exportation vers des formats populaires et, bien sûr, une large gamme d'outils. Mais surtout, il doit supporter l'animation! Pour l'avenir, je dirai que c'est cette fonction qui a déterminé la popularité de l'application et les notes élevées. Quel sera le public cible? J'ai décidé de créer un éditeur pour les artistes et les développeurs de jeux. Mais en même temps, les portes devraient être ouvertes à tous les arrivants, c'est-à-dire pour le plus large public, y compris les enfants. Comme dit le proverbe:
Facile à apprendre, difficile à jouer!
Vous voulez juste peindre pour tuer le temps? Pas de problème! Vous voulez créer un storyboard de personnage pour votre jeu? S'il te plait!
Choisir un environnement de développement
En gros, je fais des jeux sur Unity. Et bien que beaucoup de gens pensent qu'il est un peu étrange de faire des applications sur Unity, j'ai une opinion différente. Le cas échéant, pourquoi pas? Oui, une application Unity sera "grasse" et pèsera beaucoup plus qu'une application native de cent ou deux kilo-octets. Mais la taille de 20 mégaoctets pour un dessin simple ne fait plus peur à personne) Oui, vous devez faire votre UI / UX au lieu d'utiliser l'interface du système d'exploitation. Mais nous ne cherchons pas de moyens faciles! En revanche, l'utilisation d'Unity offre des avantages très importants:
- multiplateforme, c'est iOS, Android et UWP
- un tas d'actifs dans le magasin de ressources que vous pouvez utiliser pour développer
- vitesse de développement (en fait, c'était la chose la plus importante pour moi)
Interface (UI / UX)
En fait, j'ai dessiné l'interface sur du papier déjà dans l'avion à mon retour de vacances. Il a fallu 12 heures pour voler, il y avait assez de temps) Donc, j'ai déjà vu assez de l'interface utilisateur des applications de pixel art les plus populaires, lu des critiques et fait une liste de comment et comment ne pas le faire. Tout d'abord, il était tentant de créer le pixel d'interface. Eh bien, l'éditeur est pour le pixel art, non? Oui, mais le style des pixels, et en particulier les polices de pixels, rend l'interface plus difficile à lire. Surtout lorsque vous avez besoin de montrer beaucoup d'informations (boutons, outils, panneaux), sans oublier que l'élément principal à l'écran est en fait une toile. J'ai décidé d'emprunter l'expérience de Photoshop. Il s'agit d'une police simple sans astuces et de simples panneaux-boutons gris sans décorations supplémentaires. Dans cette interface, vous pouvez placer plus de petits éléments, et en même temps tout sera lisible et cliquable. Mais en même temps, j'ai parfaitement compris que je ne faisais pas mon Photoshop avec une interface lourde et effrayante, mais un éditeur mobile. Tout devait être super simple et pratique, et des fonctions supplémentaires devaient être cachées. Mais cacher n'est pas pour que personne ne les trouve jamais.
Alors, quel est l'ensemble minimal d'outils dont un utilisateur a besoin pour commencer à dessiner du pixel art? Probablement un outil crayon est certainement nécessaire. Il devrait y avoir un choix de couleurs. Mais il devrait y avoir des préréglages de fleurs (palette prête à l'emploi). Une pipette de couleur ne fera pas mal. Et la gomme, où iriez-vous sans elle?) Le remplissage n'a également aucun sens où se cacher. Et bien sûr, il devrait y avoir un bouton «retourner tout en arrière» (tandis que «revenir en avant» peut être masqué). Les outils sélectionnés étaient également dus à la disposition verticale de l'écran, que je considérais par défaut. Je voulais dessiner d'une seule main sur un téléphone de 5 pouces. Donc, en haut, j'ai disposé la palette en 2 rangées de 12 couleurs. Il me semblait que 24 couleurs pour le pixel art seraient suffisantes dans la plupart des cas. Et à l'avenir, il sera possible de faire un défilement de diapositives. Dans le même temps, 12 boutons dans la largeur de l'écran de 5 pouces est déjà la limite de cliquabilité. Ci-dessous, j'ai placé la barre d'outils, 8 boutons d'affilée. Le panneau est magique, il s'ouvrira (déplacer par le bas), montrant des outils supplémentaires.
C'est ce que voit l'utilisateur qui vient d'installer l'application. Prenez et dessinez, c'est ce que vous vouliez?) Pas de manuels et de conseils, tout devrait être aussi simple que possible!
Et voici l'interface de l'artiste qui crée l'animation ou le personnage du jeu:
À propos de la formation
J'ai l'intention d'ajouter un petit tutoriel lors de la première exécution. Eh bien, comme cela arrive généralement - vous regardez à travers des pages avec des images ou des animations. Il vient de mûrir - comme il s'avère, par exemple, tous les utilisateurs ne pensent pas à cliquer sur la flèche pour développer la barre d'outils. De plus, pour certaines fonctions nécessitant des clarifications, j'ai ajouté de petites questions, quand on clique dessus, une info-bulle apparaît.
À propos de l'analyse
Bien sûr, l'analyse joue un rôle très important dans l'optimisation de l'interface utilisateur. Soit dit en passant, j'utilise Yandex AppMetrica et l'analyse intégrée Unity. J'enregistre toutes les pressions de bouton, toutes les fonctions, ainsi que les erreurs et les situations imprévues. N'ayez pas peur d'envoyer tout à l'analytique, surtout au début).
À propos de la localisation
J'ai moi-même fait la traduction en anglais. Avant de lancer l'application, j'ai également commandé une traduction professionnelle de textes promotionnels pour les magasins sur le site Internet.net. Les traductions dans les langues les plus populaires (espagnol, français, allemand, chinois et japonais) se sont élevées à 20-30 $ (pour un texte de 150 mots). Dans le processus de localisation de l'application elle-même, j'ai décidé de formaliser mes réalisations dans un actif autonome, désormais disponible dans
Unity Asset Store . En savoir plus à ce sujet dans mon article
Localisation des jeux et applications dans Unity. Rapide et pratique . La langue de l'application est déterminée lors du premier lancement à l'aide de la langue du système, et vous pouvez la modifier via les paramètres:
Quand est venu le temps de traduire l'application dans d'autres langues, j'ai tout de suite compris que ce serait assez cher) Donc, vous devez faire preuve d'esprit. J'ai fait un petit signe plus à côté du choix de la langue qui renvoie l'utilisateur à une table avec des traductions dans
Google Sheets . Ceux qui souhaitent ajouter leur traduction peuvent demander la permission de modifier. Étonnamment, les utilisateurs eux-mêmes ont fait des traductions en allemand, portugais, espagnol, français, polonais et chinois. Et cela ne m'a pas coûté un centime) Oui, de nouveaux textes apparaissent dans le processus de développement qui restent non localisés. Mais cela ne dérange vraiment personne) De plus, certains auteurs complètent parfois eux-mêmes leurs traductions.
Et ensuite?
Je suis probablement déjà fatigué de vous) Bien que je vous ai promis de vous parler de développement et de promotion, de statistiques et de projets pour l’avenir? Eh bien, laissons-le pour la deuxième partie?) Là, je vais raconter comment j'ai écrit ma bibliothèque GIF, comment habr m'a aidé dans sa mise en œuvre, comment, à la suite du travail sur Pixel Studio dans Asset Store, 6 nouveaux actifs gratuits sont apparus, comment, où et combien il a fait la promotion de l'application, de la communication avec les utilisateurs, des ennemis et des bonnes personnes qui ont traduit Pixel Studio gratuitement pour un tas de langues, des bugs et des lacunes de Pixel Studio, du merveilleux service italki qui m'a aidé à apprendre l'anglais et à développer Pixel Studio. Je voudrais également parler de ma première expérience de publication dans le Windows Store sur UWP. En attendant, merci à tous pour votre attention, bonne chance!
À propos de l'auteur
Je ne me considère pas comme un gourou du design ou un développeur méga-cool. Sur de nombreux problèmes techniques, je ne suis même pas prêt à discuter avec vous. Mais je peux faire de bons jeux, applications et actifs (oh, comment je veux le croire =).
Tap Tap Builder est probablement mon projet le plus difficile. Et j'ai de grands espoirs pour
Pixel Studio ) Dans l'Unity Asset Store, avec l'artiste, nous vendons bien des
actifs , par exemple, notre éditeur de personnage
Fantasy Heroes . J'aime aussi communiquer avec les utilisateurs et autres développeurs et assister à divers événements et hackathons. Alors posez des questions, écrivez des commentaires, si vous voulez - plus et moins).
Mais mieux, en plus ...