Adding graphics

From VbGORE Visual Basic Online RPG Engine

Before you design your Grhs, it is recommended that you know how to optimize your textures for the best performance. More information on this can be found at the Optimizing your textures page.

The image files

Since the engine is actually a 3d engine, you have to treat the graphics as textures. This means that if you want them to display correctly, you must obey the following rules:

Size powers of 2
Your width and height of the total bitmap has to be by a power of 2. They do not have to be the same, though. For example, you can have 2x64, 256x128, 512x2, etc. Failure to follow this will result in slightly distorted images. This only applies to the texture (whole bitmap image), not the individual images in the texture (grhs). If you look at the demo GUIs, many of them are random sizes, but theres black (transparent) space stretching out to the nearest power of 2.
Power of 2 means 2^X, not X/2 (divisible by 2). This means the sizes must be 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, etc.
No larger then 1024
It is recommended that you don't make any graphic files (textures) larger then 1024 pixels in width or height. The reason for this is that not all graphic cards are able to support textures of the next size (2048) and beyond. 1024 pixels is the safest way to go. You should never need to use more than a 1024x1024 texture, but if you do use such a large texture, you may lose support for some older graphic cards.

Note that many file types are supported, from BMP, PNG, and JPG to weird extensions most of us have never even heard of. To use other file extensions, just save as the different file extension and either change the client and map editor to load the different file extension, or manually change the extension to PNG (for example, .JPG to .PNG). Note that changing the extension does not have any impact on the image, it just lets you change the format without changing the engine to look for a different format.

Graphic files are placed in the \Grh\ folder. You can name the file any number, as long as the number doesn't already exist and does not contain any zeros before the number. Simple numbers like 1, 2, 41, 129, 320, all work. However, numbers like, 002, 0041, 010101, will not work. In the root directory, you will find a program named ToolFreeNumber.exe. This tool will tell you the next available texture numbers and grh numbers.

Using GrhRaw.txt

There are two things that identify a graphic, the File/Texture Number (such as 10.png or 210.png) and Grh Number (defines the individual graphics inside a texture). To create the Grh Number, go to the \Data2\GrhRaw.txt file and open it with Notepad or Wordpad. In here, you will find entries structured in these two manners:

1) Grh#=<Frames(=1)>-<FileNumber>-<StartX>-<StartY>-<Width>-<Height>-(<Category>) 
2) Grh#=<Frames(>1)>-#-#-#-#-#...-<Speed>-(<Category>)

Your Grh# is the ID number of your Grh. You often don't have to remember this unless you are writing the GrhNumber directly into the code (like for the GUI) because you can browse through the GrhNumbers in the map editor. Numbers are required to be unique. In other words, you cannot make two entries for Grh 10. The compiler will warn you if you make duplicate entries.

At the end is the category. This is optional and is often ignored when making entries directly into GrhRaw.txt. Categories are handled by the program ToolGrhCategorizer.exe. The rest of this guide will ignore them, and it is recommended that you do the same when making entries into GrhRaw.txt

Method 1 is for single-frame (unanimated) graphics. Frames will always be 1 in this. FileNumber refers to the .png file your graphic is in (such as for 20.png, you enter 20). StartX and StartY refer to the starting pixel position where the graphic you want is, the width and height of the graphic you want is the width and height of the graphic. For DirectDraw and BitBlt users, think of this as the SourceRect since you are just defining the part of the image you wish to draw.

Method 2 is for multiple-frame graphics. In this case, Frames must be greater then 1. For each frame, you must specify a GrhNumber. If you have 5 frames, then you will have 5 GrhNumbers specified after that. At the end, you have your animation speed, which is how fast the frames elapse (higher = faster). The speed has no real relative value, so you will want to experiment with how fast the different values of speed are. Decimals are supported in speed. As an example, in the water animation, you have eight frames:


As you can see, there is an 8 at the start for 8 frames, 8 GrhNumbers which define the 8 different unanimated (single-frame) grhs, then the speed. A separate GrhNumber must be applied to the animation that is separate from the other GrhNumbers. Grh3500 is now the animated water, while 318 to 325 is the separate frames of the water.

Another example:


Grh999 is the Grh number you are assigning to the animation. 8 is the number of frames you have. 991, 992, ... 998 are the Grh numbers of the unanimated Grhs, specified by using Method 1. The last number in the grounp, 7, is the speed at which the graphic animates.

Once you write the new graphic(s) into the GrhRaw.txt file, run GrhDatMaker.exe. This will compile GrhRaw.txt into Grh.dat and Grh.ini, which contain the Grh information. This is automatically placed in the \Data\ folder for you.

Make sure whenever you want to use the map editor which is not part of the client (the non-ingame map editor) that you copy over the Grh folder along with the Grh.dat and Grh.ini to make sure the graphics are up to date.

Step-by-step example

We will be adding this tileset for the example:


Making the texture file

First save the above image as 200.png (right-click, Save As...) and place it in your \Grh\ folder.

Preparing the Grhs

Our tiles are 32x32, there are 7 tiles on a row and there are 5 rows (it has 35 tiles). This means we will have to define 35 different Grhs to use them all. Go to ...\Data2\ and open GrhRaw.txt in Notepad or Wordpad.

Adding the Grhs

Because all we have is single frame graphics, we don't have to make any animations, so all of our entries will follow the following format:


We're going to start out entries at Grh50001 just since I doubt that is used yet. We will be defining them starting from the top-left corner then moving to the right. Once we hit the end of the row, we'll move to the next column. You do not have to define in any particular way, but this is just to make the example easier to follow. For example, it will look like this:

01 02 03 04 05 06 07
08 09 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 32 33 34 35

So for our first entry:


There is one frame, it starts at the top-left corner which is pixel (0,0) is 32x32 pixels in width/height. The rest of the row would look like the following:


Extending the Grhs

Not all the graphics are 32x32 squares. Whether or not you want to define them as 32x32 squares is up to you and your personal preference. Using the absolute sizes is often a bit more difficult but better in the long run. Using 32x32 is much easier to design with, especially for those coming from another engine.

If we want to take the bed for instance, which starts at pixel (96,64) and is 32x64, we would add the following entry:


Although theres nothing good in this sheet to animate, if we wanted to animate the whole top row into one odd animation, we would us the following format:


That means we would enter:


This will animate the whole top row at the speed of 8.

Finishing up

When you are done editing GrhRaw.txt, run ToolGrhDatMaker.exe. If you did everything right there should pop-up a message box telling you that it's finished. Every time you edit GrhRaw.txt you must run this program afterwards to make the Grh.dat and Grh.ini files. You can now open up the map editor and search for the Grhs you made to see them in action.

Personal tools