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
6
votes
1 answer

How to convert a graphic to a sprite in pixijs

Is there a way to convert a graphic to a sprite? I have a graphic containing a single rectangle, and would like to convert it to a sprite to enable complex animations. I have tried doing let p= new…
21rw
  • 1,016
  • 1
  • 12
  • 26
6
votes
1 answer

Run a pixi.js script in react.js project

I'm trying to run a pixi.js script in a react project but I'm blocked with this error: Cannot read property 'appendChild' of null I don't know why this error happens. My script must create a canvas element in the div to display an image with a…
Guillaume
  • 1,500
  • 3
  • 24
  • 33
6
votes
2 answers

What format is expected for data provided to build a Pixi Spritesheet?

I would like to take advantage of PIXI.Spritesheet to get some kind of collection of textures or sprites to use in a pixi application. let spritesheetTexture = PIXI.utils.TextureCache["my-spritesheet-image.png"]; let data = ?????? let spritesheet =…
Luke
  • 18,811
  • 16
  • 99
  • 115
6
votes
3 answers

PixiJS - Setting a Fixed Frame Rate

As the title says, how do you set a fixed frame rate of 25 fps for PixiJS? Here is my setup: g_App = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb }); document.getElementById("canvas-div").appendChild(g_App.view); I do not want to do…
Rewind
  • 2,554
  • 3
  • 30
  • 56
6
votes
1 answer

Closure Compiler Externs - WARNING - Property never defined on

I am preparing externs for PIXI.js library. I am getting the following warning: js/Test.js:188: WARNING - Property position never defined on PIXI.Sprite button.position.y = y; Here are the relevant extern definitions: //UPDATE /** *…
James May
  • 516
  • 2
  • 11
6
votes
1 answer

Closure Compiler EXTERNS for PIXI.js - custom object parameter annotations

I am preparing externs file for pixijs library to work with closure compiler. The only problem I am having so far is with custom object parameters. Here is a short example: pixi.js source: /** * Set the style of the text * * @param [style]…
James May
  • 516
  • 2
  • 11
6
votes
1 answer

Animate the drawing of a line in Pixi.js

Is it possible to animate the drawing of a line in Pixi.js? (Canvas, WebGL, whatever.) I completely understand how to animate an already-rendered line or object, but how do you make it animate the drawing of the line itself, as if with TweenMax?…
daveycroqet
  • 2,667
  • 7
  • 35
  • 61
5
votes
2 answers

How do I import Pixi.js into a TypeScript project?

I'm new to Pixi.js but I have some past experience with TypeScript. I'm really struggling to import Pixi.js into my project. I got a small Pixi.js project running using a CDN import of Pixi and vanilla JavaScript, and now I'm trying to get that same…
OOPS Studio
  • 732
  • 1
  • 8
  • 25
5
votes
2 answers

Is there a way to prevent click input from bots?

I have a javascript canvas game with pixi.js that requires a player to press a certain combination of buttons to complete a level. They basically have to press the button that matches a certain color. It turns out that players are writing bots in…
anonymous-dev
  • 2,897
  • 9
  • 48
  • 112
5
votes
1 answer

How to debug HTML5 canvas pixi.js performance?

I've made a game on pixi.js where it is very simple and should run smoothly but doesn't. Since the game is big and has lots of elements I don't know where the bottleneck is. I believe some part/s of the is buggy resulting in lots of resource usage.…
demiculus
  • 1,243
  • 1
  • 12
  • 32
5
votes
3 answers

PIXI import not working: Cannot find module pixi.js

I npm installed pixi.js into a typescript project. This line (found in many examples) does not work: import * as PIXI from 'pixi.js'; I get the error "Cannot find module 'pixi.js'" I tried this workaround and it works fine: const PIXI =…
Eric Jorgensen
  • 1,682
  • 2
  • 14
  • 23
5
votes
1 answer

Convert THREE.js Shader to PIXI.js

I'm new to both PIXI.js and custom Shaders so a little out of my depth here.. There is a GLSL Shader ( courtesy of DonKarlssonSan ) which I want to convert to PIXI.js to compare performance, any help would be hugely appreciated! var…
Toki
  • 517
  • 3
  • 9
  • 27
5
votes
0 answers

Electron: share DOM data (e.g. send img or canvas) using IPC (or anything else)

I'm trying to rescale a bunch of PIXI.js textures in a separate process, so render UI thread stays responsive. PIXI.js is unrelated to the question, but I want to provide a bit more context of what I'm doing. Unfortunately, I can't make it work. At…
shlajin
  • 1,416
  • 10
  • 23
5
votes
0 answers

Working with SVG Path without SVG

I have this generic SVG Path, consisting of quadratic curves. I don't need to draw it, I don't even have an SVG element, just the string with points (well, I do have a full SVG file if it matters). All I need is one simple thing: to get coordinates…
takopus
  • 61
  • 4
5
votes
2 answers

Is there a way to avoid letterboxing with canvas scaling?

I'm working on a small project in Javascript, using Pixi.js as the rendering engine. However, I've only found a few methods of scaling the canvas to full window that seem to work best for the current version. It does have a caveat, however, in that…
Merlin
  • 929
  • 12
  • 33
1 2
3
…
66 67