# pixi-textures
Compressed textures and retina support for pixi v4. Loader can choose textures depends on platform and rendering mode.

Supports DDS (S3TC DXT1-3-5, ATC, ATCA/ATC explicit, ATCI/ATC interpolated) and PVR (PVRTC, ETC1, S3TC DXT1-3-5, PVRTC 2-4bpp RGB-RGBA)

Supports advanced DXT compression [crunch](https://github.com/BinomialLLC/crunch)

## Minimum demo

Pretty easy to hack parser into your loader.

```js
var loader = new PIXI.loaders.Loader();
loader.before(PIXI.compressedTextures.imageParser());
loader.add('building', 'building.dds');
loader.load(function(loader, resources) {
    var sprite = new PIXI.Sprite(resources['building'].texture);
});
```

## Full example

If your app has no detection of supported formats it is not ready for production.

This [example](http://pixijs.github.io/examples/#/textures/dds.js)
shows how to handle multiple resolutions and multiple image formats for single images and for atlases.

```js
var renderer = PIXI.autoDetectRenderer(800, 600, { resolution: window.devicePixelRatio || 1 });
renderer.view.style.width = "800px";
renderer.view.style.height = "600px";
document.body.appendChild(renderer.view);

// this will form list of allowed extensions based on renderer.
var extensions = PIXI.compressedTextures.detectExtensions(renderer);

var loader = new PIXI.loaders.Loader();
// this middleware chooses appropriate file. It also has imageParser() inside
loader.before(PIXI.compressedTextures.extensionChooser(extensions));
// use @2x texture if resolution is 2, use dds format if its windows
var textureOptions1 = { metadata: {choice: ["@2x.png", ".dds", "@2x.dds"]} };
// use dds format if its windows but dont care for retina
var textureOptions2 = { metadata: {choice: [".dds"]} };
// while loading atlas, choose resolution for atlas and choose format for image
var atlasOptions = { metadata: { choice: ["@2x.json", "@1x.json"], imageMetadata: { choice: [".dds"]} } };

var stage = new PIXI.Container();

loader.add('building1', '_assets/compressed/building1.png', textureOptions1)
    .add('building2', '_assets/compressed/building2.png', textureOptions2)
    .add('atlas1', '_assets/compressed/buildings.json', atlasOptions )
    .load(function(loader, resources) {
        var spr1 = new PIXI.Sprite(resources.building1.texture);
        var spr2 = new PIXI.Sprite(resources.building2.texture);
        var spr3 = new PIXI.Sprite.fromImage('goldmine_10_5.png');
        var spr4 = new PIXI.Sprite.fromImage('wind_extractor_10.png');
        spr1.position.y = spr3.position.y = 150;
        spr2.position.y = spr4.position.y = 350;
        spr1.position.x = spr2.position.x = 250;
        spr3.position.x = spr4.position.x = 450;
        stage.addChild(spr1);
        stage.addChild(spr2);
        stage.addChild(spr3);
        stage.addChild(spr4);
    });

animate();

function animate() {
    requestAnimationFrame(animate);
    renderer.render(stage);
}
```

## Note about atlases

PIXI recognizes resolution of atlas by suffix (@1x, @2x, ... )

If you dont specify that, resolution of the atlas will be taken from "meta.scale" which in our example is 1 and 0.5 instead of 2 and 1. It will shrink everything!


### Browserify

If you use browserify you can use pixi-textures like this:

```js
var PIXI = require('pixi.js'),
    TEX = require('pixi-compressed-textures');

var loader = new PIXI.loaders.Loader();
// textureParser will form list of allowed extensions based on renderer.
loader.before(PIXI.compressedTextures.extensionChooser(PIXI.compressedTextures.detectExtensions(renderer)));
```

## Building

You will need to have [node][node]

Then you can install dependencies and build:

```js
npm i && npm run build
```

That will output the built distributables to `./dist`.

[node]:       http://nodejs.org/