SolidJS•12mo ago

sync with external data for use in web game

Hello guys, I'm currently working on a game using an ECS library called Miniplex and the 3d library ThreeJS and I think solid would be the perfect library to use to build the UI. The only problem I'm facing is how do I integrate solid with the data from my game engine without making everything a store. Or should I make everything a store? I already have a game loop going every frame and I'm not scared of resyncing the data every frame if necessary. After having a look at the primitives I figured I could create a wrapper for create store and send the update function with the original object to the game loop to be ran every frame, but I figured there might be a better solution. How would you approach this?

3 Replies

thetarnav•12mo ago

solid kinda requires you to use signals for state management, but there is still a way to get around that if you don't want to. in my own game I didn't want to care about signals, so I just had a single one to be used for all updates. kinda like this:

const game_state = {...}
const [track, trigger] = solid.createSignal(undefined, {equals: false})
const gameState = () => (track(), game_state)

function updatePlayerPosition(new_position) {
  gams_state.player.position = new_position
  trigger()
}

return <div>Position: {gameState().player.position}</div>

const game_state = {...}
const [track, trigger] = solid.createSignal(undefined, {equals: false})
const gameState = () => (track(), game_state)

function updatePlayerPosition(new_position) {
  gams_state.player.position = new_position
  trigger()
}

return <div>Position: {gameState().player.position}</div>

you just have to call track() every time you access the global state in the ui I guess you could also just call trigger every frame, instead of when mutating the state, but thats up to you, not sure if thats a good idea Then for rendering lists youd have to use <Key> from solid-primitives instead of <For>, because <For> assumes each item will be updated by nested signals

Darkpouetman•12mo ago

Oh that's neat, thanks for the example! So you create a dummy signal that you manually trigger when changing the state to indicate that something changed? The only thing I don't quite get is const gameState = () => (track(), game_state), what is happening here? Thanks for the info for <Key>, I'll keep it in mind!

thetarnav•12mo ago

const gameState = () => (track(), game_state), what is happening here?

it's a shorthand for

const gameState = () => {
  track()
  return game_state
}

const gameState = () => {
  track()
  return game_state
}

Gaming

Programming

sync with external data for use in web game