Jump to content


  • Content Count

  • Joined

  • Last visited

Everything posted by Specy

  1. That's really hard... with react it's all a mess, everything is super nested but the main issue seems to come from the changing of state and the rendering, they do a 50/50. I'll try to reduce the amounts of state changes but i don't think i can change much capture 21_20_32 (1).json
  2. that's what i did, i'm now reusing all textures and pre render them, i think it might be because of pixi library i'm using for react (@inlet/react-pixi) which watching benchmarks seems to be 4 times slower than normal pixi when using many elements
  3. I tried like you said, so using canvas 2d, i then converted the canvas to dataURI and fed that into the sprite, performance is a bit better compared to before but it still lags a lot
  4. Ok so i'm having issues trying to generate the texture, i followed some code that i saw and it showed that this should work? but it doesn't, i get an error "sprite image prop is invalid", this is the code i use to generate the cache: the cached elements are RenderTexture import {TempoChangers} from "../SongUtils" import * as PIXI from "pixi.js" class ComposerCache{ constructor(width,height){ this.width = width this.height = height this.cache = { columns: [], notes: [] } this.app = new PIXI.Application({
  5. ok i'll see what i can do, i just started out with pixi and graphics in general so everything is still unknown to me and i don't know how to behave, i'll first finish the functionality then move to optimization
  6. i need to have the element sizes dynamic and customizable so i prefer to do the textures with the code, is there a way i can render something once and then reuse them inside sprites in the code?
  7. function Column(props) { let { data, index, sizes, click, isSelected, bgColor } = props let color = isSelected ? selectedColor : bgColor function drawBg(g) { g.clear() g.beginFill(color, 1) g.drawRect(0, 0, sizes.width, sizes.height) g.lineStyle(1, 0x00000, 0.8) g.moveTo(sizes.width, 0) g.lineTo(sizes.width, sizes.height) g.moveTo(0, 0) g.lineTo(0, sizes.height) } let noteHeight = sizes.height / 21 - (noteMargin * 2) let noteWidth = sizes.width - (noteMargin * 2) function drawNote(g, note) { g.c
  8. <Stage width={s.width} height={s.height} options={pixiOptions} > <Container anchor={[0.5, 0.5]} x={xPos} > {data.columns.map((column, i) => { if (counter > 15) { switcher = !switcher counter = 0 } counter++ if (!isVisible(i, data.selected)) return null l
  9. Ok wait let me first track down where the issue is then i'll share the rest
  10. Hey, i'm making a music composer for a webapp, i'm using react-pixi to render all the information that i need for the song, they are basically made out of columns with inside of it the single notes, in total there are 3 different elements that are rendered, the only thing that changes are their position, i'm already using culling to not render elements which aren't visible, but when there are many notes on screen, it still lags, i've found the issue being the repetitive drawing of the notes. What i want to ask is, is there a way to speed up the drawing of elements on screen by caching the
  • Create New...