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

Minimum demo

Pretty easy to hack parser into your loader.

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 shows how to handle multiple resolutions and multiple image formats for single images and for atlases.

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:

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

Then you can install dependencies and build:

npm i && npm run build

That will output the built distributables to ./dist.