Aseprite

Aseprite

Not enough ratings
Inochi2D Pixel-artists' Handbook
By Grat10 💊
Inochi2D is the best so far for pixelart vtuber models, in this guide i'll tell you from the begining how to make and rig your model, tips and tricks. and good general infomation about Inochi as a whole
   
Award
Favorite
Favorited
Unfavorite
Intro: Open-source rigging
Hello! Grat again to spew info right into your brainnn.

and this time its about Inochi2D! :3

[Inochi2D's 8.0 Trailer video]

Inochi2D, not to be confused with Live2D.

Inochi2D is an Open-source project that is used to rig vtuber models or other things!

do note that Live2D & Inochi2D are not compatible, so anything that says it "works on Live2D models" might not work for Inochi2D as they are not the same formats!

Inochi2D being open-source means that you can contribute code and look through it if you wanted to![github.com]

if you get stuck in any part of this tutorial then please ask for help inside the #support channel on the Inochi2D discord and some friendly people will help you out![discord.com]

what might interest you pixel artists out there is that unlike Live2D,
Inochi2D supports point filtering meaning that your pixelart models will look sharp at any resolution

Live2D (Left) VS Inochi2D (Right)


these photos are both from a model that's resized by 200% in Aseprite.

I recommend you resize your models for Live2D by 3000%+
and your models for Inochi2D by 600%+ (going higher than this doesn't do much)

for both of these a good rule of thumb is always resize by even amounts so don't resize by 300% 500% 700% as that can mess up both Live2D and Inochi2D' placing of model parts!

it is required that you know a little bit about Inochi2D i recommend watching this tutorial about Inochi2D before continuing, its okay if you don't understand everything as we'll still go over the basics in this tutorial!

side note: i will be adding more to this tutorial as i learn Inochi2D also
Part I: My model
Here i'd like to show my model structure, sprite animations and etc


this is a basic overview of my models structure, from my Grat10_V2.3 model

its overall just like a normal Live2D model structure, and how you'd normally make a pixelart vtuber model.

This is the structure of a simple sprite animation for a vtuber model.


you simply put each frame of an animation into a layer

you can ofc make the animation in its own file and then copy each frame into the models file
the result will be something like this, just inside the live rigging software of your choice!

◆ Exporting a model
once you're done with your model you should export it so you can rig it in Inochi,
and to do that you'll need the "Export as PSD" script for Aseprite[github.com]

remember to backup your model file before continuing, just in case!

then we first have to resize our models,
using the sprite size menu and locking ratio will make sure you don't stretch out your model when resizing



then you should install your PSD script into Aseprite, or if you already did it just carry on!

depending on how large you resized with it might take a while for your model to export to PSD
if you resized by 3000%+ i'd personally go watch a video,
as that might take awhile. Aseprite might also freeze doing this process

The export as PSD script is located in the scripts dropdown is located in File/Scripts/export as psd


once you click it a menu will pop up where you can choose where to export it to among other settings



depending on the size, this menu will pop up telling you when the PSD has been successfully exported



now you have a psd, but it's broken, you didn't do anything wrong! but the PSD script just doesn't export it perfectly, so Inochi might not be able to understand the file, but GIMP does

using GIMP you can open the file and export it as PSD (broken PSD -> not broken PSD) :3
incase you don't have GIMP it can be downloaded here[www.gimp.org]

Part II: pixel basics to Inochi2D
rigging pixelart in Inochi2D isn't especially hard,
about as hard as it would be in Live2D

I don't use any form of deforming in the way i rig so i'm not able to teach you how to deform things

but i can teach you just about everything else!

Starting off, a good rule of them is to abide by the grid. the pixelgrid, so always try to make the maximum of something line up with the grid,

something i'd recommend is making a layer in your model file



this will make you able to be 100% sure you're lining up.



In Inochi Creator you select the grid and then control the opacity inside there.

this means you have more flexibility than setting the opacity in your drawing program,
as lining things up may need the grid to be clearer than what you set the opacity to in your drawing program!
◆ Point filtering & what a Puppet is
So first of all i'll start this off from a clean, just exported model png. so you'd see exactly what i see



This how a pixel model png looks when just imported, but its not 100% clear currently.

(i'm only showing a pixelart model png as i'd like to cover the layer/node structure in a chapter soon after this.)

this is because Point Filtering isn't enabled for the model, which is enabled in your models Puppet node

if you've used Godot, then you might already know of how nodes work! otherwise it's not super complex

so my png's structure is something like this.

Puppet { Grat-Grot-V6-2.png }

if you click on the Puppet node in the Nodes tab then this should show up in your Inspector.

in here small data about the model can be saved. like

  • your models name
  • artists or artists who made the model.
  • rigger or riggers who rigged the model
  • a contact field for eg. an email
  • license url
  • what copyright your model has
  • your models origin



what we're interested in is the Rendering Settings,
its all the way at the bottom. (in Inochi creator v0.8.3)

checking it will make your model render with point filtering.

side by side of the point filtering,
depending on model size the difference might be a lot bigger.
the image i used of my model was quite big!

[Left: with no point filter, Right: with point filter]
◆ The Node Tree
The node structure is a little bit confusing for beginners so i'd like to try to break it down in this chapter so its in smaller pieces.

once again i'd like to bring back the puppet diagram from the previous chapter.

puppet { }



the puppet contains everything your model has. along with some data about it.

when you imported your model all your drawing layers became nodes,
for simplistics sake, lets just call these Art nodes.

Inochi Creator also removed all of your folder structures, so your puppet should look something like this

puppet { hair face body etc }

what we want to do to get some order again is to put things into nodes or put something into the Art nodes.

that might be a little confusing sounding though. i'll come with some examples.

let's say you have a hair strand, but on that hair strand you have a hair accessory.
that would look something like this!

puppet { hair { hair strand { hair accessories } } }



so, why are we doing this?. well everything under each other gets effected by each other.

well it's easier to say that if we move our hair now, then hair strand will move along with it.
and so will everything under hair strand as well


well okay, but what if i don't have anything to put something under,
like several pupils but no main pupil they all could be under.

then you can right click in the Nodes tab, and create a Node. a node doesn't do anything unless you make it do something. so effectively its a folder you can put things under.

so we could something like this

puppet { pupil (node) { pupil normal pupil angry pupil highlights } }



you can train all this by setting your model up by this sort of structure,
and remember to save when you're done!
◆ Alignment tips
Aligning and moving things is really important for a model,
its also very important to create the scrolling 3D effect (in a future chapter)

okay. so lets just start out by moving things. as you've probably noticed. you cannot use your keyboards arrow keys to move nodes around, so one option is the move bar




it'll appear on any node and you can move it with your mouse,
though this might be hard to get anything precise with.

but in the Inspector theres a more precise option which i recommend using.


It's the inputs below Translation

The first one moves your node by X (Left & Right)
The Second moves your node by Y (Up & Down)
The last one is Z

using your mouse and scrolling on the inputs will make your nodes move in real time.
you can also double click and put in your own values.

now the best thing is to ensure you're making the maximum of an animation line up with a pixel. and thats why we have a grid layer.



The grid will help with aligning a lot. so use it as you need while moving things in to place.
◆ Scrolling 3D effect
Originally posted by @poribaketu137:
I've been getting a lot of inquiries, so here's a little tip!
This is an extreme example, but if you're using pixel art x Live2D,
it's better to use less deformation and more multiple scrolling to create a 3D
effect, so the pixels don't get squashed!
qoute source

the scrolling 3D effect is important for pixel models to not squash the pixels as poribaketu said.

[example of the 3D scrolling effect while moving the X axis]


we can make things a little simplier by splitting this into catagories.

  • front hair, which moves along with the face towards where you're looking.
  • middle hair which is used to bridge between the back hair and front hair.
  • back hair which moves in the opposite way of where you're looking.

you can use as many hair layers as you want to create the scrolling 3D effect

here's a diagram of Grat10_V2.3's hair, it doesn't have a middle hair.



when drawing your model, you should be able to create the 3D scrolling effect inside the drawing program too, that is a good way to prototype if it will handle being rigged in this way.

i make my front hair move two pixels where i'm looking while also making the back hair move 3 pixels back. using the grid while aligning is important!

make sure it's looking good, it's also fun to do!
(some riggers also make the model bop their heads to music)


◆ Nearest VS linear
an important thing to know before making sprite animations is the Interpolation modes Inochi creator has.

theres three as of right now (v0.8.3)
  • Nearest
  • Linear
  • Cubic

we're gonna focus on the first two.

Linear is the default, it blends two axes into each other,
in a sprite animation it would make a sprite become transparent slowly

Nearest would jump to the nearest axes,
so in a sprite animation it would switch a showing sprite to a hidden sprite instantly

Linear is great for blending things that remain the same, only changing color. then it slowly blends the two colors before it fully changes color

Nearest would be great for switching frames/layers of a sprite animation,
you could pre-make the animation in a drawing program like Aseprite and place the frames in the model file.

side by side of Linear (Left) VS Nearest (Right)

one blends the colors smoothly together, while the other jumps directly to the new frame.

pretty simple but also super handy!

you can change the interpolation mode of a node if you right click the node while arming the parameter
◆ Sprite animation in Inochi2D
time to do some sprite animation!

Note: as of writing Inochi does not have an easy way to trigger parameters so you won't be able to toggle things like outfits, helmets or any other special animations.



first a spite animation looks sort of like this, in your drawing program.
we can pre-animate it in there and put each frame in as a layer in your model.




what we're gonna do is switch visability on each of the frame-layers so
it'll create the sprite animation in the rigging software!



this is the axes for a 6 frame animation the space helmet switch on animation.

a good way to spot how many frames you've made space for is to count the spaces in between axes, in this one there's also 6 spaces in between

to create a snappy sprite animation like above we need to set interpolation mode to nearest, and we need to make the frame's opacity drop to zero



opacity is at the bottom of the inspector when selecting an art node.
experimenting with linear interpolation might also be a good idea, to create some cool in between effects!

◆ Sprite mouths


Sprite mouths! you can also make talking via sprite animations

what we use for mouth animations is the mouth form, which you can make like any other form of parameter.



mouth forms have a lot of lines by default which are useful for typical mouth rigging.

but i use 3 axes in X and 5 axes in Y, as i only have a small amount of mouth sprites to work with.
which means you'll have to remove some axes that the default mouth form has




(Y) this is how it looks, the top line is all my mouth open, and the bottom is my *most* closed mouth sprites.

(X) the -1 value is the sad expressions, 0 is neutral, positive is happy expressions 1+
Part III: Exporting and using your model!


exporting your model is very easy, its simply just File -> Export -> Inochi2D Puppet

you're also able to export images, jpeg, png or tga, or as Video (mp4)

to be able to export to images or video, you'll need a camera node




exporting your model will give you a Inp file,
which is different than your Inx save file which Inochi creator saves to.

the way most people gets their model to move is by using Inochi session,
its also the only way i currently know of.

◆ Inochi session & OpenSeaFace
Inochi2D also needs a program to animate your model to face tracking data,
and that program is Inochi session, it has support for several types of face tracking software

one such option is the Open-source face tracker OpenSeaFace,
which i'm using and will be showing you how to set up also



this is how session looks when just started

to get started we'll want to import our model into Inochi session and we can do that by dragging our Inochi2D model file over the Inochi session window and dropping it

to get your model to be tracked you'll need an external tracker (as of writing 2023-09-21) as Inochi session does not have an inbuilt one.

to set up your tracking software so Inochi session can see it i'd recommend looking at the documentation for that specific face tracking software.

for OpenSeaFace we'll need to put in a specific IP and Port, to set up a "Virtual space" we'll go to View -> Virtual Space.

In the menu, you'll need to add a name in the input box and then press the +
you can select your newly made vitual space and select a tracker in there,
you'd select the tracker of your choice if you're using something else,
but for this instance we'll select OpenSeaFace

below is how your virtual space should kind of look like.
your osf_bind_port should be 11573
and your osf_bind_ip should be 127.0.0.1
these are the default ones OpenSeaFace has



to get OpenSeaFace to run i'd recommend following the readme' tutorial as it also goes over different OSes [github.com]

OpenSeaFace when is running it should look like this ↓

Misc: Extra resources
this chapter contains any other good links i
have pertaining to Live2D pixelart or Inochi2D documentation

Misc: How to support Inochi2D
Inochi2D being FOSS (Free & open-source software) means that funding is sparse.
as such a good way to support Inochi2D is by donating on one of the below links
Inochi2D's main dev's patreon[www.patreon.com]
Github sponser the Inochi2D project[github.com]


reporting bugs, is also a good way to help out, you can report bugs in these places.
Inochi Creator bug reports goes here[github.com]
Inochi Session bugs reports goes here[github.com]

if you've found a bug that does not fit in to any of those please ask for help on the Inochi2D discord![discord.com]

another way to support could by contributing code to the Inochi2D github repositories[github.com]

talking about it and using Inochi2D also helps the software get its footing in the vtubing sphere
here below is social media where Inochi2D has an account.
Misc: Inochi2D' licensing
Note: This is about Inochi2D the software, not the models
your models are yours, and you can put whatever license you want on them.

Originally posted by Luna the fox girl:
The Inochi2D Project does not claim any form of ownership or implicit license over models produced in the software
qoute source[discord.com]

Inochi2D uses a BSD 2-clause

note that: you cannot claim Inochi2D endorses what you make,
without getting a go-ahead from the developers of Inochi2D!

there is more infomation about Inochi2D's branding and licensing here.
i'm not good with stuff like this so i'd like to point to official writing
https://github.com/Inochi2D/branding#conditions-of-use