Jump to content

Map Editor Tutorial - Adjusting the Playable Area and Minimap


R4bitF00t

Recommended Posts

logo.png.f23f11b35761d703e4079f020e7b92b2.png

Hello again!

You've seen me mention before, that you should generally choose larger map size than what you think you will need.
That's because you can always make the playable area smaller, but not larger.

 

Let's look at how we can adjust the visible and playable areas, and create a nice looking minimap for our maps.

 

If you encounter any issues, don't hesitate to ask in Skylords Reborn Map Making Discord.

 

 Content
splitter.png.c6bb999c2670ba4c136ee150dced1030.png

  • Adjusting the Playable Area
  • Creating a Basic Minimap
  • Polishing the Minimap in Photopea
  • Next Chapter

 

 Adjusting the Playable Area
splitter.png.c6bb999c2670ba4c136ee150dced1030.png

As mentioned before, the standard map size in BF is 512x512.
This size is ideal for most of the maps, as the map is not too big or empty - too large maps can feel like a drag to play.
You also want to reserve some space for the map border, as having the skybox visible is not exactly visually appealing.

Remember that the average playtime of a BF map is around 20-30 minutes and 512 map is usually ideal for that.

 

With that out of the way, let's see how you can make the playable area smaller.

You can adjust the playable and visible areas in the Map Settings -> Edit Map Settings on the top hotbar.

image.png

A window will pop up that has the values we need.

image.png

Quote

Note: You might be wondering why our 512x512 map has the area ranges from 0 to 716.8 meters, that is because the map size denotes the amount of terrain nodes (with each node being an equivalent of one pixel on the heightmap) but the nodes themselves are roughly 1.4 meters wide.

 

You can see the border of playable and visible areas on the edge of the map, delineated by the red and blue lines.

  • Red line is the playable area
  • Blue line is the visible area

By default, you will only see the red playable area line, as it is drawn over the blue visible area line, I've moved the playable area a bit so you can see both of the areas.

image (2).jpg

 

The playable area serves an important purpose - it limits the area where you are able to play out cards and move your camera in the game.
If you make it too large, and forget to block out the areas that should not be available on the map, players will be able to summon useless units outside of the intended map area, or worse - find exploits by skipping parts of the map.

The playable area should cover ALL PARTS OF THE MAP THAT ARE ACCESSIBLE TO UNITS and be sure to reserve some free space on the sides.

 

The visible area influences the in-game minimap preview and positioning.
If the visible area doesn't match the player area, you will get weird minimap behaviour, like this.

image.png

So generally, the visible area should match the playable area.

Quote

Important Note: Be sure to always make the areas as close to square as possible, making rectangular maps can bug out the minimap view.

 

Now, for the adjusting of these areas, there is not much to tell, you will need to play around with the numbers to adjust the areas to fit your map. (Your map doesn't need to be centered but it is a good practice.)

I've created this really quick preview for my map - the green texture is my map layout, the dirt around it is the map edge - area where I don't want the player to be able to play out units, and in most cases even move them over that area.

image (9).jpg

 

You can see the playable and visible areas are way out on the actual map edges where the terrain ends, I have highlighted my intended playable area in the yellow square.
So now I need to play around with the settings in the
Edit Map Settings window to match my actual areas to my preview.

As you can see, it is a bit different from the preview, as I've tried to make the area more squared.

image (10).jpg

 

You might have the black map border enabled.
You can enable/disable that in the
View -> Map Border.

image (8).jpg

 

 Creating a Basic Minimap
splitter.png.c6bb999c2670ba4c136ee150dced1030.png

When you think you have the areas correctly set up, you can check the minimap by using the Camera -> Create Minimap (experimental) option.
Note that you need to
have the map saved for this to be available.

image.png

This will generate a very basic (and mostly ugly) minimap in the map's UI folder.

image.png

If the visible area is roughly squared, you should be golden.

image.png

Quote

Note: The generated minimap is influenced by your settings in the View tab in the top hotbar - for better results, try turning off shadows and glow, play around with the View settings and see what happens.

For example, this is the generated minimap after turning off glow.

image.png

In the end, for a great minimap, you will need to touch it up in Photoshop or another image editing software.
 

While not perfect, this step is needed, as it gives us a great basis to continue working on our minimap in an image editing software.

I personally recommend using Photopea - it is a free, browser-based image editing software, very similar to Photoshop.

 

 

 Polishing the Minimap in Photopea
splitter.png.c6bb999c2670ba4c136ee150dced1030.png

To make our minimap making easier, here is an image of the basic background that denotes the unplayable area - we will carve our playable area out of that.

Right-click the image, and save it as.

greenland_background.png

I will import my generated minimap and this image into Photopea, with the minimap on a lower layer, and the unplayable area on a higher layer.

image.png

Next, I need to match the size of the blocking layer to the minimap, so it covers the visible part of the image.
Select the Blocking layer and press
"V".

image.png

 

Quote

Note: To quickly disable/enable layers, click on the eye icon next to the layer.

image (12).jpg

Nodes will appear around our blocking image, grab the corner nodes and scale the image so it covers the visible part of our minimap image.
Note - I've made the blocking layer slightly transparent so you can get a glipmse of the minimap underneath it.

image.png

 

I will do an easy setup to be able to smartly delete the blocking according to the map shape.
For that, you will need to select the
Blocking layer and click this icon at the bottom, which will add a mask to the selected layer - a white square image will appear next to the layer preview.

image (13).jpg

Now, you can click on the white square image, pick a black color for your brush and paint it on the canvas, you should see the blocking image disappearing while you paint. Awesome!

image (14).jpg

Now, we just need to paint the black onto the mask so that we mask our map shape.
To
re-paint the blocking back, use white color instead of black.
You can use the
X key to quickly switch between your two selected colors.

image (15).jpg

This looks pretty rough, but with polishing the borders more, adding some layer effects and boosting the colors of the minimap, we can get a pretty decent result in a couple of minutes.

image (16).jpg

 

To add effects to a layer - double-click the layer (click away from the layer name), it will open up a window with all the effects available.
For the blocking layer, I use an
Outer Glow with Multiply blend mode - to give it a semblance of depth, and a Bevel and Emboss effect.

image (17).jpg

I've also added a Brightness/Contrast adjustment layer above the minimap layer, but below the blocking layer.
An adjustment layer affects all the layers below it, so like this, it increases the brightness of the minimap, while leaving the blocking layer as-is.

image (18).jpg

 

If you want an adjustment layer to only affect the first layer below it, right-click the adjustment layer and check Clipping Mask.

image.png

 

Now, all that's left is to replace the minimap in the map's UI folder.
The map can be in the .jpg / .png / .bmp format, but be sure to only have one minimap in the folder.

 

One final gripe I have with this minimap is that some parts of it are too close to the edge of the image. To fix that, I would need to adjust the playable and visible areas to be larger so I have more free space around the map, but alas, sometimes these things are a bit of a trial and error 🙂

image (19).jpg

 

 Next Chapter
splitter.png.c6bb999c2670ba4c136ee150dced1030.png

Just remember, stick with square shaped areas and you should be fine.
To better flesh out the playable area, you will need the
Blocking Tool.

While the minimap creation can be daunting for an inexperienced person, I think with these basic principles anybody can create it pretty quickly.
You can also use other adjustment layers, such as
Hue/Saturation to adjust the colors of your layers - if you have a snowy map, it might be nice to desaturate the blocking layer so it is gray-ish/white-ish instead of green.

In the next chapter, I will go over how to finally publish your map to the community map section.

 

• Publishing a Map •

 

Alternatively, return to the Map Editor Tutorial homepage here.

 

• Map Editor Tutorial •

 

Middle_splitter.png.14867f8f70731a56861e7cc2e99c738d.png

Edited by R4bitF00t
Link to comment
Share on other sites

  • R4bitF00t changed the title to Map Editor Tutorial - Adjusting the Playable Area and Minimap

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Terms of Use