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

Pixi js fill shape with a texture from canvas

I am trying to figure out a way I can fill a shape in PIXI.js using a texture created from a canvas. The reason for this is I wanna be able to create a gradient on a normal html canvas, and they make a texture out of it and add it to the pixi stage.…
c0ldcash
  • 133
  • 1
  • 9
3
votes
2 answers

How to create a texture from multiple graphics

I'm new to PixiJS and I'm trying something simple like a painting application. I'm having difficulty trying to capture a collection of shapes as a single grouping. I'm not interested in working code for this as I'd like to figure that out on my own;…
jia103
  • 1,116
  • 2
  • 13
  • 20
3
votes
2 answers

How to get pixi-filters working?

I have imported both pixi and pixi-filters like so: import 'pixi.js'; import 'pixi-filters'; However, after running the code: const outlineFilterRed = new PIXI.filters.GlowFilter(15, 2, 1, 0xff9999, 0.5); Following error is thrown: Property…
Alex Lomia
  • 6,705
  • 12
  • 53
  • 87
3
votes
0 answers

PIXI Webgl memory leak

Hi I am using PIXI and I am destroying textures whenever necessary. I am seeing that in the chrome task manager, the image cache and other resources are consuming very less memory. My only problem is with the new screens and textures getting loaded,…
Yagneshwara Lanka
  • 89
  • 1
  • 5
3
votes
2 answers

Can't get a sprite animation running in Pixijs on React

I am trying to follow along with the Pixijs guide provided here: https://pixijs.github.io/examples/#/demos/animatedsprite-demo.js - and after a bit of digging here is the sheet they use for their texture…
Peter Weyand
  • 2,159
  • 9
  • 40
  • 72
3
votes
1 answer

Creating Textures loaded via file loader in pixi.js

Hi I set up a project using Webpack, TypeScript and fileloader. My webpack.config.js: const path = require('path'); module.exports = { entry: './src/index.ts', devtool: 'source-map', resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] …
チーズパン
  • 2,752
  • 8
  • 42
  • 63
3
votes
0 answers

Approach to modifying mutable objects?

Given that functional programming is best when sticking to immutable variables as much as possible, and that Ramda always makes shallow copies, how are objects that must be mutable dealt with in a mostly-purely functional framework? For example,…
davidkomer
  • 3,020
  • 2
  • 23
  • 58
3
votes
1 answer

What are some tips and tricks to increasing performance when using PIXI JS?

I created a fairly robust slot machine game using PIXIJS an I'm noticing some pretty substantial jitteriness during the animations. Even when I use third party tweening libraries like Greensock. If I'm not using tweening libraries for movement and…
hanesjw
  • 2,356
  • 4
  • 26
  • 34
3
votes
2 answers

Are WebGL using libraries much faster in pixel by pixel manipulation?

Hello Internet! Playing around with code to make maybe cool but useless things is my hobby. But as I do it more and more I want to make more complex things, and I think that 2d canvas context just isn't enough anymore. So that leads me to This…
Tomasz Radwaski
  • 202
  • 2
  • 10
3
votes
0 answers

Does spriter animation exported as json work on Pixijs?

I was watching some videos on getting started with Pixijs and in some video they said Spriter can be used for the spine animation. But the exported json doesnt seem to work with pixijs. Anybody has experience using the Spriter exported json in…
Anil Maharjan
  • 441
  • 4
  • 14
3
votes
1 answer

How to completely remove Pixi renderer, stage and assets?

I am trying to mount/unmout a Pixi stage with React (I don't want to use react-pixi yet) I have an error when I re-mount the component: Uncaught Error: Resource with name "cupCake.png" already…
dagatsoin
  • 2,626
  • 6
  • 25
  • 54
3
votes
2 answers

React-pixi and Reagent cause an Invariant Violation

I'm trying to build a game in Clojurescript using Reagent and React-Pixi, but as soon as I try to do anything I get: Error: Invariant Violation: PIXIStage.render() A valid ReactComponent must be returned. You may have returned undefined, an array…
porglezomp
  • 1,333
  • 12
  • 24
3
votes
2 answers

How to fit PIXI renderer into browser width and height?

I am working on a word game embedded in a Wordpress front page, which uses PIXI.js to draw the game board and above and below it - few jQuery elements like buttons and selectmenu. While I come along nicely, there is one problem I do not know how to…
Alexander Farber
  • 21,519
  • 75
  • 241
  • 416
3
votes
2 answers

How to draw transparent trails using PIXI.js?

I've started playing with PIXI.js and tried to port this basic actionscript 3 snippet: import flash.display.Sprite; import flash.events.Event; var trails:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,true,0x00000000);//create a…
George Profenza
  • 50,687
  • 19
  • 144
  • 218
3
votes
1 answer

PixiJS - how to change the cursor on mouseover?

following the little advice I could find, I have: var btn = new PIXI.Sprite.fromFrame( 'btn_img.png' ); btn.interactive = true; btn.buttonMode = true; btn.defaultCursor = 'pointer'; ... with no change in the cursor on mouseover. If I…
Robert Lombardo
  • 152
  • 1
  • 9
1 2 3
…
66 67