[Tutorial] Modding 101 - Graphics

Post your mods and custom content here

[Tutorial] Modding 101 - Graphics

Postby JackPS9 » Fri Oct 12, 2012 2:45 pm

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 (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.
Last edited by JackPS9 on Fri Nov 23, 2012 12:11 am, edited 1 time in total.
JackPS9
 
Posts: 1088
Joined: Mon Sep 03, 2012 4:15 pm

Re: [Tutorial] Modding 101 - Graphics

Postby smithforge » Fri Oct 12, 2012 3:08 pm

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?
smithforge
 
Posts: 222
Joined: Mon Sep 24, 2012 3:23 pm

Re: [Tutorial] Modding 101 - Graphics

Postby JackPS9 » Fri Oct 12, 2012 3:13 pm

smithforge wrote: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.
JackPS9
 
Posts: 1088
Joined: Mon Sep 03, 2012 4:15 pm

Re: [Tutorial] Modding 101 - Graphics

Postby smithforge » Fri Oct 12, 2012 3:33 pm

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.
smithforge
 
Posts: 222
Joined: Mon Sep 24, 2012 3:23 pm

Re: [Tutorial] Modding 101 - Graphics

Postby JackPS9 » Fri Oct 12, 2012 3:51 pm

I will have to look into that more.
I'm not artist though so doing a tutorial would be a pain in the @%$
JackPS9
 
Posts: 1088
Joined: Mon Sep 03, 2012 4:15 pm

Re: [Tutorial] Modding 101 - Graphics

Postby Aduvash » Fri Oct 12, 2012 4:00 pm

JackPS9 wrote:DO NOT USE WORDPAD OR NOTEPAD]

What's wrong with notepad? :|
You are a primitive human not an insult; a forum game. [Currently dead] Note that this was the first forum game on the towns forum, I'm a trend setter. :D
More Plants and Animals! [0.50]
Image
User avatar
Aduvash
 
Posts: 699
Joined: Mon Apr 30, 2012 1:17 pm
Location: New York State, USA

Re: [Tutorial] Modding 101 - Graphics

Postby JackPS9 » Fri Oct 12, 2012 4:12 pm

Aduvash wrote:
JackPS9 wrote: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.
JackPS9
 
Posts: 1088
Joined: Mon Sep 03, 2012 4:15 pm

Re: [Tutorial] Modding 101 - Graphics

Postby caprontos » Fri Oct 12, 2012 4:20 pm

JackPS9 wrote:
Aduvash wrote:
JackPS9 wrote: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?
Image
Cha Cha Cha!
User avatar
caprontos
 
Posts: 3930
Joined: Wed Apr 04, 2012 3:18 am

Re: [Tutorial] Modding 101 - Graphics

Postby JackPS9 » Fri Oct 12, 2012 4:21 pm

caprontos wrote: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.
JackPS9
 
Posts: 1088
Joined: Mon Sep 03, 2012 4:15 pm

Re: [Tutorial] Modding 101 - Graphics

Postby caprontos » Fri Oct 12, 2012 4:23 pm

JackPS9 wrote:
caprontos wrote: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 :P
Image
Cha Cha Cha!
User avatar
caprontos
 
Posts: 3930
Joined: Wed Apr 04, 2012 3:18 am

Next

Return to Modding

Who is online

Users browsing this forum: No registered users and 1 guest

cron