Avoid callbacks

[fable-compiler]

Avoid callbacks

[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]

[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 👏

[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 😉 )