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