These are chat archives for e2d/e2d

24th
Jul 2017
jtenner
@jtenner
Jul 24 2017 13:26

@anault This kind of philosphy is hard to have when you are making a game. For instance, I developed components that do something similar to what a virtual dom does, and it was completely unecessary. Sometimes when you read information from the dom it prevents the browser from painting fast. The canvas has no such problem, because of the way the CanvasContext2D prototype works.

For instance this might be close to something you might like to see:

Taken from: https://github.com/jtenner/e2dvn/blob/master/renderer/controls/Button.jsx
(This project never took off because development for the game stopped, but I had 60fps animations on mobile phones.)

module.exports = class Button extends Showable {
  constructor(props, theme) {
    super(props);
    Object.assign(this, {
      type: 'button',
      texture: null,
      previousTexture: null,
      selected: false,
      previousSelected: false,
      theme: theme,
      text: '',
      onclick: function*(){},
      dirty: true
    });
    this.load(props);
  }
  load(props) {
    this.selected = props.hasOwnProperty('selected') ? props.selected : this.selected;
    this.text = props.hasOwnProperty('text') ? props.text : this.text;
    this.onclick = props.hasOwnProperty('onclick') ? props.onclick : this.onclick;
  }
  update() {
    if (!this.theme.ready) {
      return;
    }

    if (this.previousSelected !== this.selected) {
      this.dirty = true;
    }
    this.previousSelected = this.selected;

    this.texture = this.theme.button[
      (this.selected ? '': 'un') + 'selected' + (this.active && this.hover ? 'Active' : '')
    ];
    if (this.texture !== this.previousTexture) {
      this.dirty = true;
    }
    this.previousTexture = this.texture;
    this.pointer = this.hover;
    return super.update();
  }
  render() {
    return super.render(
      <hitRect id={this.id} width={this.texture.width} height={this.texture.height} />,
      <drawImage img={this.texture} />,
      <translate x={this.texture.width * 0.5} y={this.texture.height * 0.5}>
        <textStyle textBaseline="middle" font={this.theme.controlFont} textAlign="center">
          <fillStyle style={this.selected ? this.theme.controlTextSelectedColor : this.theme.controlTextColor}>
            <fillText text={this.text} />
          </fillStyle>
        </textStyle>
      </translate>
    );
  }
};

You don't need anything too special when it comes to canvas/60fps animation. You have to get in and get out to let the browser do it's thing.

Setting this.dirty = true; inside of the code is much like shouldComponentUpdate, and the engine simply re-ran the component's render function.

Would you like to help me develop a more generic stage/component lifecycle library that couples with e2d?