Avoid callbacks

[whitetigle]

Hi! In Pixi, we usually bind events to sprites which mean we don't user some global mouse or keyboard event handler.

So usually I pass a context (=model) with mutable fields into sprites and some callbacks to create animations or interact on a global rendering context.

For instance: when I click o a sprite, I create an animation in the global rendering context using the sprite local information (position for instance). I use a callback to do so.

And if clicking on a sprite updates the score, I update the context by modifying some mutable field. Then the context is evaluated every frame in my update loop through a FSM to check for instance that I have some win conditions.

Last but not least, we use the pixi Ticker which gives us a convenient update loop.

So, as a commonly recurring topic among us can we do better? 😉

Thanks!

[MangelMaxime]

Not to sure to understand everything yet because I didn't dig into the code but when I was developing a game in JS i was using custom event instead of callbacks.

Thanks to F# we can have strongly typed event and perhaps we can even create some local state machine to handle them as we love them :)

By F#, i am speaking of:

// Describe our event
// Here I am using a DU, we can pass what use any type/structure
type PlayerEvent =
  | MoveTo of float * float
  | TakeDamage of float

// Instantiate the event delegate
let playerEvent = Event<PlayerEvent>()

// Register, our handler/state machine :)
playerEvent.Publish.Add(fun msg ->
  math msg with
  | MoveTo (x, y) -> // do something
  | TakeDamage value -> // do something
)

// Trigger the event
playerEvent.Trigger(TakeDamage 10.)

So we are not using callbacks anymore, or at least not directly because we would still need them to catch pixi event. But where before, we could have used XXX callback we can use one event listener and probably have a better abstraction layer ?

[whitetigle]

Ah indeed that's what I'm using in Suave. Didn't think about it for pixi. I need to try this. Thanks @MangelMaxime 👏

[alfonsogarciacaro]

What about using Elmish with Pixi? I had a look at Pixi.ticker and if I understand it correctly this is the place to put the view/render function. Besides that, we would have the classic update function to renew the Model (aka context) and when creating a sprite we would pass a dispatch function so the sprites can send messages to Elmish when an event is triggered (same way as React components do). In pseudo-code:

type Model =
  { Sprites = Sprite[] } // Using array for performance

type Msg =
  | Create of sprites: Sprite[]
  | MoveTo of name: string * x: float * y: float
  | Animate of whatever

let createSprite dispatch =
  let sprite = Sprite()
  sprite.onClick(fun ev -> Animate "foo" |> dispatch)
  sprite

let init dispatch =
   [| for i=0 to 10 do yield createSprite dispatch |]
   |> Create |> dispatch

let update model msg =
  match msg with
  | Create sprites ->
     { model with sprites = Array.append model.sprites sprites }, []
  | Animate _ -> failwith "TODO: Animate"
  | _ -> failwith "TODO: etc, etc"

let ticker = PIXI.ticker.Ticker()
ticker.stop()
ticker.add(fun deltaTime ->
  // Here comes the tricky part: we probably need to update the model
  // again using the deltaTime and there're several options for that.
  // We can send a message to update (though we have to make sure it
  // runs synchronously) or we can a specific updatePhysics (or similar) version.   
  renderer.render(stage))
ticker.start()

[whitetigle]

ok. I need to do a few tests. I'll update the sample I'm currently working on. Thanks guys!

[whitetigle]

Hi @alfonsogarciacaro

Here comes the tricky part: we probably need to update the model again using the deltaTime and there're several options for that. We can send a message to update (though we have to make sure it runs synchronously) or we can a specific updatePhysics (or similar) version.

I'm currently trying to play with the tricky part ;) How can I dispatch a message to the update function from the ticker loop?

[whitetigle]

Ok I have something working with subscriptions. I'll post a sample tomorrow.

[whitetigle]

BTW, it seems the elmish doc is not exactly up to date. (but that's another subject for another repo 😉 )

[whitetigle]