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:
- Add an image file to
assets/scenes/(e.g.,myroom.jpg) - Declare the asset in your script:
monogatari.assets('scenes', {
'myroom': 'myroom.jpg'
});- 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:
- Edit - Make changes to your files
- Save - Save the files in your editor
- Reload - Refresh the browser
- Test - Play through your changes
- 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
TIP
- Save your work frequently
- Test changes incrementally (small changes are easier to debug)
- Use your browser’s developer console (F12) to see error messages
- Keep the documentation handy for reference
Need Help?
- Check the FAQ for common issues
- Visit the Community Forums for support
- Browse the rest of this documentation for detailed guides