This project aims to provide a ScalaJS facade for Pixi.js, a 2D library that works across all devices. Pixi.js has full WebGL support and seamlessly falls back to HTML5's canvas if needed. It's quite awesome, and ScalaJS makes it awesomer.

The goal of this project is to stay as close as possible to the underlying API, in order words, to favor correctness over abstraction.

Go to http://asteroids.fbksoft.com and shoot some rocks!

It's currently targeting Pixi.js v4.0.3. Don't forget to include it in your project.

Once you've setup your ScalaJS project, simply add this to your dependencies:

    libraryDependencies += "com.fbksoft" %%% "pixi-scala-js" % "1.0"

A good starting import configuration could be:

import pixiscalajs.PIXI
import pixiscalajs.PIXI.{Pixi, RendererOptions}

This way, you can use PIXI.* prefixed references, which is very common in pixi.js documentation and snippets. Very often, you can almost copy-paste normal js code, remove the trailing semicolons, and be done!

Note: To avoid name-clashing with scala package, the global PIXI JS object is mapped to a Pixi (different casing) scala object. It's mostly useful to call the autoDetectRenderer method.

Here is a small example:

@JSExportTopLevel
def main(canvas: html.Canvas): Unit = {
  val renderer = Pixi.autoDetectRenderer(800, 600, RendererOptions(canvas))

  val stage = new PIXI.Container()
  stage.width = 800
  stage.height = 600

  val graphics = new PIXI.Graphics()
  graphics.beginFill(0xFF3300).lineStyle(10, 0xffd900, 1)
  graphics.moveTo(50,50).lineTo(250, 50).lineTo(100, 100)
          .lineTo(250, 220).lineTo(50, 220).lineTo(50, 50)
  graphics.endFill()

  stage.addChild(graphics)

  renderer.render(stage)
}

The pixiscalajs.extensions package contains various extensions to the library designed to make the library more scala-friendly.

The AnimationLoop construct allows to defined an endless loop that automatically calls window.requestAnimationFrame at the end.

import pixiscalajs.extensions.AnimationLoop

AnimationLoop {  
  ...  
  sprite.rotation += 0.1
  ...
  renderer.render(stage)
}

Note that this will start the loop immediately. If you want to control the start, use DefineLoop :

import pixiscalajs.extensions.DefineLoop

val loop = DefineLoop {  
  ...  
  sprite.rotation += 0.1
  ...
  renderer.render(stage)
}

loop.run()

pixiscalajs.extensions.Vector2 is a PIXI.Point implicitly-convertible Vector 2D implementation, with some common function and operators (arithmetic, magnitude, etc.).

  import pixiscalajs.extensions.Keyboard

  val right = Keyboard.bind(39)
  val left = Keyboard.bind(37)

  AnimationLoop {
    if (right.isDown) println("right arrow is pressed")
    if (left.isDown) println("left arrow is pressed")    
  }

An example is packaged in this repo. See the example package.

Most welcome!

This content is released under the (http://opensource.org/licenses/MIT) MIT License.