On the Fly Battle Maps Instructional Guide

Index > Guides > General Guides

Be sure to read and follow the guidelines for our forums.

Eyes

Feb 14, 2025 8:59 pm
Feb 14, 2025 8:59 pm
On the Fly Battle Maps Instructional Guide
Are you ready to take your campaign to the next level by incorporating maps? Look no further. These custom tutorials are designed to simplify the map-making process for beginners and gradually guide you through more complex aspects. Whether you're a novice or seeking advanced techniques, these tutorials will provide the guidance and expertise you need to create stunning, immersive maps.

Adam has written a section in the Guide to Gamers' Plane BBCode for maps which contains an abbreviated version of this here. {I will copy bits from it later in this guide)

Qralloq has created a video tutorial with some of this information as well, available here.

OtFBM No longer supports images from Imgur.com. I use photouploads.com.
Photouploads offers BBcode links and thumbnails, if you need small pictures.

Links to Topics

Creating an OtFBM with a Background Image

Getting and Using Custom Player Tokens

Sizes and Color Codes

Using Comment Tags in the Map Code

Underlays and Overlays

Shaped Underlays and Overlays

Adding gif Effects Over Your Map

Offsets: Aligning Background Image Grid to OtFBM Grid

Add Objects to your Map

Fog of War



Updates to come

• This is all I know of so far but if you have any items you need to learn how to do, please dm me.
Last edited February 21, 2025 4:22 pm

Eyes

Feb 15, 2025 4:26 pm
Feb 15, 2025 4:26 pm
On the Fly Battle Maps User Guide (with examples)
Creating an OtFBM with a Background Image
The initial step is to create a map. While it is possible to design a map without a background by simply omitting one, we will begin by utilizing a method that has proven effective based on expert recommendations. Special thanks to @Adam and @runekyndig for their invaluable advice; I anticipate seeking their guidance again in the future.

Firstly, create a map.

From the game thread, click on the "Add Picture" icon, and you will see the OtFBM icon. Click on it. https://img.photouploads.com/file/PhotoUploads-com/SUUo.th.png

You will get this:

[map]
https://otfbm.io

--Map size, cell size, and panning
/26x14/@c60/b5:10x6

--Tokens
/f7-Alice
/h8-Bob

--Background image
?bg=https://i.imgur.com/jIpAjkT.jpg
[/map]


If you click and post this, you will see the broken picture image because OtFBM no longer supports images from Imgur.

In the next post, we will start by making a basic map without an image.
Last edited February 21, 2025 12:05 pm

Eyes

Feb 15, 2025 5:11 pm
Feb 15, 2025 5:11 pm
Add to Your Campaign with On the Fly Battle Maps
Creating an OtFBM with a Background Image cont.
From here on, I'll use a spoiler and the code tag to show the code used in each section

two dashes are used to make a any line of code into a comment line.
-- this is a comment line

Here is a map with nothing in it. it will be 10 squares wide and high (/10x10) and the cells will be 20 pixels square (/@c20)
[ +- ] Code
Last edited February 21, 2025 12:07 pm

Eyes

Feb 15, 2025 5:27 pm
Feb 15, 2025 5:27 pm
Add to Your Campaign with On the Fly Battle Maps
Creating an OtFBM with a Background Image cont.
Now Lets add a couple of tokens using the same map.

to make a token, start with a slash and the map coordinates /B2 , then add a color I'll use b for blue and r for red, then add a dash and give it a name.
Examples:
/B2b-Bob
/D2r-Barb
[ +- ] Code
Last edited February 21, 2025 12:07 pm

Eyes

Feb 15, 2025 5:48 pm
Feb 15, 2025 5:48 pm
Add to Your Campaign with On the Fly Battle Maps
Creating an OtFBM with a Background Image cont.
So what fun is a map without background images.

Imgur isn't supported by OtFBM anymore because of some legaleese stuff.

My favorite working image sharing service is photouploads.com they offer BBcode links and thumbnails, if you need small pictures.

I'll be using Maps available from OtFBM's website. They are on the OtFBM sheet available to add to you campaign.

So Lets add an Image. You can find maps in places like pinterest or reddit if you want.
I'll be using Maps available from OtFBM's website. They are on the OtFBM sheet available to add to you campaign.
To add the sheet to your game, please refer to this thread.

So assuming you don't know anything about the image size, etc. create your map with grid size 99x99 and cell size 40.
(Info for later: I know Cell size 40 shows images in the tokens)

The map begins with ?bg= then the web address of the image, it must end in .jpg, .jpeg. png or .gif or it won't work.
[ +- ] Code
[ +- ] That's big
That is way too big.

Let's resize the map to fit the image it's 39 squares wide by 21 high. I'll also add the tokens back in
[ +- ] Code
Last edited February 21, 2025 12:08 pm

Eyes

Feb 15, 2025 6:33 pm
Feb 15, 2025 6:33 pm
Add to Your Campaign with On the Fly Battle Maps
Creating an OtFBM with a Background Image cont.
Zooming in on what you want to see.

That map was better but Bob and Barb are small enough that we'd like to see them better.
Lets not change the grid or cell size and just view the area we want.
In this case we will set the viewable area to /A1:J5. (a1 is the top left cell and J5 is the bottom right)
You will see it zooms into that area and Bob and Bard are much larger even though the cell size didn't change.
You can also pan around the map by changing the top left and bottom right coordinates. (Example: /J15:R25)
[ +- ] Code

Return to top
Last edited February 21, 2025 12:08 pm

Eyes

Feb 15, 2025 6:36 pm
Feb 15, 2025 6:36 pm
Add to Your Campaign with On the Fly Battle Maps
Getting and Using Custom Player Tokens
Now we're going to add tokens with pictures.

There are a bunch of tokens available in the OtFBM sheet you can add to your game.

You can also generate your own, there are a few ways to do it, I'm going to show you how I do it.
[ +- ] Adam's guide to Generating tokens using the OtFBM gm sheet
But you probably want your token to be of your actual players don't you?
So, go to one of their posts and right click the image then click on "copy image address."
https://img.photouploads.com/file/PhotoUploads-com/SUUK.th.png
paste that into the OtFBM sheet and click get token
https://img.photouploads.com/file/PhotoUploads-com/SUUV.md.png
A new window will open with the token code
https://i.imgur.com/gMnx0WM.png
wx786

Now we can use it.
Last edited February 21, 2025 12:11 pm

Eyes

Feb 15, 2025 8:54 pm
Feb 15, 2025 8:54 pm
Add to Your Campaign with On the Fly Battle Maps
Getting and Using Custom Player Tokens cont.
Lets Place the token at B4 and name it Greg So it's /b4-Greg then add the token with a ~ in front /b4-Greg~wx786
[ +- ] Code


Now remember what I said about size of the cell so the picture shows? Lets try it with the cell size set to 20 using the full map. I did not set the color of the token so it shows up black. I'll add another one and give it the color blue so it'll be /B4b-Greg~wx786. color code goes right after the location B6 in this case.
[ +- ] Code


So what if it's a small, large, or bigger creature?Return to top
Last edited February 21, 2025 12:12 pm

Eyes

Feb 15, 2025 9:11 pm
Feb 15, 2025 9:11 pm
Add to Your Campaign with On the Fly Battle Maps
Size and Color Codes
Token color and size
ColorCodealtalt
White w
Black bk k
Gray gy e a
Red r
Green g
Blue b
Yellow y
Purple p
Cyan c
Brown bn n
Orange o
Pink pk


ColorHex Code
Fluorescent Orange #FFBF00
Fluorescent Green #39FF14
Fluorescent Yellow #CCFF00
Red #FF0000
Blue #0000FF
Green #008000
Yellow #FFFF00
Purple #800080
Orange #FFA500
Pink #FFC0CB
Brown #A52A2A
Gray #808080
SizeCodeDescription
TinyTUp to 4 Tiny creatures can fit in a 5 ft square.
SmallSOccupies a 5 ft square.
MediumMOccupies a 5 ft square. Default size.
LargeLOccupies a 10x10 ft square, location at C3
HugeHOccupies a 15x15 ft square, location at B2
GargantuanGOccupies a 20x20 ft square, location at A1
•Token format: Code is not Case sEnsEtIvE (not case sensitive)
•If a color is selected with a token code, the color will display if the cell size (like @c20) is too small for the picture.

LocationSizeColornameToken code Complete code
/J2Lb/j2lb
/j2lb-Bob
/A1Lb-Giant Octopus~5wwub/A1L-Giant Octopus~5wwub
/B5l~FFBF00-FO/B5l~FFBF00-FO
[ +- ] Code

Return to top
Last edited February 21, 2025 12:16 pm

Eyes

Feb 15, 2025 10:00 pm
Feb 15, 2025 10:00 pm
Add to Your Campaign with On the Fly Battle Maps
Using Comment Tags in the Map Code
By placing two dashes at the start of any line of map code, you transform that code line into a comment line.
You can use this for notes or to remove tokens from view

example:
--Note-Fluorescent orange token being hidden
--/B5l~FFBF00-FO

Now see it in the code

[map]
https://otfbm.io

--/Map size / cell size / Pan and zoom
/39x21/@c40/A1:P8

--Tokens
/B2tb-a
/B2ty-b
/B2tr-c
/B2tg-d
/C2sb-Sm
/D2mr-Med
/E2lk-Large
/G2hbn-Huge
/J2ga-Gargantuan

--Fluorescent orange token being hidden
--/B5l~FFBF00-FO

--Background image
?bg=https://raw.githubusercontent.com/otfbm/img/refs/heads/main/tiles.jpeg
[/map]


Here is the Map.


Return to top
Last edited February 21, 2025 12:24 pm

Eyes

Feb 15, 2025 10:35 pm
Feb 15, 2025 10:35 pm
Add to Your Campaign with On the Fly Battle Maps
Underlays and Overlays

So, let's pretend you have a wizard cast a fireball and you want to know who in the party he killed.

Well, here's a way to find out and show everyone. Let's create an underlay and an overlay.


shapeover/undercenter onsizecolorlocationcompleted code
Circular*c =overlay30=30ft radius centered on cell r=colordq3=location (centers on the center of the cell location)/*c30rl7
Circle Underlay*uc=underlay o=center on bottom rt corner for large icon10=10ftb=colord10=location/*uco10bd10
[ +- ] Code


*No actual cats were harmed in this simulation
Return to top
Last edited February 21, 2025 12:29 pm

Eyes

Feb 17, 2025 12:45 am
Feb 17, 2025 12:45 am
Add to Your Campaign with On the Fly Battle Maps
Shaped Underlays and Overlays
Here's the same thing but with different shapes
shapeover/undercenter onsizecolorlocationcomplete code
Circle/*c =overlay30=30ft radius{blank = centered on cell)r=reddq3=location /*c30rl7
Circle/*uc=underlayo=center on bottom rt corner for large icon10=10ftb=blued10=location /*uco10bd10
Arrow/*aR=redStart cell A1   End cell G4 /*aRa1g4
Cone/*tLength=30r=redStart cell L10 direction P10/*t30rL10P10
Line/*LLength=30, Width=5o=orangeStart L17 direction M17/*L30,5oL17M17
Square/*s30=30 sqftp=purpleStart X10 direction Y11/*s30px10y11
[ +- ] Code

Return to top
Last edited February 21, 2025 12:30 pm

Eyes

Feb 17, 2025 8:07 pm
Feb 17, 2025 8:07 pm
Add to Your Campaign with On the Fly Battle Maps
Adding gif Effects Over Your Map
Adding custom effects like fog or flames over your maps


[ +- ] Code - open brackets removed for text wrapping to work


[ +- ] Code - open brackets removed for text wrapping to work
There is a bunch of coding here that just has to be, explaining it will probably be a waste of time if you're like me because all we really care about is the "how to" fix it part. I'll add a spoiler at the end to explain it all for the coders among us.

Outer f tag

The Outer f tag sets things up for the gif overlay to work, don't change anything

[f=position:relative display:block]( all the map and inner f tag stuff)[/f]


Inner f tag
the Inner f tag puts a second image usually an animated gif on top of the map and sets up it's size and position.

Code: with open brackets removed for word wrapping

f="position:absolute;display:block;top:.5em;bottom:.5em;left:0;right:0;background-image:url(https://i.imgur.com/FVjE590.gif);background-position-x:center;background-size:cover;background-repeat:no-repeat;mix-blend-mode:screen;pointer-events:none;opacity:.6"]/f]


What we adjust:

;top:.5em;bottom:.5em;left:0;right:0; <-- this sets the margins for the Gif.
(an em is based on the normal text size being used = it's usually 12 pixels high)

opacity:.6" <-- This sets the opacity of the gif to 60%, making it see through.

What changed from the top one to the bottom one?

If you'll notice, in the top image, the fog goes too high and it's really thick

I changed the (top:.5em;bottom:.5em;left:0;right:0;) to (top:2em;bottom:1.5em;left:0;right:0;).

That made the top of the gif lower and the bottom of the gif higher so it stayed inside the map.

Then I changed the (opacity:.6) to (opacity:.25)

That made the gif more transparent or the fog less thick so I could see the map better.
[ +- ] All the code mumbo jumbo
Return to top
Last edited February 21, 2025 12:32 pm

Eyes

Feb 17, 2025 11:20 pm
Feb 17, 2025 11:20 pm
Add to Your Campaign with On the Fly Battle Maps
Offsets: Aligning Background Image Grid to OtFBM Grid

Ok now for what I consider the hardest thing to do.
We're going to try and get a map that has grid lines on it to match with OtFBM.
(Disclaimer: I picked a map I knew I could adjust and get close.)

Okay, so here's the thing. maps you find on the net might already have lines on them. If they do and you leave the lines from OtFBM on then they might not look good or you might not get to put your tokens where you actually want them.

The first thing to know is that you can turn off the lines.
Instead of starting your map with
--Map size, cell size, and panning
/82x44/@c40/A1:cd44

Start it with

--Map size, cell size, and panning
/82x44/@n40/A1:cd44

Simply changing the c to an n turns the lines off.


I've already found the size of this map with size /@c40 cells it's /22x30 I'll set panning to A1:o10 to zoom in a bit

[ +- ] Code
Click on the picture and a new tab or window will open with a zoomed in view.
At A1 it looks like it might be set correctly but at K10 its really off.

This is actually pretty close.
The first thing I'm going to do is work on the height of cells by changing my cell size so that the grid on the image is about the same size as the OtFBM grid.

I'll try 42, then preview it and make changes from there.
Looks like 41 is really close. but now lets look in the middle of the map by removing the pan and zoom setting
Great my map is now /21x29/@c41

[ +- ] Code
This is close enough that I'd use it; but, it's time to teach you about map offsets.
Last edited February 21, 2025 12:37 pm

Eyes

Feb 18, 2025 4:21 am
Feb 18, 2025 4:21 am
Add to Your Campaign with On the Fly Battle Maps
Offsets: Aligning Background Image Grid to OtFBM Grid cont.
If your map background does not start at the top left corner of the image, you can offset it with map option o for offset

/@o3:2
in this code the map will move 3 pixels to the right and 2 pixels down.
It is currently not possible to use negative numbers to go left and up.

using the above map again I'll shift it 0 pixels right aand 1 pixel up

[ +- ] Code
Well that looks great up top but gets worse on the way down. So it's your choice, Keep it this way or go back to the original.

Personally I would go back to the original and turn off the gridlines in OtFBM
[ +- ] Map without OtFBM gridlines
[ +- ] Code
Return to top
Last edited February 21, 2025 12:37 pm

Eyes

Feb 21, 2025 11:52 am
Feb 21, 2025 11:52 am
Add to Your Campaign with On the Fly Battle Maps
Objects for Maps
Complete list of objects that can be added to maps
NameCode
1Brick Wall/a1$bw
2Chest/a1$es
3Chair/a1$ch
4Column/a1$co
5Covered Pit/a1$pc
6Crowd/a1$ow
7Crystals/a1$cr
8Explosion/a1$ex
9Fire/a1$fi
10Gargoyle Statue/a1$gs
11Ladder/a1$la
12Lightning/a1$li
13Magic Portal/a1$mp
14Net/a1$ne
15Open Pit/a1$po
16Palisade/a1$pa
17Person/a1$pe
18Pillar Round/a1$pr
19Pillar Square/a1$ps
20Puddle/a1$pu
21Secret Door/a1$sd
22Spiked Pit/a1$sp
23Spiked Trunk/a1$un
24Stairs/a1$st
25Statue Star/a1$ss
26Stone Throne/a1$th
27Table/a1$ta
28Thorns/a1$or
29Trap/a1$tr
30Trip Wire/a1$tw
31Web/a1$we
32Wind/a1$wn
•Scale Objects
Add from - to Coordinates
example: Web|/a1B2$we
https://i.imgur.com/sViWSso.png
•Rotate Objects
Change from to location
example| Web rotated | /a2b1$we
https://i.imgur.com/JzJYPk0.png
•Color Objects
Add color code after location(s)
example| Web Red | /a1b2r$we or a1~ff0000$we
https://i.imgur.com/IaNPiRW.png
•Object Layer
Objects will always appear under tokens
https://i.imgur.com/w1evZwk.png
Return to top
Last edited February 21, 2025 12:03 pm

Eyes

Feb 21, 2025 12:42 pm
Feb 21, 2025 12:42 pm
On the Fly Battle Maps Instructional Guide
Fog of War

Note - Fog of war will only be active if there is a background image loaded.

I've used the fog of war in games and it can become somewhat labor intensive.
But, Here's how you do it:

Fog of war /*f + the coordinates you want to see
Examples:

/*fc1
will show only what is in location c1

/*fA3D3
will clear fog in a line from A3 to D3
[ +- ] Code



You can also set the transparency of the fog from 1 to 99 if you want them to see a hint of the map or if you need to see which cells to clear
Transparency 0-99
/@w50

This is when I really like using dark mode /@d so the map is dark instead of a big white block
[ +- ] Code

Return to top
Last edited February 21, 2025 4:20 pm
Mark as unread
Index > Guides > General Guides

You do not have permission to post in this thread.