[Tutorial] Modding 101 - Graphics

[JackPS9]

Once again another easy tutorial by yours truly - JackPS9
So thing time we are modifying items in Towns (ONLY ITEMS! bigger stuff in later tutorials.)
Required:

Some photo editing software (Not really required though for this)

DO NOT USE PAINT!

So you really have 2 options when it comes to graphics
1) Use a graphics already in the game and do a color change
2) Use a new graphic you designed or found.

So let us begin.
We will start with a easy color change.
The item we will be changing in the bent sword. (AKA Curved Blade)
so open up the graphics.ini, which is located in your Towns folder (They really need to make a installer for towns.....)
Then search for [bentsword]
As you can see there are four lines that make up this image
[list=]TILE_X
TILE_Y
COLOR
TEXTURE_FILE[/list]

The color runs off the Red, Green, Blue system
So the lowest value is 0 and the highest value is 250
Now for the sake of keeping this easy and simple we are going to change the color values as such
COLOR = 0,192,0
This will change the weapon color to a hulk green.
If want to know what color your values come out to be before using it. Open paint or any photo editor and open the color palette.
Then look for the red, green blue value and edit those to match the values you want to use in Towns.

Well there is part one of the graphic tutorial, onto part 2 - New graphics.

Your basicly size of a item in towns is 64 pixels wide, by 32 pixels high.
So Tile_X will move over by 64 pixels at a time when you change the Tile_X value.
and the Tile_Y will move down 32 pixels, when the value is increased.

We are going to be staying with the bentsword but we will be using a new image for it.
(Image from RPG Maker, NOT MINE! So all rights belong to ENTERBRAIN, INC.)

Now we will need a transparent background image that is 1024x1024 pixels.
I use Gimp its a free software, that you can download.
If possible(If not use a different program) configure grid to be 32x32 pixels, then show the grid.
Open the new bendsword image as a layer and put it on the line between the first and second 32x32 grid squares on the X Axis (Left to right).
The background HAS to be transparent.
Merge all layers together and save the image as a .png file.
Place the new image into the Towns/data/graphics folder.

and back to graphics.ini we go.
These is what your bentsword should currently have before we change anything.

Code: Select all

[bentsword]TILE_X = 10
[bentsword]TILE_Y = 10
[bentsword]COLOR = 0,192,0
[bentsword]TEXTURE_FILE = military.png

Change TILE_X = 10 to TILE_X = 0
Change TILE_Y = 10 to TILE_Y = 0
Remove the line that changes color

Code: Select all

[bentsword]COLOR = 0,192,0

Now we need to tell where the new image is coming from.
So we need to change the TEXTURE_FILE = military.png
so that is equals to the name of the image you just made.

I named mine Bentsword so the line of code would look like this.

[bentsword]TEXTURE_FILE = Bentsword.png

Now to see the new item image, open up towns and get a Hero Rogue. They come with a bentsword.
For any reason that Towns is not loading at all, please post your error.log in the thread. So we can figure out what happened.

Thank you for reading Modding 101 - Graphics
I hope you all enjoyed this guide.

[smithforge]

Great start! gfx modding is probably one of the most common thing and a good place to start learning modding.

A couple of stuff that may be useful to those who are not familiar with image editing.
For those who do not have the luxury of owning Adobe Photoshop, 2 relatively good free image editing software are: GIMP and Paint.NET. The former is more powerful and comes in many platforms. The later is a simple solution for windows platforms that is relatively easier to pick up.

The most important common feature in all the 3 image software above is the layers. Learn to use it, so that you can align your images with a alignment grid like this. Use this image (already correctly sized at 1024x1024) as the background layer and add you images in foreground. Just hide the grid layer and save to png format at the last stage.

for graphics tutorial 201, maybe we can put in specification of animated frames + directional variants?

[JackPS9]

Great start! gfx modding is probably one of the most common thing and a good place to start learning modding.

A couple of stuff that may be useful to those who are not familiar with image editing.
For those who do not have the luxury of owning Adobe Photoshop, 2 relatively good free image editing software are: GIMP and Paint.NET. The former is more powerful and comes in many platforms. The later is a simple solution for windows platforms that is relatively easier to pick up.

The most important common feature in all the 3 image software above is the layers. Learn to use it, so that you can align your images with a alignment grid like this. Use this image (already correctly sized at 1024x1024) as the background layer and add you images in foreground. Just hide the grid layer and save to png format at the last stage.

for graphics tutorial 201, maybe we can put in specification of animated frames + directional variants?

Idk how to do the animated frames or directional variants so ya...............
The extend of my graphic changes can do items, and UI.
Other than that, someone will have to do the frames and directional variants.

[smithforge]

The short version:

1. Animation
e.g.
[someid]ANIMATION_TILES = 4
[someid]ANIMATION_FRAME_DELAY = 10

Where the ANIMATION_TILES refers to the number of animated frames in the image file which must be placed in a ROW (TILE_X and TILE_Y points to left-most cell). Each tile must be of same dimension as specified by TILE_WIDTH and TILE_HEIGHT. The ANIMATION_FRAME_DELAY is the delay between the frames (smaller number means faster the animation will be played)

One quirky observation: if [someid] is an item, the animation is always played, looped. if it is a living entity, it will only be animated if it is MOVING.

2. Moving direction for living entities
strangely enough, whether the gfx has direction or not for entities is not defined in graphics.ini but in livingentities.xml. The entity xml must have a child element <facingDirections>true</facingDirections>

In the image file, the variants for the directions have to be arranged in a COLUMN in this order (assuming up is North) (TILE_X and TILE_Y points to top-most cell)
-facing South
-facing North
-facing NW
-facing W
-facing SW

Note that the tiles for NE,E and SE will be reflections generated from NW, W and SW.

Note that animation and direction can be used together, which will require a grid of images (row x column). See the specifications for citizen graphics in graphics.ini for example.

3. special variants (need confirmation by somebody more experienced)
in graphics.ini, underscore after a someid in [someid] is used to represent special variants of a tile image.
These are what I know of:
-[someid_N], [someid_NE], [someid_NSE] etc. The sequence of directions behind probably indicate connections which will make adjacent tiles of the same type "join" together.

-[someid_block] this is the alternative gfx to used during flattened wall or transparent cursor modes.

Note that in any of the above cases, the image for the default variant [someid].... is assumed to be defined separately.

[JackPS9]

I will have to look into that more.
I'm not artist though so doing a tutorial would be a pain in the @%$

[Aduvash]

DO NOT USE WORDPAD OR NOTEPAD]

What's wrong with notepad?

[JackPS9]

DO NOT USE WORDPAD OR NOTEPAD]

What's wrong with notepad?

Notepad has a habit of leaving piece of info around in the file.
Can use it, I just dont suggest it unless you hit Tab.

[caprontos]

DO NOT USE WORDPAD OR NOTEPAD]

What's wrong with notepad?

Notepad has a habit of leaving piece of info around in the file.
Can use it, I just dont suggest it unless you hit Tab.

I only use notepad really.. and I has no issue with it.. what exactly do you mean it leaves stuff around in the file?

[JackPS9]

I only use notepad really.. and I has no issue with it.. what exactly do you mean it leaves stuff around in the file?

Oh I could be thinking wordpad........
I know one of them has a issue with tabs or something like that.

[caprontos]

I only use notepad really.. and I has no issue with it.. what exactly do you mean it leaves stuff around in the file?

Oh I could be thinking wordpad........
I know one of them has a issue with tabs or something like that.

I know wordpad seemed to be kinda crap..

Notepad is just like notepad++ with out all the useful stuff.. but I prefer notepad over notepad++ cause... notepad++ is all colorful and stuff (yep...)...haha.. but still it is nice to fine lines and such.. and anyone who can should bother to get it and try it for modding