Fugue Blog

Another posting on Mouse!

I know I said last time that we’d go to passage “AIntroA002” and show you some javascript coding. But let’s look at one more passage before we do that. We’re going to jump ahead to the “AIntroA008” passage to show you how multiple images on a page work.

Here’s the marked up passage, with line numbers added for clarity:

01. ///——————————————————————————– AIntroA008
02. <passage id=”AIntroA008″>
03. <stage>
04. <panel type=”BG” id=”bkgd” file=”bkgd.FrontDoor01.p.png”/>
05. <panel type=”FG” id=”trish1″ file=”ddd.AIntroA005d.p.png”/> /// Trish smiling, look L
06. <panel type=”FG” id=”trish2″ file=”ddd.AIntroA008a.p.png” hidden=”1″/> /// Trish smile C
07. <panel type=”TR” id=”bry1″ file=”ddd.AIntroA007a.p.png”/> /// oval Bryan eyes up
08. <panel type=”TR” id=”bry2″ file=”ddd.AIntroA008b.p.png” hidden=”1″/> /// oval Bryan eyes down
09. <reload/>
10. <next goto=”AIntroA009″/>
11. </stage>
12. <story>
13. Patricia: <fmt type=”trish”>Honey, I just want to talk to him …<br/>
14. <sp/>to help him see things from your point of view.</fmt><br/><br/>
15.
16. Bryan: <fmt type=”bry”>Mom … you just … can’t … &laquo;sigh&raquo;</fmt><br/><br/>
17.
18. <show show=”trish2,bry2″ hide=”trish*,bry*”/>
19. <sp/><fmt type=”trish”>It’ll be for the best, sweetie. Trust me.</fmt><br/>
20. <sp/><fmt type=”bry”>&laquo;sigh&raquo;</fmt><br/>
21. </story>
22. </passage>

Again, line 2 specifies that this is a passage, with ID “AIntroA008”, which runs through to line 22, where the closing tag ends this passage.

In the STAGE area (specified in lines 03 to 11), we tell the Mouse engine how to “paint” this passage at the top. Something new we’re going to do this time is to have HIDDEN images — that we’ll show partway through the page!

Line 04 gives the background (type=”BG”) image, with ID “bkgd” and showing “bkgd.FrontDoor01.p.png”, which is an image of Bryan’s apartment’s front door from the inside.

Line 05 gives one foreground (type “FG”) image with ID “trish1”. The image “ddd.AIntroA005d.p.png” has Trish with her hands at her sides, smiling (and talking as well) looking slightly to her left.

Line 06 gives the second foreground image, with ID “trish2”. The image “ddd.AIntroA008a.p.png” is of Trish smiling and looking straigh ahead and (though it’s not in the comment) holding her left hand forward as a gesture asking for trust. Also note the hidden attribute (hidden=”1″), which tells the Mouse engine: do NOT show this image yet. Keep it hidden for a little while.

Line 07 is an oval image at the top-right (type “TR”) of the stage area, of Bryan with his eyes up, looking straight ahead (and with one eyebrow raised, though the comment doesn’t mention that).

Line 08 is a second top-right image, an oval image of Bryan with his eyes cast down. This one is also HIDDEN. There’s a reason this image and the second foreground image are hidden, as we’ll see in just a moment.

We tell Mouse to include a RELOAD button at the bottom left of the stage (line 09), and a GOTO button at the bottom right (line 10, which also specifies that Mouse should go to passage “AIntroA009” when it is clicked).

Lines 11 and 12 end the STAGE markup and start the STORY markup.

Lines 13 and 14 specify text for Trish, painted in Trish’s hot pink speech color (fmt type=”trish”).

Line 16 specifies text for Bryan, in Bryan’s blue color (fmt type=”bry”).

Now, line 18 does something we haven’t seen before. The SHOW tag tells Mouse to draw a little blue button in the story area. And when that button is clicked, Mouse will show the images with IDs “trish2” and “bry2”. Mouse will also hide all the images with IDs that start with “trish” — EXCEPT for ID “trish2” since it was included in the SHOW attribute. Note that the HIDE attribute says “trish*”. The asterisk is a wildcard that matches all the IDs that start with the first part before the asterisk (“trish”). The HIDE attribute also says to hide all the images with IDs that start with “bry” (again, “bry2” is exempt since it appears in the SHOW attribute.

So, in other words, click the little blue button, and Mouse shows images “trish2” and “bry2”, and hides images “trish1” and “bry1”. In other words, when you click the button, Trish reaches her hand out toward Bryan (and the player/viewer) in the foreground, and Bryan casts his eyes down at the top-right as he gives in to his mother.

Then lines 19 and 20 specify more text for Trish and Bryan.

Let’s look back at what we just did. By including multiple images on the page, some of them hidden initially; and by including a button that hides some of the images and shows others, we effectively gave a simple animation ability to the page.

Thanks for putting up with my detour — I just wanted to show you that simple way to progress the story with images before we move on to more complex ways with javascript code.

I’ll post again on Sunday as usual with progress on “Lisa Unwound,” with a couple images of our stuffy professor, quite a bit un-stuffy-fied.

Have a great weekend!

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

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