Image for post
Image for post

Merry Christmas Fable Community!

François Nicaise
Dec 4, 2017 · 4 min read

Dear people from the f# & Fable community, here is my little contribution to the great F# advent calendar 2017 edition.

I’m very happy to be able to participate this year with a light presentation of PixiJS and Animejs for Fable.

Image for post
Image for post

PixiJS and Fable

I have been working quite some time using PixiJS. So it was quite obvious for me to port PixiJS to Fable. I started in 2016 with PixiJS v3.x. And this year, with the help of the Fable community I ported the brand new v4.x.x APIs.

Getting started

So how one is getting started with PixiJS on Fable? That’s very simple.

Bindings are located in the official fable-import repository and available as a NuGet package.

So for all your PixiJS based projects you can easily add the dependency using our beloved Paket tool:


Wrappers are great but we obviously need samples and proper documentation. Regarding the latter, I haven’t had enough time to start but it’s something that’s planned for 2018.

So, instead I focused on porting all the most known PixiJS javascript samples to F# and Fable. These samples are ready to play with here and of course, full source is available from the official samples-pixi repository.

Image for post
Image for post
Rotating Bunny?

For instance, here’s the adaptation of the very first basic pixi sample for Fable

Image for post
Image for post
Fablicules! (Fable Particles)

You’ll also find there our latest experiments mixing sub PixiJS libraries such as pixi-particles and pixi-sound.

And even small gaming experiments like this one:

Image for post
Image for post

Fable Pixi Template!

Ah! And there’s a great new project to easily get started using Pixi and Fable. Thanks to the amazing work of Mike Janger.

So grab the template, start a new project, copy and paste some code from samples-pixi and have fun!

Image for post
Image for post

Animejs and Fable

For those who don’t know Animejs yet, it’s a great tweening library that allows to animate Dom Elements, SVG and any javascript object

There too, we’ve prepared bindings in the fable-import repository.

So for all your Animejs based projects you can easily get a most convenient NuGet package through our beloved Paket tool:

We’ve also made sure to provide with samples featuring both PixiJS and Animejs. Full source is, again, available from the official samples-pixi repository, like the sample below.

Image for post
Image for post
Fable, PixiJS and AnimeJS working together

Merry Christmas!

Now here’s my gift for you: Click here to see it in action!

Image for post
Image for post

Of course the source code is available for you. It’s fully documented. I’ve spent a lot of time tweaking things to easy up things. It’s a very small project involving PixiJS and AnimeJS yet it is complete: we’re using a preloader, we’re using layers, sprites, particles, a little Async based state machine to process events and a very easy to understand rendering state machine.

So there’s plenty of things to learn and who knows… You could easily tweak this project to build a complete game…

Last but not least

2017 has been a great #fsharp year for me with FableConf and all the projects I did using Fable.

It seems that, for very special reasons, 2018 will also be a great #fsharp #fable year too. Now that our pixi repo is ready I will try to work on the documentation part to make this much more practical for you and who knows… Maybe we’ll see great animations or games popping on twitter with the hashtag #fablepixi


I would like to thank the whole Fable and Fsharp community for their kind help.

And particularly Alfonso & Maxime for their patience, their messages full of kawaii emojis and their invaluable help on setting up the sample-pixi and fable-import repositories as well as NuGet packages.

Fsharp rocks! And don’t forget:

Fable: if it compiles it works.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store