Fugue Blog

Rated R: only click images if you’re an adult not offended by strong language or sexy/sexual situations

Happy Valentines Day!

A special first posting on Mouse markup is below. I’ll post again on progress on Sunday, like usual.

We’re getting close to when I’m going to release Mouse in first beta version. What is Mouse? Mouse is a program (actually, two programs) I use to write my games. It’s a lot like Ren’py, except the game runs as HTML/Javascript in a browser, instead of as a Python program. Second, it’s more paragraph-oriented than line-oriented like Ren’py is (one of my personal dislikes of Ren’py is the “peephole” effect of that single line that Ren’py shows you).

So: Mouse is a markup translator and runtime engine to run interactive stories/games. You can think of Mouse as HTML/Javascript-based, paragraph-oriented Ren’py (if Ren’py were HTML/Javascript-based and paragraph-oriented).

You can play any of my games or LIVE! comics if you want to see what the end result games look like.

Okay, let’s say you’re an author that wants to write your game for Mouse to run. How do you do your authoring?

Mouse runs a series of passages, which you mark up with XML-like tags so that Mouse knows what to do with them. Let’s take a quick look at a sample passage. Here’s the first introductory passage of “Diabolical Dr Diggler,” where our hero Bryan gripes about his malevolent university professor:

01. ///——————————————————————————– AIntroA001
02. <passage id=”AIntroA001″>
03. <stage>
04. <panel type=”BG” id=”bkgd” file=”bkgd.Classroom01.p.png”/>
05. <panel type=”FG” id=”dig1″ file=”ddd.AIntroA001a.p.png”/> /// Diggler standing
06. <reload/>
07. <next goto=”AIntroA002″/>
08. </stage>
09. <story>
10. Bryan: <fmt type=”bry”>That’s my professor, Dr Diggler. <br/><br/>
11.
12. <sp/>He’s an irritating bastard. <br/><br/>
13.
14. <sp/>His test questions are arbitrary, his answers are arguable, and …<br/>
15. <sp/><sp/>I’m not even sure I’m going to pass his class, <br/>
16. <sp/><sp/><sp/>let alone get a grade of an “A” like I usually do.<br/>
17. </fmt>
18. </story>
19. </passage>

The line numbers to the left above aren’t part of the passage, they’re just line numbers here to make it easier to comment here on the passage.

Okay, line 01 has a comment marked with “///”. Three slashes (“///”) mark the rest of the line as a comment.

Lines 02 and 19 say to Mouse, here’s a passage running from line 02 to line 19. The ID for this passage is “AIntroA001” when we want to refer to it elsewhere in the marked up specification for the game.

Lines 03 and 08 tell Mouse that the “stage” area (the images at the top of the browser window in the game) is described from line 03 to 08.

Line 04 says that you want a background image (type=”BG”) using the image file “bkgd.Classroom01.p.png”. We give it an ID of “bkgd,” though we don’t make use of that ID in this passage. This is the background classroom with the lectern and whiteboard behind Dr Diggler.

Line 05 says you want a foreground image (type=”FG”) using the image file “ddd.AIntroA001a.p.png” and with an ID of “dig1”. Note the comment following the three slashes (“///”) that the images is of Diggler standing. Lots of comments help keep you sane as you write.

Line 06 says to include a RELOAD button (a green button with two circular arrows used to restore the stage area to the way it was when the passage was first shown) at the bottom left of the stage area. Most passages include a RELOAD button.

Line 07 says to include a NEXT button (a green button with a white triangle used to go to the next passage) at the bottom right of the stage area. It also says that Mouse should go tot he “AIntroA002” passage when the NEXT button is clicked. Most passages include a NEXT button.

Line 08 says we’re done specifying the stage area.

Lines 09 and 18 tell Mouse that the “story” area (the text and dialog at the bottom of the browser window in the game) is described from line 09 to 18.

Line 10 will show “Bryan: ” in white text (to let the player know who is speaking). The format tag (<fmt type=”bry”>…</fmt>) that starts on line 10 and ends on line 17 says to color the text the way that I specified elsewhere in the markup text for Bryan (which I abbreviate as “bry”). This is sort of a royal blue for the hero.

The rest of line 10 through line 16 are basically the words that Bryan speaks to the player. the “<br/>” tag says to put in a line break there (i.e. go to the next line). The “<sp/>” tag just says to indent a little, to make the paragraphs prettier. Two or three “<sp/>” tags indent a little more than a single tag.

Line 17 says to stop coloring the text as Bryan’s (in other words, stop making the text royal blue that we specified in line 10).

Line 18 says we’re done with the “story” area.

And line 19 says we’re done with this passage, and we probably should write passage “AIntroA002” that we go to when the NEXT button is clicked. We’ll do that in the next posting, and see how you include some simple code to make the “stage” area perform a little.

Have a great week, everyone!
Fugue

Become a supporter at https://www.patreon.com/Fugue