Sillysoft
Lux Alliance: Capture The Flag!

Lux Delux
The Game Of Universal Domination 
Lux Delux
Maps - Forum
Rankings - Buy
Lux Alliance
Maps - Forum
Rankings - Buy
Sillysoft
About - Docs - FAQ
News - Forums - Search
 
RSS feeds  

Wiki -> Theme Tutorial

Please do not use or upload copyrighted material. Any map that gets uploaded with copyrighted material will immediately be deleted. If you don't know whether or not something is copyrighted, then assume it is. There are a few volunteer artists willing to create a theme or copyright free material for you. You can find them in this forum thread. You can also find a wealth of free art resources some links can be found in this forum thread

Building Your Own Theme for Lux

Custom themes can be a very important aspect to map making. They can clear up unique rules of your map, make connections easier to see, provide a setting for the player to engross themselves in, make the map look more geographically realistic, and make your map stand out.

There are many different ways to go about making custom themes. There are a wide range of graphic programs out there, all of which will get the job done (as long as they can save .jpg and .png with transparency). Don't have a fancy graphics program? Fear not! There's also plenty of free graphics programs out there. A favorite among luxers is paint.net, which is more than capable of creating all the elments of a theme.

Download it here: http://www.getpaint.net/download.html

Or, for Mac users, download Inkscape at http://www.inkscape.org

For the purposes of this tutorial I will use the most wide spread graphic program out there today “Adobe Photoshop.” You need to be somewhat familiar with how Photoshop works in order to use this tutorial. Here are some great links to free Adobe Photoshop tutorials:

http://www.photoshopsupport.com/tutorials.html
http://graphicssoft.about.com/od/photoshop/
http://www.sketchpad.net/photoshp.htm

Here a few links to download free trial copies of Photoshop

PC- http://www.softpedia.com/get/Multimedia/Graphic/Graphic-Editors/Adobe-PhotoShop-Trial.shtml

MAC- http://www.apple.com/downloads/macosx/imaging_3d/adobephotoshopcs3extended.html

Those are for Adobe Photoshop CS3 this tutorial was written for Adobe Photoshop CS. There isn't a huge difference between the 2 versions and this tutorial should still serve your purposes, but keep in mind that some things may have been moved around in the new CS3 version of Photoshop.

This tutorial is not a tutorial on graphic design. It is merely meant to explain the different parts of a theme and to guide you through the process of making those parts. In other words, don’t expect something aesthetically pleasing at the end of this tutorial, but do expect to have a better understanding of themes and their importance in map making. For the purposes of this tutorial I will be using the same map used in the map building tutorial, Great Britain & Eerie by Preacherman, but feel free to use your own map.

Step 1- Familiarizing Yourself with Themes

Before we get started you need to first familiarize yourself with how Lux calls up themes and what a typical theme consists of. It’s a good idea to look at other maps' theme folders to familiarize yourself with them. You can find the theme folders in your Lux “Theme Directory.”

On a Mac this directory can be found at:
~\Library\Application Support\Lux (~ indicates your home directory)
On a PC this directory can be found at:
\Program Files\Lux\Support

Here you’ll find a folder called “Themes,” this is the “Theme Directory.” Inside this folder is where you’ll find all the custom themes that people have made (provided you’ve downloaded them through the plug-in manager first).

Themes are made up of 1-3 layers or files.
--background.jpg
The first file, and bottom most layer of a custom theme, is the background.jpg This is everything you see behind the clickable countries inside Lux. This layer needs to be saved as an 8bit RGB jpg. This is the only layer that is necessary in order for a custom theme to work.

--foreground.jpg
The second layer in a custom theme is the foreground.jpg This layer makes up the bumpy texture that you see underneath, or though, the clickable countries inside Lux. Basically Lux masks out anything outside the outline of the Lux countries and anything inside the outline is shown through. This layer is not necessary for a theme to work and is most often left out. If you do not include a foreground layer then Lux will automatically put in a default one for you, which generally looks pretty good. This layer needs to be saved as an 8bit RGB jpg.

--overground.png
The 3rd and top most layer in a custom theme is the overground.png This is everything you see above, or on top of the clickable countries inside Lux. Usually made up of stuff like trees, mountains, rivers, little houses, etc. This layer is also optional and does not need to be included in order for your custom theme to work. This is the one layer that needs to have transparency, otherwise this layer will block out your entire map. What Lux uses is a file format called .png. A png, unlike a .jpg, will allow for transparency in the file.

*Critical Note - Do not omit the background layer and upload ONLY an overground layer. This tactic is more processer intensive for Lux and often leads to problems. The reason being is because after every players turn Lux "redraws" the overground, so putting everything in the overground causes Lux to have to "redraw" the entire screen after every turn. So, only put absolutely necessary elements into the overground layer and keep everything else in the background layer.

Step 2 - Creating a Theme Folder

When Lux opens, it looks inside the “Theme Directory” that I mentioned in step 1. The title of these folders within the Theme Directory is what Lux uses to call them up. For example, in the “Set Map Info” dialog box inside the Lux Map Editor there is a Theme dropdown, this dropdown contains all the names of the folders within the Theme Directory. So in order for Lux to know that you’ve made a theme and would like to use it, you need to create a folder inside the Theme Directory. So let’s do that now. Let’s say you’ve just completed the map tutorial and have successfully made a Great Britain & Eire map. (If you don’t have this map on your “Choose the Map” dropdown inside Lux, then go to the Lux Plugin Manager and download it now).

Now open the Theme Directory and create a new folder inside it, we’ll title it something easy to remember for the map we’re making. In this case we’ll call it “Great Britain” (shorter the better and keep any punctuation like apostrophes, commas or dashes out of the title of this folder). Make sure you quit the Lux application before doing this step. The reason being is that every time Lux opens, it reads the Lux directory and all its contents, including the themes. If you make a change to this directory while the Lux application is running the application won’t know it, because it only reads the directory at the application startup.

Step 3 - Setting Your Theme and Getting Map Dimensions

Start up the Lux application and open the Lux Map Editor. Open the map Great Britain & Eire and then open the “Set Map Info” dialog box. What we need from here is to make note of the map dimensions and to set our theme. In the case of the Great Britain & Eire map, the dimensions are 596 pixels wide by 700 pixels high (Lux measures maps in pixels). We need these dimensions because your custom theme must be the exact same dimension as the map file. If we look at the “Theme” drop down box we see that it says “Ocean.” We need to change this so that it says “Great Britain” (the name of the folder we created in step 2). Click the dropdown and find the name “Great Britain” and click it. This will tell Lux that when it launches the map Great Britain & Eire it needs to use the theme folder titled “Great Britain,” that we made in step 2. If you don’t see the theme folder that you created, then you need to quit Lux and go back to step 2. Once you’ve noted the map dimensions and set your theme, click ok, and then save the map.

NOTE: In the map editor there is a function called "Load Background Image." This tool does NOT set the theme background. This tool has nothing to do with creating a theme. The only thing this tool is for is to load an image into the map editor to help you draw the map accurately.

Step 4 – Getting Started in Photoshop

Ok now we can get started making our theme, so at this moment go ahead and quit the Lux application…yes, again. Open Photoshop and we can begin to harness the powers of Adobe. Create a new document that is the exact same dimensions as the map, in this case 596 pixels wide by 700 pixels high, RGB colors, with a transparent background. This is your theme file. Now we need to get the Lux countries into this file so that we can properly align our theme. To do this we’ll do a little trick, with your new Photoshop document selected, click “Save As” under the file menu. In the Save as dialog box that appears, title your map “background” and select the format to be “JPEG” (dropdown box at the bottom of the Save As dialog box) and save the file into the theme folder that you created in step 2, which can be found inside the Theme Directory. This will save a .jpg file that is all white, and Lux will call it up as the background of the map. Now open Lux and set the Initial countries to be selected, and only 2 human players. Choose the map Great Britain & Eire and click “Play A Game.” When the map launches you should see that the Ocean that is usually there is now all white (if you still see the Ocean then start over from step 2). Now we need to do a screen capture of the map window. First click the bottom-right corner of the map window and drag down until the player name in the bottom left is entirely in the black and out of the way. Then go to the “Board” menu and click “Take a Screenshot.” Wait for a pop up box to appear that says: “A Screenshot has been saved in: (and then the location of your Lux directory)” Go to this location and open the screen shot inside Photoshop.

In Photoshop select the Rectangular Marquee tool and draw a box around the map including all the white areas, but excluding the black areas on the right and the bottom. Now click copy under the edit menu. Activate your theme file and click paste (also found under the edit menu). Make sure the layer is aligned using the Move tool and make sure it is flush with the edges of the document. It helps to have Snap activated. The Snap function can be found under the View menu of Photoshop. DO NOT resize the layer. If the layer does not fit perfectly then most likely your rectangular marquee selection was not the right size or the dimensions of the file you created are incorrect. It’s ok if it’s a few pixels off. Once you have it flush with all 4 edges, select the Magic Wand tool and make sure the “Contiguous” check box is NOT checked. Select the big white areas where the ocean should be and press delete. Do this until only the Lux countries remain and where the ocean usually is you should see the checkerboard pattern indicating there is nothing there. Name the layer “Lux Countries” and lock it so we can’t accidentally move it and throw off the alignment.

Step 5 – Creating a Background in Photoshop

Now we are ready to create a background for our theme. For this case it would be best for the background to be an ocean, since Great Britain is an island and all. So we’ll start with finding a good ocean image. Google image search is a good tool for this, but my personal favorite resource for good quality images and textures is Mayang’s Free Texture Library. It’ a good idea to find an image that’s at least as big as your map dimensions so that you don’t have to do any stretching. I like this one, but feel free to find one that you like.

Once you find an image you like, make sure it’s copyright free, download it, and open it in Photoshop. Using the Move tool, click the water image and drag it onto your theme file. You may have to move it to the bottom most layer so that it’s under the Lux countries layer. Size the water image accordingly, here’s a situation where you may be forced to stretch. But if you don’t want to stretch your water image you could also duplicate the water image layer to cover any empty spots and use a soft eraser brush to blend the edges. I don’t like that my water image is green so I want to change it to give it more of a blue tone. To do this I’ll create a new layer just above my water image. Using the Paint Bucket tool, I’ll dump a dark blue to cover the whole layer. Now I’ll use the “Soft light” layer effect found on the layer effects dropdown in the layers window.

Now we need to label the different seas that surround Great Britain. To do this select the Horizontal Type tool and then choose a font you like from the font dropdown at the top of the screen. Now choose a color that will stand out against your ocean image, I’ll choose white. Now let’s label our seas, it’s easiest to do one first and get the sizing, kerning and leading correct, then duplicate the layer and change the type and rotation. So go ahead and do that. North Atlantic in the upper left, North Sea in the upper right, English Channel in the lower right, and the Irish Sea in the lower left. Rotate and position as desired. Those white labels are a little too bright and overpowering for my taste, so I’m going to decrease the layer opacity on each label to about 30%. The layer opacity function can be found at the top of the layers window.

That’s all I’m going do for the background for this tutorial. So let’s save our Photoshop file first (name it whatever you wish and save it to where ever you wish). And then we’ll save the background.jpg To do this, select Save as from the file menu. When the Save as Dialog box appears, navigate to your theme folder. Name the file “background” and set the format to be JPEG and click save. Now we’ll open Lux (if it was already open quit and reopen it). And launch the map. You should see your new background. If you don’t go back and make sure you did all the steps properly and make sure you named the file “background,” that it was saved as a JPEG, and it is in your theme folder inside the Themes Directory.

If you want to go further with the background, an easy way to spice up a drab background is to add imagery. Using our old friend the Google image search. Find some nice copyright free Britain, Scotland, and Ireland, related images. Then, using a combination of layer effects, layer opacity, and a soft eraser brush create a nice collage of English related imagery. The background is also a good place to type out any custom rules that your map might have so that players won’t be in the dark or have to keep checking your map description.

Step 6 – Now what is a Foreground again?

The foreground is probably the most confusing part of a theme. But don’t fret, if you don’t get it, or don’t want to make one, then it won’t hurt your theme. Lux automatically plugs in 1 of 5 default foreground textures if your custom theme doesn’t specify one. Because of this, most custom themes don’t include a foreground layer. The foreground is anything you see through or underneath the clickable Lux countries. Let’s make one so that we can see what exactly they do. First download this file

This is one of the 5 default foreground textures that comes bundled inside Lux and just for ease we’ll use it for the purposes of this tutorial. Once you’ve downloaded it, open it in Photoshop and drag the image onto your theme file. Label this layer “Foreground Texture” and place it above the ocean and ocean labels, but behind the Lux countries layer. Notice that it doesn’t fit perfectly, resize it so that it fills up the entire document. Now we’ll demonstrate what a foreground is and does. First turn off all layers so that all you see in your theme file document window is the checkerboard pattern. Select Save as, when the Save as Dialog box opens, navigate to your theme folder. Change the file name to be “foreground” and the format to be JPEG, and click save. This will save a blank white foreground image, this is just for demonstration purposes. Open Lux (if it was already open, quit and reopen it). Launch the map. You should see that the countries lack detail and seem very flat with no variation. Now quit Lux again and go back to Photoshop. Turn on only the foreground texture layer and select Save As. When the Save as dialog box appears, navigate to your theme folder, change the file name to be “foreground” and the format to be JPEG, and click save. Click Replace When Photoshop asks if you want to replace the old file that you just made.

Now open Lux again and launch the map. Now you’ll see the countries look as if they have a texture to them. That’s a foreground. Maybe you want the flat look. If that were the case then you would save a foreground that was all white. Some foregrounds are old maps, as in Roman Empire c300AD by Hunterrose 2000. Some have icons that tell the player the country is special as in WWII Tanks – Russian Front by BarStar. In the map WWII Battles-Guadalcanal by Mark Bauer, there is a combination of different kinds of foregrounds, a beach sand texture for the land territories and a wavy ocean texture for the water territories. But still most maps just use the default bumpy ground texture. We’ll just use the bumpy ground texture for this tutorial.

  • Important Note - It's best if foregrounds are desaturated or black and white as colored foregrounds can alter player colors on certain monitors, making similar hues difficult to distinguish between.

Step 7- Creating an Overground in Photoshop

The overground is everything you see above, or on top of the clickable countries inside Lux. We’ll just do something quick and easy for this map, mainly what we want to learn here is how to save the file with transparency.

So first off, let’s make our connection lines and later we’ll get rid of the simple ones made inside the Lux map editor. In Photoshop, turn on all the layers with the exception of the foreground texture layer. Click the layer you named “Lux Countries” in the layer window to activate it. This will ensure that when you create a new layer it will automatically place it above or on top of this layer. Change your color to black and using the Line Tool with a weight of about 3 pixels(px), draw a line from the top most country in North Ireland across the water to the Scottish country with the peninsula jutting out towards Ireland. The Line tool and later the Shape tool automatically create a new layer. If you’re not sure which two countries are connecting, open Lux and double check with the map. Draw another line from the country in Ireland that connects to Wales.

Now we’ll make our arrowheads. With the Line Tool selected we see a panel at the top with a little blobby shape icon, this is the Custom Shape Tool. Click the icon and you should see to the right the weight option gets replaced with the Shape: selector. Click the Shape: dropdown arrow and select Arrow 6 (You may have to append the arrow library. To do this click the little triangle on the right side of the Shape dropdown and select “Arrows” when asked click “Append”). We don’t want to use the default arrows because they have a stem that will get in the way. Once you have Arrow 6 activated draw 1 little arrowhead at the end of one of the lines. Rotate accordingly, and rasterize the layer. Then duplicate the layer 3 more times, for the other 3 ends of the 2 lines. Position and rotate accordingly. Make sure the arrows and lines overlap the Lux countries a little, this is an overground remember, we want to take advantage of it.

Now let’s label the different regions of Great Britain. Using the Horizontal Type Tool again label each region, England, Scotland, Wales, Ireland, and North Ireland. Size, rotate and position accordingly. Now we see that North Ireland is a little too small to hold a label so we’ll go ahead and omit that one. Notice that the harsh black of the labels blocks out the countries underneath, this will make it difficult for the player to see what’s going on there. To solve this lets lower the opacity of our labels. Keep in mind that a low opacity in Photoshop, will look higher once it gets inside Lux. So let’s set the layer opacity of each label to be between 20-25% Now turn off all the layers below and including the “Lux Countries” layer. So the only layers that should be visible should be your lines, arrowheads, and region labels. The water, foreground, and water labels, should all be invisible.

If it’s correct, in your document window you should see mostly the checkerboard pattern. If you see something different like mostly white or blue or a different color then you need to turn that off. Once you have all layers except what shows up in the overground off, click Save As under the file menu. When the Save As dialog box appears, navigate to your theme folder, name the file “overground” and set the format to be PNG. Click Save. Now launch Lux, if it was open already then quit and re-launch it. Load the map Great & Eire and you should see the labels and connection lines overtop the Lux countries. That’s an overground. The only thing left to do is getting rid of the simple white connection lines that are made inside Lux. To do this, open the map in the Lux Map Editor and go to the Draw Extra Lines editing mode. Control-click or right-click on the little white lines to delete them. Save the map. Now re-launch the map as a game and they should be gone. You’re done!

*Critical Note - It may be tempting to put all of your graphics into the overground, but this is not wise. It's actually easier for Lux to load a background and a small overground than it is for Lux to load only a large overground. The reason being is because after every players turn Lux "redraws" the overground, so putting everything in the overground causes Lux to have to "redraw" the entire screen after every turn. So, your overground should contain only absolutely necessary elements and should be as small as possible.

Step 8- Uploading a Theme

Don’t upload this one, but if you made your own map with your own custom theme then this is how you would upload it. After uploading the map or the .luxb file, go to the “Theme Upload Form” (also to be found at the bottom of the “Map Upload Form”). In the “Theme name:” box of that form is where you enter the name of the folder that you created in Step 2. NOTE: this field is case sensitive, so be sure you type the theme name EXACTLY as it appears on your theme folder. And remember, absolutely no punctuation like dashes, apostraphes or commas can be in the title of theme or the theme folder. In the boxes below the “Theme name” box is where you load each one of your theme files or layers. One box for background, one for foreground, and one for overground.

It’s ok if you leave some or most of the boxes blank and it doesn’t matter what order you upload the files. Once you’ve loaded all the files you wish, click the “Upload Your Theme Files” button found near the bottom of the form just below the boxes. Once it’s done the theme and map will be sent to your friendly neighborhood MapLAB for review.

Step 9-Getting further help

If you are having trouble or having an issue that you can’t resolve, there is an extensive community of mapmakers and players on the Sillysoft forums that are willing to help. Feel free to post a question, concern, idea, or anything else you wish.

This tutorial was written by Mark Bauer.

If you are unable to make a theme for yourself but would like one for your map, there are a few volunteer artists willing to create a theme for you. You can find them in this forum thread.

If you are having trouble finding copyright free material visit this forum thread for some very helpful links to free art resources. But please please please, do not upload copyrighted marterial!

There's also the Map Tutorial.

Lux Alliance diplomacy game is a simultaneous-turns team strategy boardgame. Diplomacy meets Axis & Allies game.

Lux Delux advanced Risk game with over 800 maps, hard AI, and online multi-player.

American History Lux takes you through the wars of USA history. — Ancient Empires Lux spans Babylon to the Roman Empire.

Lux Touch iOS risk game, and Lux DLX let you conquer the world on your iPhone, iPod, and iPad. Lux DLX android risk game

Meowzers Action Cats is a feline fun mobile game. Romp with cute cats on your phone and tablet.

Sillysoft makes games for Mac OS X, Windows XP/Vista/7 and Linux. Also mobile games for iPhones, iPads, and iPod Touch.

SitemapDownload GamesMac OS X gamesMapsNewsTerms of UseFAQ

Because taking over the world is fun.
                                 - Lux