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
5
votes
2 answers

Draw a line with gradient in canvas

I hope this post is not duplicated. I would like to draw a line, as the image shown, that may have different line width and with gradient. I tried createLinearGradient but it is not as what I expected. Shall I use an image instead? Or how can I…
HUNG
  • 525
  • 7
  • 17
5
votes
2 answers

Drawing canvas with an image picked with Cordova Camera Plugin

I'm getting an image from device and drawing a canvas with filters using Pixi JS. It works all well using computer to get an image. But when I'm on IOS, it throws errors such as cross origin issue, or that I'm trying to use an unknown format. This…
Emo
  • 580
  • 1
  • 8
  • 27
5
votes
1 answer

Converting Pixijs v3 AbstractFilter to v4 Filter

I'm trying to convert a custom shader for Pixi v3 to v4. The original article is here: http://www.awwwards.com/a-gentle-introduction-to-shaders-with-pixi-js.html the associated CodePen here http://codepen.io/omarshe7ta/pen/xVeWWy So far, I've got…
CarlBateman
  • 151
  • 1
  • 12
5
votes
1 answer

Is it possible to create a PIXI.Texture from multiple image sources in pixi.js?

I have about 10 different image files that I need to dynamically load into one PIXI.Texture object. Is that a possibility with pixi.js? Think of a slot machine reel; I have each individual slot symbol as an image and need to construct a reel strip…
hanesjw
  • 2,356
  • 4
  • 26
  • 34
5
votes
1 answer

Scaling along Y-axis after rotating in Pixi.js

I'm trying to create an isometric grid by rotating a square 45° and then scaling down on the (vertical) Y-axis. However, Pixi.js that I'm using, seem to scale along the local coordinate system after the rotation, resulting in a square that look…
Oskar Eriksson
  • 2,591
  • 18
  • 32
5
votes
1 answer

Power-of-two textures performance benefits with modern WebGL

We're using PIXI.js for games which internally uses WebGL for rendering. Every now and then I'm stumbling across mentions of power-of-two and possible performance benefits of avoiding NPOT textures …
marekventur
  • 1,875
  • 1
  • 16
  • 22
5
votes
2 answers

pixi js: drag and drop circle

I started to create simple js game using pixijs. I need drag'n'drop functionality for Graphics circle but can't find info for this. I see only this example with sprites.
mtkachenko
  • 5,389
  • 9
  • 38
  • 68
5
votes
1 answer

Pixi.js touch events not firing on iPhone after pushing intel-xdk files

I have created a small test project to replicate the problem. The project contains only pixi.min.js and index.html with code from this example: http://pixijs.github.io/examples/index.html?s=demos&f=interactivity.js&title=Interactivity Buttons work…
James May
  • 516
  • 2
  • 11
5
votes
2 answers

Apply bicubic scaling filter to a Pixi.js sprite

I am using the WebGL based framework Pixi.js for a game and I try to apply a bicubic scaling filter. The performance isn't important in this case. Here you can see an example made with CSS: Please check my Chrome optimized jsFiddle. This code is…
tomatentobi
  • 3,119
  • 3
  • 23
  • 29
4
votes
3 answers

How to properly use Pixi.js / Canvas Drawing with Next.js / React?

Context I like to use pixi.js for a game I have in mind. Over the years I always used React and next.js. So what I want to do it use pixi.js inside React / Next. There are 2 packages out there that integrate into react fiber to render component like…
GeraltDieSocke
  • 1,524
  • 3
  • 20
  • 51
4
votes
1 answer

React + PIXI + Zustand - Stale state in mouse handlers

I have a pixi canvas with pointer handlers. You can click on a point on a ‘sequence’ and move it. The mouse handlers had stale state. To fix it I am recreating the handlers whenever the sequence is modified, so that they always have fresh state.…
ohthepain
  • 2,004
  • 3
  • 19
  • 30
4
votes
0 answers

why is modern pixijs so much slower than v3.0.0?

this is bunnymark. it renders 100k sprites at 17 fps https://pixijs.io/bunny-mark/ this is an old version of bunnymark using pixi v3. it renders 100k sprites at 165 fps (at least) https://www.goodboydigital.com/pixijs/bunnymark/ old pixijs v3 is…
Farzher
  • 13,934
  • 21
  • 69
  • 100
4
votes
1 answer

Pixi.JS: Why can't I add a Circle as a child of a Container?

I'm a Pixi.js newbie. I want to have a player that's running around the screen, and composed of a few graphics primitives, like a circle and text. I successfully created a Container and a Text, and added the Text as a child. But when I try to add…
Ram Rachum
  • 84,019
  • 84
  • 236
  • 374
4
votes
1 answer

Loading PIXI textures, handling failures

I'm working on a map project under React, using react-leaflet, and leaflet-pixi-overlay. Markers are implemented using the PIXI overlay (React 16.13.1, pixi.js 5.3.0, leaflet 1.6.0, leaflet-pixi-overlay 1.8.1). I am struggling a bit with the PIXI…
Will59
  • 1,430
  • 1
  • 16
  • 37
4
votes
1 answer

Uncaught Error: WebGL unsupported in this browser

Hi I'm trying to use PixiJS to render things in my browser but I keep getting a very annoying error: Uncaught Error: WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support. WebGL is supported by my browser tho :…
charozoid
  • 41
  • 3
1 2 3
…
66 67