Starter Layer Viewports Basics

Screen Layers Viewports

This starter project demonstrates viewport functionality across different layers.

  • Press S - To swap the two layers.
  • Or click on the screen to swap the two layers.
Canvas tag not supported

In this demo, each layer has its own viewport, border, and background color properties. 

constructor(options = {}) {
    super(options);
    ...
    //Create the layers and retrieve a reference to updated properties.
    const layer0 = this.primaryScreen.addLayer('layer0');
    layer0.viewPort = new hamonengine.geometry.rect(25, 25, 400, 250);
    layer0.backgroundColor = '#87CEEB';
    layer0.borderColor =  '#FF0000';

    const layer1 = this.primaryScreen.addLayer('layer1');
    layer1.viewPort = new hamonengine.geometry.rect(350, 50, 400, 250);
    layer1.backgroundColor = '#87DDEB';
    layer1.borderColor =  '#FF0000';
}

Using the method swapLayer, two named layers can be swapped changing the order in which they are rendered. 

/**
* Processes keyboard events.
* @param {object} storyboard used to invoke this onKeyEvent event.
* @param {string} type of keyboard event such as 'up' or 'down' for keyup and keydown.
* @param {string} keyCode of the key (see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code)
* @param {object} e KeyboardEvent (see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
* @param {object} caller that triggered the event that can be a HTMLElement, instance of the HamonEngine, or a screen (see hamonengine.graphics.screen).
*/
onKeyEvent(type, keyCode, e, caller) {
    ...
    //Swap the layers when the S key is pressed.
    if (keyCode === 'KeyS' && type === 'up') {
        this.primaryScreen.swapLayer('layer0', 'layer1');
    }
}
/**
* Processes mouse & touch events if captureTouchAsMouseEvents is set to true.
* @param {string} type of mouse event such as: 'click', 'up', 'down', 'move', 'enter', 'leave'.
* @param {object} v an instance of vector2 object that contain the x & y coordinates (see hamonengine.math.vector2).
* @param {object} e MouseEvent (see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
* @param {object} caller that triggered the event that can be a HTMLElement, instance of the HamonEngine, or a screens (canvas).
*/
onMouseEvent(type, v, e, caller) {
   //Allow engine to run it's base logic, which is just logging.
   //This logic can be omitted.
   super.onMouseEvent(type, v, e, caller);

   if (type === 'click') {
       this.primaryScreen.swapLayer('layer0', 'layer1');
   }
}