Guide:Bipsi: Difference between revisions
(General Tips section with info on downloading other peoples' games) |
(Code for playing music, shuffling, and example game with neat JS) |
||
Line 1: | Line 1: | ||
==General Tips== | ==General Tips== | ||
If you see something you like in another game you can download it and ''import'' that HTML file into the Bipsi editor to learn how it was done. The trick is that you need to download only the game part; if it's on [[Guide:Itch.io|Itch]] this will be in a ''[[Guide:Glossary# | ===Looking In Other Games=== | ||
If you see something you like in another game you can download it and ''import'' that HTML file into the Bipsi editor to learn how it was done. The trick is that you need to download only the game part; if it's on [[Guide:Itch.io|Itch]] this will be in a ''[[Guide:Glossary#Frame|frame]]''. If you use Firefox you can: | |||
# Right-click on the game | # Right-click on the game | ||
# Go to the 'T<u>h</u>is Frame' option | # Go to the 'T<u>h</u>is Frame' option | ||
# Select 'Save <u>F</u>rame As...' | # Select 'Save <u>F</u>rame As...' | ||
==Keyboard Shortcuts== | ===Keyboard Shortcuts=== | ||
* The arrow keys will move your selection, indicated by a thick, white outline. | * The arrow keys will move your selection, indicated by a thick, white outline. | ||
* Q, W, E, R, T selects tabs in order. | * Q, W, E, R, T selects tabs in order. | ||
Line 43: | Line 44: | ||
Please add more! | Please add more! | ||
====Examples==== | |||
Some games with tricks to think about, or to download and take a look inside of | |||
* [https://niall-moody.itch.io/forest-song Forest Song], by Niall Moody. Uses JavaScript to generate the tones the plants make. | |||
==Hacking The Exported HTML== | |||
Because Bipsi exports regular HTML files, if you know enough HTML, CSS, and or JavaScript, you can have fun adding extra features. | |||
===Music=== | |||
To play a piece of music while the game is running you can use this code in your exported HTML file. | |||
Put it down the bottom, after the last <code></script></code> ''[[Guide:Glossary#Tag|tag]]'', but before the <code></body></code> one. | |||
<audio id="'''[id]'''" src="'''[path]'''"></audio> | |||
<script> | |||
function PlayAudio() { | |||
var audio = document.getElementById("'''[id]'''"); | |||
audio.play(); | |||
} | |||
document.addEventListener('pointerup', PlayAudio); | |||
document.addEventListener('keydown', PlayAudio); | |||
</script> | |||
Where you replace: | |||
* The two instances of '''<code>[id]</code>''' with a name to represent your audio. | |||
* The one instance of '''<code>[path]</code>''' with the directory path of your audio file. Remember to use forward slash <code>/</code> to separate directories, unlike the backslashes Windows uses. If your audio file's in the same directory as your HTML file you can just enter the audio files name on its own. | |||
To explain the code: | |||
* The <code>audio</code> ''[[Guide:Glossary#Element|element]]'' is regular HTML for playing sounds. | |||
* The stuff in the <code>script</code> ''element'' is what controls it. The ''[[Guide:Glossary#Function|function]]'' finds the item with the specified ''ID'', and tells it to start playing. | |||
* The two <code>document.addEventListener</code> pieces are triggered when a mouse button is released, or a keyboard key is pressed, and they tell the ''function'' to run, thus playing the audio. | |||
==See Also== | ==See Also== |
Revision as of 17:08, 24 August 2021
General Tips
Looking In Other Games
If you see something you like in another game you can download it and import that HTML file into the Bipsi editor to learn how it was done. The trick is that you need to download only the game part; if it's on Itch this will be in a frame. If you use Firefox you can:
- Right-click on the game
- Go to the 'This Frame' option
- Select 'Save Frame As...'
Keyboard Shortcuts
- The arrow keys will move your selection, indicated by a thick, white outline.
- Q, W, E, R, T selects tabs in order.
- Draw Room tab: Holding Alt will use eyedropper/pick tile.
Events
Quick Reference
For better explanations see the user guide, but I've found it helpful to keep this quick reference list.
Field | Type | Description |
---|---|---|
exit | location | Move player to another place. |
graphic | tile | Sets event's graphic. |
is-player | tag | Tells game where to start the player. Not sure if it's useful later. |
one-time | tag | Run event only once. |
say | dialogue | Shows text in a dialogue box. |
set-avatar | tile | Changes player's graphic. |
solid | tag | Makes event impassable. |
touch | javascript | Add your own custom code. See §JavaScript for some examples. |
transparent | tag | Makes background colour of tile transparent. |
page-color | text | Changes page's background colour. Use CSS colour names only. |
JavaScript
Some examples of JavaScript you can insert. See the scripting guide for more information.
Please add more!
Examples
Some games with tricks to think about, or to download and take a look inside of
- Forest Song, by Niall Moody. Uses JavaScript to generate the tones the plants make.
Hacking The Exported HTML
Because Bipsi exports regular HTML files, if you know enough HTML, CSS, and or JavaScript, you can have fun adding extra features.
Music
To play a piece of music while the game is running you can use this code in your exported HTML file.
Put it down the bottom, after the last </script>
tag, but before the </body>
one.
<audio id="[id]" src="[path]"></audio> <script> function PlayAudio() { var audio = document.getElementById("[id]"); audio.play(); } document.addEventListener('pointerup', PlayAudio); document.addEventListener('keydown', PlayAudio); </script>
Where you replace:
- The two instances of
[id]
with a name to represent your audio. - The one instance of
[path]
with the directory path of your audio file. Remember to use forward slash/
to separate directories, unlike the backslashes Windows uses. If your audio file's in the same directory as your HTML file you can just enter the audio files name on its own.
To explain the code:
- The
audio
element is regular HTML for playing sounds. - The stuff in the
script
element is what controls it. The function finds the item with the specified ID, and tells it to start playing. - The two
document.addEventListener
pieces are triggered when a mouse button is released, or a keyboard key is pressed, and they tell the function to run, thus playing the audio.
See Also
- Bipsi
- bipsi game maker user guide - Game making beginner friendly! PDF format.
- bipsi game maker scripting guide - Guide for advanced scripting. Also PDF.