Spine User Guide – Images

Spine User Guide – Images


Spine User Guide
IMAGES IMAGES Hi, my name is Søren Nielsen. In this video we will look at images
and take a quick look again at draw order and then some scripts we have available. A skeleton is made up of
images attached to bones but Spine does not edit the images,
so you will need to use your own image editing software to
create the art for your skeletons, The first step to setting
up a skeleton is to bring in each image as
a region attachment. Which is a single rectangular
image that is attached to a bone, But before region
attachments can be created Spine needs to know where
to find the images. IMAGES NODE The images node in the tree stores a path which you can see here. To a folder where Spine will
look for images for the skeleton. The path for images can be
set either relative to where the project file is saved or
you can set an absolute path. Currently it doesn’t
have a path set and that means it will be using
where the project is saved. As you can see here it says. Since I don’t have my project
saved I’m quickly gonna do that. Go here, click save project as and
go to my Spine Examples folder And I’m gonna save it in here and
call it temp.spine and replace it Overwrite it.
And there we go And now if I expand this images node you can
see I have the Export and Images folders. I want to be using this Images folder so I’m gonna go down here and
type in “./images/” like so. Now the images will show
up under the Images node. Spine will watch the folder and
immediately load any changes to the image files if you
change the files themselves. With the images now visible under the
Images node you can drag the images out into the editor area and
Spine will automatically create a slot and place the attachment
of the image below this. We can also take multiple
images at the same time. I select one of them, hold down shift
and then I have multiple selected. I can also hold down CMD
and select individually and then just drag them in. Now you can see we have
multiple slots, each with an image attached to it
under the root bone. You can also add the images
to bones by selecting the image and then
clicking Set Parent and then choosing where you want it. or you can also just press P which
is a shortcut to Set Parent. You can see it opens this pick session. I click the bone and it asks me if I want
to use an existing slot or a new slot. I’m just gonna click “Cancel” here. We can also take an image and
drag it onto an existing slot and now this slot will have
two different images on it. But like I mentioned in the
previous video only one attachment can be visible at any
given time on a single slot. Also notice if you look
here under the Images node that some of these icons are
green and some are red. The green one means that they
are being used in the project. While the red one means they
are not yet being used. So once you have all your
region attachments created then scale, rotation and translation tools
can be used to assemble the skeleton. So you can move all these
different images into place. I’ll be explaining how to use
these tools in the next video. Spine will find the image
for an attachment by taking the path we specified
under the Images node. And then append the attachment name. And this is the attachment name. The attachment does not need
to include a file extension. Spine will automatically
look for PNG and JPG files. If I go down here and change this path
like so. You can see that the attachment
I have defined up here is no longer being shown. But if I double click to rename it. I can go in here, and I
can type “images/head”. And now it is looking in a folder called
“Images” for a file called “head”. And you can see here we
have the Images node, and we have a folder
here called “images”. Now if I change this back to
“./Images/” like it was before the attachment will again be missing. So I’m gonna double click this and remove the
path, and now the image is showing again. An attachment name can
also include subfolders. For example if I am using
this path “./images/” I could have a folder in here
called for example “red”. And I could go here and double click and then type in like so. And I could have a specific version of the
head where he has red hair for example. and this would be placed in a
subfolder under this node. If an attachment has a path set. The path is used to find the image
instead of the attachment name. You can see the path down here. So I could go here and type “head”. As you can see, despite the
path up here being “red/head”. It is using the path down here. Two attachments under the same
slot cannot have the same name but they can have the same path. DRAW ORDER I’ll quickly go over draw
order again despite covering it slightly it
in the previous video and I’ll be using the good old
Spineboy project for this. So the order of which attachments are drawn is defined over here in
the draw order node. And slots higher up in the list
are drawn on top of those below. The slots can be either dragged, like so. Or you can select them and then hit the
“minus” and “plus” keys on your keyboard. You can also hold down “SHIFT” and you can see I’m holding down “SHIFT”
and I’m pressing “plus” and “minus” and it’s jumping by five
instead of just one. You can also select multipe
slots and you can see I’m now moving three different
slots at the same time and again, now I’m holding down “SHIFT”
and I’m hitting “plus” and “minus”. TREE FILTER Another way to change the draw
order is to use the filter. buttons that we have available
at the top of the tree. I’m gonna hide the bones and attachments and now you can see we have a
slightly different icon here. This is the draw order node before and this is the draw order node now. We can change the draw order just
like we did before, by dragging it. The benefit of this is that
now if I’m working with a very large skeleton with lots of
bones and lots of attachments it can be a bit tricky to find which
slot an image is attached to. But now if click this gun here you can see
it selects the slot and not the attachment. While if I have the attachments
on and I select the gun again you can see that now
it selects the attachment. If I take this off again. Select it and instantly
I have the slot selected and I can change
the draw order of it. SCRIPTS I’m now switched over to Photoshop to demonstrate
one of the scripts we have available. When creating skeleton images using an
image editing program outside of Spin it’s very common to create
images on separate layers as you can see I’ve done here. I have all of these different layers
with different parts of Spineboy. And for example if I hide the head here, you
can see that this part is no longer shown. Let me put this back on. Now exporting all these layers manually, by
first trimming them to get rid of whitespace and then saving each layer
individually is very time consuming and you will then also have to
manually place them inside of Spine and this would be double work
because as you can see he’s already posed as I want him to look in
my setup pose inside of Spine. To save time we’ve included
a script that will not only export each visible
layer in Photoshop. But also export a JSON file that
you can then import into Spine and your images will then
be in the correct position. You can find the
script if you go here. You can see I have my Macintosh HD
here, I have applications, Spine. This is where I’ve installed Spine. Now inside of here I have a scripts folder. You can see in here we have GIMP,
Illustrator and Photoshop scripts. If you’re not sure you are using the latest
version of the script you can go to our website. And then go to documentation. Go to User Guide. And under Images here And we’re gonna scroll
down here to scripts. You can see here it says that the script can be found in the Spine
installation folder, in the scripts subfolder. The latest version of these
scripts can always be found here. And then if I scroll further
down you can see we also have links for Illustrator,
GIMP and even After Effects. PHOTOSHOP To use the Photoshop script,
the images that make up the skeleton should be on separate
layers, like I mentioned before. Like the setup I have here. This is also true if you’re using GIMP. As I also mentioned before when the script is run, it will
export each layer as a separate image file and then create a JSON file
that can be imported into Spine. I’ll show you how this
import is done in a bit. But first let me go over the
settings for the Photoshop script. The first thing I’ve done here is I’ve
actually bound a the script to a hotkey So if I hit “F5” on my keyboard
it will launch the script. Now to do that you need to place the
script file in the correct position. Or the correct location. What I’ve done is. I’ve found
my Photoshop directory here. And I’ve gone to presets. And in here we have another
folder called Scripts. And if you place the
LayersToPNG.jsx file in there It will then show up
if you go to edit. And then keyboard shortcuts That I have open now. And then you go here to File. Scroll down, all the
way down to “Scripts”. You can see we have LayersToPNG showing
up here and my shortcut for it. So I’m just gonna hit
“Cancel”, like so. And then F5. All these different settings we have
in here, let me just go over them. The first one will write
layers as PNG files. And this means that all
these layers we have over here, it will write them
out as a separate file. So for example the head layer
here would be called head.png. And front_shin would be called
front_shin.png and so on. The next setting we have
is “Write a template PNG”. And this means that all the
visible layers we have. Or all the layers we have, depending
on this “Ignore hidden layers” here. Will be written as a single image that you
can then use as a template inside of Spine when you’re placing your images. Now the “Write Spine JSON”
setting here, just means that it will output a JSON file
that we can import into Spine and it will then look
through everything we have imported and place
the images correctly. Now we have the “Ignore
hidden layers” setting here. This also just means that
layers, like for example these two here will be
ignored when I hit “OK”. The “Use groups as skins” setting. Over here in my layers, if I’m
using groups to set up my layers it will create a skin with
the same name as your group and it will then place your different images
in a subfolder for the different skins. This “Use ruler origin as 0.0”. Just means it will take
this ruler position here. For example if I place it here, this will
now be the root position of my images. Let me open up here again. Now the PNG scale percentage
that I have here. I can take this to one
percent, or a hundred percent. This means that. You can see if I zoom in. It’s actually rather large
images that I’m working with. And I prefer to work at high resolution
when I’m creating the assets. So now, when I export it, this would of
course be way too large for a game. So when I export it I turn
this down to a different scale. And it will scale the images
before actually exporting it. The “Padding” setting we have here will
give you some extra room to work with. For example the head here,
if I set the padding to zero it would trim all the white space to the
very edge of the pixels on that layer. If you’re working with meshes it’s a
very good idea to set this padding up because it will give you a
little more room to work with, And this can also avoid aliasing artefacts
for opaque pixels along the image edge. Now the output directory, I’ve set
this to “./images/spineboytemp/”. And I’m just gonna add a slash here. And this is where my images
will be exported to. The JSON path, I’m gonna leave this blank. Because I’ve saved the
Spineboy PSD file, in the same foldere as where I
have my project file. So I’m just gonna hit “OK”. And we’re gonna let the script
run here, and let it finish. And when it’s done, I’ll
then switch into Spine. So I’ve switched back into Spine again now and you can see I’ve opened up the
“temp” project that I created before. And now now I want to get the images
that I created in Photoshop into Spine. To do this, I click the Spine logo
up here and I go to “Import Data”. Click “Browse” and then I
find the spineboy.json file that I exported from
Photoshop and hit “Open”. And now it asks me for a skeleton name.
I’m just gonna leave it at “spineboy”. Hit “OK” and now you can see
it’s created a new skeleton. I can delete this one here. Just gonna do this. And if I go to the Images
node, you can see the path that I defined before
“./images/spineboytemp/” is being used. And all the images are now
placed in the correct draw order based on what I had in Photoshop. And they all have an attachment and they’re all named
based on the layer naming convention that I used
inside of Photoshop. So this was a pretty long video, but
I hope you’ve learned something. In the next video we will start taking a look
at the tools we have available for Spine and I hope to see you there. So thank you very much for
watching, bye for now.

17 thoughts on “Spine User Guide – Images”

  1. yeah, finally its fixed the scripts in a way. before the photoshop script didn't work properly for me like it would create pngs but with the one same image lol This software is amazing for indies and AAA gaming!

  2. The layers get exported as png files but when I try to import the data it says everything is missing.

  3. to solve the import problem

    after you get the script and export all the PSD layers into pngs in a folder.
    go to spine

    "Make sure that the "Json" file and all the pngs are in the same folder."

    When you import the JSON file it will say that the pictures are missing.
    Go to the box on the right and click the little folder tab.
    then at the bottom use the Browse tab.

    Search the folder that has the Json and png files and import the file or pngs. (Folder is going to look empty)

    and there you go.

    Something I had learned by mistake

  4. "Layers to PNG" doesn't show up in the edit keyboard shortcut window even though I did place the file in the photoshop scripts folder, I closed photoshop and spine a couple of times and even restarted my computer, nothing changes. Can someone help me?
    I went back into the files to discover the "Layers to PNG" File had disapeared from the photoshop AND spine script folder. I redownloaded spine and instead of drag and droping the file I copy-pasted it. I restarted photoshop and it looked like it would work… But nope. once I press the shortcut key, an error message shows up saying: Error 22: Windows does not have a constructor. Line: 233 -> var dialog = new Windows("dialog","SpineLayersToPNG");

  5. I have a problem with the scrip, i´m using the CS6 version, the error says: ERROR 23 & does not have a value line 141, who i can repair it ?

Leave a Reply

Your email address will not be published. Required fields are marked *