I built a pixel art editor after playing Octopath Traveler II

After playing Octopath Traveler II, I was really inspired by its art style and decided to create my own pixel drawing app from scratch. It's still in the early stages, but it already supports basic drawing, undo/redo, and a clean UI focused on pixel-perfect design.

I plan to add frame-by-frame animation support in the next version.

You're welcome to try it out and share your thoughts! If you like the project, a on GitHub would mean a lot to me.

Live demo: https://ayanamiii.netlify.app/

GitHub: https://github.com/KamiC6238/ayanami

114 points | by Kobayashiii 5 days ago

18 comments

  • roflcopter69 3 days ago
    Gave it a quick try and liked it so far. Of course it's still quite basic but a good start I'd say. Looking forward to seeing more features being added.

    To anyone looking for a more feature packed pixel art editor, I highly recommend https://github.com/Orama-Interactive/Pixelorama which is free and made with Godot. I recently switch to Pixelorama coming from Aseprite because imo the development for the latter got a bit stale over the years while Pixelorama really seems to have a lot of momentum and community behind it. Also, Pixelorama being made with Godot is something I really love to see!

    [-]
    • charlie-83 3 days ago
      Out of interest (as an aseprite user) what did you find that Pixelorama had that aseprite didn't?
    • Kobayashiii 3 days ago
      Thanks a lot for giving it a try and for the great recommendation! I’ll definitely check out Pixelorama — it looks like there’s a ton I can learn from it. And I’ll keep working on improving my editor too!
    • tccuuchffhfu 23 hours ago
      [dead]
  • thih9 3 days ago
    Clickable links:

    https://ayanamiii.netlify.app/

    https://github.com/KamiC6238/ayanami

    Looks great, congrats!

    [-]
  • PeterHolzwarth 3 days ago
    Shoutout to the legendary Deluxe Paint III. I worked with people who, 30 years after the release, still kept an old computer running just to be able to use Dpaint II and III. They said it was the best pixel editor ever made.
    [-]
    • 3036e4 3 days ago
      There is the open source VGA Paint 386 to get something similar: https://www.bttr-software.de/products/vp386/

      Runs in DOSBox (i.e. runs everywhere and can be expected to keep working).

      And of course also the open sourced A**desk Animator on various platforms (but I run that in DOSBox as well... great for doodling on the phone).

      https://github.com/AnimatorPro

      [-]
    • roskelld 3 days ago
      DPaint III finally granted me the ability to create animation, which was always one of my early dreams to be able to do. I combined my obsession of Lemmings with Judge Dread to create a series of shorts following the exploits of Judge Lem. Sad that I no longer have the disks for them, but I'm so thankful for how amazing and accessible DPIII was.
      [-]
      • kuhewa 2 days ago
        hahahaha Judge Lem. Bring it back
    • dlachausse 3 days ago
      Fun fact, Deluxe Paint I was open sourced…

      https://computerhistory.org/blog/electronic-arts-deluxepaint...

      [-]
      • 3036e4 3 days ago
        Unfortunately only shows the source code "for non-commercial use".
    • teddyh 3 days ago
      Modern work-alike: GrafX2 <https://pulkomandy.tk/projects/GrafX2>
    • Jzush 2 days ago
      Dpaint III was amazing. The ability to do calculated animation was way ahead of it's time. Too bad I couldn't get anything exported from my Amiga 500 :(
    • zem 2 days ago
      deluxepaint and fantavision were both amazing beginner-friendly art and animation (respectively) apps from the dos era, whose equivalents i have yet to see.
    • ekianjo 3 days ago
      Not deluxe paint IV?
      [-]
      • PeterHolzwarth 3 days ago
        Heck, let's be honest: all revs were excellent. But, the artists I am referring to preferred dpaint 2/3.
  • prashnts 3 days ago
    Really cool!

    A quick enhancement you can add, which will help mobile users, is adding appropriate touch specifiers to the element. Currently I am unable to drag the pen to draw -- the whole page moves. By fixing that, I should also be able to use my Apple Pencil.

    Specifically, this page describes it better: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-actio...

    [-]
    • Kobayashiii 2 days ago
      Hi, thank you very much for your feedback! Unfortunately, I don’t have plans to support mobile so far, but maybe one day I will! Please stay tuned as the project continues to grow!
  • sabslikesobs 3 days ago
    Very cool! You've quite nicely rendered some of Aseprite's attractive window chrome.

    I draw "pixel art" in Krita with my "Flipnot Brushkit" brushes [1], which I prefer for Homestuck-style low-res painting where traditional pixel art programs kind of fail. Krita has a lot of nice power features for transforms and layering, like the batch_export plugin for exporting tons of layers at once.

    [1]: https://sabslikesobs.itch.io/flip-not-brushkit-deluxe-for-kr...

  • neuroelectron 3 days ago
    This "pixel art" style really confuses me and reminds me of another article about the style and its basis in CRT scanline bleed. Looking at Octopath, basically only the characters are pixel art and the hit counters and environments and so on is relatively high def.

    I wonder if there would be any interest in something that actually is a low resolution look, maybe 640x480, where the pixels system is coded to line up to the grid instead of using aliasing. Maybe even limit it to mode-7 like effects or so on, then you can enable scanline emulation on a modern screen.

    [-]
    • fzzzy 2 days ago
      Sure, I definitely think there is interest in doing straight up 640x480. Another thing that annoys me about modern pixel art games is when they take a pixel art sprite and rotate it so the pixels are no longer along the original axis.
      [-]
      • HelloNurse 2 days ago
        Rotation isn't the only way to ruin the "pixel art" style by breaking the illusion. Other common ones include continuous scaling (as if low-resolution images were vector art) and inconsistent resolution of different objects (e.g. animated 3d-rendered characters on stylized pixel art backgrounds, or carefully crafted sprites on smoothly drawn backgrounds).
  • somefuckingguy 3 days ago
    Looks really cool! Well done.

    I made something similar, albeit less stylised, a while back. It's got animation. I'm not sure it's the ideal way to do it, but have a look if you want. I describe the approach here: https://bardhovde.com/posts/miko/

    Repo: https://github.com/bnhovde/miko Demo: https://mikoapp.netlify.app/

    [-]
    • Kobayashiii 3 days ago
      Thank you!! I’ll take a look. Really appreciate you sharing it!
  • socalgal2 3 days ago
    Cute!

    I'm curious, why use netify and not just github pages? AFAICT your app is just a static page. If so, there's no reason you need netify (which IIUC will require $$$ knock you off eventually). Is there some tutorial/LLM/template you followed that used netify? Were you planning on adding serve side features, user accounts, galleries? Just curious.

    [-]
    • codingdave 3 days ago
      I've had small static sites running on netlify for years, for free, never had any problems. I did so because I already have a site on github pages as well, so needed more free options.

      What have you seen that would force people out of their free tier?

      [-]
      • socalgal2 2 days ago
        > I did so because I already have a site on github pages as well, so needed more free options.

        Every repo you make shows up at a different place. Is that no enough. If you care about enough the domain name then register a domain?

        > What have you seen that would force people out of their free tier?

        If that's not common then maybe I just have a bad memory.

    • Kobayashiii 3 days ago
      Haha, you’re absolutely right! I had built my blog with Astro before, and the tutorial I followed used Netlify for deployment. So I just stuck with it. I don’t have any plans to add server-side features for now. Anyway, thanks for your reply!!
  • vunderba 3 days ago
    Nice work. Having done pixel art in the past, the editors that I used almost as a universal rule had a means to display the tile at multiple zoom levels in real-time as you were working on it - to provide a helpful sanity check of how it would look in the context of a game for example.
  • christophilus 3 days ago
    Unrelated to your tool (which looks cool, by the way), I wish Square would remake their classics in this style rather than the mediocre 3D crap they’ve been into of late. I’d love to play Chrono Trigger or Final Fantasy VI on the Octopath Traveler game engine.
    [-]
    • goosedragons 3 days ago
      Isn't that exactly what they've done with Dragon Quest III and Live a Live lately?
  • hombre_fatal 3 days ago
    Seems way too trivial to share in its current state.

    Also, you double-mention Octopath Traveler II which has nothing to do with this except pixels. I find it odd to try to get association points for this level of project.

  • kubb 3 days ago
    I’ve always wanted to learn how to make sprites and pixel art, but I always got stuck. because I had no idea how the process should look like. Does anyone have any advice about going from unskilled to decent?
    [-]
  • ThinkBeat 3 days ago
    I dont know much about pixel art and tools but I could not figure out how to add more tiles. I realize is probably a might dumb question

    It starts with 4 (I think) how do I add an additional 2?

    [-]
    • Kobayashiii 3 days ago
      That’s not a dumb question at all — thanks for pointing it out! Right now, the canvas size is fixed, but I’m planning to support resizing soon.
  • emigre 3 days ago
    It's really cool, I like it!
  • shawn_w 3 days ago
    That's such a fun game.
    [-]
  • lovegrenoble 3 days ago
    Thank you
    [-]
  • 300hoogen 3 days ago
    super clean