expo-pixi

by expo

Tools for using pixi.js in Expo

231 Stars 94 Forks Last release: Not found MIT License 92 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

expo-pixi

Tools to use Pixi.js in Expo!

To get started:

yarn add expo-pixi
in your Expo project and import it with
import ExpoPixi from 'expo-pixi';
.

Side-Effects

To use Pixi.js with Expo & React Native you will want to import a modified version of Pixi.js like so:

// ✅
import { PIXI } from 'expo-pixi';

// ❌ import * as PIXI from 'pixi.js';

Now you can create a new Application the way you would on the web, but be sure to pass in a

WebGLRenderingContext
.
// ✅
const app = new PIXI.Application({ context });

// ❌ const app = ExpoPIXI.application({ context });

Finally, because of the way React Native currently works you must load in assets asynchronously.

/*
 * Accepts: 
 * - Expo.Asset: import { Asset } from 'expo-asset'; Asset.fromModule( ... );
 * - URL (with file extension): 'http://i.imgur.com/uwrbErh.png'
 * - Static Resource: require('./icon.png')
 */

// ✅ const sprite = await PIXI.Sprite.fromExpoAsync('http://i.imgur.com/uwrbErh.png');

// OR

const texture = await PIXI.Texture.fromExpoAsync('http://i.imgur.com/uwrbErh.png');

// ❌ const sprite = await ExpoPIXI.spriteAsync('http://i.imgur.com/uwrbErh.png');

// OR

const texture = await ExpoPIXI.textureAsync('http://i.imgur.com/uwrbErh.png');

Using web syntax will return a

Promise
, and throw a warning. It's bad practice, but if the asset is loaded already, this will work without throwing a warning.
const sprite = await PIXI.Sprite.from(require('./icon.png'));

// > console.warning(PIXI.Sprite.from(asset: ${typeof asset}) is not supported. Returning a Promise!);

// OR

const texture = await PIXI.Texture.from(require('./icon.png'));

// > console.warning(PIXI.Texture.from(asset: ${typeof asset}) is not supported. Returning a Promise!);

Functions

ExpoPixi.application(props): PIXI.Application

Deprecated: Use

new PIXI.Application({ context });

A helper function to create a

PIXI.Application
from a WebGL context. EXGL knows to end a frame when the function:
endFrameEXP
is called on the GL context.

context
is the only required prop.

Learn more about PIXI.Application props

ExpoPixi.textureAsync(resource: any): Promise

Deprecated: Use

PIXI.Texture.fromExpoAsync(resource);

ExpoPixi.spriteAsync(resource: any): Promise

Deprecated: Use

PIXI.Sprite.fromExpoAsync(resource);

a helper function to resolve the asset passed in.

textureAsync
accepts:
  • localUri: string | ex: "file://some/path/image.png"
  • static resource: number | ex: require('./image.png')
  • remote url: string | ex: "https://www.something.com/image.png"
  • asset-library: string (iOS
    CameraRoll
    ) | ex: "asset-library://some/path/image.png"
  • Expo Asset: Expo.Asset | learn more: https://docs.expo.io/versions/latest/guides/assets.html

You cannot send in relative string paths as Metro Bundler looks for static resources.


ExpoPixi.sprite({ localUri: string, width: number, height: number }): PIXI.Sprite

Deprecated: Use

PIXI.Sprite.from(resource);

ExpoPixi.texture({ localUri: string, width: number, height: number }): PIXI.Texture

Deprecated: Use

PIXI.Texture.from(resource);

Pixi.js does a type check so we wrap our asset in a

HTMLImageElement
shim.

ExpoPixi.Sketch

A component used for drawing smooth signatures and sketches.

See the sketch example on how to save the images!

Notice: the edges and ends are not rounded as this is not supported in PIXI yet: Issue

Props

| Property | Type | Default | Description | | ----------- | :-------------------------: | :------: | ----------------------------------------------- | | strokeColor | number | 0x000000 | Color of the lines | | strokeWidth | number | 10 | Weight of the lines | | strokeAlpha | number | 1 | Opacity of the lines | | onChange | () => PIXI.Renderer | null | Invoked whenever a user is done drawing a line | | onReady | () => WebGLRenderingContext | null | Invoked when the GL context is ready to be used |

ExpoPixi.FilterImage

A Image component that uses PIXI.Filter

Props

| Property | Type | Default | Description | | ---------- | :------------------------: | :-----: | ---------------------------------------------------------------------------- | | resizeMode | string | null | Currently only supports

cover
, and
contain
| | filters | Array | null | Array of filters to apply to the image | | source | number, string, Expo.Asset | null | Source can be a static resource, image url (not
{uri}
), or an
Expo.Asset
|

Example

Snack

import React from 'react';
import Expo from 'expo';
import { PIXI } from 'expo-pixi';

export default () => ( <expo.glview style="{{" flex: oncontextcreate="{async" context=""> { const app = new PIXI.Application({ context }); const sprite = await PIXI.Sprite.fromExpoAsync( 'http://i.imgur.com/uwrbErh.png', ); app.stage.addChild(sprite); }} /> ); </expo.glview>

NPM

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.