Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Jack Dalton
@jackdalton
Well, here's the chat.
Jack Dalton
@jackdalton
Official documentation at e2d.jackdalton.org!
jtenner
@jtenner
Hey @jackdalton ! We meet again. Any chance I could steal this room?
Abdullah A. Hassan
@voodooattack
.>
jtenner
@jtenner
Awww yeah
:)
jtenner
@jtenner
I'm releasing a major version of e2d soon. Stay posted!
Abdullah A. Hassan
@voodooattack
:+1:
jtenner
@jtenner
Testing is now live on the 4.0.0-dev branch please note that tree conversion to binary is now supported in the e2d/e2b repo.
Abdullah A. Hassan
@voodooattack
:+1:
jtenner
@jtenner
Massive overhaul of e2d now using switch statements is live at the repo.
Need some testing done to verify it's working.
Alex Nault
@anault

@jtenner Alright! What I would really love to see with e2d, is the use of the React philosophy, where it makes a diff from the previous state/props and re-renders only the parts that change.

Lets say you ask e2d to draw 3 circles. Next cycle, you ask it to draw 4 circles. Now e2d would only draw the new circle considering the 3 others are exactly the same as before. Maybe that would be possible using some cache system (offscreen canvas which would the equivalent of shadow DOM for React)?

This would close the canvas' gap from imperative to declarative :)

jtenner
@jtenner

@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?

jtenner
@jtenner
@anault hello?