Giter VIP home page Giter VIP logo

pixijs's Introduction

PixiJS — The HTML5 Creation Engine

pixi.js logo

Discord npm version Node.js CI

The aim of this project is 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, cross platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility.

PixiJS has full WebGL support and seamlessly falls back to HTML5's canvas if needed. As a framework, PixiJS is a fantastic tool for authoring interactive content, especially with the move away from Adobe Flash in recent years. 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 have 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!

Learn

  • Website: Find out more about PixiJS on the official website.
  • Getting started: Check out @kittykatattack's comprehensive tutorial.
  • Examples: Get stuck right in and play around with PixiJS code and features right here!
  • Docs: Get to know the PixiJS API by checking out the docs.
  • Guide: Supplementary guide to the API documentation here.
  • Wiki: Other misc tutorials and resources are on the Wiki.

Community

  • Forums: Check out the forum and Stackoverflow, both friendly places to ask your PixiJS questions.
  • Inspiration: Check out the gallery to see some of the amazing things people have created!
  • Chat: You can join us on Discord to chat about PixiJS.

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.

Note: After v4.5.0, support for the Bower package manager has been dropped. Please see the release notes for more information.

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 cdnjs)

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>

Note: 5.1.3 can be replaced by any released version.

Demos

Thanks to @photonstorm for providing those last 2 examples and allowing us to share the source code :)

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.

Current features

  • WebGL renderer (with automatic smart batching allowing for REALLY fast performance)
  • 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
  • User Plugins

Basic Usage Example

import * as PIXI 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 PIXI.Application();

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

// load the texture we need
app.loader.add('bunny', 'bunny.png').load((loader, resources) => {
    // This creates a texture from a 'bunny.png' image
    const bunny = new PIXI.Sprite(resources.bunny.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;
    });
});

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. Really 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

The documentation uses webdoc in combination with this template pixi-webdoc-template. The configuration file can be found at webdoc.conf.json

License

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

Analytics

pixijs's People

Contributors

GoodBoyDigital avatar englercj avatar bigtimebuddy avatar ivanpopelyshev avatar ShukantPal avatar themoonrat avatar staff0rd avatar dev7355608 avatar alvinsight avatar drkibitz avatar photonstorm avatar Zyie avatar stbaer avatar eXponenta avatar JetLua avatar andrewstart avatar krzysztof-o avatar AMorporkian avatar jasonsturges avatar SerG-Y avatar SebastianNette avatar agamemnus avatar miltoncandelero avatar serprex avatar SirKnightDragoon avatar mattdesl avatar TheWyo avatar spaceribs avatar namuol avatar mofnire avatar

Stargazers

XieZongChen avatar Jones.c.lee avatar Ray7808 avatar  avatar  avatar  avatar tonne avatar Heidi_3.1415926 avatar Gençay Kürşad Altıparmak avatar Alex avatar Gaishi Kudo avatar 103.cloud avatar cottons avatar Michael Hatch avatar Colton Jackson avatar Adam avatar zh4ui avatar Christopher Tiberius Reilly avatar XingHui Kim avatar  avatar Andre Piantino avatar  avatar Mortis_666 avatar  avatar Mahoo Huang avatar 宁鹏涛 avatar LancerComet avatar Jianyf avatar Hak avatar Kira avatar 九段刀客 avatar kevinnguyenai avatar PatGleeson101 avatar tl.zou avatar Peter Clarke avatar Nikitin Nikita avatar Vincent Hus avatar Ben Weier avatar Nikolaos Sakellarios avatar  avatar adomit avatar  avatar Theone Eclarin avatar  avatar  avatar Markus Siemens avatar Anna Voitenkova avatar Piotr Gago avatar  avatar Cong Pham avatar Bobby Sebolao avatar Nuno Luciano avatar Võ Minh Trí avatar sudo pacman -Syu avatar Stefan Reifenberg avatar Suleman Diwan avatar Liam Mulhall avatar Pavel avatar  avatar Francesco Saverio Zuppichini avatar Andrea Doimo avatar Sullivan  avatar Anılcan Metinyurt avatar  avatar microJ avatar  avatar  avatar Jimmy avatar xxxx avatar jaymepsantos avatar ximenpo avatar Tung Nguyen avatar Blend avatar Jacob G. avatar SMG avatar Jayden avatar Nils Kratochwil avatar Wang Sheng avatar Zeus avatar 汤姆大叔 avatar  avatar Dingyuan Yu avatar Alex Hampu avatar  avatar  avatar  avatar LuuVinhLoc avatar  avatar Grover Chou avatar  avatar Michael Maier avatar Tyler J. Cagle avatar  avatar Lucas Pereira Brígida avatar  avatar tanxiaoshi avatar yuchuan avatar  avatar 沫语 avatar Ahmad Kiarostami avatar

Watchers

arden avatar ippa avatar azu avatar i17c avatar  avatar  avatar  avatar Rozario Chivers avatar Bryan Housel avatar Abhik Khanra avatar Miguel Carmona avatar JIN Tao avatar Ryan Parr avatar Dimitri del Marmol avatar Jeff Fox avatar Bernardino Lopez avatar Dirk Johnson avatar Fernando Zendron avatar grayflow avatar Bruno Campos avatar Tom Trenka avatar Troy Hitch avatar Petr Vostřel avatar Abhijeet Kaulgud avatar Karol Adamczyk avatar Maciej Kuś avatar Mofasa avatar  avatar Ademilson avatar AsO avatar Lane Allen avatar julyzergcn avatar Joven A. Barola avatar André Philip avatar Maxim Vavilov avatar 雷 avatar h3nr7 avatar  avatar  avatar davidwei_001 avatar Byron Manley avatar Ultravisionist avatar star avatar Richard Davey avatar  avatar Lorenzo Gatti avatar evandrix avatar Zhang Haocong avatar Jason Davis avatar 宋琦 avatar clark avatar Carlos avatar atsuo yamada avatar  avatar Pascal Van Hecke avatar Meigo Kukk avatar Peter Schmidler avatar Seb Schmidt avatar  avatar Marco Gallen avatar frankwinter avatar Kaloyan Ivanov avatar Jamie Owen avatar  avatar Monkey avatar send2vinnie avatar  avatar  avatar Owen Lawson avatar Brian Holman avatar finscn avatar Lissa Aguilar avatar alcemir fernandes soares avatar Sam Welker avatar  avatar 月影 avatar Adam Telfer avatar Nick Chan avatar Mr.Flash avatar Yuan Liang avatar Richard Hess avatar Pablo Targa avatar Francesco Sorrentino avatar dafei1288 avatar roadlabs avatar Yoshiyuki Ieyama avatar Aspirin Shi avatar Jamie Knight avatar Ariel Gerardo Ríos avatar Leïla Sofiane avatar vitrum.zhu avatar  avatar Alex Burner avatar Jesse Freeman avatar Yichang avatar Andrea Mucci avatar xRay avatar Bob Smith avatar Damien Chaillou avatar David Oster aka George Pasparakis avatar

pixijs's Issues

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

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.

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);

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.

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?

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
}

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]

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 ;)

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

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?

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.

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.

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 !

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.

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.

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.

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;

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.

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!

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.

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!

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.

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.

...

Become normaly.

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?

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.

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 :) 👍

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

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?

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 ;)

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.

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.

Right mousebutton click

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

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.

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.

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

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.

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.