CamO

Members
  • Content Count

    4
  • Joined

  • Last visited

About CamO

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hello I am trying to generate a texture. from a drawn rectangle, I have used many examples while searching but its either.not drawing or giving an error how can i do it? Btw it will be inside the Shape custom component const Father = () => { const [drawScale, setDrawScale] = useState("rectangle") const [elements, setElements] = useState([{ id: 1,//elements.length===0 ? 1 : Math.max(...elements.map(elements => elements.id))+1, pts: [ { x: 0, y: 0 }, { x: 300, y: 0 }, { x: 300, y: 100 }, { x: 0, y: 100 }, ], x: 100, y: 100, } ]) return( <div id="main" style={{ position: 'absolute', height: '100%', width: '100%', overflow: "hidden", background: "linear-gradient(#232526,#414345)" }}> <div className="designScreen"> <Stage width={width} height={window.innerHeight * 8.67 / 10} options={{ antialias: true, resolution: window.devicePixelRatio || 1, autoResize: true, backgroundColor: 0x000000, /*sharedTicker: true, autoStart: false,*/ }}> { elements.map((el, i) => { return < Child id={el.id} pts={el.pts} elements={elements} x={el.x} y={el.y} fn)} i={i} /> }) } </Stage> </div> </div> ) } const Child = (props) => { React.useEffect(() => { }); const Cont = PixiComponent('Cont', { create() { return new Container() }, applyProps: (c, _, props) => { const { pts, fill, inter,x,y } = props; c.interactive = inter c.name = { name: "cont" } c.position.x=x c.position.y=y }, }); const Shape = PixiComponent('Shape', { create() { return new Graphics() }, applyProps: (g, _, props) => { const { pts, x, y, fill, transNum } = props; g.name = { name: "Shape", trans:transNum, pts:pts } return ( <ACont inter={true} x={props.x} y={props.y}> <AShape pts={[...(String(props.pts.map(el => String([el.x, el.y]))).split(',')).map(el => parseFloat(el))]} fill={0xffffff} transNum={props.transformer} /> </ACont> ) } export default Father
  2. by the way i used your proposition and it worked for fill, if its not asking for much could you provide your email, i have a matter that might interest you
  3. Hi Ivan, due to gsap licensing policy I will be dropping their library and i will be using pixi-ease instead, thanks for the help thought, i appreciate it
  4. Hey, I've been trying to change fill and line properties such as lineColor and lineWidth, when logging the object in the console it shows that the value have change but it does not rerender it and it shows the initial colors or width. I tried using the new gsap syntax by using import PixiPlugin from "gsap/PixiPlugin"; gsap.registerPlugin(PixiPlugin); PixiPlugin.registerPIXI(PIXI); but it wasnt working for any tween with sub properties so i am using the old syntax, below is the code const App =()=>{ function onClick() { gsap.to(this.fill,1,{color:0x000000}) // gsap.set(this,1 {x:550,tint:0x9013FE, height:200}) console.log(this) } } return( <Stage width={width} height={window.innerHeight*8.67/10} options={{ antialias: true, resolution:window.devicePixelRatio || 1 , autoResize:true, backgroundColor: 0x000000, x:400, y:900 }}> <Graphics key={0} interactive={true} draw={graphics =>{ graphics.lineStyle(2, 0xffffff, 1); graphics.beginFill(0xff00bb, 0.25); graphics.drawPolygon([ 150, 450, 450, 450, 450, 550,150, 550]); graphics.endFill(); graphics .on('mousedown', onClick) .on('touchstart', onClick) } }/> </Stage> ) } export default App I tried using tint but when duration >0 it changes into multiple colors and for the long run of this project i don't think it is efficient, finally as you can see i am using react