pixijs / pixi-react

Write PIXI apps using React declarative style
https://pixijs.io/pixi-react/
MIT License
2.42k stars 180 forks source link

Bug: unable to see "Hello world" text from readme example? #474

Closed cmdcolin closed 8 months ago

cmdcolin commented 9 months ago

Current Behavior

renders the bunny but not the hello world(?)

Expected Behavior

renders the hello world

Steps to Reproduce

copy from readme running example on stackblitz https://stackblitz.com/edit/vitejs-vite-8xdhfy?file=src%2FApp.tsx

Environment

pixi.js@"^7.4.0" @pixi/react@"^7.1.1" react@18.2.0 react-dom@18.2.0 project firefox 122.0.1 snap ubuntu 23

Possible Solution

No response

Additional Information

console log with hello:true PixiJS 7.4.0 - WebGL 2 - https://pixijs.com

screenshot image

cmdcolin commented 9 months ago

i am only asking cause the code sample has code like


      <Container x={200} y={230}>
        <Text
          text="Hello World"
          anchor={{ x: 0.5, y: 0.5 }}
          filters={[blurFilter]}
        />
      </Container>

note: new to pixi :) just looking about

zOadT commented 9 months ago

Oh yes, but its just that we render black text on a black background here. Changing the color makes it visible:

import { BlurFilter, TextStyle } from 'pixi.js'; // add TextStyle import
// [...]
      <Container x={200} y={230}>
        <Text
          text="Hello World"
          anchor={{ x: 0.5, y: 0.5 }}
          filters={[blurFilter]}
          style={new TextStyle({
            fill: ['#ffffff'],
          })}
        />
      </Container>