Heart How to Make a Dating Sim (Browser Route Loop 2026)

Konami shipped Tokimeki Memorial in 1994 (verified against en.wikipedia.org/wiki/Dating_sim on 2026-08-12), and every hobbyist who has tried to make one since has bounced off the same wall: writing five branching romance routes is a serious writing project, but the engine that runs them is genuinely small — a scene graph plus one integer per love interest plus a few threshold checks. Most first-time attempts at how to make a dating sim stall not because the code was hard, but because the writing scope collapsed under its own weight. The 2026 pipeline is very different: a coding agent scaffolds the scene-graph loop and the affection-and-threshold gates in one prompt, an image generator fills in the four-expression portrait set per love interest in twenty minutes, and a voice generator layers the confession scene in cents rather than dollars. That means WizardGenie to scaffold the scene graph and the affection variable model, Sorceress AI Image Gen for the character portraits and backgrounds, Speech Gen for voice acting on the confession and ending scenes, and Music Gen for the main theme and route-specific music. This guide is the honest end-to-end for how to make a dating sim in 2026.

What “how to make a dating sim” actually means in 2026

The query “how to make a dating sim” hides three very different requests. Some searchers want a bishoujo-style romance visual novel with three to five love interests, per-character routes, and a good / neutral / bad ending gate on each route (the Tokimeki Memorial and Amagami template). Some searchers want a lighter otome or single-love-interest romance with one main character and a smaller choice layer (the classic English-language indie template). And some searchers want a full life-sim hybrid with time-management, stat-training, and dating events layered on top (the Persona 5 spectrum). This guide targets the classic three-to-five-love-interest template first because it is the most searched shape of the genre, and because the mechanics (scene graph plus affection variables plus threshold gates) are exactly the same in every subgenre — a life-sim just adds a time-management shell around the same core.

Four systems separate a dating sim from a plain visual novel. The love-interest roster is the frontage; three to five romanceable characters, each with a name, a portrait set, and a distinct personality template so choices feel weighted differently per character. The affection variable model is the balance sheet; every love interest gets one integer counter that mutates on player choices — usually by plus or minus one to three points, occasionally by larger swings on route-critical scenes. The scene graph is the story spine; every scene node has a list of choices, and every choice specifies which characters’ affection counters mutate and by how much, plus which scene comes next. The route-unlock gate is the payoff; each love interest has two threshold checks (a good-ending threshold and a neutral-ending threshold) that decide which ending scene the player sees on the final path. Get these four right and the game is a real dating sim on a first pass, even if the writing is only the first draft.

The dating sim game loop in one minute (scene, choice, mutate, branch)

Four moving parts and nothing else, in a strict order per scene. First, render the current scene node: draw the background image for the location, layer the correct character sprites in the correct positions with the correct expression, and print the current line of dialogue in the textbox. Second, present the choice buttons for the current scene — usually two to four choices with short prompts that give the player a hint at the tone of the response rather than a walkthrough-style label. Third, on player click, apply the affection mutations that the chosen option specifies (each choice carries a small dictionary of character-name to delta pairs, so a single choice can nudge one character up and another down at the same time). Fourth, look up the next scene id from the choice’s target field and jump to it — and if the target is a special sentinel like ROUTE_GATE, run the threshold checks against the current affection values and pick the good, neutral, or bad ending scene per love interest before jumping.

That is the entire game. Four steps, driven by a click handler on each choice button, called once per scene rather than once per frame. There is no game loop in the arcade sense — the code sits idle waiting for the player to read and click. Everything else — the main-menu title screen, the character-select portrait grid, the confession-scene voice-over layer, the CG unlock gallery, the save slots via localStorage on the browser Window API, the ending credits — is polish layered on top of these four steps. If you keep the scene graph declarative (the scenes and choices are pure data, not code), you can hand the JSON file to a writing partner who does not code, iterate on the story in a spreadsheet, and re-run the game to test a new draft in seconds.

Pick your engine for how to make a dating sim: vanilla JS, Phaser 4, or WizardGenie

Three good browser targets in 2026, each with a very different trade-off. Vanilla HTML plus CSS plus a small JavaScript scene-graph interpreter is the right pick if you want to understand every line and keep the total build size under 100 KB (before assets). A working dating sim engine is roughly 400 lines of JavaScript: the scene loader (parse the JSON, render background plus portraits plus textbox), the choice handler (mutate affection, look up next scene id), the save system (serialize scene id plus affection plus flags to localStorage), and the ending resolver (run threshold checks and jump to the ending scene). You render layered images with plain <img> tags in absolute-positioned divs, style the textbox with CSS, and handle clicks with a single event listener. Everything is under your control, which matters for a game where the writing is the star and the engine should be invisible.

Phaser 4.2.1 “Giedi” (released 9 July 2026, verified against phaser.io/download/stable on 2026-08-12) is the honest default if you plan to layer any animation on top of the base VN spine — wobbling character sprites on emotional beats, background parallax, cinematic camera zooms, or a Persona-style menu with animated transitions. Phaser ships Scene management, an asset loader, tween animations, and audio playback in one file, roughly 900 KB minified. Its Scene class maps naturally to the dating-sim concept of a scene node, and the tween system makes character portrait swaps feel alive (a small vertical bounce plus a fade is the difference between static and expressive). If you know you want animation from day one, start with Phaser; if you want minimum bytes and maximum control, stay in vanilla.

Ren’Py 8.5.3 “We Can Go to the Moon” (released 15 May 2026, verified against renpy.org/latest.html on 2026-08-12) is the industry standard for VN and dating sim development, and it does have a browser export target through the Renpyweb component. It is a strong pick for a full-length 30-plus-hour multi-route project with Live2D animated portraits and voiced dialogue on every line, because it has a battle-tested script language purpose-built for the genre. For a first browser dating sim in a weekend, it is heavier than what you need: the script language is its own thing to learn and the Python-based build system asks for a separate SDK install. Start browser-native; graduate to Ren’Py when the project outgrows the weekend scope.

WizardGenie is not a separate rendering engine — it scaffolds whichever of the above you pick, from a single natural-language prompt. WizardGenie is the Sorceress game-native coding agent. It ships as both a Windows desktop app (installer with auto-update, available to Early Access supporters and above) and a no-install web build at the same URL, and its coding-model lineup (verified 2026-08-12 in src/app/_home-v2/_data/tools.ts) covers Claude Opus 4.7, Claude Sonnet 4.6, GPT-5.5, Gemini 3.1 Pro, DeepSeek V4 Pro, Kimi K2.5, Grok 4.2, and MiniMax M2.7. For a dating sim with a three-character roster and roughly forty scene nodes, any of the frontier models scaffolds the entire scene-graph interpreter plus the affection variable model plus the localStorage save system in one prompt. If you want to run cheap on a longer session, pair a frontier planner (Claude Opus 4.7 or GPT-5.5) with a budget executor (DeepSeek V4 Pro or Kimi K2.5) — the planner writes the scene JSON schema and the ending threshold table, the executor types the code. That pairing runs at roughly one-fifth the cost of a single-frontier session.

Step 1 — design three to five love interests with affection thresholds and unique endings

Open a fresh document (a spreadsheet, a Notion page, or a plain markdown file) and sketch each love interest as a small character card before you write a line of code or dialogue. A minimum viable card has seven fields: name, age and role (student, coworker, barista), appearance short description (used later as the AI Image Gen prompt seed), personality template (shy scholar, confident rival, chaotic best friend), likes and dislikes (three of each, used to weight the affection mutations on shared choices), good-ending premise (one sentence on what the ending scene depicts), and bad-ending premise (one sentence on what happens if the player mismanages the route). Three to five cards, no more on a first project; every card is roughly a week of scene writing plus a full portrait set.

Now the numbers. Cap the affection counter for each character at a value that matches the number of affection-mutating choices in your scene graph. A first dating sim with roughly 30 to 40 scene nodes and 60 to 80 choices will have 15 to 20 choices per character that mutate that character’s counter. Set the cap at 20, the good-ending threshold at 14 (70 percent of the cap), and the neutral-ending threshold at 6 (30 percent). Anything under 6 falls through to the bad ending. Put all of this in a JSON block and treat it as the balance sheet: {"ryo": {"cap": 20, "good": 14, "neutral": 6}, "mira": {"cap": 20, "good": 12, "neutral": 5}, "kai": {"cap": 20, "good": 10, "neutral": 4}}. When testers complain that Kai is impossible to romance, the fix is a two-integer edit in this table, not a scene rewrite.

One more critical decision: the route-lock scene. Somewhere around the two-thirds mark of the story, the game forks — from that scene onward, the player is locked into the highest-affection character’s route and cannot switch. Position the route-lock so the player has visible warning it is coming (a dialogue line like “this decision will change things”), and confirm the lock decision in the game code with an explicit branch. Optionally add a true ending or harem ending that unlocks only if the player kept every affection counter above the good-ending threshold at the same time — a Tokimeki-style secret route. That single addition raises replayability by an order of magnitude.

Step 2 — write the scene graph with affection mutations per choice

The scene graph is the story. Every scene is a node with an id, a background image, a list of visible characters and their positions, a stack of dialogue lines, a list of choices, and (for choice-terminating scenes) a target scene id per choice. Every choice carries a small dictionary of {characterName: delta} pairs that the game applies to the affection object on click. The full data structure for a single scene node is small enough to fit on a screen:

{
  "id": "cafe_02",
  "background": "cafe_afternoon.webp",
  "cast": [{"name": "mira", "position": "left", "expression": "neutral"}],
  "lines": [
    "You always order the same drink.",
    "Do you like routine, or are you just avoiding a hard question?"
  ],
  "choices": [
    {"label": "I like knowing what to expect.", "affection": {"ryo": 1, "mira": -1}, "next": "cafe_03a"},
    {"label": "I never thought about it.",     "affection": {},                    "next": "cafe_03b"},
    {"label": "Pick something new for me.",    "affection": {"mira": 2, "ryo": -1}, "next": "cafe_03c"}
  ]
}

Notice three things. First, most choices affect more than one character — being nice to Mira is a small negative for Ryo, because they have opposing personality templates. This is the single biggest craft rule of dating sim writing: choices should not read as obviously correct or incorrect on a walkthrough. Second, one choice has no affection effect at all (the deflection option) — leave some choices as pure story colour with no numeric weight, so players do not treat every screen as a math problem. Third, the target scene ids branch based on the choice — sometimes different choices funnel into the same next scene, sometimes they branch. Both patterns are valid.

Open WizardGenie and paste one hand-written scene node in as the seed. Give the agent one paragraph: “Extend this dating sim scene graph. Build the scene-graph interpreter as a small JavaScript module: (1) load a JSON array of scene nodes from a single file, (2) render the current node into a fixed HTML shell with divs for background, character-portrait stack, textbox, and choice-button row, (3) on choice click apply the affection deltas to an in-memory affection object, look up the target scene id, and re-render, (4) support a ROUTE_GATE sentinel that reads the affection object, picks the highest-affection character, and jumps to that character’s good, neutral, or bad ending scene based on the threshold table I paste next, (5) auto-save the current scene id and the affection object to localStorage on every choice click so the player can close the tab and resume.” Feed that to any coding model in the lineup and you get the engine in under three minutes. Then write scene nodes in the JSON file at whatever pace the writing supports.

Step 3 — character portraits with four expressions each, and Speech Gen voice acting

Three character cards plus one scene graph is enough to test the loop with placeholder gray silhouettes, but a dating sim that looks like a dating sim needs three asset packs: portrait sets per love interest, background locations, and audio. Sorceress covers all three in about an hour of hands-on time.

Portraits first. Every love interest needs a portrait set with at least four expressions: neutral, happy, annoyed, and blushing. Optional but strongly recommended: sad, embarrassed, angry, and one route-specific expression for the confession scene. Open AI Image Gen and prompt each character’s neutral portrait first, using the character card’s appearance description as the seed. The default 2K Nano Banana Pro model bills 18 credits per image (verified 2026-08-12 in src/lib/models.ts line 303 as credits: 18). Three characters times four expressions is 12 portraits, so 216 credits total, or about $2.16. When prompting the expression variations, keep the description of the character identical and vary only the expression phrase — that keeps the character on-model across the set. If the character drifts between expressions, feed the neutral portrait back in as a reference image and re-prompt.

Background locations second. A first dating sim needs three to five locations (cafe, school hallway, park at sunset, character bedroom). Same AI Image Gen tool, roughly 18 credits per image at 2K, so 60 to 100 credits total (about $0.60 to $1.00). Backgrounds are cheaper than portraits because you need fewer of them and can reuse each background across multiple scenes.

Audio third. A dating sim can absolutely ship silent and still work, but adding voice on the confession scene is the single change that lifts the emotional payoff from “pleasant” to “memorable”. Open Speech Gen. Speech Gen bills 0.5 credits per 1,000 characters on the HD tier and 0.3 credits per 1,000 characters on the Turbo tier (verified 2026-08-12 in src/app/speech-gen/page.tsx lines 28 and 29 as CREDITS_PER_1K_HD = 0.5 and CREDITS_PER_1K_TURBO = 0.3). A 20-line confession scene averages about 1,500 characters per character voice line, so roughly 30,000 characters total on the HD tier = 15 credits, or about $0.15 per love interest for the confession. Three love interests = about $0.45 for every confession voiced. If you want to voice-clone a friend’s reading of a specific character (with their permission), Speech Gen supports voice cloning at 400 credits per clone (verified same file line 31 as VOICE_CLONE_CREDITS = 400) — a one-time cost. Then every future line in that voice is charged at the standard TTS rate.

Music last. Open Music Gen. Music Gen bills 10 credits per generation (verified 2026-08-12 in src/app/music-gen/page.tsx line 28 as MUSIC_CREDIT_COST = 10). A dating sim benefits from three tracks minimum: a main theme (bittersweet piano, 90 seconds loopable), a lighthearted daily-scene bed (acoustic guitar, 120 seconds), and a route-climax track (strings, emotional, 60 seconds). Two or three generations per track to nail each one, so budget 60 to 90 credits total (about $0.60 to $0.90). Add 2 credits per WAV export (WAV_CREDIT_COST = 2, same file line 31) if you want lossless.

What a how to make a dating sim project costs on Sorceress in 2026

Concrete asset and generation budget for a browser dating sim with a three-character roster, four locations, and voiced confession scenes, from empty repo to zip-and-share playable, all numbers verified 2026-08-12 against local Sorceress source:

• Character portraits (AI Image Gen, Nano Banana Pro 2K): 18 credits per image, 12 images (three characters, four expressions each), so 216 credits ($2.16 USD).
• Background locations (AI Image Gen, Nano Banana Pro 2K): 18 credits per image, 3 to 5 locations, so 54 to 90 credits ($0.54 to $0.90 USD).
• Confession scene voice acting (Speech Gen HD tier): 0.5 credits per 1,000 characters, roughly 30,000 characters across three characters’ confession scenes, so 15 credits ($0.15 USD). Add optional voice cloning at 400 credits per unique voice ($4.00 USD one-time) if you want a specific casting.
• Music (Music Gen): 10 credits per generation, 3 tracks with 2 to 3 tries each, so 60 to 90 credits ($0.60 to $0.90 USD). Add 2 for WAV lossless per track.
• WizardGenie coding time: effectively free on the Sorceress side (bring your own model API key, or use one of the built-in trial-key options for the smaller models). Model-side API cost for a 2-to-3-hour prompt session on a cheap Executor like DeepSeek V4 Pro is typically under $0.50.
• Total for one complete browser dating sim build (three love interests, four locations, voiced confessions, three music tracks): 345 to 411 credits, or roughly $3.45 to $4.11 USD in Sorceress credits, plus under $0.50 in model API time. Under $5 end-to-end for a first playable multi-route dating sim.

Sorceress bills 100 credits per dollar at the standard rate (CREDITS_PER_DOLLAR = 100 in src/lib/models.ts line 69). New accounts start with 100 free credits (SIGNUP_GRANT = 100 in src/app/api/admin/credits/route.ts line 12), which is enough for the music, the voice acting, and the first character’s portrait set with room to spare. The Sorceress Lifetime tier at $49 one-time (LIFETIME_PRICE = 49 in src/app/plans/page.tsx line 51) covers unlimited Music Gen and Speech Gen use, which matters if you plan to make this the first entry in a series (a common progression from a first three-character release is a five-character deluxe edition, then a full life-sim hybrid with a time-management shell). For a single-release build, the free grant plus a small top-up covers everything.

For related browser-VN pipelines that share this scene-graph plus asset-pack spine, the closest reads are Pen How to Make a Visual Novel (Browser Scene Loop 2026) for the same VN spine without the affection-and-thresholds layer, Ink a Visual Novel Maker (Browser AI 2026 Path) for an engine-review-first take on the same genre, Branch an AI Text Adventure (Browser Quest Loop 2026) for a text-first branching-narrative variant, and Compose an AI Character Description Generator (Bio Card) for a character-card generator that pairs perfectly with the love-interest cards from Step 1. The Sorceress Tools Guide is the master index for every tool the guide referenced. Under five dollars, one weekend, and how to make a dating sim is a done deal.