GithubHelp home page GithubHelp logo

pixijs / pixijs Goto Github PK

View Code? Open in Web Editor NEW
43.7K 991.0 4.8K 106.14 MB

The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

Home Page: http://pixijs.com

License: MIT License

JavaScript 2.59% GLSL 0.18% TypeScript 96.79% Shell 0.01% WGSL 0.44%
canvas2d pixijs javascript webgl glsl canvas rendering pixi game renderer

pixijs's Introduction

PixiJS โ€” The HTML5 Creation Engine

pixi.js logo

Discord npm version Node.js CI Financial Contributors

This project aims to provide a fast, lightweight 2D library that works across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast.

If you want to keep up to date with the latest PixiJS news then feel free to follow us on Twitter @PixiJS and we will keep you posted! You can also check back on our site as any breakthroughs will be posted up there too!

We are now a part of the Open Collective and with your support you can help us make PixiJS even better. To make a donation, simply click the button below and we'll love you forever!

What to Use PixiJS for and When to Use It

PixiJS is a rendering library that will allow you to create rich, interactive graphics and cross-platform applications and games without having to dive into the WebGL API or deal with browser and device compatibility.

PixiJS supports WebGPU with fallback support for WebGL. As a library, PixiJS is a fantastic tool for authoring interactive content. Use it for your graphics-rich, interactive websites, applications, and HTML5 games. Out-of-the-box, cross-platform compatibility and graceful degradation mean you have less work to do and more fun doing it! If you want to create polished and refined experiences relatively quickly without delving into dense, low-level code, all while avoiding the headaches of browser inconsistencies, then sprinkle your next project with some PixiJS magic!

Boost your development and feel free to use your imagination!

Current features

  • WebGL renderer (with automatic smart batching, allowing for REALLY fast performance)
  • WebGPU renderer (new to the latest browsers!)
  • Canvas renderer (Fastest in town!)
  • Full scene graph
  • Super easy to use API (similar to the flash display list API)
  • Support for texture atlases
  • Asset loader / sprite sheet loader
  • Auto-detect which renderer should be used
  • Full Mouse and Multi-touch Interaction
  • Text
  • BitmapFont text
  • Multiline Text
  • Render Texture
  • Primitive Drawing
  • Masking
  • Filters
  • Community-Supported Plugins

Setup

It's easy to get started with PixiJS! Simply download a prebuilt build!

Alternatively, PixiJS can be installed with npm or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page.

NPM Install

npm install pixi.js

There is no default export. The correct way to import PixiJS is:

import * as PIXI from 'pixi.js';

CDN Install

Via jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>

Or via unpkg:

<script src="https://unpkg.com/[email protected]/dist/pixi.min.js"></script>

Basic Usage Example

import { Application, Sprite, Assets } from 'pixi.js';

// The application will create a renderer using WebGL, if possible,
// with a fallback to a canvas render. It will also setup the ticker
// and the root stage PIXI.Container
const app = new Application();

// Wait for the Renderer to be available
await app.init();

// The application will create a canvas element for you that you
// can then insert into the DOM
document.body.appendChild(app.canvas);

// load the texture we need
const texture = await Assets.load('bunny.png');

// This creates a texture from a 'bunny.png' image
const bunny = new Sprite(texture);

// Setup the position of the bunny
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;

// Rotate around the center
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;

// Add the bunny to the scene we are building
app.stage.addChild(bunny);

// Listen for frame updates
app.ticker.add(() => {
    // each frame we spin the bunny around a bit
    bunny.rotation += 0.01;
});

Learn

  • Website: Find out more about PixiJS on the official website.
  • Getting Started:
    • Check out the getting started guide.
    • Also, check out @miltoncandelero's PixiJS tutorials aimed toward videogames with recipes and best practices here
  • Examples: Get stuck right in and play around with PixiJS code and features right here!
  • API Documentation: Get to know the PixiJS API by checking out the docs.
  • Guide: Supplementary usage guides to the API Documentation here.

Demos

Community

  • Forums: Check out the discussions and Stackoverflow -- both friendly places to ask your PixiJS questions.
  • Chat: You can join us on Discord to chat about PixiJS.

How to build

Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our prebuilt releases. The only time you should need to build PixiJS is if you are developing it.

If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm:

npm install

Then, to build the source, run:

npm run build

How to generate the documentation

The docs can be generated using npm:

npm run docs

Contribute

Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request, or you fancy owning a task from the road map above, feel free to get in touch.

Make sure to read the Contributing Guide before submitting changes.

License

This content is released under the MIT License.

pixijs's People

Contributors

achamas-playco avatar agamemnus avatar alvinsight avatar amorporkian avatar andrewstart avatar bigtimebuddy avatar dev7355608 avatar drkibitz avatar englercj avatar exponenta avatar goodboydigital avatar ivanpopelyshev avatar jasonsturges avatar jetlua avatar krzysztof-o avatar mattdesl avatar miltoncandelero avatar photonstorm avatar sebastiannette avatar serg-y avatar serprex avatar shukantpal avatar sirknightdragoon avatar spaceribs avatar staff0rd avatar stbaer avatar supersodasea avatar themoonrat avatar thewyo avatar zyie avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pixijs's Issues

Remove, then render the same stage (toggle a stage) possible?

I'm attempting to render a pixi stage (PIXI.autoDetectRenderer) into a canvas element, then via a separate JS remove the stage by selecting it's container in jquery and emptying out the respective canvas element.

When I try to render the same pixi stage again, I run into a bunch of WebGL related errors like this:

WebGL: INVALID_OPERATION: bindTexture: object not from this context

I assume this is because I'm merely emptying out the canvas element, but the related WebGL objects still exist somewhere in memory.

Is there an easy way to be able toggle the existence of a pixi stage?

Pixi as an asynchronous module

This would be really useful if possible - but possibly a fair bit of refactoring.

At the moment, when loading pixi via a module loader (like requireJS), with a shim opening up the global to scripts, it works ok, but one of the dependencies (namely gl-matrix-min) is a 'proper' self contained AMD module. This confuses a little, as that is what gets returned if you follow the standard loading pattern as the code currently stands.

Just a thought. Will continue to play ;)

Spritesheet frames are displayed incorrectly in Safari on Windows 7

purple_triangles

I can't attach the JSON file to test with, but this sprite sheet renders correctly in Firefox/IE/Chrome but flickers in Safari on windows. Also, to make it run I had to comment out the line:

throw new Error("Texture Error: frame does not fit inside the base Texture dimensions " + this);

on 3624 of pixe.dev.js because it kept throwing an error there, even though the sprite sheet seems valid. If I remove that validation check the frames appear to be animating correctly.

The validation error happens across all browsers.

Let me know if you'd like me to email you the files I am working with.

When does a Sprite's width and height become valid?

When I load a texture into a sprite, and then ask for the sprite's width, I get a value of 1. Only after going through the animation loop a couple times does the width become valid. Is there a reliable way to check the dimensions of a loaded texture?

  var stage = new PIXI.Stage(0x66FF99);
  var renderer = new PIXI.CanvasRenderer(800, 600);
  document.body.appendChild(renderer.view);
  var texture = PIXI.Texture.fromImage("stone.png");
  var stone = new PIXI.Sprite(texture);
  console.log(stone.width + ', ' + stone.height);
  stage.addChild(stone);
  console.log(stone.width + ', ' + stone.height);
  requestAnimFrame( animate );
  console.log(stone.width + ', ' + stone.height);
  renderer.render(stage);
  console.log(stone.width + ', ' + stone.height);

All of those console.log()s log "1, 1" even though it should be 128, 128. If I put that console.log() in the animation loop, it does start to output 128, 128.

Right mousebutton click

Hi. I canโ€™t catch, how to detect if right mouse button was clicked?
Or how to detect double-click?

InteractionManager: Uncaught ReferenceError

Hi there!
There is a little bug in the InteractionManager:

PIXI.InteractionManager.prototype.onTouchEnd = function(event)

If you use a touchEvent like "touchStart" or "touchEnd", the console return:

Uncaught ReferenceError: itemTouchData is not defined 

Can we just update with:

PIXI.InteractionManager.prototype.onTouchEnd = function(event) {
  event.preventDefault();
  var rect = this.target.view.getBoundingClientRect();
  var changedTouches = event.changedTouches;

  for (var i=0; i < changedTouches.length; i++) {
    var itemTouchData; // <-- Here?!
    var touchEvent = changedTouches[i];
(...)

Thanks!

AssetLoader doesn't work when cache enabled.

maybe, AssetLoader doesn't work when cache enabled.

I had run in this case...

if(texture.width && texture.height){
texture.hasLoaded = true;
this.assets.push(texture);
this.onAssetLoaded();
} else if(!texture.hasLoaded){

thanks pixijs.

texture.setFrame() requires texture.noFrame = false to work as well?

Hi. I've been playing a bit with Pixi, and enjoying it a lot so far.

I was wondering about setting the frame of a texture. It did not work for me at first, and I had to look around in the source to find the "noFrame" flag. Is this expected / normal? There was no mention of it in the docs for setFrame().

The line:

texture.setFrame( frameRec );

does not work without adding:

texture.noFrame = false;

Multiple PIXI.Stage's on one page

When I have more than one pixi stage on a page that uses textured sprites, the first stage renders the sprite just fine, however the second throws the error:

WebGL: INVALID_OPERATION: bindTexture: object not from this context 

Here's an example, once it loads, click run with the console open:
http://jsfiddle.net/tolmark12/dDWD9/1/ (coffeescript)

edit : updated js fiddle link

...

Become normaly.

Texture Cache

Caching for PIXI.Texture.fromCanvas() return first cached texture.
it is wrong to use 'canvas' as key for TextureCache[] and BaseTextureCache[]
Also I it think caching for canvas is bad idea, because canvas can change content.

Mousemove Events

Looks like we get mouseup, mousedown, mouseover, and mouseout events called on Sprites (per the docs). I want to allow dragging in grapefruit, is there anyway we can also get mousemove events so I can drag stuff around?

Performance issues on Safari, Mobile Safari, and Android browsers

We've implemented an open source HTML5 2D Molecular Dynamics simulation framework and are using SVG and D3.js to render the particles.

Performance is reasonable but there has recently been a terrible SVG performance regression in Firefox.

So we wrote a simple benchmark test to help us evaluate Pixi.js, KineticJS) + Shape Caching, and SVG using D3.js

The results were very confusing ... I'm sharing this here because I thought you would be interested ... in general Pixi.js is very good ...but also there seems to serious relative performance issues on Safari, Mobile Safari, and Android browsers.

Here are the three versions of the benchmark test:

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer

Anyway here's the very confusing "executive summary" ... following this are the data I collected if you want to dig deeper.

I've collected performance data from three of Piotr's red-circle animation benchmarks from iPad, Android, Mac OS X 10.6.8, 10.8.3, and Windows 7.

Tested on all platforms:

  • D3 SVG request AnimationFrame
  • Canvas KineticJS + Shape Caching
  • Pixi.js Canvas Renderer

The results are bizarre.

The only consistent results are where WebGL is available Pixi.js WebglRenderer is the fastest by far.

On all the Safari-based browsers (including Mobile Safari on the iPad) the D3 SVG rendering is faster.

Chrome on Android was recently updated from v18 to v25. Chrome v25 now appears to be at least three times slower rendering SVG than Chrome 18.

The stock Android browser is 3x faster rendering SVG than Chrome 25.

On all versions of Safari the Pixi.js Canvas renderer is much slower than than Canvas KineticJS + Shape Caching.

On all the other browsers the Pixi.js Canvas renderer is much faster than Canvas KineticJS + Shape Caching.

EXCEPT on the stock Android browser where the Pixi.js Canvas renderer is 4x slower than Canvas KineticJS + Shape Caching.

On all versions of Firefox Pixi.js CanvasRenderer is much faster than Canvas KineticJS + Shape Caching which in turn is much faster than D3 SVG request AnimationFrame.

On all versions of Chromw (except on Android) Pixi.js CanvasRenderer is about twice as fast as either Canvas KineticJS + Shape Caching or D3 SVG request AnimationFrame (which are about the same).


Mac OS X 10.6.8, Chrome 27.0.1452.0 canary

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  57.43   17.41
50  59.67   16.76
150 59.55   16.79
250 48.65   20.55
500 27.25   36.70
750 18.58   53.83

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  55.74   17.94
50  57.67   17.34
150 58.66   17.05
250 53.92   18.55
500 28.36   35.27
750 19.93   50.19

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
--- error ---

http://bl.ocks.org/pjanik/5238326
Pixi.js WebGLRenderer
Circles FPS repaint [ms]
--- error ---


Windows 7, Firefox Nightly 22.0a1 (2013-03-25)

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  58.92   16.97
50  59.24   16.88
150 39.22   25.50
250 26.92   37.15
500 14.61   68.45
750 9.85    101.47

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  59.59   16.78
50  59.29   16.87
150 50.47   19.81
250 32.33   30.93
500 17.24   58.00
750 11.86   84.31

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  48.00   20.83
50  59.57   16.79
150 59.01   16.95
250 59.48   16.81
500 49.07   20.38
750 34.90   28.65
5000    6.16    162.24

http://bl.ocks.org/pjanik/5238326
Pixi.js WebGLRenderer
Circles FPS repaint [ms]
25  56.58   17.67
50  59.55   16.79
150 59.15   16.91
250 59.17   16.90
500 59.15   16.91
750 59.57   16.79
5000    41.53   24.08

Mac OS X 10.6.8, Chrome 25.0.1364.99

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  55.97   17.87
50  59.62   16.77
150 59.64   16.77
250 44.29   22.58
500 26.57   37.64
750 17.99   55.59

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  49.34   20.27
50  59.27   16.87
150 58.96   16.96
250 58.21   17.18
500 30.61   32.67
750 20.39   49.05

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  56.45   17.71
50  58.75   17.02
150 59.08   16.93
250 59.08   16.93
500 59.10   16.92
750 58.66   17.05
5000    18.66   53.58

http://bl.ocks.org/pjanik/5238326
Pixi.js WebGLRenderer
Circles FPS repaint [ms]
25  56.39   17.73
50  59.64   16.77
150 60.39   16.56
250 60.44   16.55
500 60.48   16.53
750 60.05   16.65
5000    46.55   21.48




Windows 7, IE10

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25 85.71 11.67
50 91.19 10.97
150 54.55 18.33
250 33.88 29.52
500 17.36 57.59
750 10.60 94.38

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25 63.56 15.73
50 63.99 15.63
150 42.48 23.54
250 27.84 35.92
500 15.93 62.78
750 11.08 90.24

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
--- error ---


Windows 7, Chrome 25.0.1364.172 m

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  55.39   18.05
50  59.71   16.75
150 36.15   27.66
250 39.83   25.11
500 23.88   41.87
750 16.30   61.35


http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  59.55   16.79
50  59.64   16.77
150 58.57   17.07
250 42.77   23.38
500 25.00   40.00
750 17.52   57.08

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  59.48   16.81
50  59.12   16.91
150 59.24   16.88
250 48.91   20.45
500 37.21   26.87
750 38.55   25.94
5000    18.46   54.17


Windows 7, Firefox 19.0.2

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  47.88   20.89
50  45.86   21.81
150 13.38   74.71
250 7.66    130.62
500 3.77    265.28
750 3.66    273.38

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  79.83   12.53
50  60.66   16.49
150 38.67   25.86
250 29.52   33.88
500 13.66   73.22
750 8.31    120.36

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  61.40   16.29
50  58.28   17.16
150 51.16   19.55
250 48.64   20.56
500 30.73   32.55
750 19.88   50.29
5000    3.55    281.77


Windows 7, Firefox Nightly 22.0a1 (2013-03-25)

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  55.85   17.91
50  42.23   23.68
150 18.75   53.33
250 12.60   79.35
500 8.49    117.83
750 4.67    214.30

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  39.54   25.29
50  40.28   24.83
150 35.72   27.99
250 27.64   36.17
500 18.55   53.92
750 14.26   70.12

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  64.77   15.44
50  67.45   14.83
150 67.84   14.74
250 67.20   14.88
500 59.48   16.81
750 45.18   22.13
5000    10.67   93.73


Windows 7, Chrome 27.0.1452.2 canary

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  58.37   17.13
50  59.59   16.78
150 56.80   17.61
250 49.24   20.31
500 23.88   41.87
750 16.78   59.59

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  32.11   31.15
50  32.11   31.15
150 36.36   27.50
250 39.03   25.62
500 24.43   40.93
750 16.24   61.57

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
--- error ---


Windows 7, Safari 5.1.7

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  52.87   18.91
50  52.52   19.04
150 44.40   22.52
250 36.24   27.59
500 27.93   35.80
750 22.77   43.91

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  44.96   22.24
50  31.98   31.27
150 15.55   64.31
250 10.47   95.51
500 7.26    137.66
750 6.22    160.66

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  45.55   21.95
50  46.32   21.59
150 36.01   27.77
250 29.53   33.86
500 20.89   47.86
750 15.00   66.65
5000    3.35    298.30




iPad2, iOS 6.1.2, Mobile Safari

http://bl.ocks.org/pjanik/5169965
Canvas (KineticJS)
Circles FPS repaint [ms]
25  46.96   21.29
50  35.28   28.35
150 15.68   63.78
250 9.97    100.31
500 5.19    192.83
750 3.51    284.75

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  55.21   18.11
50  44.55   22.45
150 17.52   57.08
250 11.44   87.43
500 6.05    165.37
750 4.10    244.00


http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  56.01  17.85
50  50.27 19.89
150 27.83 35.93
250 18.88 52.97
500 17.38 57.53
750 9.99  100.07


http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  55.39 18.05
50  52.72 18.97
150 29.78 33.58
250 21.65 46.19
500 11.62 86.09
750 7.71  129.65
5000  1.18  846.20

Motorola Xoom Android v4.1.2, Chrome 25.0.1.1364.169

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  16.53   60.51
50  14.21   70.35
150 8.03    124.53
250 5.59    179.01
500 3.08    324.61
750 2.19    457.61

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  19.22   52.03
50  22.29   44.86
150 11.62   86.09
250 8.15    122.69
500 4.40    227.51
750 3.03    329.65

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  21.30   46.94
50  21.19   47.20
150 20.98   47.66
250 20.61   48.51
500 17.84   56.07
750 12.86   77.79
5000    2.45    408.06


Motorola Xoom Android v4.1.2, Android Browser

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  43.12   23.19
50  28.83   34.69
150 13.10   76.32
250 9.89    101.09
500 5.50    181.79
750 4.10    244.10


http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]

Android default browser bugs

Hi, this goes for Android in general, but I need to have a rendering engine that works on all the 2.x~ 4.x Android devices.

I was just trying Run pixi run on a Samsung Galaxy S3's default browser (the most popular handset yet) and it has serious rendering bugs that it makes the game unplayable.

What's do you think on this issue?
Thank you!

set width/height before texture is loaded

I have one more proposal for Sprite , I spot it when create sprites that dont have texture ready .

Sprite ctor :
this.width = 0;
this.height = 0;
// this will inform that Sprite dont have texture and size set

function setTexture :
this.width = this.width || texture.frame.width;
this.height = this.height || texture.frame.height;
// if width or height was set by user before texture was set , it will stay . If width/height is default 0 , it will set texture size .

btw : quick example of latest relative pixi works , resize screen to see how it works :
http://turbosqel.pl/relativepixi/
cheers !

Texture filtering and Tilemaps

So close!

I am creating tilemaps in the way we discussed before (in #48), using a single sprite for each "tile" all which share the tileset texture as their base texture. However, there is a small issue with scaling.

Without scaling it all looks great:

scale at 1

Once I make the scale 2, it scales up using Linear scaling due to lines 241/242 in the WebGLRenderer. Unfortunately linear scaling does not guarantee that textures will stay the same size so we get:

scale at 2

If I patch those lines to use gl.NEAREST for the filter we get:

scale at 2 (NEAREST)

So the ideal situation here is if I could set the filter type for a texture either in the ctor or with some property so that it would use the proper filtering when rendered.

Event outside the case where I need tiles to fit together, scaling any kind of "pixel-art" game will require gl.NEAREST scaling to look half decent.

Interactivity "mouseup" callback

It's kind of weird that the data presented in "mouseup" callback are the same with those presented in "mousedown" callback, which means I can't get any new information about the cursor when "mouseup" callback is called.

// in mousedown callback
{  // PIXI.InteractionData
    global: PIXI.Point with {x: 1037.6550910248598, y: 767.5979057591624},
    local: PIXI.Point with {x: 125.45961682745371, y: 160.0335078534032},
    target: PIXI.Sprite
}

// in mouseup callback
{  // PIXI.InteractionData
    global: PIXI.Point with {x: 1037.6550910248598, y: 767.5979057591624},
    local: PIXI.Point with {x: 125.45961682745371, y: 160.0335078534032},
    target: PIXI.Sprite
}

removeTextureFromCache is wrong

PIXI.Texture.removeTextureFromCache = function(id)
{
    PIXI.TextureCache[id] = texture;
}

There's no such variable as texture there, maybe it's supposed to be null.

compare with easeljs

Hi there - great project

I'm just evaluating some graphics engines. I've kinda got it down to between easeljs and pixi

What would you considering the similarities / differences between the two ?

weepy

compare with three.js

I'm using THREE.js for a 2d game project.

It seems like the webgl batching performance optimisation, and the interaction manager, are where pixi.js distinguishes itself from other libraries.

Are there other points? THREE.js feels like overkill for my project and I'd prefer to use something specifically 2d oriented.

WebGL Renderer resolution halves on refresh

I'm trying out a Pixi WebGL demo, based on one of the Photon Storm ones. I'm running it in Chrome 25.0.1364.152 through Xampp local server.

When I'm updating the JavaScript, saving & refreshing, every so often the renderer seems to get confused and drops the resolution of all Sprites by about half. Upon refreshing again, it does it again until all assets are completely invisible. Booting the page up in an incognito window seems to solve it, but I thought I'd mention it.

pixi won't run locally

I love the philosophy of pixi.js and the demos are impressive. So I'd really like to teach my students JavaScript through pixi.js. However, it won't run locally (entering file:///C:/etc in the address bar of Chrome) for me. I have to host the HTML/JavaScript code to get the examples to run.

I know I can install a simple local webserver, but then we lose out on live editing (which WebStorm beautifully supports), simplicity and other conveniences. Is there any way I can use pixi.js locally? I get the following error for the Basics example:
Uncaught Error: SecurityError: DOM Exception 18 pixi.js:58
PIXI.WebGLRenderer.updateTexture pixi.js:58
PIXI.WebGLRenderer.render pixi.js:56
animate index.html:51

WebGLRenderer does not remove sprites from previous stage

I have two stages, A loader stage and a gameWorld stage. Every frame I call .render on the WebGLRenderer instance. passing it the current stage. During asset loading the stage passed is the loader stage, which renders a loading screen with a few sprites. Once asset loading is complete, the current stage is set to the gameWorld stage, with a large number of various sprites.

The issue is that when the stage is replaced, sprites from the previous stage are not removed from the webGL context. Instead they are rendered above everything else.

Setting depth of Sprite?

It would be great to have a "swap depth" feature like in Flash so you can do simple 3D transforms using the formula:

var s1= new Sprite();
var scale = focalLength / (focalLength + z);
s1.position.x = x * scale;
s1.position.y = y * scale;
s1.scale = scale;

And then sort by scale.

SpriteSheetLoader and trimmed sprites

The code to support trimmed sprites is commented out. If I enable and complete it then it seems to work fine.

var frameData = jsondata.frames;
for (var i in frameData) 
{
    var rect = frameData[i].frame;
    PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h});

    if(frameData[i].trimmed)
    {
        var realSize = frameData[i].spriteSourceSize;
        PIXI.TextureCache[i].trim.x = (realSize.x / rect.w);
        PIXI.TextureCache[i].trim.y = (realSize.y / rect.h);
    }
}

Can this be enabled or is it missing something?

CSS3 Render support

Hi!
I would like to see in pixi.js an additional CSS3 render aside from Canvas and WebGL.

Why?
Well, 3 big reasons:

Specially with the CSS3 Shaders, we can do some very interesting effects.

I just made a demo to prove the point here, which you can try on your iOS here.
If you press the 3rd button, you can see a CSS3 Grayscale Shader in action, in all 60fps glory.

What do you think?

Regards,
Gunther

WebGLRenderer.addDisplayObject issue

when a new sprite is added to stage,pixi look for the closet previous sprite and next sprite and then insert after or insert before one of the both.Is it to let the Web GLBatch draw order and display tree order consistent?but I think it doesn't gurantee that all the sprites with the same texture and blend mode were group into the same WebGLBatch.so may it affect efficiency?

Problem with renderer

Hello Sir [Urgent]

I'm currently doing a project assignment for a game using pixi.js and I viewed much of your examples attached with the project's folder ( pixi.js ) and found a problem when viewing it in chrome nor comodo dragon and it's working fine with firefox and IE ....

it displays the following error :
107
Uncaught Error: SecurityError: DOM Exception 18 pixi.js:1887
299
Uncaught Error: SecurityError: DOM Exception 18 pixi.js:1887

I tried to surround the line with a try and catch .. it showed some kind of a rectangle for the image's sprite but didn't show it. I guess maybe there is a cross browser problem or maybe I need some guidance on how to use it

Thanks guys and good job ๐Ÿ‘ :)

p.s when I finish the game ... looking forward to send you a link to play it ;)

Problem with setting width and height of a background

Hello guys [Urgent 2]

Setting the width and height of an image sprite as a background using

var background = PIXI.Sprite.FromImage('someurl');

then setting the width and height using

background.width = 800;
background.height = 600;

it sometimes works correctly ... and sometimes it doesn't work at all ... do I have to use the assets loader class and import image data with json ? like the image url , the width and height , position ?

Or there is some turnaround that could be done ? :)

Thanks :) ๐Ÿ‘

Drawing functions

Is it possible to use drawing functions (say, I want to draw a line or circle) with PIXI?

I'm new in graphics and web graphics, sorry if this question is something obvious.

Tilemaps

Talk to me about tilemaps, grapefruit uses the Tiled Editor json format for tilemaps. But I am less worried about specifics for that format, talk to me more about how you think tilemaps should render using Pixi.

I was thinking about having a Map (extends DisplayObjectContainer) with Layers (each extending DisplayObjectContainer). The Layers each generate and add one PIXI.Sprite for each "tile" on the map. I was thinking they would each share a PIXI.Texture instance for the texture holding all the tiles, and do some offset fancyness to make that work.

Is there a better way to do tilemaps in Pixi? How would you do it? I cam move this to the forums if it would be more appropriate there.

Request: movieclip.playFramesThen(frames:int,callback:func)

Would be nice to be able to tell the movieclip to play x-number of frames, and at the completion of showing those frames, call a callback that may switch the textures, etc.

e.g. if I click on an element, switch from "idle" frames to "you touched me" frames, then at the completion of showing those frames, call the callback that switches back to the "idle" frames.

Unless I'm mistaken, I have not seen this in the api yet.

Doesn't work on a page using requirejs

This is because you include Brandon's gl-matrix which will use and amd exporter if it finds one:

https://github.com/toji/gl-matrix/blob/master/dist/gl-matrix.js#L36

This means that if I use requirejs on a page that I include pixi.js in, then I get mat3 undefined errors.

ReferenceError: mat3 is not defined

I'm not sure what the best way to tackle this is. The hack-around I have used in the past is to wrap the included code in a closure in which I shadow off the exporters so it thinks to use global despite the environment:

(function() {
    var require = define = exports = module = undefined;

    /** Include Brandon's code here **/
})();

So that works, but obviously isn't ideal. I am currently having to do this when I include your library.

Texture can't be created based on Texture

It would be nice to mention in documentation, that Texture can be only created from BaseTexture, not from another Texture.

For example: I have own spritesheet, which loads with PIXI.Texture.fromImage. This method returns Texture and this blocks me from creating sprites directly from that object.

It can be easly avoided by getting baseTexture property from loaded image, or (like in SpriteSheetLoader.js:84) by additing listeners on loaded event and pass it higher.

How do we remove sprites?

When there's a collision I want to remove a sprite from the game. How do I do this? Intuitively, from the docs, I tried stage.removeChild(mySprite), but got this error:

Uncaught Error: [object Object] The supplied DisplayObject must be a child of the caller [object Object] pixi.js:7
PIXI.DisplayObjectContainer.removeChild pixi.js:7

mySprite is in fact a child of stage:

  var stage = new PIXI.Stage(0x66FF99);
  var mySprite = new PIXI.Sprite(PIXI.Texture.fromImage("stone.png"));
  mySprite.anchor.x = 0.5;
  mySprite.anchor.y = 0.5;
  mySprite.position.x = 1000;
  mySprite.position.y = 300;
  stage.addChild(mySprite);

The sprite does disappear and everything else freezes when I get this error.

How To Build

(Whoops, had to edit this issue because I accidentally prematurely posted it :/)

Annyways, I noticed you guys included some built files in the repo. I was wondering if you could include some instructions in the README to create our own builds.

For example, I would love to make a build that is not minified, to be able to explore the source a bit more.

setInteractive( true ) causes a ReferenceError: stage is not defined

am i doing something wrong here????

var textureList = [];

var max = soul.fileList.length;
trace("the max looks like " + max );

for ( var i = 0; i < max; i++ )
{
var texture = PIXI.Texture.fromImage( soul.fileList[i] );
if ( texture != null ) textureList.push( texture );

}

soul.display = new PIXI.MovieClip( textureList );
soul.display.setInteractive(true);

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.