SolidJS•13mo ago

clear canvas from a parent component

hi i'm trying to make a game with solid + html canvas i want to be able to draw/clear the canvas from a parent "game" component (the "game" component should manage basically everything) how can I do that (if the "game" component idea is bad, let me know and what I can do diffrently please)

13 Replies

GurkanOP•13mo ago

also it would be nice if you ping me when you reply 🙂

thetarnav•13mo ago

are you asking basically how to "send events from parent to child", or to call some function that child component exposes?

GurkanOP•13mo ago

basically send events yea and that the parent "game" component is the entity that sends out events and stuff

thetarnav•13mo ago

only one "canvas component" I imagine?

GurkanOP•13mo ago

yes.

thetarnav•13mo ago

there are various ways for example if there is only one child:

const Child = (props: {setCallback: (cb: () => void) => void}) => {
  props.setCallback(() => {
    // handle event from parent
  })
  return <></>
}

const Parent = () => {
  let callback: () => void
  return <Child setCallback={cb => callback = cb} />
  // then you can call callback()
}

const Child = (props: {setCallback: (cb: () => void) => void}) => {
  props.setCallback(() => {
    // handle event from parent
  })
  return <></>
}

const Parent = () => {
  let callback: () => void
  return <Child setCallback={cb => callback = cb} />
  // then you can call callback()
}

but as you see that is a bit annoying to do. also it might be a hint that the structure of your app is wrong. as usually you make components because you don't want to explicitly call something Like if child needs to be aware of parent, and parent of child, why make them separate components at all you could just separate them to different functions if you want to keep the locality

const createChildState = () => {
  // some child state

  return {
    callback: () => {/* hande the event */}
  }
}

const Child = (props: {state: ReturnType<typeof createChildState>}) => {
  // use the state to render what you need
  return <></>
}

const Parent = () => {
  const child_state = createChildState()
  return <Child state={child_state} />

  // then call child_state.callback()
}

const createChildState = () => {
  // some child state

  return {
    callback: () => {/* hande the event */}
  }
}

const Child = (props: {state: ReturnType<typeof createChildState>}) => {
  // use the state to render what you need
  return <></>
}

const Parent = () => {
  const child_state = createChildState()
  return <Child state={child_state} />

  // then call child_state.callback()
}

You might also use something like a pubsub, where you send event from higher up in the tree, and listen to them lower But thats more for when you have multiple child components, and you don't manage them directly https://github.com/solidjs-community/solid-primitives/tree/main/packages/event-bus#createemitter Also I'm curious how are you using solid reactivity together with a canvas to make a game. From my understanding you don't benefit much from the reactivity when you redraw the scene on every frame regardless.

GurkanOP•13mo ago

well this is the tree of components (i'm making a clone of the chrome dinosaur game) game (parent component) | ---- canvas (will handle all drawing) | ---- dino (the dinosaur) | ---- cactus | ---- ground and im sorta new to web game dev so i dont really know the "best practices"

bigmistqke•13mo ago

Also I'm curious how are you using solid reactivity together with a canvas to make a game.

>From my understanding you don't benefit much from the reactivity when you redraw the scene on every frame regardless. One of the things I like about signals and rendering in the canvas is that it's trivial to do render-on-demand: createEffect(render) and u good to go basically. Idk if it's a good reason, but it's satisfying ☺️

bigmistqke•13mo ago

Also mb interesting for you @Gurkan https://github.com/bigmistqke/solid-canvas lil experiment I did half year ago for making a solid renderer

GitHub

GitHub - bigmistqke/solid-canvas: (WIP) 🎨 A Canvas API-wrapper for ...

(WIP) 🎨 A Canvas API-wrapper for solidjs ⚡ by solid and @solid-primitives/jsx-tokenizer - GitHub - bigmistqke/solid-canvas: (WIP) 🎨 A Canvas API-wrapper for solidjs ⚡ by solid and @solid-primitives...

GurkanOP•13mo ago

oh thanks ill try it

thetarnav•13mo ago

Wouldn’t you want to do rendering in a animation frame though? if not then yeah I guess signals work well Like you still want to redraw everything, even if only one part changed, so why not have only one any_change signal. Although memos are still cool. otherwise thinking what needs to be recalculated and what not could be a pain

bigmistqke•13mo ago

Haha ye it's in a very rough state, so mb don't get ur hopes up haha 🤣 docs r pretty out of date too, just so u know For this game, most likely yes, but with a more thurn-based game it would make sense I think. Or p.ex if you would have an illustration that has a small animation at some point but is static for the rest. It's kind of handy that you don't have to think about it. Nice DX. I think w solid-canvas I eventually had the rendercall in a batch and debounced so it wouldn't overrun. I remember it performed great in my tests, definitely not worse then requestAnimstionframe.

GurkanOP•13mo ago

well thanks for your recommendations, ill try it and let you know how it goes

Gaming

Programming

clear canvas from a parent component