Added Phaser bgm block.

Fixed spelling issues and format issues in the tutorial content.

Author: MarkusBordihn

locales/deu/blocks/phaser_blocks.js

@@ -28,6 +28,7 @@ Locales['deu'] = Locales['deu'] || {};
 /* eslint-disable max-len */
 Object.assign(Locales['deu'], {
   'BLOCKS_PHASER_AUDIO': 'Audio',
+  'BLOCKS_PHASER_AUDIO_ADD_BGM': 'als Hintergrundsound',
   'BLOCKS_PHASER_COLLIDE_WITH': 'kollidiert mit',
   'BLOCKS_PHASER_CREATE': 'Erstellen',
   'BLOCKS_PHASER_EXAMPLE_FILES': 'Beispiel Dateien',

locales/eng/blocks/phaser_blocks.js

@@ -28,6 +28,7 @@ Locales['eng'] = Locales['eng'] || {};
 /* eslint-disable max-len */
 Object.assign(Locales['eng'], {
   'BLOCKS_PHASER_AUDIO': 'Audio',
+  'BLOCKS_PHASER_AUDIO_ADD_BGM': 'as background sound',
   'BLOCKS_PHASER_COLLIDE_WITH': 'collide with',
   'BLOCKS_PHASER_CREATE': 'Create',
   'BLOCKS_PHASER_EXAMPLE_FILES': 'Example Files',

src/blocks/phaser/audio/blocks.js

@@ -20,7 +20,35 @@
 
 
 /**
- * Add sprite.
+ * Add background music.
+ */
+Blockly.Blocks['phaser_audio_add_bgm'] = {
+  init: function() {
+    this.appendValueInput('variable')
+        .appendField(Blockly.BlocksTemplate.addCircle())
+        .appendField(i18t('BLOCKS_DEFINE'));
+    this.appendDummyInput()
+        .appendField(i18t('BLOCKS_PHASER_AUDIO_ADD_BGM'))
+        .appendField(new Blockly.FieldTextInput('bgm'), 'audio')
+        .appendField(Blockly.BlocksTemplate.audio())
+        .appendField(i18t('with volume'))
+        .appendField(new Blockly.FieldNumber(100, 0, 200), 'volume')
+        .appendField('%')
+        .appendField(new Blockly.FieldDropdown([
+          ['no loop', false],
+          ['loop', true],
+        ]), 'loop');
+    this.setPreviousStatement(true, 'Create');
+    this.setNextStatement(true, 'Create');
+    this.setColour(255);
+    this.setTooltip('');
+    this.setHelpUrl('');
+  },
+};
+
+
+/**
+ * Add audio.
  */
 Blockly.Blocks['phaser_audio_add'] = {
   init: function() {

src/blocks/phaser/audio/javascript.js

@@ -19,6 +19,25 @@
  */
 
 
+/**
+ * Add background music.
+ * @param {Blockly.Block} block
+ * @return {!string}
+ */
+Blockly.JavaScript['phaser_audio_add_bgm'] = function(block) {
+  let text_audio = block.getFieldValue('audio');
+  let number_volume = block.getFieldValue('volume');
+  let dropdown_loop = block.getFieldValue('loop');
+  let variable = Blockly.JavaScript.valueToCode(block,
+    'variable', Blockly.JavaScript.ORDER_ATOMIC);
+  return 'if (typeof ' + variable + ' === \'undefined\') {\n' +
+    '  ' + variable + ' = game.add.audio(\'' + text_audio + '\', ' +
+    number_volume / 100 + ', ' + (dropdown_loop || 'false') + ');\n' +
+    '} else {\n  ' + variable + '.stop();\n}\n' +
+    variable + '.play();\n';
+};
+
+
 /**
  * Add audio.
  * @param {Blockly.Block} block

src/blocks/phaser/toolbox.soy

@@ -326,6 +326,14 @@
   {@param? opt_show_create_blocks: bool}
 
   {if $opt_show_create_blocks}
+    <block type="phaser_audio_add_bgm">
+      <value name="variable">
+        <block type="variables_get">
+          <field name="VAR">bgm</field>
+        </block>
+      </value>
+    </block>
+
     <block type="phaser_audio_add">
       <value name="variable">
         <block type="variables_get">

training/phaser/simple_jump_and_fly_game/de/README.md

@@ -1,26 +1,27 @@
 Einfaches Jump und Fliegen Spiel
 ================================
 
-## Inhaltsverzeichniss
+## Inhaltsverzeichnis
 * [Einleitung](#einleitung)
 * [Anforderungen](#anforderungen)
 * [1. Ein Spiel erstellen](#ein-spiel-erstellen)
-* [2. Laden benötigter Bilder und Sounds](#)
+* [2. Laden benötigter Bilder und Sounds](#laden-benötigter-bilder-und-sounds)
 * [3. Erstellen der Welt](#erstellen-der-welt)
-  * [Hintergrundbild einfügen](#)
-  * [Text einfügen](#)
-  * [Boden hinzufügen](#)
-* [4. Erstellen der Spielfigur](#)
-* [5. Physikalische Eigenschaften definieren](#)
-  * [Schwerkraft / Anziehungskraft](#)
-  * [Kollision](#)
-* [6. Steuerung hinzufügen](#)
-  * [Eingabe überwachen](#)
-  * [Aktion bei Eingabe festlegen](#)
-* [7. Hindernisse hinzufügen](#)
-* [8. Highscore hinzufügen](#)
-* [9. Spielende durch Kollision mit den Hindernissen](#)
-* [10. Game verschönern](#)
+  * [Hintergrundbild einfügen](#hintergrundbild-einfügen)
+  * [Text einfügen](#text-einfügen)
+  * [Boden hinzufügen](#boden-hinzufügen)
+* [4. Erstellen der Spielfigur](#erstellen-der-spielfigur)
+* [5. Physikalische Eigenschaften definieren](#physikalische-eigenschaften-definieren)
+  * [Schwerkraft / Anziehungskraft](#schwerkraft--anziehungskraft)
+  * [Kollision](#kollision)
+* [6. Steuerung hinzufügen](#steuerung-hinzufügen)
+  * [Eingabe überwachen](#eingabe-überwachen)
+  * [Aktion bei Eingabe festlegen](#aktion-bei-eingabe-festlegen)
+* [7. Hindernisse hinzufügen](#hindernisse-hinzufügen)
+* [8. Highscore hinzufügen](#highscore-hinzufügen)
+* [9. Spielende durch Kollision mit den Hindernissen](#spielende-durch-kollision-mit-den-hindernissen)
+* [10. Game verschönern](#game-verschönern)
+  * [Soundeffekte hinzufügen](#soundeffekte-hinzufügen)
 
 ## Einleitung
 Dieser Workshop richtet sich an Anfänger die immer schon mal ein eigenes Spiel entwickeln wollten.
@@ -29,23 +30,22 @@ Ihr lernt die Grundlage der Spieleentwicklung und wie eine Spiele Engine grundle
 Zum programmieren wird eine Block-basierte Programmierung mit vordefinierten Blöcke verwendet. 
 Diese Blöcke setzt Ihr einfach für euer Spiel zusammen.
 
-Hierzu wird Coding with Chrome verwendet, welches kostenfrei erhältlich ist.
+Hierzu wird _Coding with Chrome_ verwendet, welches kostenfrei erhältlich ist.
 
 ## Anforderungen
 Für diesen Workshop solltet Ihr euch bereits mit dem Spiele Editor in Coding with Chrome beschäftigt haben und eine Übersicht der verschiedenen “Blöcke” haben.
 
 Es werde einige Spiele spezifische Begriffe verwenden, die ausführlich in [Grundlagen Games](../../basic/de/README.md) erklärt werden. 
 
 ## Ein Spiel erstellen
-Wähle im Anfänger Modus **Ein Spiel erstellen** aus und erstellst ein **Neues Project**.
+Wähle im Anfänger Modus **Ein Spiel erstellen** aus und erstellst ein **Neues Projekt**.
 
 Diese sollte dann in etwa wie folgt aussehen:
 ![][empty_game]
 
 Anschließend legt du den Namen des Spiels und die Dimension (Größer der Spielfläche) fest.
 Für dieses Tutorial verwenden wir eine Dimension von 400x600.
 
-
 ![][game_name_dimension]
 
 ## Laden benötigter Bilder und Sounds
@@ -71,7 +71,7 @@ Zieht eure Bilder anschließend von dem **Dateien** Bereich in euren **beim Vora
 
 ![][preload_image]
 
-![]][preload_image_name]
+![][preload_image_name]
 
 Verwendet hierfür die folgenden vordefinierten Namen damit ihr nachher weniger ändern müsst.
 Solltet Ihr andere Namen verwenden, achtet bitte darauf diese in den entsprechenden Blöcken anzupassen.
@@ -92,7 +92,7 @@ Alle dafür benötigten Blöcke findet Ihr in dem Bereich **Erstellen** und werd
 ![][create_world]
 
 ### Hintergrundbild einfügen
-Zuerst fügen wir ein sich bewegendes Hintergrund Bild hinzu.
+Zuerst fügen wir ein sich bewegendes Hintergrundbild hinzu.
 Klickt hierfür auf **Tile Sprite** und zieht den Block **füge Hintergrundbild hinzu …** in den **beim Erstellen ...** Block.
 
 ![][create_tile_sprite]
@@ -195,22 +195,35 @@ Die einfachste Möglichkeit um das Ende des Spiel festzulegen, ist eine Kollisio
 
 Wir fügen also in dem **beim Aktualisieren ...** Bereich eine Kollisionsüberprüfung zwischen dem Spieler und den Hindernissen hinzu.
 
-![][update_collsion_block]
+![][update_collision_block]
 
 Anschließend sagen wir dem Programm was es bei einer Kollision machen soll.
 Hierzu ziehen wir den **Spiel neustarten** Block unter **Game** in die Kollisionsüberprüfung:
 
 ![][game_restart]
 
-![][update_collsion_example]
+![][update_collision_example]
 
 ## Game verschönern
-Zum Schluß verschönern wir das Spiel noch, indem wir zusätzliche Grafiken hinzufügen oder aber einen Start bzw. End Bildschirm.
+Zum Schluss verschönern wir das Spiel noch, indem wir zusätzliche Grafiken hinzufügen oder aber einen Start bzw. End Bildschirm.
+
+### Soundeffekte hinzufügen
+Zusätzlich könnt ihr Soundeffekte hinzufügen die beim drücken einer Taste oder bei einer Kollision abgespielt werden.
+
+Zuerst müsst Ihr die entsprechenden Sounds hochladen und unter **Vorausladen** hinzufügen und den Namen anpassen.
+
+![][preload_sound]
+
+Anschließend wird der Sound unter **Erstellen** als **definiere ... als Audio ...** hinzugefügt.
 
-Zusätzlich könnt ihr Soundeffekte hinzufügen die beim drücken der Taste abgespielt werden.
+![][preload_sound_example]
 
+Nun könnt Ihr mit dem Block **spiele Audio ...** an jeder beliebigen Stelle den enstprechenden Sound abspielen.
 
-## Anhang
+![][input_play_audio]
+
+## Komplettes Spiel
+![][full_game]
 
 
 [empty_game]: images/empty_game.png
@@ -242,6 +255,13 @@ Zusätzlich könnt ihr Soundeffekte hinzufügen die beim drücken der Taste abge
 
 [dynamic_text]:
 
-[update_collsion_block]:
+[update_collision_block]:
 [game_restart]:
-[update_collsion_example]:
+[update_collision_example]:
+
+
+[preload_sound]:
+[preload_sound_example]:
+[input_play_audio]:
+
+[full_game]: