Questions tagged [pixi.js]

A fast, JavaScript-based 2d-rendering library

An HTML5 2D rendering engine that uses webGL with canvas fallback.

Pixi.js allows you to use the power of WebGL for rendering 2D-scenes, it is not going into the details of implementation, more than that, it is able to determine the availability of support WebGL, and switch between modes of rendering. In the absence of WebGL rendering is performed by means of canvas. In addition to Pixi.js implemented a scene graph, the support of textures and sprites, it adds support for interactivity - sprites can hang on mouse event handlers and touchscreen.

The authors are positioning Pixi.js as 2D-analog Three.js, and argue that although the game - the first thing that comes to mind at the sight of their engine, it is quite low level, so it can be used wherever required intense 2D-animation, for example in sophisticated graphical interfaces. In the development of the main efforts were focused on speed and simplicity of API.

Pixi Home Page: http://www.pixijs.com/

Github Project Home Page: https://github.com/GoodBoyDigital/pixi.js/

1003 questions
4
votes
0 answers

Is there some Selenium web driver analogue for automated testing contents of HTML5 Canvas?

Currently trying to maintain automated testing of a game. It was made using Pixi.js and launches within HTML5 Canvas. Is there a method to provide something similar to Selenium's actions (click, type etc), accessors (storeText, storeValue etc) and…
zatvornik
  • 171
  • 1
  • 3
  • 8
4
votes
0 answers

"Cannot find module pixi.js" but the module is installed locally?

I am developing a web application using angular and a few other libraries (including pixi.js), and I am trying to move the project onto a new machine. The project works on my old machine, but I'm having difficulties getting it to work on this new…
JavascriptLoser
  • 1,853
  • 5
  • 34
  • 61
4
votes
1 answer

how to center a text object within it's containers local in PIXI.js

Please review the following JSFiddle: https://jsfiddle.net/r4yfozsw/1/ var stage = new PIXI.Container(), renderer = PIXI.autoDetectRenderer(640, 480), loader = PIXI.loader, resources = loader.resources; var menu =…
xetra11
  • 7,671
  • 14
  • 84
  • 159
4
votes
2 answers

Converting screen coordinates to isometric map coordinates

I'm generating an isometric tile map using a diamond pattern: tileWidth = 128; tileHeight = 94; for (var x = 0; x < rows; x++) { for (var y = 0; y < cols; y++) { var screenX = (x - y) * tileWidthHalf; var screenY = (x + y) *…
helion3
  • 34,737
  • 15
  • 57
  • 100
4
votes
0 answers

Resizing a texture (not sprite) in PIXI.js

I need some help. By dynamic image delivery (by bandwith) I get different sizes of textures from my server. Every Texture knows to what size itself has to be upscaled after being received from the client, but Textures in Pixi are not capable of…
Dommar92
  • 325
  • 1
  • 2
  • 13
4
votes
0 answers

How to fix poor anti-aliasing in Firefox when using Pixi.js?

I use Pixi.js for my work project to draw simple shapes — circles and segments, and make some interaction between them. I work on Mac running El Capitan and test my prototype in Google Chrome. I use PIXI.autoDetectRenderer() method to set renderer…
Terbiy
  • 576
  • 5
  • 14
4
votes
1 answer

Loading sprite sheet in pixi v3

I'm trying to learn Pixi.js for a game I'd like to code, but I'm having the hardest time with one of the most basic tasks: loading a sprite sheet. The real problem is that Pixi v3 broke compatibility with an old way to load sprites, which was…
Cappielung
  • 322
  • 3
  • 6
4
votes
2 answers

Saving canvas to image via canvas.toDataURL results in black rectangle

Im using Pixi.js and trying to save a frame of the animation to an image. canvas.toDataUrl should work, but all i get is a black rectangle. See live example here the code I use to extract the image data and set the image is: var canvas =…
nuway
  • 2,324
  • 4
  • 27
  • 48
4
votes
1 answer

How to choose most performant renderer, Canvas or WebGL

I'm developing a game with PIXI.js for desktop devices. PIXI has both WebGL and Canvas renderers available, we will use WebGL wherever it's supported by the device. My problem is that some low end devices technically support WebGL, although it does…
Drahcir
  • 11,772
  • 24
  • 86
  • 128
4
votes
0 answers

Issue with Pixi.js lineTo() using WebGL

I'm having an issue using Pixi.js, where the lineTo method seems to draw lines that aren't specified. The bad lines aren't uniform width (seem to taper off towards the ends) and are much longer than they should be. Example jsfiddle showing the…
GBagley
  • 41
  • 1
  • 2
3
votes
1 answer

PIXI.RenderTexture no render

I built a simple PIXI.js app to implement PIXI.RenderTexture, and it doesn't work. It should render two square sprites, black and white. The black one is added with regular stage.addChild: const sprite1 = new…
3
votes
1 answer

ReferenceError: self is not defined using React-Pixi and Next-urql

I keep getting this error when using the Next-Urql and React-Pixi. I understand that this is because React-Pixi requires WEB APIs. Server Error ReferenceError: self is not defined This error happened while generating the page. Any console logs will…
jmecs
  • 143
  • 2
  • 13
3
votes
1 answer

Loading a spritesheet in Pixijs does not work

Im trying to load a spritesheet in pixijs according to the official documentation: http://pixijs.download/release/docs/PIXI.Spritesheet.html The following is my code: PIXI.Loader.shared.add('sheet',…
trusis
  • 65
  • 1
  • 4
3
votes
2 answers

PixiJS what's the best way to change a Graphics object's colour?

I'm trying to make a simple square object flash green, blue, and red based on different conditions. I understand that there is no direct way to change the colour of a Graphics object in PixiJS. Currently, I create three Graphics objects which are…
Philip
  • 31
  • 2
3
votes
2 answers

pixijs: show and hide container with all elements in it

I have tab: PIXI.Container with a bunch of sprites on it. I believe this should be so easy, I am new to Pixi, but have knowledge in JS. I have button. Clicking on button should show/hide given container. However, I cannot get it…
renathy
  • 5,125
  • 20
  • 85
  • 149