Implement support for multiple backgrounds

Merge pull request #35 from haroldo-ok/implement-multiple-backgrounds
This fixes #16

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vcs-game-maker",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/blocks/background.js

@@ -0,0 +1,93 @@
+'use strict';
+
+import * as Blockly from 'blockly/core';
+
+import {useBackgroundsStorage} from '../hooks/project';
+import {playfieldToMatrix} from '../utils/pixels';
+import {BACKGROUND_ICON} from './icon';
+
+const BACKGROUND_COLOR = '#ffa500';
+
+const backgroundsStorage = useBackgroundsStorage();
+
+const buildBackgroundOptions = () => {
+  try {
+    // TODO: Share this constant with BackgroundEditor.vue
+    const defaultBackgrounds = {
+      backgrounds: [
+        {
+          id: 1,
+          name: 'Test 1',
+          pixels: playfieldToMatrix(
+              'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\n' +
+              'X....X...................X....X\n' +
+              'X.............................X\n' +
+              'X.............................X\n' +
+              'X.............................X\n' +
+              'X.............................X\n' +
+              'X.............................X\n' +
+              'X.............................X\n' +
+              'X.............................X\n' +
+              'X....X...................X....X\n' +
+              'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'),
+        },
+      ],
+    };
+
+    const background = backgroundsStorage.value || defaultBackgrounds;
+
+    return background.backgrounds.map(({id, name}) => [name || `Unnamed ${id}`, `${id}`]);
+  } catch (e) {
+    console.error('Failed to list background options', e);
+    return [[1, 'Error']];
+  }
+};
+
+Blockly.defineBlocksWithJsonArray([
+  // Block for selecting a background.
+  {
+    'type': `background_select`,
+    'message0': `${BACKGROUND_ICON} Background: %1`,
+    'args0': [
+      {
+        'type': 'field_dropdown',
+        'name': 'VAR',
+        'options': buildBackgroundOptions(),
+      },
+    ],
+    'output': 'Number',
+    'colour': BACKGROUND_COLOR,
+    'tooltip': `Selects a background`,
+  },
+  // Block for the setter.
+  {
+    'type': `background_set`,
+    'message0': `${BACKGROUND_ICON} Background: set to: %1`,
+    'args0': [
+      {
+        'type': 'input_value',
+        'name': 'VALUE',
+      },
+    ],
+    'previousStatement': null,
+    'nextStatement': null,
+    'colour': BACKGROUND_COLOR,
+    'tooltip': `Updates the background`,
+  },
+  // Block for the setter with an internal select
+  {
+    'type': `background_set_select`,
+    'message0': `${BACKGROUND_ICON} Background: %1`,
+    'args0': [
+      {
+        'type': 'field_dropdown',
+        'name': 'VAR',
+        'options': buildBackgroundOptions(),
+      },
+    ],
+    'previousStatement': null,
+    'nextStatement': null,
+    'colour': BACKGROUND_COLOR,
+    'tooltip': `Updates the background`,
+  },
+]);

src/blocks/icon.js

@@ -7,3 +7,4 @@ export const JOYSTICK_ICON = String.fromCodePoint(0x1F579);
 export const FIRE_ICON = String.fromCodePoint(0x1F518);
 export const PLAYFIELD_ICON = String.fromCodePoint(0x1F5FA);
 export const SCORE_ICON = String.fromCodePoint(0x1F4AF);
+export const BACKGROUND_ICON = String.fromCodePoint(0x1F304);

src/components/ActionEditor.vue

@@ -16,6 +16,7 @@ import bBasic from 'batari-basic';
 
 import BlocklyComponent from './BlocklyComponent.vue';
 
+import '../blocks/background';
 import '../blocks/collision';
 import '../blocks/input';
 import '../blocks/sprites';

src/components/blockly-toolbox.xml

@@ -114,6 +114,17 @@
 
         <block type="collision_get"></block>
     </category>
+    <category name="Background" colour="#ffa500">
+        <block type="background_select"></block>
+        <block type="background_set">
+            <value name="VALUE">
+                <shadow type="background_select">
+                    <field name="NUM">1</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="background_set_select"></block>
+    </category>
     <category name="Score" colour="#f2691e">
         <block type="score_get"></block>
         <block type="score_set">

src/generators/bbasic.bb.hbs

@@ -4,9 +4,6 @@
  rem Playfield and players setup:
  rem - shape of the playfield and player sprites
  rem **************************************************************************
- playfield:
-{{ playField }}
-end
 
  player0:
  %00100010
@@ -39,6 +36,12 @@ end
  NUSIZ0 = $30
  score = 00000 :  scorecolor = $08
 
+ dim player0frame = x
+ dim player1frame = z
+ dim newbackground = y
+
+ newbackground = 1
+
  player0x = 75 : player0y = 75
  player1x = 75 : player1y = 25
  ballx = 0 : bally = 0
@@ -65,11 +68,17 @@ draw
  drawscreen
 
  rem **************************************************************************
- rem Code generated by vcs-game-maker.
+ rem Backgrounds generated by vcs-game-maker.
  rem **************************************************************************
 
- dim player0frame = x
- dim player1frame = z
+ if newbackground = 0 then goto backgroundchangeend
+{{{ generatedBackgrounds }}}
+backgroundchangeend
+ newbackground = 0
+
+ rem **************************************************************************
+ rem Code generated by vcs-game-maker.
+ rem **************************************************************************
 
 {{{ generatedBody }}}
 

src/generators/bbasic.js

@@ -176,14 +176,14 @@ Blockly.BBasic.finish = function(code) {
   code = Object.getPrototypeOf(this).finish.call(this, code);
   code = code.replace(/^[\t ]*/gm, Blockly.BBasic.INDENT);
 
-  const playField = Blockly.BBasic.generateBackgrounds();
+  const generatedBackgrounds = Blockly.BBasic.generateBackgrounds();
   const animation = Blockly.BBasic.generateAnimations();
 
   this.isInitialized = false;
 
   this.nameDB_.reset();
   const generatedBody = definitions.join('\n\n') + '\n\n\n' + animation + '\n\n\n' + code;
-  return handlebarsTemplate({generatedBody, playField});
+  return handlebarsTemplate({generatedBody, generatedBackgrounds});
 };
 
 /**
@@ -340,24 +340,18 @@ Blockly.BBasic.generateBackgrounds = function() {
   }
 
   const backgrounds = backgroundData && backgroundData.backgrounds;
-  let playField =
-    'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\n' +
-    'X....X...................X....X\n' +
-    'X.............................X\n' +
-    'X.............................X\n' +
-    'X.............................X\n' +
-    'X.............................X\n' +
-    'X.............................X\n' +
-    'X.............................X\n' +
-    'X.............................X\n' +
-    'X....X...................X....X\n' +
-    'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
-
-  if (backgrounds && backgrounds[0] && backgrounds[0].pixels) {
-    playField = matrixToPlayfield(backgrounds[0].pixels);
-  }
 
-  return playField.split('\n').map((line) => '  ' + line).join('\n');
+  const convertPlayfield = (playField) =>
+    playField.split('\n').map((line) => '  ' + line).join('\n');
+
+  return backgrounds.map(({id, pixels}) => {
+    const endLabel = `background${id}end`;
+    return ` if newbackground <> ${id} then goto ${endLabel}` + '\n' +
+      ' playfield:\n' +
+      convertPlayfield(matrixToPlayfield(pixels)) + '\n' +
+      'end\n' +
+      endLabel;
+  }).join('\n\n');
 };
 
 Blockly.BBasic.generateAnimations = function() {
@@ -406,7 +400,7 @@ Blockly.BBasic.generateAnimations = function() {
   const player1Code = processAnimation('player1', usePlayer1Storage());
   return player0Code + '\n\n\n' + player1Code;
 };
-
+import background from './bbasic/background';
 import collision from './bbasic/collision';
 import colour from './bbasic/colour';
 import input from './bbasic/input';
@@ -419,7 +413,7 @@ import sprites from './bbasic/sprites';
 import text from './bbasic/text';
 import variables from './bbasic/variables';
 
-[collision, colour, input, logic, loops, math, procedures, sprites, score, text, variables]
+[background, collision, colour, input, logic, loops, math, procedures, sprites, score, text, variables]
     .forEach((init) => init(Blockly));
 
 export default Blockly.BBasic;

src/generators/bbasic/background.js

@@ -0,0 +1,21 @@
+'use strict';
+
+export default (Blockly) => {
+  Blockly.BBasic[`background_select`] = function(block) {
+    const code = block.getFieldValue('VAR') || 0;
+    return [code, Blockly.BBasic.ORDER_ATOMIC];
+  };
+
+  Blockly.BBasic[`background_set`] = function(block) {
+    // Score setter.
+    const argument0 = Blockly.BBasic.valueToCode(block, 'VALUE',
+        Blockly.BBasic.ORDER_ASSIGNMENT) || '0';
+    return 'newbackground = ' + argument0 + '\n';
+  };
+  Blockly.BBasic[`background_set_select`] = function(block) {
+    // Score setter.
+    const argument0 = block.getFieldValue('VAR') || 0;
+    return 'newbackground = ' + argument0 + '\n';
+  };
+};
+