## About the page.title This is a simplified version of the page.title found in all site.author's [games|index.html]. Is is used in +16 [#games by other authors] -- **you too** can use it, for free. Since 2021 it is no longer actively maintained, and meanwhile [other tools|tools] emerged to partially fill similar needs. No support may be expected from site.author, who trusts you'll be able to use the [#Instructions] and [#troubleshoot] on your own. The source code is archived at [this repository|https://github.com/pedropsi/game-bar-source]. ### Features - a beautiful level selector, - background music playlist (BGM), with mute/unmute control - undo/reset buttons, - fullscreen mode, - auto landscape mode (screen rotation) All with a rich set of [#keyboard shortcuts]. ### Looks This is how the page.title looks like: images/level-selector.png The game bar's colours adapt to the foreground and background colours of your game. ### Game Examples GAME TITLE AUTHOR>>>P [Puzzlescript Lawnmower|https://winterbeak.itch.io/puzzlescript-lawnmower] winterbeak [Laser League|https://timknauf.itch.io/laser-league] TimKnauf [Coin Magician School|https://joelgahr.itch.io/coin-magician-school] JoelGahr [Multiban Collection|https://minotalen.itch.io/multiban-collection] minotalen [Landfill|https://minotalen.itch.io/landfill] minotalen [Mean8 Chapter 1|https://minotalen.itch.io/mean8-chapter1] minotalen [MINIMAZE|https://noacubestudio.github.io/minimaze.html] cubestudio [Unblock|https://noacubestudio.github.io/unblock.html] cubestudio [EDGE CASE|https://parachor.itch.io/edgecase] parachor [Boogie Woogie|https://jackkutilek.itch.io/boogie-woogie] JackKutilek [Strange Warehouse|https://ssstormy.itch.io/strange-warehouse] JustasDabrila [Fitkitban|https://ssstormy.itch.io/fitkitban] JustasDabrila [Mac and CHI|https://jacklance.github.io/MacAndCHI/] JackLance [What Gophers Go For|https://what-gophers-go-for.github.io/] JackLance, Thinky Collective [Sasquatch Sokoban|https://jcgyo.itch.io/sasquatch] jcmiller [Cutters and Concrete|https://bregehr.itch.io/cutters-and-concrete] BlakeRegehr ((games that use the page.title)) Would you like to add your game to the list? Please @@@ let site.author know @@@ ## Instructions ### Loading the game bar 0) Open the exported HTML file containing your puzzlescript game, using any text editor. 1) Add the following script to the end of the file, just before the ´´«/body>´´ closing tag: ´´ «script type='text/javascript' src='https://pedropsi.github.io/game-bar-source/GameBar/GameBar-global.js'>«/script> ´´ 2) Open your HTML game file in the browser - the game bar should load. ### Adding music 0) Add your music file(s) to a known location near the game file 1) Edit the HTML game file to add the references to those music files using ´´«audio>´´ tags, one per song, as follows: ´´ «audio class="music" preload="none" src="path-to-song.mp3" type="audio/mpeg">«/audio> ´´ 2) Re-open your HTML game file in the browser - the game bar should load, now with an extra button for music. «:=< ## Keyboard shortcuts ${Hyper("Instructions/Music")} ${Hyper("Instructions/Fullscreen")} ${Hyper("Instructions/LevelSelector")} ${Hyper("Instructions/Undo")} ${Hyper("Instructions/Restart")} ## Troubleshooting and limitations Special care may be needed when using the [#itch.io platform], [#modified puzzlescript versions] or [#reordering levels] after publication. ### itch.io platform #### Nothing shows Please ensure that the page.title **javascript source** is loaded from within the ´´«iframe>´´ containing the game, rather than from the main itch page. #### Save progress is wiped when a **new game version** is uploaded. Please add the line ´´ ObtainStorageURL=function(){return state.metadata.title;} ´´ to your page javascript code. This will associate the save files with your game title, probably a stabler value than the default page URL (which may change when uploading new game versions). ### Modified Puzzlescript versions The page.title overwrites exactly **4** puzzlescript functions: - ´´function doWin()´´ - ´´function nextLevel()´´ - ´´function doSetupTitleScreenLevelContinue()´´ - ´´function level4Serialization()´´ If your Puzzlescript version relies on changes to any of these functions, it's likely those particular changes be erased. ### Reordering levels After publishing a game with the game bar, changing the level order or adding/removing intermediate levels may jumble level stars in the level selector. Players can still play normally, but they may be slightly confused when using the level selector. Adding extra levels to the end of the game, however, does not cause any issues. ### Disabling features #### Screen rotation Add ´´function ObtainXYRotateCondition(x,y){return false};´´ to your javascript code. #### Scrolling to game on page load Add ´´ObtainInitialScroll=false;´´ to your javascript code. This may be useful in itch.io game pages at high screen resolutions (e.g. 1080p). ## Acknowledgements and Changes Special thanks to: - @minotalen for very active ongoing collaboration! - @cubestudio for very insightful UX advice and other important suggestions. - @knauf for using the bar, which resulted in diverse customisation improvements. - @builder17 for a useful suggestion. - @JustasDabrila for UI improvements. **2024-09-01** Page simplified, refecting the fact it is no longer actively maintained (@BenjaminBairrington)