fable-compiler/samples-pixi

Pixi samples for Fable

Libraries

Bindings & samples for Pixi.js related libraries including:

• Pixi.js
• Pixi-particles
• Pixi-Sound
• Animejs tweening library

Pixi-particles

Pixi-particles's really easy to use and there's a great online editor to configure your particle effects easily

Go to the src/particles folder to have a go. And make changes to the json located under public/img/emitter.json to see what you can do with particles.

Pixi-Sound

We also support Pixi-Sound, the official pixi sound API.

Go to the src/sound folder to see a sample in action.

Animatejs Tweening

We support Animejs for all your tweenings!

Go to the src/animejs folder to see a sample in action.

Samples

We've got you covered with 19 straight to the point samples which are either ports from the PixiJS official ones or original ones.

Original samples

Dragon Particle

Learn how to move a particle emitter around som SVG shape like our Fable Dragon!

You'll know how to:

• Add particles using pixi-particles
• play simple animations using AnimeJS and html SVG path

Source code can be found here

Game of Cogs

Learn how to make a complete mini game:

• Title screen
• Game Screen
• Loading assets, pictures and json files and sounds, through pixi asset loader
• Playing sounds using pixi-sound
• Adding particles using pixi-particles
• playing simple animations using AnimeJS

Source code can be found here

How to build and run the samples

• Restore NPM dependencies: yarn install
• Restore NuGet dependencies: dotnet restore
• Move to src folder: cd src
• Start Fable and Webpack dev server: dotnet fable yarn-start
• In your browser, open localhost:8080/[EXAMPLE] (e.g. http://localhost:8080/basic) or just select a sample in the list at http://localhost:8080/

Any modification you do to the F# code will be reflected in the web page after saving. If you want to write JS files to disk instead of using the development server, run dotnet fable yarn-build.

How to add a new sample

• Take one of the existing samples as a reference.
• Add the information about your sample to public/samples.json5: id, title and description
• Add one folder named after the id of the sample to src directory and another one to public. The first one will contain the F# (and maybe JS) source files, while the second contains the public assets for the sample (like index.html, images, etc).
• Add the project to the Fable.Samples.sln solution: dotnet sln add src/mySample/mySample.fsproj. Important: the name of your fsproj file must be the same you use for your folder to allow for automatic build.(folder greatProject -> greatProject.fsproj)
• Restore NuGet dependencies: dotnet restore

Webpack configuration

Pixi requires to set additional externals to work with webpack. Like this:

  externals: {
    "PIXI": "PIXI",
    "PIXI.extras": "PIXI.extras",
    "PIXI.loaders": "PIXI.loaders",
    "PIXI.settings": "PIXI.settings",
    "PIXI.filters": "PIXI.filters",
    "PIXI.interaction": "PIXI.interaction",
    "PIXI.mesh": "PIXI.mesh",
    "PIXI.particles": "PIXI.particles",
    "PIXI.sound": "PIXI.sound"
  },

Would you stumble on errors like this: Module not found: Error: Can't resolve 'PIXI.xxx' in ..., just add the module to the Webpack config.

samples-pixi's Issues

Remove old references to binding in the fsproj files

Code simplification

So here comes again our nice dragging sample which has kind of evolved since last year and pixi 3.x.x.

Here's the JS version. Note the use of this.

var texture = PIXI.Texture.fromImage('required/assets/bunny.png');

// Scale mode for pixelation
texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;

for (var i = 0; i < 10; i++) {
    createBunny(
        Math.floor(Math.random() * app.renderer.width), 
        Math.floor(Math.random() * app.renderer.height)
    );
}

function createBunny(x, y) {

    // create our little bunny friend..
    var bunny = new PIXI.Sprite(texture);

    // enable the bunny to be interactive... this will allow it to respond to mouse and touch events
    bunny.interactive = true;

    // this button mode will mean the hand cursor appears when you roll over the bunny with your mouse
    bunny.buttonMode = true;

    // center the bunny's anchor point
    bunny.anchor.set(0.5);

    // make it a bit bigger, so it's easier to grab
    bunny.scale.set(3);

    // setup events for mouse + touch using
    // the pointer events
    bunny
        .on('pointerdown', onDragStart)
        .on('pointerup', onDragEnd)
        .on('pointerupoutside', onDragEnd)
        .on('pointermove', onDragMove);

        // For mouse-only events
        // .on('mousedown', onDragStart)
        // .on('mouseup', onDragEnd)
        // .on('mouseupoutside', onDragEnd)
        // .on('mousemove', onDragMove);

        // For touch-only events
        // .on('touchstart', onDragStart)
        // .on('touchend', onDragEnd)
        // .on('touchendoutside', onDragEnd)
        // .on('touchmove', onDragMove);

    // move the sprite to its designated position
    bunny.x = x;
    bunny.y = y;

    // add it to the stage
    app.stage.addChild(bunny);
}

function onDragStart(event) {
    // store a reference to the data
    // the reason for this is because of multitouch
    // we want to track the movement of this particular touch
    this.data = event.data;
    this.alpha = 0.5;
    this.dragging = true;
}

function onDragEnd() {
    this.alpha = 1;
    this.dragging = false;
    // set the interaction data to null
    this.data = null;
}

function onDragMove() {
    if (this.dragging) {
        var newPosition = this.data.getLocalPosition(this.parent);
        this.x = newPosition.x;
        this.y = newPosition.y;
    }
}

now this is our F# port, which can't get the local this context and so needs a Class to actually be able to work with local methods. It's fully typed and seems more logical than the JS counterpart - why would we create the functions refering to an instance outside of the instance? - but a little bit long and not very eye friendly.

let texture = PIXI.Texture.fromImage("../img/fable_logo_small.png")

// since we d'ont have any {this} context, 
// we make a custom class to handle our events on bunnies
// full typed by the way!
type MyBunny(texture) =
  inherit PIXI.Sprite(texture)

  // store a simple dragging flag when me move the bunny
  let mutable isDragging = false
  
  // our event data
  let mutable data : PIXI.interaction.InteractionData option = None

  member this.onDragStart(event:PIXI.interaction.InteractionEvent) =
      // store a reference to the data
      // the reason for this is because of multitouch
      // we want to track the movement of this particular touch
      data <- Some event.data
      this.alpha <- 0.5
      isDragging <- true

  member this.onDragEnd() =
      data <- None
      this.alpha <- 1.
      isDragging <- false

  member this.onDragMove() =
    if isDragging then
      if( data.IsSome) then 
        let newPosition = data.Value.getLocalPosition(this.parent)
        let position : PIXI.Point = !!this.position
        position.x <-  newPosition.x
        position.y <- newPosition.y

  member this.noop() = console.log("click")
  member this.tap = this.noop
  member this.click = this.noop
  member this.mousedown = this.onDragStart
  member this.touchstart = this.onDragStart
  member this.touchend = this.onDragEnd
  member this.touchendoutside = this.onDragEnd
  member this.mouseupoutside = this.onDragEnd
  member this.mouseup = this.onDragEnd
  member this.touchmove = this.onDragMove
  member this.mousemove = this.onDragMove


let createBunny x y =
    // create our little bunny friend..
    let bunny = MyBunny(texture)

    // enable the bunny to be interactive... this will allow it to respond to mouse and touch events
    bunny.interactive <- true

    // this button mode will mean the hand cursor appears when you roll over the bunny with your mouse
    bunny.buttonMode <- true

    // center the bunny"s anchor point
    bunny.anchor.set(0.5)

    bunny.x <- x
    bunny.y <- y

    // add it to the stage
    app.stage.addChild(bunny) |> ignore


let renderer : PIXI.WebGLRenderer = !!app.renderer
for i in 0..9 do 
  createBunny 
    (Math.floor(Math.random() * renderer.width))
    (Math.floor(Math.random() * renderer.height))

So, could we refactor to something shorter?

Samples don't work on Mac with Safari

Looking at http://fable.io/samples-pixi/

The samples all work fine on Chrome using a Mac, but nothing shows up on Safari 11.0.2.
No errors shown on the console. Demos work fine on iOS safari.

I don't think it's a pixi issue, the examples work fine on macOS Safari: http://pixijs.io/examples/#/basics/basic.js

Any ideas what could be causing the problem, anything I can do to help debug the issue ?

"Safer" project management

Hi, I have been thinking about something

could we change the whatevever.fsproj to a standard app.fsproj in every project folder.
So we would have an app.fsproj in every project. (step 1)

and then update the project json to something like that:

  "particles": {
    "entry": "PixiParticles.fsproj", [etc...]
  },

VS (after entry removal)

  "particles": {
    [etc...]
  },

and then add the entry automatically in the build script under the name app.fsproj (step 2)?

So that in the end we wouldn't have to supply a different name for every fsproj file and have the same folder structure for every project. (to go even further in the automation process)

Would that work?

Type inference

Hi,
the following attachEvent function casts our ExtendedSprite to Sprite:

let attachEvent (ev: PixiEvent) (handler: EventHandler) (sprite: PIXI.Sprite) =
  sprite.on(!!(string ev), handler) |> ignore
  sprite

My question is simple: this function is handy but I would need to get my ExtendedSprite back, not a Sprite.

So is it better to

1 - cast back the Sprite to ExtendedSprite with something like that:

    // cast back to ExtendedSprite since attachEvent returns a Sprite
    let backTo (sprite: PIXI.Sprite) = 
      sprite :?> ExtendedSprite<CogData>

    // attach our custom events to enable dragging
    cog
      |> attachEvent Pointerdown (onDragStart cog)
      |> attachEvent Pointerup (onDragEnd cog)
      |> attachEvent Pointermove (onDragMove cog)
      |> backTo

2 - or add an attachEvent function which takes and outputs an ExtendedSprite?

Thanks!

How to appeal to fellow developers from other communities

Today we provide pixijs bindings for the following niche

niche#1 - Fable developers

who want to do game/multimedia development

niche#2 - .Net F# developers

who want to learn about the js ecosystem through Fable
--> who want to do game/multimedia development

niche#3 - .Net C# developers

who want to do functional programming
--> who are ok to learn F#
----> who want to learn about the js ecosystem through Fable
------> who want to do game/multimedia development

niche#4 - JS developers

who want to do functional programming
--> who are ok to learn F# and .Net
----> who are ok to come to the JS ecosystem indirectly through F# and Fable
------> who want to do game/multimedia development

I think we already appeal to niche#1 and #niche2.
But I have mixed feelings about how to appeal to #niche3 and #niche4.

What do you think?

using Func

Hi,
I have updated the AnimeJS bindings and I am currently struggling with this:

AnimeStatic =
    abstract path: path: U4<string, HTMLElement, SVGElement, obj> * ?percent: float-> Func<string, FunctionBasedValues>

FunctionBasedValues being:

propertyValue =
    U2<float, string>

and FunctionBasedValues =
    Func<Element, float, float, propertyValue>

What I would like to do is:

let path = myInstance.path !!"#motionPath path"

and then use it like this:

let x = path("x")

But how could I get the same result with Func?
Thanks!

Avoid callbacks

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!