<< Previous Page   —   Back to Tutorials

Tutorial 4 - Resource Loaders and the Sound Engine (pg. 2)

Using the Resources

Now that we've got the resources loaded, we'll want to be able to use them. We'll be creating a simple, single octave piano. Pressing the numbered keys 1 thru 8 will produce the tones, and hilight which key was pressed.

We'll link each of the sounds into an array for easy access, by index. This will simplify getting to the sounds. Another array will hold which keys are being pressed so we can show a small highlight on the keyboard. The image will be drawn with the ImageComponent.

// Load the components and engine objects
Engine.include("/components/component.keyboardinput.js");
Engine.include("/components/component.transform2d.js");
Engine.include("/components/component.image.js");
Engine.include("/engine/engine.object2d.js");

Engine.initObject("PianoKeys", "Object2D", function() {

   var PianoKeys = Object2D.extend({

      sounds: [],
      dots: [],

      constructor: function() {
         this.base("PianoKeys");

         // Add the component which handles keyboard input
         this.add(KeyboardInputComponent.create("input"));
         this.add(Transform2DComponent.create("move"));
         this.add(ImageComponent.create("draw", Tutorial4.imageLoader, "keys"));

         // Position the object
         this.getComponent("move").setPosition(Point2D.create(20, 25));

         // Get the sounds into the array
         this.sounds.push(Tutorial4.soundLoader.get("c1"));
         this.sounds.push(Tutorial4.soundLoader.get("d1"));
         this.sounds.push(Tutorial4.soundLoader.get("e1"));
         this.sounds.push(Tutorial4.soundLoader.get("f1"));
         this.sounds.push(Tutorial4.soundLoader.get("g1"));
         this.sounds.push(Tutorial4.soundLoader.get("a1"));
         this.sounds.push(Tutorial4.soundLoader.get("b1"));
         this.sounds.push(Tutorial4.soundLoader.get("c2"));

         // Initialize the indicators
         this.dots = [false,false,false,false,false,false,false];
      },

As with Tutorial 3, we'll be using the KeyboardInputComponent to interact with the player. We'll be implementing the onKeyDown() and onKeyUp() event handlers to react to the keys which are pressed and released. In onKeyDown() we'll trigger the sound and set the appropriate "dot" to appear on the keyboard.

      /**
       * Handle a "keypress" event from the KeyboardInputComponent.
       * @param keyCode {Number} The key which was pressed.
       */
      onKeyDown: function(charCode) {
         // These will trigger a dot on the key being played
         if (charCode >= 49 && charCode <= 56) {
            this.sounds[charCode - 49].play();
            this.dots[charCode - 49] = true;
         }
         return false;
      },

      /**
       * Handle a "keypress" event from the KeyboardInputComponent.
       * @param keyCode {Number} The key which was pressed.
       */
      onKeyUp: function(charCode) {
         // These will remove the dot on the key being played
         if (charCode >= 49 && charCode <= 56) {
            this.dots[charCode - 49] = false;
         }
         return false;
      },

Drawing the Dot on the Keyboard

Since we're using the ImageComponent to draw the image from the ImageLoader, we don't have to worry about drawing the keyboard asset. But, we'll need to draw the "dot" so we'll do that in the draw() method which is called from the update() method.

      /**
       * Update the object within the rendering context.  This calls the transform
       * components to position the object on the playfield.
       *
       * @param renderContext {RenderContext} The rendering context
       * @param time {Number} The engine time in milliseconds
       */
      update: function(renderContext, time) {
         renderContext.pushTransform();

         // The the "update" method of the super class
         this.base(renderContext, time);

         // Draw a dot on the key being pressed
         this.draw(renderContext);

         renderContext.popTransform();
      },

      /**
       * Draw the dots onto the keyboard when a key is pressed.
       * @param renderContext {RenderContext} The context to draw onto
       */
      draw: function(renderContext) {
         // At some point, we'll draw something where the key being
         // pressed is located to give some feedback...
         for (var key = 0; key < 8; key++) {
            var keyColor = this.dots[key] ? "#ff0000" : "#ffffff";
            var dotShape = Rectangle2D.create(15 + (26 * key), 108, 10, 10);
            renderContext.setFillStyle(keyColor);
            renderContext.drawFilledRectangle(dotShape);
         }
      }

Wrapping Up

That's it... We now have a simple piano keyboard which the user can play. Press the keys 1 thru 8 to trigger the sounds and see which key is pressed.

<< Previous Page   —   Back to Tutorials