How to create custom graphics: The basics

All about creating levels and level sets, custom elements and custom artwork.

Moderators: Flumminator, Zomis

Post Reply
User avatar
Holger
Site Admin
Posts: 4081
Joined: Fri Jun 18, 2004 4:13 pm
Location: Germany
Contact:

How to create custom graphics: The basics

Post by Holger »

This tutorial is dedicated to Pieter van Vuuren. I hope you will find it useful! :)

This is the first in a series of tutorials to demonstrate how to use custom graphics in Rocks'n'Diamonds, using simple examples that should be easy to understand, so that you can use the same techniques in your own level sets.

How does it work?

To see how it works, just play the levels in the attached level set "Demo: Custom Graphics 1" and read the envelope(s).

How does it really work?

To see how the custom graphics used in these levels are defined, look at the file "graphicsinfo.conf" in the "graphics" directory of the attached level set.

Some more explanations

To use custom graphics in your own level sets, there are in fact a number of ways to do this. Before going into more detail, let's have a closer look at what it means if we talk about "your own level set".

If you have started Rocks'n'Diamonds for the first time, you will see a tutorial level set to explore the game and its game elements. Obviously, this is not "your own level set". But how to find it? If you haven't found out by yourself, just go to the main menu and click on the text "LEVELSET" (under "NAME" and over "HALL OF FAME"). You will probably see a list of level sets now (like the tutorial level sets, if the last active level set was a tutorial level set). The first entry is named ".. (PARENT DIRECTORY)", which (if you click it) brings you to the next higher menu, until the first entry is ".. (MAIN MENU)". You are now in the topmost menu and should find an entry with your player name somewhere near the bottom, which you can select by clicking on it.

Now you have selected "your own level set"! From the main menu, you can now click on "LEVEL CREATOR" and create your own levels (which is not described here, but you should be able to find out the most important things by just playing around a little bit in the level editor by yourself).

OK, that's fine. But you want to use your own (or at least different) graphics for some game elements!

Find the correct directory where your own level set is stored

To do this, you need to do some things outside of Rocks'n'Diamonds, but it's easy. First, find the directory on your computer where your own level set is stored. It is the following (depending on your operating system):
  • Linux: .rocksndiamonds/levels in your "Home" directory
  • Mac: Rocks’n’Diamonds/levels in your "Documents" directory
  • Windows: Rocks’n’Diamonds/levels in your "Documents" directory
(We do not cover Android here -- although it is a supported platform for Rocks'n'Diamonds, and although it is technically possible, it is not recommended to edit your own level sets directly on Android devices.)

Inside the above "levels" directory, you should find a sub-directory with the same name as your player name in R'n'D. This is the directory of your own level set! The following works the same for any other level set directory, or for additional level sets you might already have created inside the level editor on the "CONF" page and on the "LEVELSET" tab on that page.

Take a look inside that directory. You will see some level files (like "001.level") and a file "levelinfo.conf". Open that file using your favorite text editor! (If you don't know what do to, ask a friend or Google how to do this.)

Using existing game graphics for your own level set

The easiest way to use custom graphics in your own level set is to add a line to that file to tell R'n'D to use different graphics for your level set. Before you can do this, make sure you have these graphics installed, most probably together with a level set that comes with custom graphics. The famous level set "BD2K3" from Alan Bond is a good example for a level set that uses custom graphics (and other custom artwork, like custom sounds and custom music, but this is not whithin the scope of this tutorial). You can find the level set "BD2K3" on the "Levels & Artwork" page of the R'n'D web page.

Before going on, make sure you have installed this level set, and are able to select and play it, so you can see that it really uses graphics that are different from the default R'n'D graphics.

Using BD2K3's graphics in your own level set is as easy as adding the following line to your level set's file "levelinfo.conf":

Code: Select all

graphics_set: BD2K3
That's all. Save the file, restart R'n'D, select your level set, and voilà: It uses BD2K3's graphics! :)

That's very nice. But you might already have some graphics around that you would like to use instead! No problem. Doing this is nearly as easy as the above step. First of all, remove the above line from your level set's file "levelinfo.conf" again, so the R'n'D default graphics are used again.

Using your own game graphics for your own level set

Now we need two things: A new sub-directory and a new configuration file. Inside your own level set's directory, create a new sub-directory with the name "graphics". This is the directory to store all your own, new game graphics! Just put them all into this directory, and make sure that they use the PNG file format (which you can see by having a look at the file extension, which will then be ".png" like in the file name "my_cool_graphics.png" -- if you should use Windows, make sure that you configure it to show you the file extensions of your files, which is idiotically not the default configuration for some unknown reason).

Now you have a directory named "graphics" and some image files with some cool new game graphics in it!

Make sure that all graphics in your image files use the correct graphics size to fit the size of game element graphics in R'n'D, which is 32 x 32 pixels (unless you change it to something different, which is not explained in this tutorial).

Let's say you have an image file named "ball.png" which contains a 32 x 32 pixel sized graphic of, well, a colorful ball that you want to use for rocks instead of the default graphics for the "rock" game element in R'n'D:

ball.png
ball.png (378 Bytes) Viewed 9056 times

To do this, you need a configuration file inside the new "graphics" directory with the name "graphicsinfo.conf". Create it using your text editor and add the following lines to that file:

Code: Select all

rock: ball.png
Yes, that's all. Save the configuration file, restart R'n'D and start a level of your own level set which you have created before, containing some rocks. Make sure that you have really used the game element called "rock" (it's in the "EM" section), not the game element called "rock (BD style)" (which is in the "BD" section), which is a different game element (for which you would have to use the name "bd_rock" instead of the name "rock").

In the above example, there is only one single graphic in the image file, but you can also use image files with many graphics (which should then contain many 32 x 32 pixel sized graphics), put together like a chessboard:

various.png
various.png (10.99 KiB) Viewed 9053 times

You can then select in which position on the "chessboard image" your graphic is that you want to use, like this (where we want to use the "smiley" graphic for our next game element):

Code: Select all

bd_rock:      various.png
bd_rock.xpos: 3
bd_rock.ypos: 2
In this case, the graphic is at horizontal position 3 and vertical position 2.

Important: All positions start with 0 (not 1), so "(3, 2)" is in the 4th column and the 3rd row of the image.

If your game element graphic is not part of an image that is entirely put together of graphics of the size of a game element, but is at an arbitrary image position, just use ".x" and ".y" instead of ".xpos" and ".ypos" for pixel positions, like this:

Code: Select all

steelwall:   various.png
steelwall.x: 144
steelwall.y: 0
All the above examples were using non-animated, static game element graphics. Although this is fine (and many classic R'n'D game element graphics are defined like this), it is much more fun to use animated game graphics, of course. :)

To find out how this works, have a closer look at the levels of the attached example level set, read the envelopes for all animation types, and carefully study the file "graphics/graphicsinfo.conf" in this levelset, which shows how all graphics and animations are defined that are used in all levels of the example level set.

Before you start experimenting with your own custom graphics and changed "graphicsinfo.conf" files, one more important hint: You do not have to restart R'n'D each time you have changed your "graphicsinfo.conf" file! Just go to the main menu and blindly type ":rg" (or ":reload-graphics", but ":rg" is shorter) -- this will reload the changed "graphicsinfo.conf" file!

If you should have any questions, feel free to ask here! Some of the animation modes demonstrated in the example level set may need more explanation than is contained in the envelope texts.
Attachments
demo_levels.zip
(41.03 KiB) Downloaded 202 times
filbo
Posts: 648
Joined: Fri Jun 20, 2014 10:06 am

Re: How to create custom graphics: The basics

Post by filbo »

Holger wrote:First, find the directory on your computer where your own level set is stored. It is the following (depending on your operating system):
Linux: .rocksndiamonds/levels in your "Home" folder
Mac: Rocks’n’Diamonds/levels in your "Documents" folder
Windows: Rocks’n’Diamonds/levels in your "Documents" folder
Suggestion: the 'info'-about-a-levelset screens should include a statement of the local-OS directory path to the levelset. That statement should be highlighted & clickable; clicking should Do Something Useful -- like open a shell cd'd to that directory, or open the local-OS filesystem browser ('Finder' / 'Windows Explorer' / 'xdg-open $dir', more or less). Possibly a submenu with at least those two choices ('Open command prompt' / 'Browse folder')
filbo
Posts: 648
Joined: Fri Jun 20, 2014 10:06 am

Re: How to create custom graphics: The basics

Post by filbo »

Holger wrote:That's all. Save the file, restart R'n'D, select your level set, and voilà: It uses BD2K3's graphics! :)
Worth mentioning here that if the graphics don't change, it's because they need to go back a step and install the BD2K3 levelset (including play-testing it to make sure the install is right...)

=====

BTW somewhere near the top of this, it is worth mentioning that 'directory' and 'folder' are two words for the same thing. You mostly use 'dir' with the big exception of the where-to-find-it section. I guess you should just write 'First, find the directory (folder) on your computer...'.
User avatar
Holger
Site Admin
Posts: 4081
Joined: Fri Jun 18, 2004 4:13 pm
Location: Germany
Contact:

Re: How to create custom graphics: The basics

Post by Holger »

filbo wrote: Sun Oct 29, 2023 11:46 pm Suggestion: the 'info'-about-a-levelset screens should include a statement of the local-OS directory path to the levelset. That statement should be highlighted & clickable; clicking should Do Something Useful -- like open a shell cd'd to that directory, or open the local-OS filesystem browser ('Finder' / 'Windows Explorer' / 'xdg-open $dir', more or less). Possibly a submenu with at least those two choices ('Open command prompt' / 'Browse folder')
Very good idea! I think that could make things like adding new level sets a lot easier! :)

As it is already supported to add global animations that open a browser window when clicked (as used in the latest R'n'D Jue games), directly opening the "levels" directory in a file browser window should equally be possible.
Worth mentioning here that if the graphics don't change, it's because they need to go back a step and install the BD2K3 levelset (including play-testing it to make sure the install is right...)
I've changed the tutorial to try to make this more clear, and to ensure that this is checked first.
BTW somewhere near the top of this, it is worth mentioning that 'directory' and 'folder' are two words for the same thing. You mostly use 'dir' with the big exception of the where-to-find-it section. I guess you should just write 'First, find the directory (folder) on your computer...'.
Good point, especially for the non-technical folks. I've just changed it to use "directory" everywhere.

Thanks for your suggestions, filbo!

As a side note: SInce some years, I wonder if the classic default program data directory ~/.<program name> on the Linux platform is still the best choice nowadays. Especially as files and directories that start with a dot are hidden by most file browsers by default, and many file browsers make it hard (or at least not very obvious) to change this and also show hidden directories. That's the reason I use non-standard directories on the Windows and Mac platforms with the ~/Documents/Rocks'n'Diamonds approach, as the "correct" program data directories when following the style guides or file system standards on these platforms are also directories that are well hidden from the user for whatever reason. At least on Linux, I once thought that most people should be used to the ~/.<program name> paradigm, but even if this may have been true in 1995 when R'n'D was created, it surely isn't true anymore today, where many "normal" people use Linux ;-) which probably have unneccessary problems finding/opening/using that directory.
filbo
Posts: 648
Joined: Fri Jun 20, 2014 10:06 am

Re: How to create custom graphics: The basics

Post by filbo »

Regarding the 'correct' directory for per-app data: don't change it, that just means future decades of confusion between the old and the new...

You're right that ~/.whatever is a little bit obscure. But ~/.config/whatever is no better, and ~/Documents/whatever is just wrong here! And using Rocks'n'Diamonds vs. rocksndiamonds is just punishing everyone, almost as bad as filenames with spaces in them...
filbo
Posts: 648
Joined: Fri Jun 20, 2014 10:06 am

Re: How to create custom graphics: The basics

Post by filbo »

I meant to say: while it might be a little obscure, all sorts of stuff on Linux still uses ~/.whatever. They can't be even slightly serious Linux users without becoming familiar with that. If it throws them, it's because no matter what you offered would throw them.
User avatar
Holger
Site Admin
Posts: 4081
Joined: Fri Jun 18, 2004 4:13 pm
Location: Germany
Contact:

Re: How to create custom graphics: The basics

Post by Holger »

Just to say that I totally agree 100% with every word you have written in your last two posts, filbo.

So, no, I won't change the current "status quo", on any platform, even though it is either inconsistent, wrong, or confusing on all of them. :?

To go into some more detail:

Yes, I do see the advantage of ~/.config/whatever over ~/.whatever (not cluttering the user's home directory with lots of program specific sub-directories, but putting it all into one place), even though R'n'D stores way more than just config files there (but we can't and don't want to prompt the user about where to save, say, a newly created level file, of course).

And yes, ~/Documents/whatever (or, even worse, ~/whatever, without the dot) is no option either, as it means creating stuff inside a directory where only the user himself should create or not create things. (Right, that's what R'n'D uses on Mac and Windows nevertheless, and the fact that the "verbose" program name contains special characters makes it even worse.)

Therefore, I will keep all program directory stuff as it is, and add a way to just open that directory from within the info menu or whatever. :)
Post Reply