Stack Overflow
Stack Overflow

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
3
votes
0 answers

PIXI.js mask not being applied on sprite

I set up a sprite with no texture loaded, with just a filter applied which gives a gradient like this: I am trying to apply this sprite to an image as a mask, however nothing is happening. This is my code: const gradientFilter =…
EldarGranulo
  • 1,575
  • 1
  • 14
  • 37
3
votes
2 answers

Pixi js - need to make clickable background

I need to be able to click on background, and get the position of the click. I tried adding an event listener to stage like this app.stage.interactive = true; app.stage.on('click', function(){ console.log('hello'); }) but it works only if i…
Maksim
  • 99
  • 1
  • 7
3
votes
1 answer

How can I make a handdrawn text animation in Pixi.js?

There's a handful of questions and answers for creating animations that mimic drawing or handwriting text. Although I've found a canvas api example, and a svg-based solution, but I haven't seen anything using Pixi.js's API. I'm a rookie with canvas…
Jefftopia
  • 2,105
  • 1
  • 26
  • 45
3
votes
1 answer

PixiJS consuming enormous amounts of GPU

So I have a scene in Pixi, with about 7-8 textures in it. A couple are just looping simple transforms (e.g spinning like a fan, etc), some are static. Without interacting with it at all (it's in a separate window to this), the mere presence of it…
MitchEff
  • 1,417
  • 14
  • 29
3
votes
1 answer

Paint text on the mouse hover on the graphics in the position of cursor

I have a problem when I go to paint the PIXI.Text in the cursor position. This is the simple demo to reproduce the problem, when you go over the node with the cursor I paint the text, in this case, "@author vincenzopalazzo" but I want the position…
vincenzopalazzo
  • 1,487
  • 2
  • 7
  • 35
3
votes
4 answers

NPM installs different version from package.json

For our Electron app we need a specific version of pixi.js (5.0.0-rc.3). In our package.json we therefore specified "pixi.js": "^5.0.0-rc.3",. When we run npm install now and open our app then the welcome message by pixi and the package-lock.json…
creyD
  • 1,972
  • 3
  • 26
  • 55
3
votes
3 answers

localhost sent an invalid response

Server for PixiJS not working, "localhost sent an invalid response" error when connecting for client side When I try connecting to the server (http://127.0.0.1:8080) through my chrome browser, I get a page which has this written on it: "This page…
user8380672
  • 520
  • 1
  • 9
  • 20
3
votes
2 answers

How to replace text in runtime in PIXI.Text object

im using PIXIJS to create a game. i want a status message to be replaced when some events occur. The problem is that the text added above but the old text is not removed : This sounds a very simple task, but i didnt find any method to change text in…
chenchuk
  • 5,324
  • 4
  • 34
  • 41
3
votes
0 answers

What is the difference between using PIXI.Sprite.fromImage and PIXI.loader.resources?

The first 3 lines of code doesn't work while the last 2 lines correctly displayed the image. What is wrong with the first one and what is the difference between the two ways of displaying sprites? let plot = new PIXI.Sprite( …
Hyrial
  • 1,728
  • 3
  • 15
  • 27
3
votes
1 answer

What require('./.'); means?

Found this strange looking URL which is working by the way. var _ = require('./.'); Can someone explain what this will do in reality and why they are doing it ?
Hivaga
  • 3,738
  • 4
  • 23
  • 36
3
votes
3 answers

PIXI: Change only non transparent pixels of sprite to one solid color

Here is a solution that just replaces the entire texture with a solid color: sprite.texture = PIXI.Texture.WHITE Obviously this wont work with transparent sprites. Any transparency ends up solid as well. (Resulting in a solid rectangle) How could…
ThatBrianDude
  • 2,952
  • 3
  • 16
  • 42
3
votes
1 answer

Use PixiJs in Angular 6

I can not connect a pixi to an angular I add to angular.json "scripts": [ "../node_modules/pixi.js/lib/index.js" ], In Class: import * as PIXI from 'pixi.js'; export class Render { public app: any; constructor(el) { this.app…
Ashot
  • 245
  • 6
  • 16
3
votes
1 answer

Pixi.js Axis-aligned Rectangle Masks

Pixi.js has a document that lists a number of performance tips. They are all great bits of advice, but I have trouble understanding and using one of them. Axis-aligned Rectangle Masks are the fastest (as they use scissor rect) I know what…
Patryk Ziemkowski
  • 1,490
  • 12
  • 26
3
votes
0 answers

WebGL performance optimization (color data compression under large data volume)

Firstly it is about what I need： I want to draw nodes and their link edges in a web page (the number of edges is larger than nodes, for example, 10,000 nodes and 100,000 links). The following is a demo: I use WebGL and after optimizations in other…
聂小涛
  • 503
  • 3
  • 16
3
votes
1 answer

Is it possible to apply a blur filter to a sprite with a mask, but keep the blur contained within the mask shape?

I am using Pixi to draw an image, and then apply a video alpha mask to it, like so: var bg = PIXI.Sprite.fromImage(data.imageUrl); var texture = PIXI.Texture.fromVideo(data.maskUrl); bg.mask = mask; app.stage.addChild(mask, bg); Which works great.…
Blake Mann
  • 5,440
  • 23
  • 37
1 2 3
…
66 67