OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to use updateTransform to do something every frame/render WITHOUT moving the sprite? (or is there a better callback?) (Using ReactPixi)

  • Thread starter Thread starter Sprinkle
  • Start date Start date
S

Sprinkle

Guest
Pixi.js added an onRender callback that is called every frame in v8, however ReactPixi seems to only have support for Pixi.js v7, so I have to use updateTransform. (I'm using ReactPixi). The documentation below states about updateTransform - "many people used this function to do custom logic every frame"

https://pixijs.com/8.x/guides/migrations/v8?_highlight=onrender#other-breaking-changes

Also, how do I actually use updateTransform? (what arguments does it take, what does it do, etc..) I couldn't find any documentation on it, except this which doesnt explain anything... https://pixijs.download/v4.8.9/docs/PIXI.TransformBase.html#updateTransform

The tricky thing is - I don't actually want my sprite to move every frame... I'm really just looking for a callback to do something ELSE every frame, and I noticed that updateTransform moves my sprite even if I dont pass it any arguments. Is there a different callback I should use? Also, is it possible to use updateTransform without it moving my sprite?

Thanks!

I tried this but arg was undefined and I have no idea how to use the method... thanks!

Code:
 <Sprite
            image={"../images/blue.png"}
            width={100}
            height={100}
            x={100}
            y={100}
            anchor={0.5}
            interactive={true}
            pointerdown={onDragStart}
            pointerup={onDragEnd}
            pointerupoutside={onDragEnd}
            pointermove={onDragMove} 
            rightdown={right}
            rightdowncapture={right2}
            updateTransform={(arg) => {
              console.log(arg)
            }}
          />

<p>Pixi.js added an onRender callback that is called every frame in v8, however ReactPixi seems to only have support for Pixi.js v7, so I have to use updateTransform. (I'm using ReactPixi). The documentation below states about updateTransform - "many people used this function to do custom logic every frame"</p>
<p><a href="https://pixijs.com/8.x/guides/migrations/v8?_highlight=onrender#other-breaking-changes" rel="nofollow noreferrer">https://pixijs.com/8.x/guides/migrations/v8?_highlight=onrender#other-breaking-changes</a></p>
<p>Also, how do I actually use updateTransform? (what arguments does it take, what does it do, etc..) I couldn't find any documentation on it,
except this which doesnt explain anything... <a href="https://pixijs.download/v4.8.9/docs/PIXI.TransformBase.html#updateTransform" rel="nofollow noreferrer">https://pixijs.download/v4.8.9/docs/PIXI.TransformBase.html#updateTransform</a></p>
<p>The tricky thing is - I don't actually want my sprite to move every frame... I'm really just looking for a callback to do something ELSE every frame, and I noticed that updateTransform moves my sprite even if I dont pass it any arguments. Is there a different callback I should use? Also, is it possible to use updateTransform without it moving my sprite?</p>
<p>Thanks!</p>
<p>I tried this but arg was undefined and I have no idea how to use the method... thanks!</p>
<pre><code> <Sprite
image={"../images/blue.png"}
width={100}
height={100}
x={100}
y={100}
anchor={0.5}
interactive={true}
pointerdown={onDragStart}
pointerup={onDragEnd}
pointerupoutside={onDragEnd}
pointermove={onDragMove}
rightdown={right}
rightdowncapture={right2}
updateTransform={(arg) => {
console.log(arg)
}}
/>
</code></pre>
 
Top