Step 4: Make Your First Visual Novel

Now that you know what the files are for, let’s start developing your game!

Your First Game in 7 Steps#

1. Try the Sample Game#

Open the index.html file in your browser and play through the sample game. This gives you a feel for what Monogatari can do out of the box.

2. Open the Project in Your Editor#

Open the entire project directory (the one you unzipped) with your code editor. This lets you see and edit all the files.

3. Find the Script#

Open js/script.js and find the script section. You’ll see all the dialogs from the sample game are just items in a simple list:

monogatari.script({
    'Start': [
        'Hi! Welcome to Monogatari!',
        'This is a sample dialog.',
        'end'
    ]
});

4. Make Your First Change#

Change one of the dialog lines:

monogatari.script({
    'Start': [
        'Hello! This is my first visual novel!',
        'I changed this dialog myself!',
        'end'
    ]
});

Save the file.

5. See Your Changes#

Reload the game in your browser (just like refreshing a website). Play through and you’ll see your changed dialog!

6. Add More Dialog#

Try adding more lines to the script:

monogatari.script({
    'Start': [
        'Hello! This is my first visual novel!',
        'I changed this dialog myself!',
        'Adding more dialog is this easy!',
        'Just add more strings to the list.',
        'end'
    ]
});

Save and reload to see the results.

7. Challenge: Add a Scene#

Ready for a challenge? Try adding a background scene:

1. Add an image file to assets/scenes/ (e.g., myroom.jpg)
2. Declare the asset in your script:

monogatari.assets('scenes', {
    'myroom': 'myroom.jpg'
});

3. Use it in your script:

monogatari.script({
    'Start': [
        'show scene myroom with fadeIn',
        'Hello! This is my room!',
        'end'
    ]
});

The Development Workflow#

You’ve just learned the basic workflow:

1. Edit - Make changes to your files
2. Save - Save the files in your editor
3. Reload - Refresh the browser
4. Test - Play through your changes
5. Repeat - Continue iterating!

What’s Next?#

Congratulations! You’ve made your first game! Here’s where to go from here:

Learn the Basics#

• Script & Labels - Understand how scripts work
• Dialogs - Master dialog formatting
• Characters - Add characters to your story

Add More Features#

• Show Scene - Change backgrounds
• Play Music - Add background music
• Choices - Create branching stories

Customize Your Game#

• Player Preferences - Configure settings
• Styling - Customize the look and feel

Tips for Success#

Need Help?#

• Check the FAQ for common issues
• Visit the Community Forums for support
• Browse the rest of this documentation for detailed guides