Guide:Bipsi: Difference between revisions

From Game Making Tools Wiki
(Code for playing music, shuffling, and example game with neat JS)
m (jargon links)
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
==General Tips==
==General Tips==
===Looking In Other Games===
===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:
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 {{jargon|Frame|frame}}. If you use Firefox you can:


# Right-click on the game
# Right-click on the game
Line 24: Line 24:
|-
|-
| is-player || tag || Tells game where to start the player. Not sure if it's useful later.
| is-player || tag || Tells game where to start the player. Not sure if it's useful later.
|-
| music || file || Play an music file. The user guide for advanced features, like having a library of multiple songs.
|-
|-
| one-time || tag || Run event only once.
| one-time || tag || Run event only once.
Line 52: Line 54:
==Hacking The Exported HTML==
==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.
Because Bipsi exports regular HTML files, if you know enough HTML, CSS, and or JavaScript, you can have fun adding extra features.
Some ideas:
* Overlay an image. Could be useful for a HUD or a shadowy forest scene, or ...
* Use a different font.
* Use a form to get info. from the player. Could use it to refer to a player by name.
* ...


===Music===
===Music===
{{nb|Bipsi now has music stuff built-in! I'll leave this here for now as an example though — [[User:Rjt|rjt]] ([[User talk:Rjt|talk]])}}
To play a piece of music while the game is running you can use this code in your exported HTML file.
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.
Put it down the bottom, after the last <code></script></code> {{jargon|Tag|tag}}, but before the <code></body></code> one.


  <audio id="'''[id]'''" src="'''[path]'''"></audio>  
  <audio id="'''[id]'''" src="'''[path]'''" '''loop'''></audio>  
  <script>
  <script>
  function PlayAudio() {
  function PlayAudio() {
Line 71: Line 81:
* The two instances of '''<code>[id]</code>''' with a name to represent your audio.
* 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.
* 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.
* If you don't want the audio to loop, you can remove '''<code>loop</code>''' from the audio element.


To explain the code:
To explain the code:
* The <code>audio</code> ''[[Guide:Glossary#Element|element]]'' is regular HTML for playing sounds.
* The <code>audio</code> {{jargon|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 stuff in the <code>script</code> ''element'' is what controls it. The {{jargon|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.
* 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.



Latest revision as of 14:18, 12 October 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:

  1. Right-click on the game
  2. Go to the 'This Frame' option
  3. 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.
music file Play an music file. The user guide for advanced features, like having a library of multiple songs.
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.

Some ideas:

  • Overlay an image. Could be useful for a HUD or a shadowy forest scene, or ...
  • Use a different font.
  • Use a form to get info. from the player. Could use it to refer to a player by name.
  • ...

Music

NB: Bipsi now has music stuff built-in! I'll leave this here for now as an example though — rjt (talk)

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]" loop></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.
  • If you don't want the audio to loop, you can remove loop from the audio element.

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