Tutorial S2F - Learning Basic Pixel art and Putting it into the Game

START TO FINISH [S2F]
Learning the Basics of Pixel Art and Putting it into the Game
[FOR ANGRY KOALA]​

ABOUT:
I am honestly an absolute newb when it came to pixel art and modding. But after hours of experimentation, great community help and searching through a hundred posts. I am able share the knowledge in one easy reference.
In other words this tutorial will help even the person with absolutely 0 idea of what they are doing.

We will cover

• PART 1
  • Chapter 1 - Where to Find and Download Tools
  • Chapter 2 - Setting up GIMP and drawing the Image
  • Chapter 3 - Animating
• PART 2
  • Chapter 4 - Learning about the Objects and Frame File
  • Chapter 5 - Modifying the UI
  • Chapter 6 - Learning about the Recipes File
  • Chapter 7 - Learning how to create a Merge file and Modinfo file.

To quick go to a chapter Press Control + F and type in " Chapter #" for example "Chapter 7"
So the final result will be




Chapter 1: Tooling Up
Subsection: Code Monkey

Before we start we are going to need the necessary tools. Don't worry they are all Free no strings attached.

The first bit of Software we need is Notepad ++. This is going to be our code editor. The problem with notepad is it doesn't make the code human legible. It keeps the code as is. Notepad++ breaks it down nicely so you can easily edit and save.
http://notepad-plus-plus.org/download/v6.5.2.html

Make sure you download the installer version, so it can associate the asset files to Notepad++.
Now when its installed you can click on any of the code asset files and right click chose open with notepad++
Or if you wish you can associate those type of files with notepad ++
To find out more information on how to do that please visit
http://support.microsoft.com/kb/307859

Subsection: Artist

Now that we have our code tools ready, we are going to need some art tools. Paint is great don't get me wrong, but we want our life to be made easier not harder. So what we are going to be using is a software called GIMP.
If you have Photoshop that's great, both software follow the same concept so you can easily interchange between one and another.

So grab GIMP from here
http://www.gimp.org/downloads/

Chapter 2: The Set-up
Subsection: Inspiration

Now hopefully everything is set-up, installed and ready? You are all fired up. Look at you and your bright shining faces all ready to learn. Its quite depressing really. Anyway, now comes the hardest part. Something, honestly I cannot really give much guidance too. What is it? I don't know. That's up to you

You have to decide what you wish to make.
In my case I wanted to do a copper distillery. So I searched Google and grabbed some pictures for references.


Just start with something simple for now, a bottle, a trash can. Anything that fits your fancy. Grab a few pictures of what ever item of your choice and we can begin.

Subsection: Gearing Up

Now that you have your reference images ready, you have to deciede how big you want the image to be ingame.
To give a matter of perspective the player character is 32 pixels wide and 64 pixels tall.
Your also free to check for references in the starbound asset folder

Code:

C:\Program Files (x86)\Steam\SteamApps\common\Starbound\assets

If you have steam installed somewhere else you can open steam
Right click on star bound in your library --> Properties --> local files --> Browse local files
and it will automatically open up your asset folder.

Take time to peruse through the assets, to find an appropriate size.
Also while you are here go to your Root starbound folder
you will see a folder called "Mods"
Inside that folder create a new folder with your "Mod Name/
So it should look like

Code:

Starbound/mods/mymodname/

Now one important rule you should keep in mind
The image you make needs to be a factor of 8
8, 16, 32, 40, 48, 56, 64, 72, 80, 88 etc.

So keep a rough idea, but its good to design the image to those limitations. Cutting it parts of it will be more trouble then its worth.
So give your self a little extra room if you need it.

[I am using GIMP 2.8.1.0
1. Now open up GIMP
[If you have trouble following Read this Guide http://docs.gimp.org/2.8/en/
Step 3 is more important to learn the interface. ]

Go to file --> New


Now make sure it says PX [Pixels] we don't want to deal with anything else
Now its time to decide how big you want your image to be.
Also if you wish to animate it you need to first consider how big the base image is.
In the case of my distillery the width of it was 16 pixels. I had 4 frames so 16 x 4 = 64

So I choose Width 64 and height 32.
If you don't want to animate it, don't worry about that detail. But keep it in mind if you ever want to animate in the future.

Will you be able to resize the same image later? Yes!
This is done by opening the image in gimp. Go to Image --> Canvas Size --> Change width accordingly. Remember each "Frame" should be the same size. So if your first "Frame" Is 16 width. Each Frame should be 16 also.
So say you want to create an animation with 3 frames? 16 x 3 = 48 would be the width you should input. No need to change height.

Choose advanced Options
In Fill Background choose "Transparency"

Ok now we should have a basic set-up.
Now on the left side where your tools are set-up. Look for the magnifying glass
http://docs.gimp.org/en/gimp-tool-zoom.html

And zoom in nicely to a point where you can almost zoom no more.
Now we want to work with 2 tools.

• Pencil tool http://docs.gimp.org/en/gimp-tool-pencil.html
• Eraser. http://docs.gimp.org/en/gimp-tool-eraser.html

But before we jump in we need to properly set the settings


Now first we need to select our brush. Click on the Eraser from the tool box and now click on the brush [below] which appears in the "Tools Options"
Choose the Tiny Square brush. Then put Size as 1.

Now click on the Dynamics Icon and choose "Dynamics Off"
Also make sure hard edge is checked.

Now are tools are prepared.
Click on the Pencil tool - The brush settings you have chosen should have stayed the same. But just in case make sure its still a square brush with 1 pixel size.

Now you will notice 2 Coloured squares in the tool box. Click on the top box and choose which ever colour you want. I choose orange as my base colour when creating my distillery



From there you can keep reworking your image. Until you create something you like. Only erase tiles you don't want. Otherwise just replace a part with a different colour.
As a general rule of thumb. The places near the back will have a darker shade the places in the front a lighter shade.
Lighting emitting areas will of course have a lighter shade.

As you can see you don't need to worry about touching the edges, feel free to do so.
Once you have your image done, go to File --> Save.
Blender will save the image as an XCF file - This will be your editable file for use later on.
This will not be the file you will be using in the game. But save it somewhere for future editing.

Then do File --> Export
Make sure its PNG format.
If its not PNG then on the bottom of that same window you will see
'Select file Type"
Here choose PNG

And save the image in your new mod folder.
Now file location is very important.
So first go to

Code:

Starbound/mods/mymodname/

Now create another folder objects
then create another folder
generic
and save the PNG of your image inside that.



You can see the file structure on top.

You will also want to create an "icon file"
named objectnameicon as shown above.

Icon files can only by 16 x 16 pixels and cannot be animated.
So create an icon following the same steps above.

Chapter 3: Animation

THIS CHAPTER YOU CAN SKIP IF YOU DO NOT WISH TO ANIMATE

SubSection: Getting your Move on.

So now you created your item, you decide oh no. You think your file could do with some animation.
Open up your XCF file which you saved first. Now if you didn't account for animation previously, Then when the file is loaded go to Image --> Canvas Size and change the width of the image to
Width x how many frames. So if you want 4 frames and your width is 16 then you want your new width to be 64.



Now your image will look like this.
And if everything done correctly your canvas will have extended.
Now if you remembered what I said earlier. Each image will be 16 pixels. But how are we going to know where those 16 pixels begins and ends? That's where those convenient blue guides are for.

So now lets go to Image --> Guides --> New Guides.
Choose Vertical
And type in the distance of 1 frame.
In my case it is 64 total width.
So I created my guides at 16 32 48
You will have to do it one at a time.

So if everything is done correctly you will have 3 nice guides to help you break up the frame. You do not need to draw lines using the line tool. Such things will mistakenly end up in your image. Guides will not appear in the final image so do not worry.

Now if you notice on the right side I highlited a particular thing. These are known as "Layers"
Now what we want to do is right click on the layer we already made and choose "Duplicate layer"

Nothing immediately apparent will be seen besides a new layer being created.
Now with the move tool http://docs.gimp.org/en/gimp-tool-move.html

Click on the image and drag it to the right. So it fits perfectly between the 2 new guides you created.
Now repeat the step 2 more times. and place each new one in another frame.

So by the end of it you should have 4 of the same images.each within its own frame
Do not worry if the images "Touch" as long as the images do not overlap you will be ok.
The image should not pass beyond the guide line, but touching the guide is perfectly fine.

Now its a good idea to name your layers.
To do that you and Double click on the layers name and a text box should appear. Then choose a name such as 1 , 2 ,3 ,4. So you ill know which layer associates to which image.

Now when you wish to edit a certain image make sure you choose that layer first by left clicking on it on the layer menu.
Then make your changes.



This is what I ended up with.
As you can see the guides in place to tell me where each frame is.
As you can also see you do not need to draw out each and every frame transition. There is quite a large difference between each frame. But the end result animation will be smooth. So don't go OCD on making a step by step animation. You can skip a few steps ahead as shown above.

As previously make sure you save the image as a xcf file.
Then save the PNG in your mods folder in the appropriate directory as mentioned above.

==============
This is it for the first part of the tutorial. Took a few hours to write up.
The next part which will be below this' Will deal with coding and modifying the GUI.

So Until Next time.
If you enjoyed \ found it useful \ or found a mistake. Please leave a comment below.

 

PART 2: CODING AND RUDIMENTARY GUI ALTERING

Chapter 4: Forging Ahead

So now we have our pretty little image. We need to work on getting it into the game.
Now you need to decide what is your object most closely represented off?
A decoration? A stove? Anvil \ Crafting Table? or something else?

When you have figured it out, go to the asset location of that object.
An easy way to do tat [for windows]
is to first open star bound assets.
Then on the top right, of windows explorer you will see a search option.

Type in the name of the object you can use the asterisk * to increase chances of finding it.
For example if I typed Furnace, it won't show any result but it I typed *Furnace.
The stone furnace will appear.

Now I want to copy the object and frames file from the stone furnace and now put it into my mods folder
so it will be located in

Code:

Starbound/mods/mymodname/objects/generic/ 

now hopefully you installed Notepad++ by now. If you haven't go ahead and do that.
Now right click on the frames file and do "open with notepad ++"

You should see

Code:

{
  "frameGrid" : {
    "size" : [24, 16],
    "dimensions" : [4, 1],
    "names" : [
      [ "default.0", "default.1", "default.2", "default.3" ]

    ]
  },

  "aliases" : {
    "default.default" : "default.0"
  }
}

Now we will break down each one at a time, so no need to panic.

Code:

"size" : [24, 16],

Size is asking for the size of a Single frame. If you only have one frame, then the dimensions of the image. If you have an animation then a single frame. the syntax is [width, height]
For example lets go back to my example it was 64 width 32 height.
Each frame was 16 px width.

So i would put
"size" : [16, 32]

Next is Dimensions

Code:

"dimensions" : [4, 1],

Dimensions is asking how many "Frames" or variations are there of an image.
For those more keep on poking around you may have noticed some images come in "multiple" colours.
The syntax for this is [horizontal, vertical]

So I have 4 frames in my image so I would type [4, 1]

Next is name. These are the names of each associated "Frame" for sake of reference.

Code:

"names" : [
      [ "default.0", "default.1", "default.2", "default.3" ]

So with our particular image we can just follow the same syntax as provided, and base it on the number of frames. Starting with 0. S if you only have 2 frames then [ "default.0", "default.1"] is enough
In the case of multiple color variations - I suggest checking out the frames file of cardboard box1.

Code:

{

  "frameGrid" : {
    "size" : [24, 16],
    "dimensions" : [1, 9],
    "names" : [
      [ "default" ],
      [ "red" ],
      [ "blue" ],
      [ "green" ],
      [ "yellow" ],
      [ "orange" ],
      [ "pink" ],
      [ "black" ],
      [ "white" ]
    ]
  }
}

Its self explanatory - as each name is associated with the image. This is most likely tied to the upcoming dye system.

Finally we have name alias. Which is required for animations - but not for static objects with no animations. So if your object doesn't have an animation you can remove that part. The entire part as shown below would need to be removed the opening and closing curly bracket should be taken note of.

Code:

"aliases" : {
    "default.default" : "default.0"
  }

This you can leave as is and no need to modify.

Final Copy of Edited file

Code:

{

  "frameGrid" : {
    "size" : [16, 32],
    "dimensions" : [4, 1],
    "names" : [
      [ "default.0", "default.1", "default.2", "default.3" ]

    ]
  },

  "aliases" : {
    "default.default" : "default.0"
  }
}

Now we enter the meat and potatoes The object file. It looks pretty intimdating at first, but we will break it down accordingly.

Code:

{
  "objectName" : "stonefurnace",
  "rarity" : "Common",
  "description" : "A stone furnace, useful for crafting.",
  "shortdescription" : "Stone Furnace",
  "race" : "generic",
  "subtitle" : "Old fashioned smelting.",
  "category" : "crafting",
  "price" : "200",
  "objectType" : "container",
  "printable" : false,
  "hydrophobic" : true,

  "apexDescription" : "A stone furnace. I can craft things here.",
  "avianDescription" : "A furnace perfect for crafting.",
  "floranDescription" : "Furnace hisss, ssspit, burn. Floran brave it.",
  "glitchDescription" : "Craftsmanship. The furnace is the perfect temperature for creating metalworks.",
  "humanDescription" : "A smelting furnace. Hot.",
  "hylotlDescription" : "A hot, imposing furnace.",

  "lightColor" : [229, 218, 207],
  "flickerDistance" : 0.5,
  "flickerStrength" : 0.1,

  "particleEmitter" : {
    "emissionRate" : 1.0,
    "emissionVariance" : 0.5,

    "particle" : {
      "type" : "ember",
      "size" : "1.0",
      "color" : [255, 100, 0, 255],
      "light" : [150, 50, 50],
      "fade" : 0.9,
      "initialVelocity" : [0.0, 5.0],
      "finalVelocity" : [0.0, 3.0],
      "approach" : [0, 20],
      "timeToLive" : 2,
      "layer" : "middle"
    },

    "particleVariance" : {
      "initialVelocity" : [0.5, 2.0]
    }
  },

  "inventoryIcon" : "stonefurnaceicon.png",
  "orientations" : [
    {
      "dualImage" : "stonefurnace.png:<color>.<frame>",

      "imagePosition" : [0, 0],
      "frames" : 4,
      "animationCycle" : 0.5,

      "spaceScan" : 0.1,
      "anchors" : [ "bottom" ],
      "collision" : "platform"

    }
  ],

  "soundEffect" : "/sfx/objects/campfire.wav",
  "soundEffectRadius" : 50,

  "statusEffects" : [
    {
      "kind" : "Warmth",
      "amount" : 70,
      "range" : 8
    }
  ],

  "recipeGroup" : "stonefurnace",
  "openSounds" : [ "/sfx/objects/campfire_use.wav" ],
  "slotCount" : 2,
  "uiConfig" : "/interface/objectcrafting/stonefurnace.config",
  "frameCooldown" : 67,
  "autoCloseCooldown" : 3600

}

Lets deal with the first few lines

Code:

  "objectName" : "stonefurnace",
  "rarity" : "Common",
  "description" : "A stone furnace, useful for crafting.",
  "shortdescription" : "Stone Furnace",
  "race" : "generic",
  "subtitle" : "Old fashioned smelting.",
  "category" : "crafting",
  "price" : "200",
  "objectType" : "container",
  "printable" : false,
  "hydrophobic" : true,

objectName
has to be unique. No one else can have it. It also will be the name used to call upon this object. So make sure it remains consistent also. Also for sake of preventing clashes. Giving the object name a unique prefix or suffix associated with the mod will also help prevent future incompatibilities for those who download your mod.

I suggest something like objectname+first 3 letters of your mod + first 2 of your username.

Rarity
the classification of how rare the object is.
The different ones are

• Common
• Uncommon
• Rare
• Legendary

Description:
Description of object shown in detailed menu

ShortDescription
Name of object shown in heading

Race
Locking crafting to a particular race

Category
Type of functionality of the object

• storage
• crafting
• other
• decorative

ObjectType
When interacted with what type of object is it.
if its not interactable then this line can be removed.

• container
• interactable

Code:

  "apexDescription" : "A stone furnace. I can craft things here.",
  "avianDescription" : "A furnace perfect for crafting.",
  "floranDescription" : "Furnace hisss, ssspit, burn. Floran brave it.",
  "glitchDescription" : "Craftsmanship. The furnace is the perfect temperature for creating metalworks.",
  "humanDescription" : "A smelting furnace. Hot.",
  "hylotlDescription" : "A hot, imposing furnace.",

The descriptions each race will see.
=====

Code:

  "lightColor" : [229, 218, 207],
  "flickerDistance" : 0.5,
  "flickerStrength" : 0.1,

  "particleEmitter" : {
    "emissionRate" : 1.0,
    "emissionVariance" : 0.5,

    "particle" : {
      "type" : "ember",
      "size" : "1.0",
      "color" : [255, 100, 0, 255],
      "light" : [150, 50, 50],
      "fade" : 0.9,
      "initialVelocity" : [0.0, 5.0],
      "finalVelocity" : [0.0, 3.0],
      "approach" : [0, 20],
      "timeToLive" : 2,
      "layer" : "middle"
    },

    "particleVariance" : {
      "initialVelocity" : [0.5, 2.0]
    }
  },

This is beyond the scope of this tutorial. Also these lines can be removed with no problems. It simply creates a particle emitter for showing those flying sparks. Also creates a glow.

Code:

  "inventoryIcon" : "stonefurnaceicon.png",
  "orientations" : [
    {
      "dualImage" : "stonefurnace.png:<color>.<frame>",

The icon image must be present, it should be a 16 x 16 pixel image only.
the "dualimage" line replace with the name of the object you created. No need to touch color and frame.
If your object does not have multiple frames you an remove the

Code:

.<frame>

Note the period is removed also.

Code:

"orientations" : [
    {
      "dualImage" : "stonefurnace.png:<color>.<frame>",

      "imagePosition" : [0, 0],
      "frames" : 4,
      "animationCycle" : 0.5,

      "spaceScan" : 0.1,
      "anchors" : [ "bottom" ],
      "collision" : "platform"

    }

Image position
is where location the image is "anchored" So if I want my object to be a wall decoration. I would want the anchor point to be in the centre of the image. So if my image was 16 x 16.
I would put [-8, -8]

Frames
Frames is how many frames the image has

Animation cycle
How fast the animation cycles through the frames in seconds

spacescan
is a collision modifier. Can be left alone

Anchors
which side of the image connects to the surface

• bottom
• background
• top

collision
Type of collision
Can be removed, if removes player walks through it and falls through it.

Code:

"soundEffect" : "/sfx/objects/campfire.wav",
  "soundEffectRadius" : 50,

  "statusEffects" : [
    {
      "kind" : "Warmth",
      "amount" : 70,
      "range" : 8
    }

Beyond the scope of this article, and can be removed.
Essentially this is the ambient noise it plays as well as the status effect it proves when within range of the object.

Code:

  "recipeGroup" : "stonefurnace",
  "openSounds" : [ "/sfx/objects/campfire_use.wav" ],
  "slotCount" : 2,
  "uiConfig" : "/interface/objectcrafting/stonefurnace.config",
  "frameCooldown" : 67,
  "autoCloseCooldown" : 3600

}

RecipeGroup
When a recipe file is created it can be assigned various group.
This shows which groups of recipes can be used

Slot Count
How many slots are in the GUI

UIConfig
The User Interface the object will use

Frames Cooldown
I am not sure

autoCloseCooldown
seems to be when the object will automatically stop functioning after a period of time.

My Final Copy of my Edited File

Code:

{
  "objectName" : "distillery",
  "rarity" : "Common",
  "description" : "A copper distillery for separating liquids",
  "shortdescription" : "Distillery99",
  "race" : "generic",
  "subtitle" : "Classical Liquid Separator",
  "category" : "crafting",
  "price" : "200",
  "objectType" : "container",
  "printable" : false,
  "hydrophobic" : true,

  "apexDescription" : "No better Hooch and Biofuel in the Galaxy",
  "avianDescription" : "A well crafted copper Liquid Purifier",
  "floranDescription" : "Distill hisss, ssspit, burn. Floran loves it.",
  "glitchDescription" : "Surprised. Copper yet makes great fuel. Must Investigate",
  "humanDescription" : "Bootleggers and Hippies dream. Free booze and fuel",
  "hylotlDescription" : "A manner to create more fluids to swim in.",

  "lightColor" : [229, 218, 207],
  "flickerDistance" : 0.5,
  "flickerStrength" : 0.1,

  "particleEmitter" : {
    "emissionRate" : 1.0,
    "emissionVariance" : 0.5,

    "particle" : {
      "type" : "ember",
      "size" : "1.0",
      "color" : [255, 100, 0, 255],
      "light" : [150, 50, 50],
      "fade" : 0.9,
      "initialVelocity" : [0.0, 5.0],
      "finalVelocity" : [0.0, 3.0],
      "approach" : [0, 20],
      "timeToLive" : 2,
      "layer" : "middle"
    },

    "particleVariance" : {
      "initialVelocity" : [0.5, 2.0]
    }
  },

  "inventoryIcon" : "distilleryicon.png",
  "orientations" : [
    {
      "dualImage" : "distillery.png:<color>.<frame>",

      "imagePosition" : [0, 0],
      "frames" : 4,
      "animationCycle" : 1.0,

      "spaceScan" : 0.1,
      "anchors" : [ "bottom" ],
      "collision" : "platform"

    }
  ],

  "soundEffect" : "/sfx/objects/campfire.wav",
  "soundEffectRadius" : 50,

  "statusEffects" : [
    {
      "kind" : "Warmth",
      "amount" : 70,
      "range" : 8
    }
  ],

  "recipeGroup" : "stonefurnace",
  "openSounds" : [ "/sfx/objects/campfire_use.wav" ],
  "slotCount" : 2,
  "uiConfig" : "/interface/objectcrafting/distillery.config",
  "frameCooldown" : 67,
  "autoCloseCooldown" : 3600

}

Chapter 5: Modifying the UI

As you may noticed above there is a stonefurnace.config
Lets go to the directory and make a copy of it.
Also copy smelt.png ad smeltover.png

Now lets go back to our mods folder

Code:

Starbound/mods/mymodname/ 

we will need to create the path of where that config was located.
So we need to create 2 new folders.
so it will look like

Code:

Starbound/mods/mymodname/interface/objectcrafting/

and paste the 3 files inside.
Now rename smelt.png and smeltover.png to file names you wish to create a button on
in my case I renamed it

• distill.png
• distillover.png

now open stonefurnace.config
and anywhere it says smelt.png and smeltover.png
replace it with the new names of the 2 images we renamed.

Now we need to change the buttons.
Open up GIMP
and open the image file of the new file you copied into your mods folder and renamed.
Now use the zoom tool and zoom in nicely.

Now create a new layer. http://docs.gimp.org/en/gimp-using-layers.html
You can do that by press the blank document icon in the layers panel. Name the layer what ever you want make sure background is transparency. And the new layer is above the previous layer. [very important] if not drag it above it. Now create one more new layer and label it text.
Now left click on the middle layer [below the text layer above the original layer]

Now choose the colour picker tool http://docs.gimp.org/en/gimp-tool-color-picker.html
And click on the background colour of the text.

This will change the front box [foreground color] to this color.
Now choose the rectangle select tool and create a box over the text.

Then choose the bucket fill tool http://docs.gimp.org/en/gimp-tool-bucket-fill.html
and click inside the area selected by the rectangle selection tool.
If everthing is done right, the text would have disappeared.



Now click on the rectangle selection tool again, and left click on the image so the selection disappears.
Now click on the top layer "text"

Now as far as I know,I have yet to find a font to match the Starbound style.
You are free to use the text tool to till in your text. But I manually hand drew the text.

You can follow the same steps for creating pixel art as here.
Just remember to save it as xcf file first, then a png as noted above.

This way you can reuse this XCF to make more bottons later on. As all you would have to do is edit the text layer only!

Now repeat the same steps for the buttonover.png also and save and export the image to wher you made the new item. Replacing the old one.

==========

Subsection finishing it up.

Now go back to the object file and scroll down to
"uiConfig" : "/interface/objectcrafting/distillery.config",

and replace the name with your new config file.

If everything has been done properly.
The two new UI buttons will load on interaction.

=====================================

Chapter 6: Recipe for Disaster
DISCLAIMER: Now Updated for Angry Koala

Subsection: Cooking with Love

you can copy the recipe from

Code:

C:\Program Files (x86)\Steam\steamapps\common\Starbound\assets\recipes\starter\crafting table

Create a new folder inside your mods folder called recipes

Code:

Starbound/mod/mymodname/recipes

Copy the recipe file there. Now rename the recipe file to the same name as the object file. Name matching is very important.

Open the file you will see.

Code:

{
  "input" : [
    { "item" : "darkwoodmaterial", "count" : 1 },
    { "item" : "copperore", "count" : 1 }
  ],
  "output" : {
    "item" : "distillery",
    "count" : 1
  },
  "groups" : [ "plain", "all" ]
}

Final Copy of my edited file

Code:

{
  "input" : [
    { "item" : "darkwoodmaterial", "count" : 1 }
  ],
  "output" : {
    "item" : "distillery",
    "count" : 1
  },
  "groups" : [ "plain", "all" ]
}

input
what is required to craft it
You can have as many inputs as you wish, just follow the same syntax
{ "item" : "itemIDname", "count" : 1 },
Also keep note of the position of the comma.
The last item on the list (array) the comma is not present.
The comma will appear after the bracket

output
is what it creates.
You can only have 1 output

Groups
is what "Crafting" groups will it be available under.
If you remember certain crafting objects are associated with a group, hence any object it is associated with will be able to craft it.
if you want to be able to craft it via player without requiring an intermediary object make sure to use "plain",

=========

CHAPTER 7: MERGING FILES AND MOD INFO

Merging files was added in Starbound v Angry Koala.
Though it may look confusing at first, we are going to break it down to make it simple to understand.

Q: What does merging allow us to do?
A: With the new "merge file system" - we can now inject code into various vanilla files. No longer worrying about having to edit that vanilla directory. This also allows us to easily add multiple mods into the game.

Q: Are we restricted to only Player.config files?
A" No, you can merge almost any file.

So before we talk any further on the subject. Let us see what we are up against. Lets take the example provided by Bartwe

Code:

{
//  "__merge" : "nil", // sets file to nil, for some configs this will be treated asif the file was deleted
  "__merge" : [],
  "defaultBlueprints" : {
    "__merge" : [
      // ["delete", "tier1" ]
      [ "overwrite", "tier2" ]
    ],
    "tier1" : [ { "item" : "grapplinghook" } ],
    "tier2" : []
  }
}

Now to get a better understanding of what is happening. Let me also show you parts of the player.config

Code:

"blueprintOnPickupMessage" : "New blueprint available.",
  "defaultBlueprints" : {
    "tier1" : [
      { "item" : "mininglantern" },
      { "item" : "copperarmorhead" },
      { "item" : "copperarmorchest" },
      { "item" : "copperarmorpants" },
      { "item" : "darkwoodmaterial" },
      { "item" : "yarnspinner" }
      ],
   
      "tier2" : [
      { "item" : "silverarmorhead" },
      { "item" : "silverarmorchest" },
      { "item" : "silverarmorpants" },
      { "item" : "steelbar" },
      { "item" : "mediummetal" },
      { "item" : "chain" },
      { "item" : "roboticcraftingtable" },
      { "item" : "refinery" }
      ];
      }
 
    "maxHealth" : 100.0,
    "maxEnergy" : 100.0,
    "maxFood" : 100.0,
    "maxBreath" : 100.0,
    

The code shown above is just snippets from the player.config which we will use to help explain what is going on.
Now one of the reason Bartwe code is confusing is - there also happens to a comment on part of the code in it.
You will notice the "//" - this marks the line for comment, and is ignored by the game engine.

So just make sure you keep it in mind that this is just a comment and not affecting the code. I will show a proper example further down. But lets just analyse what the code above is showing us.
First thing we need to understand like I said, we can use this type of syntax to edit any file.
But in order to do so the file must be kept in the proper directory structure.

To make it more understandable, your mod folder is equivelent to the vanilla asset folder.
It is as if it was "renamed"
Another words if you want to break it down into maths

Code:

Starbound/mods/mymodfolder/

is equivelent to

Code:

Starbound/assets/

in terms of hierarchy.
So if we wanted to say, edit the recipe for bandages in the mod.
You would have to create a folder structure exactly as in the vanilla assets
Bandage recipes are located in

Code:

Starbound/assets/recipes/starter/plain

So here is a small test, what would the folder architecture be in your mod folder?
See spoiler below for answer

Code:

Starbound/mods/mymodname/recipes/starter/plain/

So you would copy the bandage.recipe file into your mod folder in that directory. Then instead of the normal code, you would use the merge command we are about to learn.

So now lets take a look at the syntax more indepth.

Code:

//  "__merge" : "nil", // sets file to nil, for some configs this will be treated asif the file was deleted
  "__merge" : [],
  "defaultBlueprints" : {
    "__merge" : [
      // ["delete", "tier1" ]
      [ "overwrite", "tier2" ]
    ],
    "tier1" : [ { "item" : "grapplinghook" } ],
    "tier2" : []
  }
}

[/CODE]


"__merge" :
The merge command is telling the game engine to merge the part of the file with the same name.
Another words if you want to edit the player.config file you would need to create a blank player.config file in your
starbound/mods/mymodname/

Then simply type in the merge code where the necessary changes need to be made.
Now as you can see it follows a hierarchy

Code:

"__merge" : []'
"defaultBlueprints" : {
    _merge" : [ ]
}

So now we are telling the program to look inside the defaultBlueprints array.
Then saying what to edit inside.
Now you may have noticed 2 choices

• Delete
• Overwrite

Delete
Will delete that entire array and all information inside.
No additional information can be added to the array once deleted

Overwrite
Will replace the ENTIRE array with what ever information you have placed.
As of right now there doesn't seem to be a way to delete a single entry in the array. [will update if possible]

On a special note, if you wish to add things into the particular array. You do not need to use delete over write, you can leave the merge brackets closed then add the item. An example will be shown below.

So what does the array example provided above tell the engine?

• First look at defaultblue prints
• Ignore the line ["delete", "tier1" ] - because of the // it becomes a comment
• then overwrite entire Tier 2
• Add grappling hook the bottom of tier 1
• Then replace entire tier 2 with nothing. - This does not delete tier 2. It simply leaves it blank. Good method to avoid mod incompatibility issues.

So lets use what we know to use it for our own purposes.

As we were following the tutorial, I have created a mod distillery. I wish to now add the distillery item to the bottom of tier one.
Try and figure out how to just add distillery to the bottom of tier 1. Making no other changes.

Answer Below

Code:

{
  "__merge" : [],
  "defaultBlueprints" : {
    "__merge" : [],
        "tier1" : [
        { "item" : "distillery" }
        ]
  }
}

Did you get it right?
Hopefully you did, otherwise lets see what went wrong.

As you can see - I started off with the merge command to show its top level.
Then added defaultblueprints below it, to it now focuses on that.
Now I want to make changes to distillery array so I add another merge. I don't want to do any drastic changes, so I can leave it blank.
So same as above with default blueprints I want to point it to Tier1 Keep note of the bracket change. That is very important
Now I simply add the line I wish, which is { "item" : "distillery" } Then close all the necessary brackets, and that's it.

So what if we want to make other changes? We have to remember the hierarchy - that is extremely important.
So where the next line of code comes up has to be within the properly enclosed space.
If your using Notepad++ as recommended, you can click next to the bracket and it will show you the associated one. Hence knowing where to shove your code in-between

So lets go back to our above example shall we?
Lets say we want to change player health to say 300.
We would do something like

Code:

{
  "__merge" : [],
  "defaultBlueprints" : {
    "__merge" : [],
        "tier1" : [
        { "item" : "distillery" }
        ]
  },

  "maxhealth" : 300
}

As you can see we placed it after the curly bracket. This curly bracket represents the end of the defaultblueprints. Which means we have now gone back to the top level of the hierarchy where max health variable is located.

So now you should have a basic idea of merge function. But just for sake of completion lets do one more example.

Say you wanted to edit the recipe for bandages.
We first need to create the folders in our mod folder which points to the vanilla bandage recipe [As mentioned above]

Next what we can delete everything inside, as we only want to change the input value.
Looking at the code - can make it so bandages are made with 1 unrefined wood [ unrefined wood objectID is fullwood1

Answer is below

Code:

{
  "__merge" : [
      [ "overwrite", "input" ]
    ],
    "input" : [ { "item" : "fullwood1", "count" : 1 }
    ]
  }

Q: Now why Did I choose overwrite? And not simply add a line?
Because, if I simply added a line, It would have resulted in a bandage which required 4 plant fiber + 1 unrefined wood.
By using overwrite, i completely change the "input" array
and replace it with the line I provided which is

Code:

{ "item" : "fullwood1", "count" : 1 }

So if the bandage.reciepe is placed in the proper folder in your mod

Code:

Starbound/mods/mymod/recipes/starter/plain/ 

Then when you play the game, bandages will be made of 1 unrefined wood instead of 4 plant fibers.!
Ok, by now you should have a strong grasp of the merge functions.
If more features are added later, I will update accordingly.

Subsection: One small step for man, one giant leap for mod kind

One last step is there, you will need to make a modinfo file

go to the root of your starbound mod directory

Code:

starbound\mods\mymodname\

Right click in the folder in any white space.
A right click menu will appear and do New --> Text Document
Click on the text document and rename it modnamehere.modinfo
inside copy and paste

Code:

{
  "name" : "distillery",
  "version" : "Beta v. Offended Koala",
  "path" : ".",
  "dependencies" : [  ],
  "modauthor": "xxswatelitexx",
  "modversion": "0.1",
  "moddescription": " Adds Distillery"
}

Name
is the name of your mod

Version
you will need to copy the version correctly or the game will skip loading the mod

Path
represents the directory it is currently in. So you can leave it blank if its inside your mod folder

Dependencies
Does it depend on any other mod - proper name needs to be placed

Mod Author
Not mandatory field, can be placed as required

Mod version
to keep track of your mod version

mod description
Describe your mod.


Now your item will be craft-able.

====================
Common Errors:

Game creates " Perfectly Ordinary Object"
Something is wrong with your object file
Either you missed a comma, misplaced a comma, or didn't close a bracket. You will have to go through and check each out.

Game crashes on startup.
You have an invalid file pointing at something that doesn't exist

Object is invisible.
Your frames file has a mistake. The frames file should have the exact same name as the image you created.

Game crashes on interaction.
The interaction GUI is not pointing to a valid object, or invalid GUI

========
And they all lived happily ever after, in a star bound far far away.

P.S
I just want to give Honrable mention to @Westeller
without his advice, i never would have made it this far.

 

EXTRAS AND REFERENCES

**NOTICE

Code:

{
  "__merge" : ["overwite", "maxhealth"],
  "defaultBlueprints" : {
    "__merge" : [],
        "tier1" : [
        { "item" : "distillery" }
        ]
  },

  "maxhealth" : 300
}

Unfortunately due to some forum error I am no longer able to update the 2nd Post.
There is a correction that needs to be made, that I was unable to do for the past few days, for which I apologize. I missed the "overwrite" function in the initial merge for Max health

Considering the issue, there is a chance I will create a similar thread with new information if anything else changes.
QUICK REFERENCES:

• Images made need to be a factor of 8
• Icons must be 16x16 pixels.
• When having animations make sure you name every frame, and if part of same animation using the syntax name.#

OTHER TOOLS
PIXEL ART TOOLS

• Aseprite - http://www.aseprite.org/
• GraFX2 - https://code.google.com/p/grafx2/
• MtPaint - http://mtpaint.sourceforge.net/

OTHER S2F TUTORIALS

• Adding LuA code to your Object - http://community.playstarbound.com/index.php?threads/s2f-basic-lua-and-advancing-animation.57871/

 

Thanks, glad you enjoyed it.
Just had to add the final chapter 6.
I noticed it didn't copy over.

As for the image


Sorry I really don't have any screen video recording tools, so this is the best I can do when it comes to showing.
My mod will come out with the animated item sometime either before after Christmas.
You can see it there

 

No problem,
One thing you can do is backup the stone furnace original files some where.
And directly edit the in game furnace. [This way you can see the updates immediately without having to create a mod around it. If you already created the mod files that's another story - keep going with the mod]

You may think it looks bad in the editor, but when you see it in the game it may look a lot better.
Also you should avoid simply making without some sort of direction.

Drawing it on paper first, or finding reference images is the best way to go. that way you already know what the end result will look like.
Trying to make something blindly means you will not know what direction your trying to do.

So hit up Google type fireplace or what not, and post your result
Don't give up, you never know how good you will end up when following a more guided path.

 

Thanks will check out Gyazo and update accordingly

The Tutorial now has been updated to a Angry Koala [Merge] Guide.
Chapter 7 - Goes indepth on how merge is used and breaking it down with multiple real world examples.

Hope you guys enjoy.
Follow this thread - it shall update as necessary.

 

Thank you.
There is a matter that needs to come to attention.

I am no longer able to update the 2nd post of this thread.
There was a correction at the bottom, I was unable to make for past few days due to the forum error.

The Correction is now available at the 3rd post. Sorry for the delay in correcting - I was hoping the issue would resolve it self much sooner. Since it Hasn't I have updated accordingly.

 

No problem.
Due to limitation of the forum, I will be discontinuing this and the other tutorials creating new tutorials on SB forum posts.
I will be creating it a PDF ebook - so its offline accessible also.

First version of the Ebook - should be out in a few days.