Setting Up Your Coding Environment

This guide covers how to set up your development environment for writing custom scripts and styles for your game.

Recommended: Visual Studio Code

We strongly recommend using Visual Studio Code (VS Code) for the best development experience.

Quick Setup

1. Download VS Code from code.visualstudio.com
2. Right-click on the root assets folder → Open with Code

Important: Open the root assets folder, not your game's subfolder. The root folder contains jsconfig.json which configures VS Code to use the engine's type definitions.

What You Get

How It Works

The root assets folder contains two important files:

When you open the assets folder in VS Code, the editor reads jsconfig.json and automatically enables:

• Autocomplete for window.engine, game, vue, and all other engine objects
• Parameter hints showing what arguments methods expect
• Return type information so you know what data you're working with
• Error detection for typos and incorrect method calls

Example

const { game } = window.engine;

// VS Code will show autocomplete for all game methods
game.getCharacter("alice");  // ✓ Valid
game.getCharcter("alice");   // ✗ Typo highlighted as error

Tip: Use .mjs Extension

Use .mjs extension for your script files instead of .js. This tells VS Code to treat the file as an ES module, enabling better autocomplete and import support.

Recommended Plugin: es6-string-html

When writing custom HTML components in scripts, you'll use template strings for HTML. Install the es6-string-html VS Code extension to get syntax highlighting inside these templates.

Installation

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "es6-string-html"
4. Install the extension

Usage

Add /*html*/ comment before your template string:

const MyComponent = vue.defineComponent({
  template: /*html*/`
    <div class="my-component">
      <h1>{{ title }}</h1>
      <button @click="onClick">Click me</button>
    </div>
  `
});

The HTML inside the template string will now have proper syntax highlighting, making it much easier to read and write.

Connecting Scripts and CSS

Scripts and CSS files are treated as assets, just like images or sounds. Place them in your game's assets folder (e.g., games_assets/my_game/_core/scripts/) and connect them through the Manifest form in the engine's editor.

1. Create your script (.mjs) or stylesheet (.css) file in your game's assets folder (games_assets/my_game/_core/)
2. Go to General > Manifest in the engine's editor
3. Add the files to the Scripts or CSS fields

Scripts are loaded and executed in the order they appear in the list.

File Structure

assets/                            # ← Open this folder in VS Code
├── jsconfig.json                  # VS Code configuration
├── games_assets/
│   └── my_game/
│       └── _core/                 # Your assets (images, sounds, scripts, CSS)
│           ├── icons/
│           ├── images/
│           ├── sounds/
│           ├── scripts/
│           │   └── script1.mjs    # Your scripts (edit in VS Code)
│           └── styles/
│               └── style1.css     # Your styles (edit in VS Code)
├── games_files/
│   └── my_game/
│       └── _core/                 # JSON data managed by engine editor
│           ├── manifest.json
│           └── dungeons/
│               └── my_dungeon/
│                   ├── config.json
│                   └── content_raw.txt   # Dungeon markup (editable in VS Code)
└── engine_files/
    ├── plugins/                   # Engine plugins (each with its own docs/)
    │   ├── global_essentials/
    │   │   └── docs/              # Core engine documentation
    │   └── auto_battler/
    │       └── docs/              # Combat plugin documentation
    └── types.d.ts                 # Type definitions (don't modify)

Script Template

Here's a minimal script template to get started:

// Import core engine objects
const { game, vue, primeVue } = window.engine;

// Your code here
console.log("My script loaded!");

// Example: Register a custom action
game.registerAction("my_action", () => {
    console.log("My action executed!");
});

// Example: Listen to game emitters
game.on("scene_play_after", (sceneId) => {
    console.log("Scene played:", sceneId);
});

Importing Other Scripts

You only need one entry script defined in the Manifest. Scripts are loaded as ES6 Modules, so you can import other custom scripts:

// main_script.mjs (entry script defined in Manifest)
import { hi } from "./hi.mjs";

hi();

// hi.mjs (imported module, not in Manifest)
export function hi() {
    console.log("Hello from hi.mjs!");
}

AI Agent Assistance

Dryad Engine is built to work well with AI coding assistants like Claude, ChatGPT, or Gemini.

Why It Works Well

Getting Context

Point the AI agent to specific folders in assets directory for context:

Next Steps

• Actions - Built-in actions reference
• Game Emitters - Game emitters reference
• Vue Components - Vue components and advanced scripting