Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Stage doesn't get the correct w/h

See original GitHub issue

Hello @kenwheeler,

First of all, such a great wrapper around matter-js, I didn’t know it before and I found it very useful. Thanks 👍

If I have a basic structure like this:

<Loop>
  <Stage width={1024} height={576}>
    <World>
      <Body args={[20, 50, 100]}>
        <Sprite
          repeat
          src='assets/megaman.png'
          ticksPerFrame={1}
          scale={1}
          steps={[1, 2, 3, 4]}
        />
      </Body>
    </World>
  </Stage>
</Loop>

It renders like that:

<div data-reactroot="" data-radium="true" style="height: 100%; width: 100%;">
   <div style="height: 100%; width: 100%;">
    <div style="height: 100%; width: 100%; position: relative;">
     <div style="height: 0px; width: 0px; position: absolute; overflow: hidden; transform: translate(398px, 0px);">
      <div style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%;">
       <div style="height: 64px; width: 64px; overflow: hidden; position: relative; transform: scale(1); transform-origin: left top 0px; image-rendering: pixelated;">
        <img src="assets/megaman.png" style="position: absolute; transform: translate(-384px, 0px);" />
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>

Problem

The problem that I was running with this is that <Stage /> creates a Container and an extra element as I can see it here, and forces the size of the container being full screen, but the child to be absolute and defined by getScale method.

Work-arround

So I need to reset the position of the innerElement adding style={{ position: 'static' }} into <Stage /> for not be able to overflow with a non-sized div inside.

Posible explaination?

I’m thinking that the “problem” here is that I’m trying to render a Sprite with a Body on top, so they don’t have the dimensions yet, so the Stage can’t calculate the space correctly?

I couldn’t find a proper description about <Stage /> in the docs, could be worth it explaining it? In the case that I’m right.

I would love to help to improve the documentation and try to contribute to this project and see how perform with HTML 2D Games.

Thanks 😄

Issue Analytics

State:
Created 7 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

kenwheelercommented, Sep 22, 2016

i check parent dimensions instead of window in case people want to embed in an existing page.

0reactions

davesnxcommented, Oct 19, 2016

Totally my mistake! Sorry for open this.

Top Results From Across the Web

The hidden culprit behind "wh" question confusion in kids

The problem is that most “wh” question activities just focus on asking kids questions over and over again without teaching them the skills...

Kids And The 'WH' Questions: How To Fix It- The Speech Bubble

Our first mistake is assuming that our students understood the difference between the person and 'not a person. Kids And The 'WH' Questions....

6 reasons a child can't answer that WH question - Speech 2U

Teaching WH questions doesn't have to be a drill activity. Learning about common difficulties with WH questions can help you teach your child....

wh- questions - Grammar - Cambridge Dictionary

When the wh-word is the subject of the sentence, we can add the auxiliary do to make it emphatic. We stress do: A:...

Wh-Questions - Exceptional Speech Therapy

Does your child have difficulty attending long enough to adequately hear and understand questions? These are difficult questions to answer. If your child...