Ultimate Paperdoll Tutorial [Math Heavy]

[balliztik1]

**[ToC] Table of Contents**
(Use **CTRL + F** and search for the boxed number, including the brackets, to skip to that section quickly)

[1] Foreword
[2] The Item Sheet
[3] Creation of PD Items
[4] Placing Items
[5] In-Game
[6] Parting Words

**[1] Foreword**
Of all the features that Eclipse offers, paperdoll ranks very high in the number of questions asked on this forum, and very few people have an understanding of how exactly it works. It's very involved. The paperdolling process starts with a mathematical formula used within the sheet itself. From there, it requires two sets of graphics: an inventory graphic and a paperdolled graphic. These graphics also have to be aligned correctly to work at all. On top of that, the paperdolled images must align to the sprite. That's a lot of aligning. No wonder paperdoll has everyone confused. Today I will attempt to dispel that confusion by providing a step-by-step tutorial of ALL aspects of the paperdoll system. This includes anything and everything you'd ever need to know about paperdoll, all in one topic.

**[2] The Item Sheet**
The first thing you need when paperdolling is a sheet to store all these graphics in. This is by far the least understood part of the paperdoll system. The sheet itself is highly involved with math coded in the engine. It's all based on coordinates within the image itself. For the sake of simplicity, we'll consider the sheet to be divided into 32x32 "tiles", much like the map system, and into individual "rows" for paperdolling.

The main concept to grasp here is that tile 1 corresponds to row 1, and tile 2 corresponds to row 2, etc. However, this means that there will be overlaps unless the sheet is configured correctly. The following graphic is a representation of how the system works.

[](http://www.freemmorpgmaker.com/files/imagehost/#52a94955ae72caf83e38ff2b6300a8aa.png)

As you can see, the white numbers are the tile numbers, and the green numbers are the row numbers. The orange arrows show which tiles correspond to which rows. The main point of item sheet construction is to find a balance between the number of tiles and the number of rows. There are many variables that go into this. I'll explain algebraically.

Have a general idea of the number of items you need in your game. For the purpose of proof, we'll call this Q. To achieve Q items, there are certain things that must be considered. The item sheet is set up to use 6 tiles per row. In the example above, we see that the second tile PDs in the second row. Counting that tile, that leaves only 5 items between the start of the items and the start of the inventory. However, let's say you decide to start on the third tile. The third row would then be the start of paperdoll. You'd have 4 items in the first row and 6 items in the second row for a total of 10\. Moving the first item even further produces similar results. This increase, though, will vary depending on sprite size.

If your sprites are 32x64, this amount would double. Each PD row would take up two whole rows of tiles. That means that two rows of tiles would be left between each item's PD. Essentially, you get 11 items per space moved instead of 5.

Now, this all relates to the goal of Q. Since Q is the number of items you want, then Q is going to have to satisfy the formula. That is, Q is equal to the number of items between the first tile and first paperdoll. Use algebra, then, to find where to start. Let's compile all our knowledge into a formula.

The increase in items per tile moved for 32x32 is 5 and for 32x64 is 11\. Let's consider sprite size a 1 or a 2 (1 is 32x32, 2 is 32x64), and call it a variable "s". This can be considered because of the number of rows each take. If this is so, we can multiply by 6, for 6 tiles per row. Finally, we'd be subtracting 1 tile each time we moved for the potential tile we just lost. It works out like so:

```
(6 tiles/row) * (s rows) - 1 tile
6s tiles - 1 tile
6s - 1 tiles
```
The rows cancel out, and you are left with just tiles. Now, this value we've computed is the increase in tiles. We'll call this "I". I will be an important variable in the coming stages of paperdolling.

We've now established that for each tile moved, you get an increase in usable tiles I. This pertains to the goal of Q in that you can simply divide Q by I to get the number of skipped tiles you'll need total. Round this number UP. For the remainder of the tutorial, the value "Q / I" is referring to the rounded value, not the decimal value. Once you have this tile, you just have to find it. Counting tiles, though, is slow. Using the knowledge that there are 6 tiles per row, you can find the coordinates of the tile in question.

```
(Q / I tiles) / (6 tiles / row)
Q / (6 * I) rows
```
This gives the y value, the rows. It is essential that you round this value down. 15.5 rows means halfway through the 15th row, not rounded up to the 16th row. Using this rounded row value, we compute the x value thusly:

```
(Q / I tiles) - (Int(Q / (6 * I)) rows * (6 tiles / row))
```
This prunes off all the tiles contained within the rows that we've already counted and singles out the remaining tiles in the last row.

So now you have a row and tile value. These are essentially your y and x coordinates, in 32x32 tiles, of course. If you're not using a gridded sheet, which is likely if this is a newly created sheet, just multiply each value by 32 to get the pixel coordinates that you start at. Mark your sheet at this point for later.

The next part is much simpler. That number of tiles from before, (Q / I), comes back into play. This is the same as the number of rows that you'll need to skip for paperdolling. If the second tile corresponds to the second row, then it makes sense that the (Q / I)th tile would correspond to the (Q / I)th row, right? Of course! Now you take s, which is the 1 or 2, based on sprite size, and multiply it by the number of rows to skip. This will give you the row number upon which the paperdoll begins. Again, just multiply this value by 32 to get the exact pixel coordinate of the beginning of paperdoll. Mark this point and continue on.

Lastly, all that needs to be done is to give the sheet an end point. You've got the beginning of paperdoll rows, which is the end of item tiles, so all that is needed is the end of paperdoll and you've got yourself a complete template. This one is especially easy, though. The row we marked as the beginning is for the first item to PD. We just need to make the sheet large enough to hold all our items. We gave this value a name in the very beginning - Q. All we need is to make Q rows. Each row is s tiles in height, and the first row is the (Q / I)th row in the sheet, so we can form the following:

```
((Q / I) + Q) * s
```
This takes the first row, adds all the rest of the rows, and multiplies by the height, dependent on sprite size. Multiplying by 32 gives the pixel coordinate of the last row. However, since the first row is the (Q / I)th row, we actually counted it twice, so we have an extra row. This is a simple fix. Simply take the pixel value you got, and subtract one. This will be the very end of the sheet, all rows included. You won't need to mark anything because you'll just set your sheet attributes to this final pixel height.

You now (hopefully) have your own PD template. Now you need to know how to use it!

**[3] Creation of PD Items**
Before you can use the PD sheet, however, you need to have a sprite and items aligned for that sprite's usage. This is the part where you get to see my sub-par drawing skills!

I'll not go over sprite creation. I'll assume that by the time you are at the paperdolling point, you have a sprite ready, so that's up to you. I'll be using a simple sprite I made for my game, Stickworld. The first step is to isolate that sprite from the sprite sheet. Simply copy and paste it into a separate file. The dimensions should be 384x32 or 384x64, dependent on sprite size, of course. Here's mine:

[](http://www.freemmorpgmaker.com/files/imagehost/#f1b48a1e99dc2c68ddbed71232f98229.png)

As you can see, poor MC Hammer is powerless without his Hammerpants. Let's give him some. If you are using an art programme that has layers, create a new layer to do the next steps. If not, you'll have a bit more work to do. Also note that I have my sprite separated into frames. This is not necessary. My sprite sheet is gridded, which is why my sprites are outlined.

One by one, the sprite frames need to have the item drawn on them. The drawing is up to your skill, however. Here's Mr. Hammer with his famous pants on.

[](http://www.freemmorpgmaker.com/files/imagehost/#fd07c435e35c759ed030835562e5c211.png)

But we don't want to paste MC Hammer in all his godliness over the player when they equip the pants. Remove every pixel that is not the item, or remove the layer that the sprite is on. You'll be left with just an item paperdoll.

[](http://www.freemmorpgmaker.com/files/imagehost/#2a19d4241bf5ddabc6b832a379aa4a87.png)

Lastly, just create a 32x32 image to use in the inventory.

[](http://www.freemmorpgmaker.com/files/imagehost/#13b54db4242f9a6e56f61887c7a5d043.png)

Now we have something to add to our sheet.

**[4] Placing Items**
Once you're ready, all you need to do is place the items in the right spots. If this is your first item, then you'd just paste the inventory item in the tile you marked, and the paperdoll in the row you marked. However, if it's not, then you must count the tiles and rows again. This sounds familiar, almost as if we've done this before. We have, with (Q / I). Now, the only difference is that the value is not (Q / I) but rather an unknown item number "N". If (Q / I) is the first item, then adding N will give you the (N + 1)th item. Therefore, you need to subtract 1 to make sure that we get the Nth item.

```
(Q / I) + N - 1
```
The Nth item, then is found on the ((Q / I) + N - 1)th tile. We're working in reverse this time, though. We're sitting an item in a tile of our choosing. Divide the coordinates of the pixel at what you're doing so by 32 each. Then, take the Y-coordinate and multiply it by 6\. Then add the X-coordinate. This value you get is the equivalent to (Q / I) + N - 1\.

Now that we have what tile that this particular item is in, we can find the row. All that is needed is to take the tile value and do as we did before. We multiply by s. This will give us the 32x32 row to start at. Simply multiply, then, by 32 to find the pixel equivalent and paste your paperdoll at that mark. If you have outlines on your items for grid purposes, fill them in with your transparent color in the PD sheet, found in the top left corner. This will ensure that only the item is pasted onto the player.

**[5] In-Game**
Alright, all the steps are complete. All that is needed is to create your item in-game and see if you've succeeded. Make sure that you've got paperdoll turned on by setting its value to 1 in the data.ini, first. Then, open the item editor and edit the item as normal. In the "Item Sprite" section, scroll down to the Nth tile, that is, the inventory picture. Select it, and make sure the item is of an equippable type. Give your character the item and equip it. If you followed the tutorial correctly, your MC Hammer will be wearing his hammer pants, or what have you. If not, try to find where you went wrong. It's very math heavy, so double check your formulas.

**[6] Parting Words**
I hope this answered most, if not all of your paperdoll questions. If there are still questions, just ask and I'll clarify, or even edit into the tutorial if it's an aspect I skipped.

Happy paperdolling, Eclipse.

[The New World]

Wow, really informative. This will probably help a lot of people.

*Sticky Vote*  :laugh:

[Admiral Refuge]

One of the best I've seen so far!
*pinned*

[Radekil9]

didnt understand a sentance

[chiccora]

@Radekil9:

> didnt understand a sentance

Wow, fail.

[styx]

what do u mean by:::

"we see that the second tile PDs in the second row"

what does pds mean?????

[Murdoc]

@styx:

> what do u mean by:::
>
> "we see that the second tile PDs in the second row"
>
> what does pds mean?????

"paperdolls"

[XxSoulSlayerxX]

was very helpfull