#Updated Map Making Guide

237 messages · Page 1 of 1 (latest)

pliant jacinth
#

🗺️ How to Create a Map for OpenFront

This guide explains how to create a custom map that works with the OpenFront game and integrate it into the project repository. (Nothing has changed regarding the preparation of the map image, so you can also help yourself with [aPuddle's thread](#1350917721444847639 message) for that)

🧩 Steps to Add a Map
1. Prepare Your Map Image

  • Create an image of your map that follows the format required by the map generator.

  • Each pixel’s color corresponds to a terrain type.

  • Recommended maximum size: 4M pixels (2000×2000 px) for optimization.

  • Refer to the color palette by aPuddle (linked below) to ensure correct terrain mapping.

  • 💡 Tip: The map generator converts each pixel to a terrain type based on its color.

2. Create the Map Info File

  • Create an info.json file that defines your map’s metadata and nations, using this structure:

{ "name": "Name of your map", "nations": [ { "coordinates": [x, y], "flag": "xx", "name": "Name of the nation", }, { "coordinates": [x, y], "flag": "xx", "name": "Name of the nation", } ] }

  • 💡 Note:
    "flag" should use the two-letter country code for the nation.

3. Fork the Repository

  • Visit the official OpenFront GitHub repository

  • Click "Fork" to create your own fork of the project.

  • Open the fork in your preferred text editor.

  • 💡 Note:
    You can familiarize yourself with GitHub Forks and Pull Requests on VS Code with this tutorial - https://www.youtube.com/watch?v=zQSLq7RX8Eg

4. Add Your Map Files
Inside your opened repo, create a new folder for your map in:
map-generator/assets/maps/

Add the following files:
`image.png — your map image file

info.json — your map info file`

#

5. Register the Map in the Generator

  • Open map-generator/main.go and add your map’s name to the maps table variable.

6. Generate Map Files
In your terminal, run:

cd map-generator go run . --maps=nameofmap

This command will process your map image and info file to generate the necessary data in resources/maps.

7. Add Your Map to Game Files
Next, register your map in the game configuration by adding its name (in the correct format) to the following files:
`en.json
Game.ts

MapPlaylist.ts - used to define how often your map gets picked for public games
`
8. Playtest Your Map
Run the development build to test your map in-game:

cd .. npm run dev

Check that:

  • The map loads correctly.
  • Terrain and nation positions appear as expected.
  • The map runs smoothly on your device.

9. Submit Your Map
Once your map is working:

  • Commit your changes.
  • Push to your fork.
  • Open a Pull Request (PR) to the main repository.

🧾 Example: See what changes a map PR should make here:
👉 Example PR

🧭 Terrain Colour Reference (check linked colour palette by aPuddle)
The map generator recognizes the following terrain types:
Water
Plains
Highlands
Mountains

Please Note!
Always check the licensing of the base image that you're using for your map. It needs to be open for commercial use. You may need to add the map used in CREDITS.md if the license requires it. If you have any questions regarding it, feel free to ask here or in the OpenFront Dev server.

small holly
#

Thank you for the update.

So I got NVM/NPM installed and continued to follow instructions from the Git, but I think something is misconfigured.  I use 'npm run dev' and the server appears to run, but I get a 403 error in the tab that opens. Error in command and browser point to the address where my files are located as not being approve by Vite.

Error: The request id “…….OpenFrontIO/index.html” is outside of Vite serving allow list.
Refer to docs vite.dev/config/server-options.html#server-fs-allow for configurations and more details.

Following the link and reading instructions I was able to locate the vite.config.ts file in the openfrontio folder, but at this point Im just not familiar enough to tell what is set incorrectly. My main goal is for to local host and test play created maps. Looking for a little direction if its a simple fix.

random anchor
#

is the map editor accurate to in-game? some of my maps get random bodies of water that weren't there

#

i ofc uploaded grayscale maps

#

i also notice a lot of my maps come out with mostly green flat terrain. is there any guide to the range of grayscale that is converted to different types of terrain?

random anchor
#

nevermind, i answered myself. I leave this here in case people have the same issue

#

for some reason theres some grayscale values the editor interprets as water

rugged fog
#

yea weird

rugged fog
#

but we need to change it so that aint happening

#

thats been there for ages tho i had problems with that months ago

small holly
# random anchor nevermind, i answered myself. I leave this here in case people have the same iss...

Are you expanding the contrast of the blue channel before processing? Or are you just processing a pure grayscale image? What I mean is the process of the isolating the blue channel reduces the brightness, so "white" on the blue channel is actually a very light gray. Black as well is a dark gray. Based on your screenshot I think what you're experiencing is you using the program 'wrong'. Its only set to look for the middle area. The darker and brighter colors are out of bounds.

#

The program is setup with colored height maps in mind. All images at full contrast I believe need to be split into RBG channels. They use the blue channel because its the closest to what the default grayscale looks like.

#

I tried myself adjusting the contrast and got similar weird results. Leaving the blue channel as-is eliminated the problem.

pliant jacinth
pliant jacinth
pliant jacinth
pliant jacinth
rugged fog
#

im guessing ur gonna have to update the maps then remove

small holly
# pliant jacinth This map editor in question isn't really that accurate regarding water bodies, s...

I wish it would say something like that on the Git under the MapGenerator section. I would've looked more into the alternative resources instead of the legacy one had I known those resources include more up to date map generators. Just going off the Git I thought the MapGenerator was the required tool. The page does not mention any other map generators by name or implication.

The wiki was working the other day, but when I was first researching I wasn't able to access it. Same for today.

Which map editor/generator will be the 'new default'?

pliant jacinth
#

I thought your image was from one of the websites I linked in this post? 🤔

small holly
#

I think I misread. Is there a map-editor separate from the map-generator? I was going by your quote

#

"This map editor in question isn't really that accurate regarding water bodies, so I suggest only using it to test elevation (that's what I personally only use it for)"

#

Context*

pliant jacinth
small holly
#

FloPinguin posted some map info the other day. I recompiled it to break down additional numbers and ratios. Here is an image and the spreadsheet.

#

It looks like there is no consistency at all with the number of nations vs the number of land tiles which makes sense as it more of the designers choice. I also didn't see a correlation between the number of nations and any other figures. More like the number of nations is random. Average number of land tiles per nation is about ~120,000 which was the figure I was looking for.

random anchor
#

@pliant jacinth do i have to make a new fork for each map i want to upload? Just making sure

pliant jacinth
random anchor
#

thanks

random anchor
#

@pliant jacinth im almost finished merging the map to the git, i just have a question with the credits

#

what exactly do i have to add?

#

the Terms of Use link in here doesnt work, but i was able to find it using Wayback Machine

random anchor
#

actually i think i have figured it out but still, feel free to put your input

small holly
#

When I first joined I was told "we have enough island maps". Aside from that I was given minimal direction as far as design. Here is a chart I made of all existing maps in a format I tried to make as universal as possible. I'm sharing here in hopes others will submit and promote maps that are not already on the chart. Also less island maps for sure. My goodness so many island maps.

#

MAP BINGO

#

I think there is definitely a need for more Lake 3 and River 3 scale maps. More arcade that is not islands. Others on this list might just be impractical like those hypothetical particles on the periodic table.

uneven mantle
steep cliff
#

Quick question, if I want to run the map generator. I presume I need Go installed or anything else for that matter?
go run .
As this command isn't recognized.
I'm trying to get to a point where I could build/run/playtest a map.
Coming in blind I don't know if there's a quickstart guide for that aspect of the map dev.

random anchor
#

and also git if you want to submit your own map for review to potentially have it added in game

steep cliff
#

no worries on git, I've used it a bunch.

#

cheers

steep cliff
#

Dang, so if I run the map-gen command, I get

random anchor
#

the only files you dont create are the bins, manifest and the thumbnail, that folder is generated by the go run command

#

i assume you are trying to test a custom map?

steep cliff
#

I'm just running the go run . command without adding anything to the manifest. just to see if it works with the base maps before adding in the custom map files

#

but it throws that error, something to do with the mod chai2010 webp conversion

random anchor
#

did you do cd map-generator?

steep cliff
#

yep

random anchor
#

weird

steep cliff
#

that error it's throwing is related to the .webp preview image it creates for the map

random anchor
#

maybe its just because those files already exist? like, the go command just generates files in the resource folder. Maybe just do the npm command

#

wait i think i had these same errors, one second

#

do you have a C Compiler? @steep cliff

i had the same error and i had to download msys2

steep cliff
#

ah ok, I think i have only some base ones from VS studio. I'll grab that package

random anchor
#

i solved this with gemini because im completely blind on this type of coding:

Step 1: Install a C Compiler (MinGW-w64)
Go on Windows requires a GCC compiler to build projects that use C code. The most common choice is MSYS2.

Download and run the installer from msys2.org.

Once installed, open the MSYS2 UCRT64 terminal and run the following command to install the MinGW-w64 toolchain:
pacman -S mingw-w64-ucrt-x86_64-gcc

Add the bin folder of your new installation (usually C:\msys64\ucrt64\bin) to your Windows System PATH environment variable.

Step 2: Enable CGO
By default, Go sometimes disables CGO when cross-compiling or if it doesn't detect a compiler. You need to ensure it's turned on.

Open your command prompt (cmd) or PowerShell in your project folder and run:

$env:CGO_ENABLED="1"
(Note: Use set CGO_ENABLED=1 if you are using the standard Command Prompt).

Step 3: Verify and Clean
Before trying to run your project again, clear the Go cache to make sure it doesn't try to reuse the "broken" failed build:

Clean cache: go clean -cache

Verify compiler: Type gcc --version in your terminal. If you see version info, you're good.

Run again: go run .

#

and then these, one by one:

$env:CC="gcc"
$env:CGO_ENABLED="1"
go clean -cache
go run .

Note: If you are using a standard Command Prompt instead of PowerShell, use set CC=gcc and set CGO_ENABLED=1).

steep cliff
#

very simple X)

random anchor
#

yeah the process is simple looking back at it, but learning it can be confusing

steep cliff
#

oh yeah, that's what I mean. I design stuff so the image stuff is a doddle, but all these code dependancies, compilers and packages just makes me sweat profusely

#

Ok. Actual progress

steep cliff
steep cliff
#

FYI, you can just map-generate your specific map if you run 'go run . --maps=yourmap'

small holly
#

On github, how do I perform a second/different pull request using an existing fork that I've further modified? For context my first map submission was the first fork and first pull request I've done. I've never used GitHub previously. I want to further modify my fork and submit those individual changes, but I think Im missing a step. I don't understand how to tag specific changes with a specific pull request. Online resources haven't been helpful ; I guess this is hands on knowledge or something basic Im just not getting.

random anchor
small holly
#

So I added new map #2 to my fork and updated the required files. When I go to do a pull request like I did for map #1 Im presented with my original edits. I don't understand how to segment these. I don't want future edits to effect a previous unrelated pull request. I thought a pull request was for all changes up until that point and associated folders and files

random anchor
#

When you edit a file ditectly on the github, they update automatically to the pull

#

one thing i see though, you might have to add the newer maps in your files

small holly
#

Yes, I know when I update it it updates live. My pull request was for specific edits I thought though. How does one do multiple updates then? I can't create multiple forks.

#

Yes, I intended to update the main directory.

steep cliff
#

You make a branch from your untouched fork

#

And make each branch add a new map

#

Then pr each branch

small holly
#

This is why I hate instruction videos and online examples.

#

I have not seen anyone use 'branching' yet. lmao

steep cliff
#

It’s annoying because it expects you to submit only one map, through a pr.

small holly
#

Now I understand better

steep cliff
#

I am putting together a more comprehensive guide for those reasons

small holly
#

I would've appreciated that even if it only would've reduced my suffering by 5% lol

steep cliff
#

A single fork would be fine if your pr was merged into the main game quickly

#

Because you would just resync and work on a new map

#

I’ve got like 5 lined up and I’m waiting on my pr to go in; then I’ll branch in the future

small holly
#

I'll nuke my map #1 pull request (its was placed in v31 so it hasnt been touched yet) and redo my primary fork. Create branch and then resubmit map #1. I'll then resync my primary and branch for each future submission.

steep cliff
#

Yeah, it’s a bummer. I usually have full access to a repo through work so I’m used to committing and merging myself. First time doing a PR from the outside and it’s a headache.

real shell
steep cliff
real shell
#

it keeps showing this when i do go run .

#

"connection to the cell process was lost"

#

what does it mean and how to fix it

#

@random anchor

random anchor
random anchor
#

They need to have that name

real shell
#

yes, i have done that already

random anchor
#

hm

#

in the main file, did you register it as a normal map and not a test one?

random anchor
#

thats weird

#

can you show me your main.go file

#

the part where you added the map

steep cliff
real shell
#

my custom map worked but there are alot of random bots along side the ones i created
how do i remove them

small holly
#

The game has two categories of bots. Tribes and nations. The tribes are just filler to help you build wealth in the early game. Nations are the real bots.

The only nations that should appear are the ones you added to your info.json. Everything else should be tribes which you can not re-name or re-theme and are hard coded into the version of the game.

To see only your nations (for testing purposes) run a solo game and you will see the "tribes" options. Just change it to 0 and only your nations will spawn so you can see their locations.

random anchor
#

also i cant see the full map but it looks extremely similar to the East Asia. If its called Korea then it should only be focused on the peninsula

random anchor
#

made this for fun and reference. How many maps each continent has, some locations appear more than once if they have a relevant portion of another continent. Didnt add modified maps like achiran or svalmel.

Interesting things i saw:

All of North America's maps got added in the past 3 updates, SA and Oceania are both the continets with the least locations, and both only had 1 map up until v29.

Africa only has 1 location solely unique to it , the others contain parts of other continents

didnt even bother adding Antarctica, even its own continental map is fictional

small holly
#

"didnt even bother adding Antarctica" shook20

#

I would've placed it under Oceania.

uneven mantle
#

Could even be daring and put it under south america too

small holly
pallid oak
#

i have a question for this, if im making a map of a bunch of islands owned by 1 country, (Russia) then how do i do the flag

#

do i just say RU for every single flag?

random anchor
#

What islands?

pallid oak
#

franz josef land

pallid oak
#

also are coordinates meant to have commas

#

like X, Y

random anchor
#

Use this

pallid oak
random anchor
#

The site i sent atutomatically makes the json file

pallid oak
#

oh

#

so i lowk used vs code for no reason

random anchor
#

no you are still gonna use vs code later

pallid oak
#

oh

#

but i began making the json file for noreason

random anchor
#

i mean ig

pallid oak
#

fun

#

well danke for telling me

steel berry
#

This is my personal notes for the steps i need to take to make a map btw

  • Use QGIS to select map region
  • Use website map editor to place nations and export zip, named with PascalCase
  • Rename files to image.png and info.json, and place them in the map-generator/assets/maps folder
  • Add the map name to map-generator/main.go
  • Run go run . --maps=map_name_here to generate the map
  • Add the map name to:
    • resources/lang/en.json
    • src/core/games/Game.ts
    • src/core/server/MapPlaylist.ts
      • Set the value in MapPlaylist really high so it alawys appears.
  • Check it works ok using npm run dev
#

Maybe youll find it useful

jolly sluice
#

anyone know whats up with this?

jolly sluice
#

just saw that

#

downloading now, thx

random anchor
#

np

#

also

random anchor
jolly sluice
#

beautiful thanks

#

ok i made jamaica

#

how can i test it?

random anchor
#

skip first step since you alresdy have the map

#

the files in resources/maps are automatically made by the go run command

jolly sluice
#

what is npm run dev?

#

put it into powershell and nothing happened

#

am i slow?

random anchor
#

you need to download node.js

#

yes i know, this crap uses like 5 programs

jolly sluice
#

man 😭

random anchor
#

node should be the last one though

#

dont give up 😭 you are almost finished

jolly sluice
#

LOL tyty

random anchor
#

after you download node.js, go to the OpenFrontIO folder you cloned locally (im going to assume you have that) and do "npm install" first. Then you can do "npm run dev"

jolly sluice
#

cool thx

jolly sluice
#

appreciate ur help

jolly sluice
#

it wont let me make a pr because i cant assign a milestone

#

😪

random anchor
jolly sluice
#

oh ok

small holly
#

Im looking for some clarification regarding sources and credits. I've been interested in making a Luna/Moon map. I see it was brought up previously, but never completed it seems. I found a topology map from NASA, but I can't seem to find anything for/against commercial use. Just an area for credit.

Would credit be sufficient from a source like this?
https://svs.gsfc.nasa.gov/4720

harsh current
#

From what I understand of the copyright statement you can use these images if they dont contain an identefiable person, you do not claim that nasa suports the map, or contains pictures of the nasa logo or nasa staf, You also can't use the image if it is copyrighted by a tird party, those are visible. Nasa needs to be credited

harsh current
small holly
#

Thank you for the clarification. I will verify, but this is roughly what I thought. I just wanted to check before proceeding with the map design.

steel berry
#

Any feedback on this? Have I done everything ok?

indigo grail
#

hey guys I was able to add some custom maps successfully, but none of them show up on the search area when you try to create private lobbies, does anyone know the place where I have to add that data to the code? Thanks.

random anchor
#

en. json is in resources>lang

game.ts and mapplaylist are in src>core>game and src>server respectively

random anchor
#

@jolly sluice 2 things, first, remove the spaces in the checkmarks, like this [x]

and second, i think one map got added which means you have to update some of the files with the list of maps. You can do it with the "resolve conflicts" button , just be careful not to eat any commas

#

i will vouch for this map to get added to the dev

#

by the way what did you use as source? if its not in CREDITS.md you should add it

random anchor
#

correction, another map just got added lol

#

but yeah add these 2 to the map list files

vital rain
#

Hi fellow mappers

#

Wanted to say hey and ask if anyone is able to help me with a potential map Idea and how I can go abour implimenting it or if someone can help me impliment it

#

I started to read the instructions but im not a coder so alot of it is bascially gibberish to me

#

Would ideally like to help in anyway I can as I've spent countless hours now playing and would like to give back to the community in some way shape or form.

random anchor
vital rain
#

It shows you where I am currently with my map idea

vital rain
vital rain
#

Is anyone able to help me generate some of these maps that im churning out ?

jolly sluice
#

do you have a specific source that generally works well as a one-stop shop?

#

only thing red now is the "has milestone" thing

polar palm
#

It doesn’t require code

#

And if you have any issues with it, dm me, I’ll debug asap

polar palm
vital rain
polar palm
jolly sluice
#

😞 💔

random anchor
#

It isnt the map quantity its just the gameplay

jolly sluice
#

okay

quiet sigil
#

Is it a paid feature?

random anchor
#

go to the solo section

#

And then go to "All"

#

Every map in the game is there

quiet sigil
#

These two are not.

random anchor
#

Tomorrow all of these changes will go to the normal site

quiet sigil
#

Ahh, I didn't realize there was a 2nd site.

random anchor
#

Theres multiple. But they are all for devs to test changes

random anchor
random anchor
#

users should use

go run . --maps=nameofmap

#

using go run . only reformats all the maps and it takes a ton of memory

#

i have been helping new users make maps , and they have been doing this too often

small holly
#

I only recntly found out about the Pathfinding Playground tool. Notating it more clearly here in a video. https://discord.com/channels/1359946986937258015/1458870041964445706

https://www.youtube.com/watch?v=QFZNIzSP5Fw

Hello everyone! I recently found out about the Pathfinding Playground tool for OpenFront.io developers. Here is one of my first times using it as a basic demo of iwhat it is.

▶ Play video
small holly
#

Hi everyone. Question regarding using GIMP for photo editing, the color scale, the way maps are converted, ect..

So I read someone post recently making note that there is no consistency between the map files in the map-generator folder. I must agree because I myself have been unable to submit a map in what I believe is the recommended color format like World is.

My problem is that I’m normally working with black and white data sets. Then when generating the map the GO program seems to accept both color and grayscale, but when accepting in grayscale it changes what range of what gray equals water. I have tried matching the color of water to the gradient attached. I have tried spiting up RGB and submitting only the blue channel. Regardless of what I do I’m getting inconsistent results, the processes is usually altering the map from my intended render was, and I also question adding additional processes to the render. I work hard to maintain quality before the export. I often work on my maps at double the resolution (when the raw files are available) so that any edits will be less visible when I inevitably downsize the image before exporting.

As a result most of my maps have been submitted in grayscale using the alpha channel for water. This works very well with editing because I’m normally working with crops of land that Im placing on oceans. However I would like to submit the ‘correct’ format if I could without the alpha. Im hesitant on converting the files to color though for the above reasons.

One roadblock I keep encountering is this gradient attached. It would be fine if every pixel below a specific shade was water, but for some unknown reason someone choose to make it go back to grassland?? I never commented about this before, but I really don’t understand why this is the case. The color gradient should be blue from the left side until grassland begins. It would make editing and diagnosing render issues so much clearer to read.