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/

834 questions
53
votes
2 answers

Decide Pixi.js or Phaser

All: One of my school project is to make a realtime multiplayers webpage game, I am currently having difficulty to decide if I should go Pixi.js or Phaser for the game graphic and control, could anyone talk a little bit about what they are good at…
Kuan
  • 10,085
  • 18
  • 76
  • 168
29
votes
5 answers

Rendering WebGL image in headless chrome without a GPU

I'm trying to export an image rendered with WebGL on a linux server without a GPU. To do this I'm using headless Chrome however the exported image is black (example exported image, taking a screenshot of page shows its just canvas that is black). I…
James Hollingworth
  • 13,192
  • 12
  • 37
  • 56
28
votes
3 answers

Draw a rectangle with pixi.js

[Chrome v32] How to draw a basic RED rectangle with PIXI.js library ? I tried this (not working) var stage = new PIXI.Stage(0xFFFFFF); var renderer = PIXI.autoDetectRenderer(400,…
user3350705Ol
  • 409
  • 1
  • 4
  • 8
18
votes
2 answers

How to render SVG with PixiJS?

I'm trying to make a game using SVG images for scalability and for procedurally making physical objects from them (see matter.js for how). The problem I'm having is if I load 2 different SVG textures and then render them, the second has the first…
Dakun Skye
  • 540
  • 1
  • 4
  • 13
18
votes
5 answers

Dynamically resize the pixi stage and it's contents on window resize and window load

I'm trying to dynamically resize the pixi stage (canvas and contents) on window resize. And also have it initially load at the size of the browser window without changing ratio. I'm using the following to set the initial size basically to…
Agent Zebra
  • 3,546
  • 4
  • 25
  • 54
15
votes
1 answer

Pixi.js and ThreeJS for an advanced web GUI

The idea Hi! I and a team of developers are creating an open-source graphical interface for interactive graph editing. I want this interface to handle a big amount of connected nodes, allowing the user to move them, reconnect, zoom in/out etc. Each…
Wojciech Danilo
  • 10,776
  • 13
  • 60
  • 118
15
votes
1 answer

XDomainRequest vs XMLHTTPRequest

We are creating an application using PixiJS which has a dynamic json loader in it. It loads the .json files using the following: if(window.XDomainRequest) { this.ajaxRequest = new window.XDomainRequest(); } else if (window.XMLHttpRequest) { …
Mowday
  • 412
  • 1
  • 3
  • 10
13
votes
1 answer

How to add Spine animation to Phaser game?

I am new to Phaser and the whole javascript games, and I am trying to add Spine animation to Phaser. Is there a way to do that? I also tried to play my animation using Pixi.js and it worked. Also I know that Phaser is built on top of Pixi, can…
Mohamed Termoul
  • 289
  • 2
  • 12
13
votes
3 answers

How can I scale the size of a sprite in Phaser/PixiJS without changing its position?

I'm making a game in Phaser using some large images that I want to scale down in the actual game: create() { //Create the sprite group and scale it down to 30% this.pieces = this.add.group(undefined, "pieces", true); this.pieces.scale.x…
Migwell
  • 14,206
  • 17
  • 65
  • 122
13
votes
3 answers

Custom font in Pixi.js

I try to load a custom font into Pixi.js (2D WebGL framework). They have an example using .woff google fonts: https://github.com/GoodBoyDigital/pixi.js/tree/master/examples/example%2010%20-%20Text I converted my .ttf to .woff and added in…
user1930254
  • 1,181
  • 3
  • 16
  • 29
10
votes
4 answers

Capture mouse events from sibling or parent DOM element in PIXI.js

I would like to capture mouse events on two layers: PIXI's canvas and and overlaying div. I have the following kind of HTML setup where div.overlay is above canvas.pixi:
F Lekschas
  • 11,503
  • 8
  • 51
  • 65
10
votes
1 answer

Odometer animation using Pixi.js

Some days ago I've started developing an animated odometer written in HTML and javascript, which I intend to use on a rpg game that I am developing. Also, I've been using Pixi.js to help me on the animations. The 2 following images are the main…
Mudkip
  • 363
  • 5
  • 24
9
votes
1 answer

How to draw multiple instances of the same primitive in PIXI.js?

I call a "primitive" an object rendered with drawCircle(), drawRect(), … Considering that: The positions of the primitives change (with constraint (1)) The objects represented by the primitives* are frequently created/destroyed What is the fastest…
Jim
  • 306
  • 1
  • 3
  • 13
9
votes
3 answers

How to remove pixi.js banner from the console?

After seeing it for 1000 times it gets annoying so I'd like to have option to remove it. Somebody online answered that setting PIXI.dontSayHello = true; will solve the problem in older versions of PIXI, but in version 3.0.3 it didn't work.…
Pawel
  • 10,190
  • 4
  • 56
  • 60
8
votes
1 answer

Pixi.js vs Konva.js vs D3.js

I'm a graphics noobie and need help understanding the capabilities of the various javascript 2D libraries. . . What do I get out of Pixi.js that I don't get out of a canvas-based library such as Konva? What do I get out of Konva.js that I don't get…
user2132190
  • 315
  • 2
  • 10
1
2 3
55 56