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
4
votes
4 answers

How do I import pixi.js into a Svelte/Sapper app?

I'm new to Svelte and am trying to import pixi.js into my app. I've tried to import pixi.js into my svelte app following this post Svelte Mount DOM Element from Javascript I've installed pixi via: yarn add pixi.js --dev However, when I try to…
TheKernel
  • 113
  • 1
  • 9
4
votes
2 answers

How to handle WebGL CONTEXT_LOST_WEBGL errors more gracefully in PixiJS?

I have a React application that uses a data visualization library that uses PixiJS. I occasionally get frustrating CONTEXT_LOST_WEBGL errors in Chrome that force the user to manually reload the page, in order for the page to be (re)rendered. I…
Alex Reynolds
  • 95,983
  • 54
  • 240
  • 345
4
votes
1 answer

How to resize a sprite pixi.js

I have some PixiJS code that generates a sprite: let type = "WebGL"; if (!PIXI.utils.isWebGLSupported()) { type = "canvas" } PIXI.utils.sayHello(type); const app = new PIXI.Application({ width: 1000, height: 600, backgroundColor: 0x1099bb,…
ipsa scientia potestas
  • 483
  • 1
  • 8
  • 23
4
votes
0 answers

Uncaught Error: EXGL: Invalid pixel data argment for gl.texImage2D()

I've built up an expo react-native project using Pixi js. The project is running well on the Expo platform, but after building the project into apk file, the app stops running on the mobile device. The problem is because of the use of the Pixi image…
goldvenus
  • 898
  • 1
  • 10
  • 21
4
votes
1 answer

[Unhandled promise rejection: Error: Expected URL scheme 'http' or 'https' but was 'file']

Error: [Unhandled promise rejection: Error: Expected URL scheme 'http' or 'https' but was 'file'] I tried to use the pixi js on the react-native expo project. This is package.json file. "dependencies": { "@expo/vector-icons": "^9.0.0", …
goldvenus
  • 898
  • 1
  • 10
  • 21
4
votes
1 answer

How to dynamically change texture of PIXI.Sprite when PIXI.Sprite reaches certain position - Pixi.js?

I have a class which extends PIXI.Sprite. Here i create the sprite initially. The texture i use is a spritesheet and i create sprites from random sections of this spritesheet.png by creating random frames for the texture. There I add 10000 sprites…
Kostadin Terziev
  • 516
  • 6
  • 15
4
votes
0 answers

How to rotate objects inside a container when using pixi viewport?

I have multiple pixi graphics rectangles that I want to rotate around a single point. I solved this by creating a pixi container and adding all objects to is. When rotating the container, all objects rotate accordingly. After the rotation is done, I…
denniswave
  • 127
  • 6
4
votes
1 answer

Pixi.js Container.width does not return width

I'm having a bit of a problem: I'm trying to access the width of a container in which I've added a sprite to, but it seems to return as 1. However, when I inspect the object in the console, it gives me the proper width. I wrote up a code pen showing…
Mislarieth
  • 115
  • 2
  • 9
4
votes
0 answers

Cannot read property 'viewManagersNames' of undefined

I'm trying to create an ExpoPixi.Sketch View in React Native, but an error, 'Cannot read property 'viewManagersNames' of undefined' shows when the App loads. I cannot find anything on this error online. import React from 'react'; import { Text,…
Siddha Tiwari
  • 125
  • 3
  • 7
4
votes
0 answers

TypeError: child.transform is undefined Pixijs Webpack

I am developing a game based on pixijs, in which animation is generated using Adobe Animate and Pixi-Animate and all this setup is configured with nodejs 8.11.1 and webpack 4. But when I load my texture on Pixi Animate getting the following…
Sahadev
  • 1,368
  • 4
  • 18
  • 39
4
votes
3 answers

How to draw a dashed line across a rectangle in PixiJS and Angular?

The following snippet draws a filled, solid-stroked rectangle in its own PixiJS application. PIXI.Graphics provides no built-in way to draw dashed strokes. import { Component, OnInit } from '@angular/core'; import * as PIXI from…
Arun
  • 71
  • 1
  • 11
4
votes
4 answers

Pixi.js - Draw Rectangle with Gradient Fill

I'm using the Pixi.js v4 graphics library to make a game with JavaScript. I know that I can draw a black + rounded rectangle like so: const rectangle = new pixi.Graphics(); rectangle.beginFill(0); // Color it black rectangle.drawRoundedRect( 0, …
James
  • 1,394
  • 2
  • 21
  • 31
4
votes
2 answers

How to make x and y to travel on the same line?

I was trying to create Moving circle using PIXIJs , which will move on mouse click event , its working but the problem is either it reaches x first or y position initially , the problem is it reaches the x or or y position which is closer to the…
Gopinath Kaliappan
  • 6,929
  • 8
  • 37
  • 60
4
votes
0 answers

Drawing stroke lines around mask: Alpha mask or graphics mask (pixi.js)?

I would like to draw a stroke line around a mask element. The idea is to have a rounded rectangle displaying an image and a stroke line around it. I am using pixi and tried something like this: // ui is my ui object ui.thumbnail = new…
user305883
  • 1,635
  • 2
  • 24
  • 48
4
votes
3 answers

Limit mouse events to Pixi.js Container

I'm using Pixi JS and detecting the mouse position via a simple event handler: ... var stage = new PIXI.Container(); stage.interactive = true; var handler = function(e){ mouseX = renderer.plugins.interaction.mouse.global.x; mouseY =…
SalutBarbu
  • 386
  • 5
  • 16
1 2 3
…
66 67