(setupTPH:0)
(tphTest:0)
The Twine Multiplane Hack was created for <a href="https://ergi.itch.io/chronovoros">Chronovoros</a>, our game for the Nordic Game Jam 2021. Visit <a href="http://www.spacetoast.net/games/digital/chronovoros/">http://www.spacetoast.net/games/digital/chronovoros/</a> for more.
''HOW TO USE IT''
1. Copy the text from JavaScript.txt into your Twine project's JavaScript window
2. Copy the text from stylesheet.txt into the CSS window
3. Save your artwork as PNG or GIF files with alpha channels, and add macros to the JavaScript to display them (see below)
''MACROS''
`(`setupTPH:0`)` Initialize the parallax scrolling script. Call on first slide.
`(`tphClear:0`)` Clear any images. Go to a black background.
`(`tphTest:0`)` Load the test scene (High Arctic).
''FILTERS''
You can perform special effects on all planes in a macro by replacing the zero after the colon with...
1, to increase the contrast 150%
2, to increase the contrast 200%
3, to drop the contrast to 50%
4, for a kind of depth of field blur effect
''USING YOUR OWN ARTWORK''
To create new sets of planes, go into the JavaScript of your project, and create a new macro in the following format:
Harlowe.macro('(text-colour:purple)[//yourMacroName//]', function()`{`
tph("(text-colour:red)[//DeepestLayerImage.file//] (text-colour:orange)[//bg/fg//] (text-colour:green)[//bottom/top//] (text-colour:blue)[//optionalSpecialEffect//],(text-colour:red)[//SecondDeepestLayerImage.file//] (text-colour:orange)[//bg/fg//] (text-colour:green)[//bottom/top//] (text-colour:blue)[//optionalSpecialEffect//],(text-colour:purple)[//etc...//]", this.args);
`}`);
1. Layers are created back-to-front
2. "bg" places the plane behind the text. "fg" places it in front.
3. "bottom" starts the plane aligned with the bottom of the window and scrolls it downward. "top" starts the plane aligned with the top of the window and scrolls it upward.
4. You can optionally add a final keyword to draw just this plane with a special effect:
A. "blur1" adds a small blur
B. "blur2" adds a stronger blur
C. "blur3" adds a still stronger blur
D. "contrast1" increases the contast a bit
E. "contrast2" increases it more
F. "contrast0" decreases the contrast
5. Note the comma before the next image plane, with no space
6. You can add as many image planes as you'd like
7. Create additional macros for different sets of artwork planes
Any questions? Just hit me up via <a href="http://www.spacetoast.net">www.spacetoast.net</a>
-Matt Rasmussen