Introduction
Hello, I am Tsukiyama, an engineering intern at a company in Tokyo/Japan.
I am Japanese and wrote this article using a translation tool, so please forgive me if it is difficult to read in some places.
I have created a simple, minimalistic pixel art creator that runs in the browser through personal development and would like to summarize it in an article!
It is not yet available on smartphones and tablets (I'm working hard on implementing this feature, so please wait a little while. πββοΈ)
https://pixelart-creator.web.app/
What kind of service?
As the title of this article suggests,γthis is a simple, minimalistic pixel art creator that runs in the browser.
As a concept, I wanted to create a service that allows users to easily draw pixel art, so I decided on a service that can be completed on a single page.
The pixel art you draw can be saved as an image.
Saved images can be used as social networking icons or as emojis in Slack or Discord.
Why did make it?
In conclusion, I answer because I wanted to use it.
There are already several pixel art creation services that work in the browser.
I was interested in pixel art and tried to use it, but it was difficult for pixel art beginners to understand because of its many functions, so I created a service that incorporates what I think would be better.
I also wanted to create a personal service because I had not yet created one when I started working as an engineer.
I wanted to release it to the world to get feedback since I had gone to the trouble of creating it.
I would be happy if this service could spark even a small interest in pixel art.
On technical matters
Since this is a technical article, I would like to discuss the implementation.
A GitHub repository is also available for those interested. (The code is very dirty)
https://github.com/tsukiyama-3/pixelart-creator
Technology used
front-end
Nuxt3 + TypeScript, using TailwindCSS for styling.
In addition, HTML5's Canvas2D is used in the drawing area.
back-end
Firebase Hosting
This is all I have to do because I don't use any database or user authentication.
Implementation deadlock
There are countless places where I got stuck, and I am still stuck in various places, but I picked up two that I got stuck on in particular.
β For faster drawing
In the beginning, the drawing area was created by changing the background-color of the DOM.
It is hard to imagine nowadays, but I had to operate 4096 square DOMs to prepare a 64 x 64 canvas,
The drawing was so slow that it took more than 10 seconds to fill the entire canvas, and it was not very usable.
The journey of rendering
DOM β Three.js β WebGL β PixiJS β Canvas2D
The trip was called
I think it can be implemented with WebGL, etc., but I felt it was over-spec for simply drawing dots on a canvas, so I settled on Canvas2D, which is easy to implement and learn.
Currently it takes about 0.01 ~ 0.02 seconds to fill an entire 64 x 64 canvas.
Please try it out so that you can get a log of the fill execution time in the console.
β The problem of not being able to draw clean lines
The mouse position was being acquired with mouse events, but if the mouse was moved quickly, the mouse position to be acquired would be skipped.
See the easy-to-understand GIF.
To solve this problem, linear interpolation is used to complement the space between dots.
About UI / UX
I'm not a designer, but I'd like to write about what I paid attention to in terms of UI/UX.
I felt that the worst user experience with a browser-based dot picture editor was when the user unintentionally erased the tab or reloaded the page, the dots they had drawn would disappear. So, I made it so that the pixel data and color palette data are stored in local storage.
In addition, I have tried to use icons to express almost no language on the page.
So I would be happy if people who want to draw dots without being restricted by language can use it.
About the future
I need to be able to draw dots on my phone and it is still hard to use even on PC.
I will continue to make these improvements and also create another service that I have been wanting to create using this dot picture editor.
I had originally created a dot picture editor for a service I was going to create, so I cut out that part and released it to the public.
As a dot editor developer, I would also like to study dot art so that I can draw dot pictures well.
Finally
I'm not sure how many people will use this service since it is the first service I have made public as a personal development project, but I'm looking for your feedback to make it more user-friendly.
I would be happy to cry if you could post your feedback and the dots you drew with this service in the comments, etc.
Please support me as I devote ourselves to making this service even better!
Thanks for reading to the end!
Top comments (0)