Last updated: February 2026 — v1.0

This page covers everything a Game Master needs to run the game, how to build missions, and a complete guide for artists replacing placeholder graphics with original artwork.

• Game Master Overview
• Accessing GM Tools
• Creating NPCs
• Creating Missions
• Mission Design Tips
• Zone Reference
• Adding Buildings to the City Map
• Art Replacement Guide
• Element Pixel Dimensions

The Game Master (GM) controls the world that players explore. As GM you are responsible for:

• Populating zones with NPCs (villains, allies, neutrals)
• Writing and publishing missions for players to undertake
• Balancing difficulty so both new and experienced heroes are challenged
• Advancing the story of the city over time

There is currently one GM account per server. The GM flag is set directly in the database:

sqlite3 /var/www/html/amigaz/games/faserip/superhero_mmo.db \
  "UPDATE users SET is_gm = 1 WHERE username = 'yourusername';"

Log out and back in after running that command. The 🎭 GM Tools button will appear in the top-right of the game HUD.

1. Log in with your GM account
2. Create or select a character (you still need one to enter the game world)
3. Once on the city map, click 🎭 GM Tools in the HUD
4. A modal window opens with two tabs: Create NPC and Create Mission

Tip: You can have the GM Tools modal open while watching the live map. Other players' movements are visible in real time behind the modal.

NPCs (Non-Player Characters) are the villains, allies, and bystanders that populate the city. Every NPC has a full set of FASERIP stats just like a player character.

1. Open 🎭 GM Tools
2. Make sure the Create NPC tab is active
3. Fill in all fields (described below)
4. Click Create NPC

Name:        Street Thug
Description: Low-level criminal. Works for hire. Not bright, but dangerous in numbers.
Fighting:    Poor (2)
Agility:     Typical (3)
Strength:    Typical (3)
Endurance:   Typical (3)
Reason:      Poor (2)
Intuition:   Typical (3)
Psyche:      Poor (2)
Villain:     Yes
Zone:        Warehouse District

Name:        Doctor Vex
Description: Disgraced chemist turned supervillain. Controls molecular bonds.
             Wears a silver containment suit. Ruthless and calculating.
Fighting:    Good (4)
Agility:     Excellent (5)
Strength:    Good (4)
Endurance:   Remarkable (6)
Reason:      Incredible (7)
Intuition:   Excellent (5)
Psyche:      Remarkable (6)
Villain:     Yes
Zone:        Industrial Zone

These are calculated automatically when you save the NPC, but here is the formula for planning:

• Health = Strength value + Endurance value
• Karma = Reason value + Intuition value + Psyche value

Example: Doctor Vex has Strength Good (10) + Endurance Remarkable (30) = 40 Health

Missions give players goals to pursue in the city. A good mission tells a story, creates tension, and rewards effort.

1. Open 🎭 GM Tools
2. Click the Create Mission tab
3. Fill in all fields (described below)
4. Click Create Mission
5. The mission will immediately appear for players in the chosen zone when they click on buildings or open the Missions panel

Objectives should be specific and actionable. Write one per line in the Objectives field.

Good objectives:

Locate the source of the chemical leak
Defeat the security robots guarding the lab
Find and recover the stolen isotope container
Escape before the building detonates

Avoid vague objectives:

Do stuff at the factory     ← too vague
Win                         ← meaningless

Title:       Trouble at the Docks
Zone:        Waterfront
Difficulty:  2

Description:
  An anonymous tip-off warns of a late-night cargo delivery that isn't
  on any manifest. Coast Guard is stretched thin. It's up to you.
  Dock workers have been acting scared. Something is wrong down there.

Objectives:
  Investigate the suspicious warehouse on Pier 7
  Interrogate the dock foreman
  Defeat the smuggling crew (3–5 thugs)
  Recover the stolen medical supplies

XP Reward:   150

Title:       The Vex Gambit
Zone:        Industrial Zone
Difficulty:  4

Description:
  Doctor Vex has seized control of the Northside Power Station.
  He's threatening to destabilize the city grid unless his demands
  are met. SWAT is pinned down at the perimeter. You're going in.
  Watch out — he's built defensive turrets and has hired backup.

Objectives:
  Breach the power station perimeter
  Neutralize Doctor Vex's mercenary guards
  Shut down the molecular destabilizer (Reason FEAT required)
  Defeat Doctor Vex
  Restore power to the grid before the backup timer expires

XP Reward:   450

• Layer your objectives. Mix combat (defeat enemies), exploration (find X), and skill-based tasks (Reason FEAT to hack terminal) for variety.
• Match NPCs to the zone. Waterfront missions should have dock workers and smugglers. Industrial missions should have mercenaries and robots.
• Use the description to set tone. Players read this before they accept. Make it feel urgent and interesting.
• Escalate across a series. Start players with Difficulty 1–2 missions and build toward a Difficulty 5 story event.
• Leave hooks. End descriptions with an unanswered question to encourage follow-up missions. “…but who hired them?”
• Reward exploration. Create missions in every zone so players have reason to travel.

Buildings available per zone are defined in game.js inside the CITY_BUILDINGS object. Each building has an id, name, type, x/y position, icon, and color. New buildings can be added there by editing the array.

Buildings are defined entirely in game.js — no database or server restart required. You can add as many as you like to any zone by editing the CITY_BUILDINGS object. See the standalone reference page for full details:

→ Adding & Configuring City Buildings

Each building entry looks like this:

{ id: 'my-building', name: 'My Building', type: 'warehouse',
  x: 200, y: 150, icon: '🏗️', height: 120, color: '#3a2a1a' }

The map canvas is 900 × 520 px. Buildings are 130 px wide and labels extend 30 px below the base. After editing, just refresh the browser — no server restart needed.

The current game uses emoji and CSS-generated shapes as placeholder art. All of these are designed to be swapped out for original artwork at any time. This section tells artists exactly what to create and at what size.

• All images should be PNG format with transparent backgrounds unless noted
• Use pixel art or comic book illustration style to match the game aesthetic
• The game uses a dark color palette — art should be designed to read well on dark backgrounds
• Retina/2x versions are recommended — create at 2× size and let CSS scale down

Each building currently shows a large emoji (🏦 🏭 ⚓ etc.) centred on the building face.

Building types needing icons:

government    (City Hall)
bank          (Central Bank)
police        (Police HQ)
hospital      (City Hospital)
plaza         (Central Plaza)
residential   (Apartments, towers)
media         (News station)
education     (Library)
warehouse     (Storage buildings)
criminal      (Chop shop, hideout)
villain-lair  (Evil lair — make it look ominous!)
transport     (Rail yard, docks)
factory       (Industrial buildings)
utility       (Power station)
science       (Research lab)
underground   (Sewer access)
junkyard      (Scrapyard)
market        (Fish market, shops)
restaurant    (Dining)
office        (Corporate towers)
hotel         (Grand Hotel)
sports        (Stadium)
museum        (City Museum)
docks         (Shipping)
landmark      (Lighthouse)

To swap an icon, in game.js find the building entry and change the icon field from an emoji to an image tag, then update createBuildingEl() to render <img> instead of textContent.

The building face (the main rectangle) is currently a CSS gradient. It can be replaced with a tiled or stretched texture image.

Each building's facade is rendered at 130 px wide and a variable height defined by the height property in CITY_BUILDINGS (range: 60 px – 240 px).

Heroes currently display as the 🦸 emoji. These will be replaced with actual character sprites.

Avatar colors should distinguish your hero (warm/gold tones) from other players (cool/blue tones) at a glance.

To replace avatars, in game.js find createAvatarEl() and change the el.textContent line to set el.innerHTML with an <img> tag instead.

The mini-map shows tiny colored rectangles for each building. These can be replaced with small icon sprites.

Roads are currently CSS-drawn rectangles with dashed lines.

Roads are rendered inside drawStreets() in game.js. Replace the div background styles with background-image CSS pointing to your texture files.

The city map background is set via CSS on .city-map-container. Replace the current background gradient lines with background-image: url(…) for your artwork.

When zone travel is implemented as a full visual screen, each zone will need a preview image.

1. Create your artwork at the recommended size
2. Upload to /var/www/html/amigaz/games/faserip/public/images/ (create this folder if it doesn't exist)
3. Edit styles.css to reference the image file instead of the CSS color/gradient
4. Edit game.js for any elements generated in JavaScript (avatars, building icons, etc.)
5. Clear browser cache and test (Ctrl+Shift+R)

public/
  images/
    buildings/
      bank.png
      police.png
      hospital.png
      villain-lair.png
      ... (one per building type)
    avatars/
      hero-self.png
      hero-other.png
    ui/
      hud-bg.png
      location-panel-bg.png
      modal-bg.png
      btn-normal.png
      btn-hover.png
    map/
      road-h.png
      road-v.png
      intersection.png
      city-sky.png
      ground-tile.png
    icons/
      minimap-bank.png
      minimap-police.png
      ... (one per building type)

• When the Ultimate Powers Book integration is added, each power will need a 32 × 32 px icon sprite
• Combat will eventually need hit effect sprites (explosion, zap, etc.) — plan for 64 × 64 px animated PNG or spritesheet
• Character creation will add a costume builder — plan for modular body part sprites at 200 × 300 px per part
• The city will eventually support building interiors — each interior will need a background scene at 900 × 520 px
• Make battles feel like JRPG style

FASERIP Online is a fan project. Marvel Superheroes and the FASERIP system are the property of their respective copyright holders. All original code and art in this project are independent works.