====== FASERIP Online — Game Master & Artist Guide ======

//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.
{{ :projects:screenshot_2026-03-19_134404.png |}}
----

===== Table of Contents =====

  * [[#game-master-overview|Game Master Overview]]
  * [[#accessing-gm-tools|Accessing GM Tools]]
  * [[#creating-npcs|Creating NPCs]]
  * [[#creating-missions|Creating Missions]]
  * [[#mission-design-tips|Mission Design Tips]]
  * [[#zone-reference|Zone Reference]]
  * [[#adding-buildings|Adding Buildings to the City Map]]
  * [[#art-replacement-guide|Art Replacement Guide]]
  * [[#element-pixel-dimensions|Element Pixel Dimensions]]

----

===== Game Master Overview =====

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:

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

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

----

===== Accessing GM Tools =====

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

{{ :faserip:gm_tools_button.png?200 |GM Tools button location — top right of HUD}}

> **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.

----

===== Creating NPCs =====

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.

==== Step by Step ====

  - Open **🎭 GM Tools**
  - Make sure the **Create NPC** tab is active
  - Fill in all fields (described below)
  - Click **Create NPC**

==== NPC Fields ====

^ Field ^ Description ^ Notes ^
| **NPC Name** | The character's name as it appears in-game | Keep it memorable. E.g. "Doctor Vex", "Street Thug" |
| **Description** | Background, appearance, motivation | Players may see this when they investigate a building |
| **Fighting** | Combat skill and martial ability | Controls hit chance in melee |
| **Agility** | Speed, reflexes, acrobatics | Affects dodge and initiative |
| **Strength** | Physical power | Determines melee damage and lifting |
| **Endurance** | Stamina and toughness | Used to calculate max Health |
| **Reason** | Intelligence, problem solving | Affects tactical decisions |
| **Intuition** | Awareness, initiative | **Higher = acts earlier in combat** |
| **Psyche** | Mental fortitude, willpower | Resistance to mental powers |
| **Villain/Enemy** | Checked = hostile to players | Uncheck for allies and neutrals |
| **Zone** | Which city district the NPC appears in | Must match a zone players can visit |

==== FASERIP Rank Quick Reference ====

^ Rank # ^ Name ^ Numeric Value ^ Suggested Use ^
| 1 | Feeble | 2 | Civilians, minions |
| 2 | Poor | 4 | Street level thugs |
| 3 | Typical | 6 | Average trained criminal |
| 4 | Good | 10 | Experienced street villain |
| 5 | Excellent | 20 | Minor supervillain |
| 6 | Remarkable | 30 | Serious threat |
| 7 | Incredible | 40 | Major villain |
| 8 | Amazing | 50 | Boss-level threat |
| 9 | Monstrous | 75 | Top tier villain |
| 10 | Unearthly | 100 | Near-cosmic power |

==== Example NPC — Street Thug ====

<code>
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
</code>

==== Example NPC — Doctor Vex ====

<code>
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
</code>

==== Health & Karma Calculation ====

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**//

----

===== Creating Missions =====

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

==== Step by Step ====

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

==== Mission Fields ====

^ Field ^ Description ^ Notes ^
| **Mission Title** | Short, punchy name | E.g. "Trouble at the Docks", "The Vex Gambit" |
| **Description** | Full mission briefing | This is what players read. Set the scene! |
| **Zone** | Which district the mission takes place in | Players must be in this zone to see it |
| **Difficulty** | 1 (Easy) to 5 (Extreme) | See difficulty guide below |
| **Objectives** | One objective per line | Each line becomes a checklist item |
| **Experience Reward** | XP awarded on completion | See XP guide below |

==== Difficulty Guide ====

^ Difficulty ^ Stars ^ Recommended For ^ Suggested NPC Ranks ^
| 1 | ⭐ | Brand new heroes, solo play | Feeble to Poor |
| 2 | ⭐⭐ | New heroes with some experience | Poor to Typical |
| 3 | ⭐⭐⭐ | Experienced heroes or small groups | Good to Excellent |
| 4 | ⭐⭐⭐⭐ | Veteran heroes, team recommended | Remarkable to Incredible |
| 5 | ⭐⭐⭐⭐⭐ | Elite heroes only, major story event | Amazing and above |

==== Experience Reward Guide ====

^ Difficulty ^ Suggested XP ^ Notes ^
| 1 — Easy | 50–100 | Introductory missions |
| 2 — Moderate | 100–200 | Standard missions |
| 3 — Challenging | 200–350 | Requires effort |
| 4 — Hard | 350–500 | Significant challenge |
| 5 — Extreme | 500–1000 | Reserved for major story events |

==== Writing Good Objectives ====

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

**Good objectives:**
<code>
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
</code>

**Avoid vague objectives:**
<code>
Do stuff at the factory     ← too vague
Win                         ← meaningless
</code>

==== Example Mission — Difficulty 2 ====

<code>
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
</code>

==== Example Mission — Difficulty 4 ====

<code>
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
</code>

----

===== Mission Design Tips =====

  * **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.

----

===== Zone Reference =====

^ Zone ID ^ Display Name ^ Tone ^ Best Mission Types ^
| central_city | Central City | Civic, high-profile | Bank robberies, political threats, public events |
| warehouse_district | Warehouse District | Gritty, criminal | Smuggling, gang wars, hideout raids |
| downtown | Downtown | Urban, civilian-heavy | Shopping mall heists, hostage situations |
| industrial_zone | Industrial Zone | Dangerous, technical | Factory sabotage, chemical threats, robots |
| waterfront | Waterfront | Noir, smuggling | Drug/weapons smuggling, piracy, dock raids |

**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.

----

===== Adding Buildings to the City Map =====

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:

**[[faserip:buildings|→ Adding & Configuring City Buildings]]**

==== Quick Reference ====

Each building entry looks like this:

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

^ Field ^ Description ^
| ''id'' | Unique identifier — no spaces, use hyphens. Must be unique across ALL zones |
| ''name'' | Display name shown on hover and in the location panel |
| ''type'' | Controls description text shown to players. See type list on the buildings page |
| ''x'' | Horizontal position in pixels from the left edge of the map canvas |
| ''y'' | Vertical position from the top. The horizontal road sits at y:220, vertical road at x:430 |
| ''icon'' | Any emoji — will be replaced by original art later |
| ''height'' | Building height in pixels. Range 60–240 works well |
| ''color'' | Hex color for the building face. Dark tones read best on the night-sky background |

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.

----

===== Art Replacement Guide =====

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.

==== General Principles ====

  * 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

----

===== Element Pixel Dimensions =====

==== 1. Building Icons ====

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

^ Element ^ Recommended Size ^ Format ^ Notes ^
| Building icon | **96 × 96 px** (display: ~40px) | PNG, transparent | One icon per building type. See type list below. |
| Building icon @2x | **192 × 192 px** | PNG, transparent | For retina displays |

**Building types needing icons:**
<code>
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)
</code>

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''.

----

==== 2. Building Facade Texture ====

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

^ Element ^ Recommended Size ^ Format ^ Notes ^
| Building facade tile | **130 × 200 px** | PNG or JPEG | Tiled vertically for taller buildings |
| Window sprite sheet | **80 × 60 px** (4 frames) | PNG, transparent | Rows: lit / dim / off / flickering |

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**).

----

==== 3. Player Character Avatars ====

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

^ Element ^ Recommended Size ^ Format ^ Notes ^
| Hero avatar (standing) | **44 × 44 px** | PNG, transparent | Base display size on map |
| Hero avatar @2x | **88 × 88 px** | PNG, transparent | Recommended source size |
| Hero avatar (walking, 4 frames) | **88 × 88 px per frame** | PNG spritesheet | Future animation — 4 frames horizontal |
| Other player avatar | **44 × 44 px** | PNG, transparent | Slightly different pose/colour from self |

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.

----

==== 4. Mini-Map Building Dots ====

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

^ Element ^ Recommended Size ^ Format ^ Notes ^
| Mini-map building icon | **14 × 14 px** | PNG, transparent | Tiny silhouette, one per building type |
| Mini-map player dot | **8 × 8 px** | PNG or CSS circle | Green for self, blue for others |

----

==== 5. HUD Elements ====

^ Element ^ Recommended Size ^ Format ^ Notes ^
| Health bar fill texture | **1 × 18 px** (tiled) | PNG | Tiled horizontally, replaces CSS gradient |
| Karma bar fill texture | **1 × 18 px** (tiled) | PNG | Tiled horizontally |
| HUD background panel | **full width × 80 px** | PNG or SVG | Replaces CSS gradient header |
| Zone name banner | **300 × 36 px** | PNG, transparent | Replaces text-only zone label |

----

==== 6. Street / Road Textures ====

Roads are currently CSS-drawn rectangles with dashed lines.

^ Element ^ Recommended Size ^ Format ^ Notes ^
| Road horizontal tile | **60 × 38 px** | PNG | Tiled horizontally across full width |
| Road vertical tile | **38 × 60 px** | PNG | Tiled vertically |
| Intersection tile | **38 × 38 px** | PNG | Placed at road crossing point |
| Road marking (dash) | **30 × 3 px** | PNG, transparent | Centre line dash |

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

----

==== 7. Background / City Atmosphere ====

^ Element ^ Recommended Size ^ Format ^ Notes ^
| City sky background | **1920 × 520 px** | JPEG or PNG | Dark night city skyline, parallax layer |
| Ground tile | **40 × 40 px** | PNG | Repeating city ground texture |
| Atmospheric overlay | **1920 × 520 px** | PNG, 30% opacity | Fog, smog, or comic halftone effect |

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.

----

==== 8. UI Panels & Modals ====

^ Element ^ Recommended Size ^ Format ^ Notes ^
| Location panel background | **310 × auto px** | PNG, 9-slice or scalable | Replaces dark gradient box |
| Modal background | **620 × auto px** | PNG, 9-slice | Comic book panel border style recommended |
| Button normal state | **200 × 50 px** | PNG, 9-slice | Replaces CSS gradient button |
| Button hover state | **200 × 50 px** | PNG, 9-slice | Brighter or shifted version |
| Activity log panel | **300 × full height px** | PNG, tiled vertically | Dark sidebar |

----

==== 9. Zone Map Thumbnail (future) ====

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

^ Element ^ Recommended Size ^ Format ^ Notes ^
| Zone thumbnail | **400 × 250 px** | JPEG | Bird's eye illustration of the zone |
| Zone thumbnail hover | **400 × 250 px** | JPEG | Brighter/highlighted version |

----

==== Replacing Elements — General Process ====

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

==== Folder Structure Recommendation ====

<code>
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)
</code>

----

===== Notes for Future Development =====

  * 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.//