Panimator Used AI

This is my FINAL devlog. For now at least. I'm so proud to announce you the final version of Panimator, the pixel art animator available from the comfort of your browser. With this update I added a drag and drop system to move the frames from position to another easily. I also added the onion skin system in order t olet you animate in a better way. I fixed some bugs that wouldn't let you import any project. Moreover I changed the name, added a logo with animations, added a badge to the color so now it seems like a color palette. I can't believe I finally finished it all, at first I was really convinced but now that I see the results, I learned that everything could be done with some patience and constancy. Thank you all who followed my devlogs from the start to finish. Hope you like it!

Every time I think about this project I found something that could be improved or could be added. In fact I added the tutorial in order to get started in a easier way. I wanted to make it look smooth and to be as simple as possible. I also fixed some problem with the delete project button that wasn't responsive as well as the navbar, but I think that I can make it better. I also want to add a way to move from a position to another the frames in order to have full control on them. Few more steps are required, but we are really close to the end. I'm not sure I'm ready for this T-T.

I did IT! The project can be exported and imported where you want without any problem. It wasn't easy at all, because I worked with things that I have never used before, but after a lot of tries, IT ACTUALLY WORKS. With this update I also fixed some bugs and everything works as it should. All I need is to polish the project and then I will ship it. So excited to do so.

These days I was a bit overwhelmed with a lot of stuff to do and I wasn't able to work on my project. But FINALLY there it is. I'm so proud to annouce you that I have implemented the localstorage so the work doesn't vanish when the page reloads or when the connection is lost. It wasn't easy but it works perfectly! Also I received some feedback about the timeline by some of my friends and now when you press the play button the animation will start in loop. I changed the color of the toggle in the dark theme that weren't well visible. In conclusion I'm starting to add the possibility to export the project so you can re-import it and work on it whenever you want, but it doesn't work yet.

As I promised yesterday I updated the dark theme and now it looks as a dark theme lol. Moreover I updated the cursor so now it updates everytime the size of the tool selected is changed and it feels so smooth now! I did the same thing for the play/pause/clear/addframe buttons so when I click the shortcut, it simulate the click of the button. The browser saves the theme selected, yes the next step will be to add the localstorage in order to not lose the animation if the connection is lost or if the page refreshes. Maybe I will add the option to download the project so you can upload it another time and continue animating!

We are really close to the end of this project, at least until anything won't come to my mind soon. With this devlog I added all the shortcuts so you can speed up the process of making your animation in pixel art! They are all listed and you can see them by clicking to the question button on the bottom left of your screen. I also added a dark theme and a switch so you can select the one you prefer. I'm not really satisfied with the dark theme so I will change it a bit in the next devlogs. Anyway I hope that you will appreciate the work done so far, byeee.

I can FINALLY say that I have made a complete version of this project! In fact with this update I added the export options and functions to make GIF, multiple PNGs and Sprite Sheet out of the animation! That was obviously a bit tricky and I had to use some libraries such as gif.js and jszip to make everything work. I also changed the options on every single frame created. That means a moved the delete and download buttons and now they appear when the option button is pressed so they don't hinder the selection of the frames. Every should work just fine, go make some cool animation with that now!

We are getting closer to the final version of this project! You can in fact export as a png now! I had some problems while trying to make the background transparent but at the end I made it! For now you can download each frame individually with the download button. You can also change the file name in the export modal before exporting. I'm so excited to work now on the last few steps of the roadmap! Maybe one day this site could actually be used from pixel artists hopefully :)

New features available! Go try it in the demo! Now the 64x64 canvas works! I extended the maximum of size of the eraser and pencil to 20. I also added the Pixel Perfect mode and you can toggle it when you want! I added the footer and changed how the undo / redo system works to avoid some problems. Now each frames have its own stack and now you can add a frame exactly after the frame selected.Moreover you can now view the key shortcuts, just click on the question button on the right corner!

I did it! I finally completed the Timeline section and I'm so proud of what I have done so far, like really?! With this devlog I added the play / stop / clear function and the possibility to change the animation speed adjusting the fps! I also added the Reuse Last toggle that when checked allows you to create a frame as a copy of the previous and as an empty frame when is not checked! More over I started adding some shortcuts (as you can see in the video(ctrl = add frame, arrow left / right = switching through frames, will add more!)) and they are so useful, they speed up the process like a LOT. These changes are already live on the demo, go try it and make some cool animations! Tell me what do you think!

Today I focused more on the dynamism of the page, when the page runs on different sizes. I also change the background in order to maintain consistency as well as using always the same 4/5 colors and using them for the same things and functionality. Finally I added a cool cloud effect with the clouds I made in aseprite :). I'm both worried and excited to work on making the timeline work, but that's for tomorrow!

I made some pixel art background and added it, but still trying to adjust it a bit. Also I'm trying to make the site suitable for all screens with meta queries, but that's just the beginning, and it's getting worse than I expected XD.

This time I used my free time searching cool free svg to use as icons for my site. I can advise to you svgrepo.com, trust. Once added those icons I worked on deleting frames and re-numerating the frames after the one eleminated. Overall I adjusted the design as I always do. Just trying to get the best version of this site, time by time.

Did a lot of work! First of all, I added the frames functionality, now you can add as many frames as you wants! You can also switch from a frame to another, to do that I had to re-adapt everything to the new system (a mess). Now each frame is individual and numerated with its own undo/redo stack and its own grid obviously. Moreover I re-designed a bit the page and now it looks really good to me, go see the README also that I updated as well!

The demo is now Live! Go try it and tell what you think! With this update, the size of the pencil and the eraser can be modified and I also added the cursor that let you see exactly where you are going to draw or erase. Furthermore I added a cool background to the canvas that I made using aseprite. It's everything for this devlog, see ya in the next one!

Another step of the roadmap completed! Now you can save and load you favourite colour in the colour palette. I also synced the first frame (the square at the bottom left) with the main canvas. Moreover I made the site more dynamic with grids and flex. Really proud of what I have done so far!

Today I finally finished working on the Undo / Redo system that took me hours only to figure out how to make it work as it should. I also added a new image (made in aseprite) as background of the canvas and restyled the page (again) with new colours and animation that fits better in my opinion.

I realized that I needed to make a roadmap for my project, so I added it to the readme. Also I spent a lot of time figuring out how to do the Undo/Redo system and I came up with a not fully working version but still something. Gotta think more about that, but hopefully I'm pretty close. Finally, I adjusted a bit the Fill system avoiding some repetition that could have happened.

Today I added the fill button and its function that is still pretty basic but I works well. Now the page have a better style. I worked on the navbar, adding the buttons that let you choose the size of the canvas. Also I changed the style of the buttons and now everything feels better. In conclusion I added only the section of the color-palette that in the next devlog I will make it work.

This time I had to re-do the canvas rendering system because the eraser was having some problem with the old one. Now I use a 2D array grid to keep track of the pixels. Also the buttons now have a better styling and the tools are switchable. Everything is now adapted with the new system and drawing now feels a lot better!

I worked on the style of the project, just to outline the section of the page. I added the toolbar and animation section with the related buttons. Moreover it is possible now to select the Pencil tool and draw whatever you like with the selected colour. It's still very rough, but it's slowly taking shape.

Just started the project! I did a set up of the directories and files and learned how to use the canvas to make a grid that in the future will be editable with the tools. It's pretty basic but cmon that's only the first devlog! Let me cook...