Search the Community

Hello guys, I am a frontend developer that trynna make my own game on Pixi 8 so I know nothing about game developing and rendering with WebGL in general. Now I have a static game demo with no animations. My game just has a constructor that creates a character from vector sprites and uses some masks and geometries to color different parts of the a character. In this case coloring works fine with just static geometries and masks but I want to add some animations and as I figured out by researching info, I need to use custom filters with my own shaders to color animated sprite and apply textures with some patterns. BUT, as I said I know nothing about creating and using shaders. I've tried to make some with ChatGPT help, but just got infinite erros which I don't know how to fix and what even these errors mean. So can you guys help me out by sharing some info about using shaders in Pixi or how to write shaders in general. I've found this guide https://webglfundamentals.org/ about WebGL but it's too difficult to me to understand and figure out how to solve my problem just by myself. And if someone can create shaders, please share just a simple shaders that apply texture on an animated sprite. Appreciate for every help.

Hello! I'm fairly new to PixiJS and I've been trying to create a function for our game running in the browser. The main purpose of my function is to have a player(Which moves on an infinite map) move around with a dark "Binocular" area around it. I've succeeded in making this using css and javascript using radial gradients with mask composite exclude in css. Here I could make the radius of these radial gradients decrease(get smaller over time), so it has an effect of "light running out". In addition to this I also did so gradients could be added dynamically, which allowed the game to have multiple radial gradients which acted as "holes" in a dark overlay. Below is a few images to illustrate the intended function. Image 1 is meant to represent how the zone itself should look. The orange is the background, the black is the semitransparent overlay and the enemies should be visible under this overlay. The second image shows the function of two of these circles overlapping(This is how it currently works using css webkit mask and mask masking) My problem is that this function was very laggy in firefox and I've been attempting to rework the whole system in Pixi instead. I've attempted to use regular methods of masking Graphics, but the problem is I can't seem to get this hole effect to work. I've tried to replicate some of the examples, but they haven't worked either for me. This is the example I'm talking about: https://pixijs.com/8.x/examples/masks/filter The closest i got to a solution was using the cut() function as a overlay and then changing the sizes of the radius dynamically(Then I'd make a function that could add "n" circles to make the other zones) let frame = new Graphics() .rect(0, 0, 208, 208) .fill(0x666666, 0.1) .stroke({ color: 0xffffff, width: 4, alignment: 0 }) hudOverlay.addChild(frame); let mask = new Graphics() .rect(0, 0, 100, 100) .fill(0x00FF00) .circle(50, 50, 50) .cut(); let maskContainer = new Container(); maskContainer.mask = mask; maskContainer.addChild(mask); maskContainer.position.set(4,4); hudOverlay.addChild(maskContainer); let testRec = new Graphics().rect(0,0, 800, 800).fill("#49cc6c", 0.5); maskContainer.addChild(testRec); I then have a mask where i can just add a semi transparent rectangle (Right now it's green for testing) on top. The main problem with this is that this is not very performant code, because masks are costly. So I am lost on what to do, I've heard many speak of generateTexture and somehow using this for masking, but I do not know how to do this in pixi v8? My argument for finding a way to use less masks is found in the performance tips of pixi under "Masks": https://pixijs.com/8.x/guides/production/performance-tips

hello, can somebody help please? Situation: i have a button and i have a sprite. By clicking on button i want to change tint of sprite (i dont want to click on sprite, just button). How can i do it? The problem here is: i understand that i can have some state in parent component that can push this state to sprite. but if i have really big amount of these sprites, i really need save all tint properties for any of them? or there is more easy way?

I am using PIXI version 5. In my project, I need to play a video when user hits on preview. I could able to stop auto play but I could not able to start the video on clicking on preview. I have used below line to off auto play texture.baseTexture.resource.autoPlay = false; Here is my code this.appRenderer = new Application({ width: width, height: height, }); this.videoTexture = PIXI.Texture.from(video); this.videoSprite = new PIXI.Sprite(this.videoTexture); this.addChild(this.videoSprite); there is no play function in texture.baseTexture.resource.source.

Hi, i'm absolutely new in react-pixi, spent like few days but nothing works. Can somwbody answer, why this example doesnt work? Neither of these mouse events dont work on sprite, but in examples which i saw they work. React-pixi v7 import React from "react" import '../styles/styles.css' import { Stage, Sprite } from '@pixi/react'; import img_obstacle from './game resources/img/basic/obstacle.png'; export default function Component(props) { return( <Stage width={750} height={550}> <Sprite image={img_obstacle} x={300} y={300} interactive={true} pointerdown={() => {console.log("HI")}} pointermove={() => {console.log("HI")}} mousedown={() => {console.log("HI")}} mousemove={() => {console.log("HI")}} mouseover={() => {console.log("HI")}} mouseout={() => {console.log("HI")}} onMouseOver={() => {console.log("HI")}} onClick={() => {console.log("HI")}} /> </Stage> ) }

Hi Drawing invisible objects on a canvas causes performance loss. What's the best way you know to prevent this? I think there are two options: adding a mask to the all-encompassing container and changing the renderable property to false. I may have misunderstood the masking feature. I wonder which one is more logical to prevent unseen elements from being drawn in the scene? To change the Renderable property, it is necessary to loop through and check each element with a for loop. Wouldn't that be compelling for each frame?

does anyone know why this Code section does not trigger on the "complete" event? Everything else works smoothly. Also I do not get any error. Using PixiJs v5. sound v4 $vm.sound = PIXI.sound.Sound.from(audio); $vm.sound.volume = 1; $vm.sound.autoPlay = true; $vm.sound.complete = () => { console.log('endsAudio00 1',1); $vm.joins = PIXI.sound.Sound.from({ url: resources['joins'], volume: 1, }); };

Hello, apologize if my question is a little generic. I'm trying to move from createJS to PixiJS. In createJS, I usually create bitmap texts starting from .png images, where each image corresponds to a single char. Using texturePacker, I create a spriteSheet .png file and json data, in which each frame is a char. Then I can use the spritesheet object to create directly a bitmap text, like the example below: var data = { "images": [ "digit.png" ], "frames": [ [1, 1, 52, 58, 0, 0, -5], [1, 61, 38, 62, 0, 0, -3], [1, 125, 48, 68, 0, 0, 0], [1, 195, 44, 62, 0, 0, -3], [1, 259, 54, 64, 0, 0, -2], [1, 325, 52, 68, 0, 0, 0], [1, 395, 48, 57, 0, 0, -5], [1, 454, 50, 60, 0, 0, -4], [1, 516, 44, 58, 0, 0, -5], [1, 576, 48, 57, 0, 0, -6], [1, 635, 24, 32, 0, 0, -34] ], "animations": { "a": { "frames": [0] }, "b": { "frames": [1] }, "c": { "frames": [2] }, "d": { "frames": [3] }, "e": { "frames": [4] }, "f": { "frames": [5] }, "g": { "frames": [6] }, "1": { "frames": [7] }, "2": { "frames": [8] }, "!": { "frames": [9] }, "?": { "frames": [10] } } } var spriteSheet = new createjs.SpriteSheet(data); var bitmapText = new createjs.BitmapText("Hello World!", spriteSheet); This is the whole process (very easy). I was wondering if I can achieve something similar in Pixi.js where it seems that a .fnt file is required.

Hello Devs, I would like to know, what do I need to learn to play with PixiJS? I want to create advanced games in 2d. I know Pixi is not a game engine and there are other frameworks like Phaser, Cocos2D, MelonJS and so on... Pixi will be useful to me to develop other projects besides games. Perhaps the most experienced here can give me tips and also other people who are having difficulties. Thanks.

Hi, https://stackblitz.com/edit/pixi-projection-poly-point?file=index.ts I am trying to convert the markers position on the pitch in 3D to the position in 2D so I can draw a polygon between them as Graphics are not supported in PIXI projection. I have tried reading through the pixi projection source code but my knowledge of the pixi inner workings is pretty low. Any help would be massively appreciated!

Hi, when I set mesh.drawMode = PIXI.DRAW_MODES.POINTS, If I use TextureCoord for the coord, the texture is pixelated but with fragCoord.xy / Resolution.xy it's ok in the shader. what's the reason ?

I'm trying to make a cellular automaton using Pixi.js, and so I want it as fast as possible. Each 2 by 2 square is a unit called a bug that looks like this: (without the outline). The top right and bottom left will always be the same color, so on start I currently create 3 sprites based on a white square, put one that covers the whole bug and then one in the upper and lower corner on top of it, create a new container, put these 3 sprites in it, and run a loop that does this and puts each new container in a 2d array that represents the board. Then on each update cycle, I cycle thru the array and for each bug that needs to change, I get its 3 children by id and change their tint. I am very new to Pixi, and to javascript for that matter. I've read thru the pixi API a lot trying to understand how it all works, but I'm not sure if I'm missing something in my methodology that may make it run faster. Any advice?

I am creating a Rectangle and Adding it to the ViewPort with Code: var rectangle = new Graphics(); rectangle.beginFill(0, 0.001); rectangle.lineStyle(1, 0xFF0000); rectangle.drawRect(5, 5, 200, 100); rectangle.interactive = true; rectangle.buttonMode = true; rectangle.on('pointerdown', onDragStart) .on('pointerup', onDragEnd) .on('pointerupoutside', onDragEnd) .on('pointermove', onDragMoveRectangle); app.viewport.addChild(rectangle); after that I am creating a Sprite using the code and adding it to the rectangle. ( Its basically a handle to increase the width of Rectangle ) const textureMove = PIXI.Texture.from(horizontalMoveSVG); const sprite = new PIXI.Sprite(textureMove); sprite.interactive = true; sprite.buttonMode = true; sprite.width = 25; sprite.height = 25; sprite.anchor.set(0.5); sprite.x = 205; sprite.y = 50; sprite.on('pointerdown', onDragStart) .on('pointerup', onDragEnd) .on('pointerupoutside', onDragEnd) .on('pointermove', onDragMoveSprite); rectangle.addChild(sprite); rectangle.endFill(); the two functions are below: function onDragMoveRectangle() { if (this.dragging) { const newPosition = this.data.getLocalPosition(this.parent); // const newPosition = this.data.getLocalPosition(this.parent); this.x = newPosition.x; this.x = newPosition.y; } } function onDragMoveSprite() { if (this.dragging) { const newPosition = this.data.getLocalPosition(this.parent); // const newPosition = this.data.getLocalPosition(this.parent); this.width = newPosition.x; this.height = newPosition.y; } } Problem I am facing is: If I move Rectangle or a Sprite, both the drag functions got executed, which I don't want. I want to execute only 1 function when rectangle move and other function when the sprite moves. - onDragMoveRectangle will move the rectangle ( changing the position ) - onDragMoveSprite will increase the width and height of the rectangle

Hello! We're a small studio looking to hire an amazing Javascript game developer to work on our upcoming RPG game. Our client is written in PixiJS and React, while the server side runs NodeJS with Colyseus for networking. Some of your initial work includes: - improving the networking in our existing Colyseus client-server setup - better tile culling so can have biggger maps in Pixi js - improved player collision detection - improved pathfinding - performance tweaking - better mobile support Work is full-time and ongoing, and pay will be bimonthly. If you're interested in working on a fun project, leave a reply here, send us a message, or write to us at [email protected]. Pleased provide a link to your portfolio or resume and include salary expectations. Thank you!

Hi, I am currently trying to generate the polyline example of OGL (v0.0.90) (https://oframe.github.io/ogl/examples/?src=polylines.html) with PIXI.js (v6.3.0). I have created a new PIXI.Mesh and created the appropriate shaders and buffers. Only at some point I'm stuck and don't know why no object is visible. Is it because of the change of the buffer values or does PIXI use a different coordinate reference? For the mathematical operations I use the Vec3 class from OGL, but I could change that later. Here is the code I wrote. import * as PIXI from 'pixi.js'; import * as OGL from "ogl"; const canvas = document.createElement('canvas'); canvas.id = 'stage'; canvas.width = window.innerWidth; canvas.height = window.innerHeight; const rendererOptions = { width: canvas.width, height: canvas.height, view: canvas, }; const stage = new PIXI.Container(); const renderer = new PIXI.Renderer(rendererOptions); renderer.backgroundColor = 0xff0000; document.body.appendChild(canvas); const vertexLines = ` attribute vec3 position; attribute vec3 next; attribute vec3 prev; attribute vec2 uv; attribute float side; uniform vec2 uResolution; uniform float uDPR; uniform float uThickness; vec4 getPosition() { vec2 aspect = vec2(uResolution.x / uResolution.y, 1); vec2 nextScreen = next.xy * aspect; vec2 prevScreen = prev.xy * aspect; vec2 tangent = normalize(nextScreen - prevScreen); vec2 normal = vec2(-tangent.y, tangent.x); normal /= aspect; normal *= 1.0 - pow(abs(uv.y - 0.5) * 1.9, 2.0); float pixelWidth = 1.0 / (uResolution.y / uDPR); normal *= pixelWidth * uThickness; // When the points are on top of each other, shrink the line to avoid artifacts. float dist = length(nextScreen - prevScreen); normal *= smoothstep(0.0, 0.02, dist); vec4 current = vec4(position, 1); current.xy -= normal * side; return current; } void main() { gl_Position = getPosition(); } `; const fragmentLines = /* glsl */ ` precision highp float; uniform vec3 uColor; varying vec2 vUv; void main() { gl_FragColor.rgb = uColor; gl_FragColor.a = 1.0; } `; const countPoints = 20; const polylines = [{ spring: 0.05, friction: 0.7, mouseVelocity: new OGL.Vec3(), mouseOffset: new OGL.Vec3(0.01), position: new Float32Array(countPoints * 3 * 2), prev: new Float32Array(countPoints * 3 * 2), next: new Float32Array(countPoints * 3 * 2), side: new Float32Array(countPoints * 1 * 2), uv: new Float32Array(countPoints * 2 * 2), index: new Uint16Array((countPoints - 1) * 3 * 2), tmp: new OGL.Vec3(), points: [], }]; polylines.forEach((polyline) => { // set static buffer values for (let i = 0; i < countPoints; i++) { polyline.side.set([-1, 1], i * 2); const v = i / (countPoints - 1); polyline.uv.set([0, v, 1, v], i * 4); if (i === countPoints - 1) continue; const ind = i * 2; polyline.index.set([ind + 0, ind + 1, ind + 2], (ind + 0) * 3); polyline.index.set([ind + 2, ind + 1, ind + 3], (ind + 1) * 3); } // set empty points for (let i = 0; i < countPoints; i++) polyline.points.push(new OGL.Vec3()); let geometry = new PIXI.Geometry(); geometry.addAttribute('position', new PIXI.Buffer(polyline.position, false, false), 3, false); geometry.addAttribute('prev', new PIXI.Buffer(polyline.prev, false, false), 3, false); geometry.addAttribute('next', new PIXI.Buffer(polyline.next, false, false), 3, false); geometry.addAttribute('side', polyline.side, 1, false); geometry.addAttribute('uv', polyline.uv, 2, false); geometry.addIndex(polyline.index); let shader = PIXI.Shader.from(vertexLines, fragmentLines, { uColor: { value: new OGL.Color('#fff') }, uThickness: { value: 50 }, uResolution: { value: new OGL.Vec2() }, uDPR: { value: 1 }, uMiter: { value: 1 } }); let mesh = new PIXI.Mesh( geometry, shader ); polyline.mesh = mesh; stage.addChild(mesh); }); // Add handlers to get mouse position const mouse = new OGL.Vec3(); if ('ontouchstart' in window) { window.addEventListener('touchstart', updateMouse, false); window.addEventListener('touchmove', updateMouse, false); } else { window.addEventListener('mousemove', updateMouse, false); } function updateGeometry(polyline) { console.log(mouse); polyline.points.forEach((p, i) => { p.toArray(polyline.position, i * 3 * 2); p.toArray(polyline.position, i * 3 * 2 + 3); if (!i) { // If first point, calculate prev using the distance to 2nd point polyline.tmp.copy(p).sub(polyline.points[i + 1]).add(p); polyline.tmp.toArray(polyline.prev, i * 3 * 2); polyline.tmp.toArray(polyline.prev, i * 3 * 2 + 3); } else { p.toArray(polyline.next, (i - 1) * 3 * 2); p.toArray(polyline.next, (i - 1) * 3 * 2 + 3); } if (i === polyline.points.length - 1) { // If last point, calculate next using distance to 2nd last point polyline.tmp.copy(p).sub(polyline.points[i - 1]).add(p); polyline.tmp.toArray(polyline.next, i * 3 * 2); polyline.tmp.toArray(polyline.next, i * 3 * 2 + 3); } else { p.toArray(polyline.prev, (i + 1) * 3 * 2); p.toArray(polyline.prev, (i + 1) * 3 * 2 + 3); } }); polyline.mesh.geometry.getBuffer('position').update(polyline.position); polyline.mesh.geometry.getBuffer('prev').update(polyline.prev); polyline.mesh.geometry.getBuffer('next').update(polyline.next); } function updateMouse(e) { if (e.changedTouches && e.changedTouches.length) { e.x = e.changedTouches[0].pageX; e.y = e.changedTouches[0].pageY; } if (e.x === undefined) { e.x = e.pageX; e.y = e.pageY; } // Get mouse value in -1 to 1 range, with y flipped mouse.set((e.x / renderer.width) * 2 - 1, (e.y / renderer.height) * -2 + 1, 0); } function update() { updateId = requestAnimationFrame(update.bind(this)); polylines.forEach((polyline) => { for (let i = polyline.points.length - 1; i >= 0; i--) { if (!i) { // For the first point, spring ease it to the mouse position polyline.tmp.copy(mouse).add(polyline.mouseOffset).sub(polyline.points[i]).multiply(polyline.spring); polyline.mouseVelocity.add(polyline.tmp).multiply(polyline.friction); polyline.points[i].add(polyline.mouseVelocity); } else { // The rest of the points ease to the point in front of them, making a line polyline.points[i].lerp(polyline.points[i - 1], 0.9); } } updateGeometry(polyline); }); renderer.render(stage); }; function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; renderer.resize(canvas.width, canvas.height); polylines.forEach((polyline) => { if (polyline.resolution) polyline.resolution.value.set(canvas.width, canvas.height); if (polyline.dpr) polyline.dpr.value = renderer.resolution; }); } resize(); window.addEventListener('resize', resize.bind(this)); let updateId = 0; update();

I am trying to create text that can be seen by screen readers in Pixi.js. My code looks like the following. And, when I press tab, an element is created on top of the canvas. But the problem is that the element is a button element. I would like for it to create a paragraph or heading element. If I'm doing something wrong please let me know. var pixiText = new PIXI.Text('This is from PIXI.Text', { font: '50px Arial', fill: 'red' }); pixiText.accessible = true; pixiText.interactive = true;

Hi, I'm on Pixi current days. I was so amazed when I saw this animation : https://art4globalgoals.com/en So, I tried to clone the brush masking effect. I succeed to make a mask, make brush effect. The problem is that, I can't remove current brush sprite. I tried to console log my app, stage, renderer, but I can't find where my sprite is registered (sorry for the terminology, Im wondering im using right terminology).... Also, is there any way to trigger dragging event? , above the link, there seems to appear brush scratch effect automatically, but is there any idea about this? ```` import * as PIXI from 'pixi.js'; import { Point } from '@pixi/math'; const screenSize = { width: window.innerWidth, height: window.innerHeight }; let brushWidth = (window.innerHeight / window.innerWidth) * 150; let brushHeight = (window.innerHeight / window.innerWidth) * 200; const app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, resolution: window.devicePixelRatio, autoDensity: true }); document.body.appendChild(app.view); app.loader .add('background', '/jpeg/mask.jpeg') .add('mask', '/png/effel-gray.png') .add('bristle1', '/png/brush6.png') .add('bristle2', '/png/bristle2.png') .load(() => { setup(); }); const setup = () => { const brushTexture = app.loader.resources.bristle1.texture; const brush = new PIXI.Sprite(brushTexture); brush.width = brushWidth; brush.height = brushHeight; brush.anchor.set(0.5,0.5); const backgroundTexture = app.loader.resources.background.texture; const maskTexture = app.loader.resources.mask.texture; const background = new PIXI.Sprite(backgroundTexture); background.x = app.renderer.screen.width / 2; background.y = app.renderer.screen.height / 2; background.anchor.x = 0.5; background.anchor.y = 0.5; background.width = window.innerWidth; background.height = window.innerHeight; const mask = new PIXI.Sprite(maskTexture); mask.width = app.renderer.screen.width; mask.height = app.renderer.screen.height; mask.x = app.renderer.screen.width / 2; mask.y = app.renderer.screen.height / 2; mask.anchor.x = 0.5; mask.anchor.y = 0.5; mask.width = window.innerWidth; mask.height = window.innerHeight; app.stage.addChild(mask); app.stage.addChild(background); const renderTexture = PIXI.RenderTexture.create(app.screen.width, app.screen.height); const renderTextureSprite = new PIXI.Sprite(renderTexture); app.stage.addChild(renderTextureSprite); background.mask = renderTextureSprite; app.stage.interactive = true; app.stage.on('pointerdown', pointerDown); app.stage.on('pointerup', pointerUp); app.stage.on('pointermove', pointerMove); let dragging = false; const originVector = new Point(1, 0); let vector; function pointerMove(event) { if (dragging) { brush.position.copyFrom(event.data.global); const originPos = { x : event.data.global.x - window.innerWidth / 2, y : -(event.data.global.y - window.innerHeight / 2) } const vx = originPos.x; const vy = originPos.y; vector = new Point(vx, vy); vector = normalizeVector(vector); const dotProd = (vector.x * originVector.x) + (vector.y * originVector.y); const angle = Math.acos(dotProd); const rotationMatrix = new PIXI.Matrix() rotationMatrix.rotate(angle); brush.rotation = angle; app.renderer.render( brush, { renderTexture, clear: false }, false, null, false ); } } function pointerDown(event) { dragging = true; pointerMove(event); } function pointerUp(event) { dragging = false; brush.width = brushWidth; console.dir(app.renderer) app.renderer.managedTextures[4].destroy(); } window.addEventListener('resize', () => { screenSize.width = window.innerWidth; screenSize.height = window.innerHeight; app.renderer.resize(window.innerWidth, window.innerHeight); app.renderer.stage.width = window.innerWidth; app.renderer.stage.height = window.innerHeight; }); }; const getMagnitude = (x , y) => { return Math.sqrt(x*x + y*y); } const normalizeVector = (vector) =>{ const magnitude = getMagnitude(vector.x , vector.y); vector.x /= magnitude; vector.y /= magnitude; return vector; } `````

Hey, I'm trying to create a draggable line point much like in this post I was hoping that a solution was created since then, but haven't been able to find it if so.

Hello! I have a sprite with a fully transparent texture. I want to make it glow. I tried to achieve this with filters, but most of them do not work for such a sprite. Only CrossHatchFilter and GodRayFilter work. GodRayFilter is very nice and would suit me, but it creates a black background around the sprite. Is there any way to highlight such a sprite? I also tried pixi-heaven from this example https://pixijs.io/examples/#/plugin-heaven/spineboy-pro.js. But it also doesn't work for a sprite with a transparent texture.

Hello ?! I am experimenting with making a split screen multiplayer game, using a game engine backed by PIXI, GDevelop. To do so, I'm moving the "camera" (the root Container's position) to center each player and render the root container into a sprite, each sprite being a player's screen. To do the rendering, I've used code that looks like this (simplified for readability and to contain only the PIXI code, not the engine specific one) that runs every frame of the game: const source = the root PIXI Container; const width, height = the viewport width & height; const renderTarget = a PIXI sprite; global.rt = (global.rt || RenderTexture.create({ width, height })); global.sprite = (global.sprite || Sprite.from(global.rt)); if(!renderTaget.texture instanceof RenderTexture) renderTarget.texture = RenderTexture.create({ width, height }); renderer.render(source, { renderTexture: global.rt }); renderer.render(global.sprite, { renderTexture: renderTarget.texture });  The texture of the render target seems to be replaced, but it seems to be transparent (or the background color), no messages in the console, but after a few dozens of seconds the webgl context is lost. The more renders the quicker, so i am guessing it has something to do with the amount of times i do the rendering. Does anyone have some pointers about what i may have done wrong? Thanks

Hello there ! I'm currently working on some optimizations for a project that shows a large view that can be scrolled using a native wheel event on the canvas. This is working as expected without using the wheel event of the Event System. However, when looking at the flame chart, a onWheel event is thrown by the EventSystem, and does hit testing and other things that I don't need. How can I stop this event from happening ?

Website Link I have been learning PixiJs for some time now, and recently I wanted to put everything I learned into one small project to deepen my understanding of it. And it happened that I was playing the great game "Night in the Woods", so I decided to make a 2D side-scroller web app with the same feel and look of the game and can be used as the game promotional website. As I said earlier, I am not experienced in Pixi.js, so there has been many obstacles and TONS of refactoring along the way. Initially, I started building the app with vanilla JavaScript, then it became clear that TypeScript would be a much better option. Finding the appropriate project structure proved to be a much harder thing than I thought it would be, and I wished that there was some general structure or "template" online that I could have used as the base for my project. In the beginning, I thought about using a proper game engine ( as Phaser ) instead of the more general purposed rendering engine Pixi.Js, but I continued with it because I wanted to have a deeper understanding about the basics and lower-level stuff, then I may go to a full games engine. It was very hard at times, and many basic features are not implemented ( like multi-animations sprite ), but at the same time it was very informative ( and fun ). I uploaded the project code on Github for anyone interested: Github Repo I would love to hear your feedback and opinions.

I am trying to do something very simple with PIXI and Typescript. I decided to switch to using texture packer from loading individual png files and ran into this issue. The issue is when trying to access the texture that is loaded through the spritesheet json file I get a promise error. The code is very simple and I have tried various ways of doing this with no luck. This example is the simplest and uses the example from CodeAndWeb (Texture packer devs site) but in an attempt to translate it to typescript and separated the functionality a bit. Any advice is highly appreciated. Thanks. import { Container, Sprite, Graphics, Texture, Spritesheet } from "pixi.js"; import * as PIXI from "pixi.js"; // This example is based on the following // https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-and-animations-with-pixijs5 export class Game extends Container { static GAME_WIDTH = 320; static GAME_HEIGHT = 568; private static _instance: Game; public app: PIXI.Application | undefined; constructor() { super(); window.onload = (): void => { this.createRenderer(); this.addAssets(); this.startLoadingAssets(); }; console.log('Game Constructed'); } public static getInstance(): Game { if (!Game._instance) { Game._instance = new Game(); } return Game._instance; } private addAssets(): void { PIXI.Loader.shared.add('game', '../assets/game.json'); console.log('Assets added'); } private startLoadingAssets(): void { PIXI.Loader.shared.onComplete.add(() => { this.onAssetsLoaded(); }); // PIXI.Loader.shared.onComplete.add(this.onAssetsLoaded); PIXI.Loader.shared.load(); console.log('Loading assets'); } private onAssetsLoaded(): void { let sprite = new PIXI.Sprite(PIXI.Texture.from("backBoard.png")); // let sheet = PIXI.Loader.shared.resources["../assets/game.json"]; // let sprite = new PIXI.Sprite(sheet.texture['backBoard,png']); // this.app?.stage.addChild(sprite); console.log('AssetsLoaded'); } private createRenderer(): void { this.app = new PIXI.Application({ backgroundColor: 0x001320, }) document.body.appendChild(this.app.view); console.log('Renderer Created'); } public initialize(): void { console.log('Game initialized'); } } json looks like this {"frames": { "backBoard.png": { "frame": {"x":1,"y":1,"w":318,"h":442}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":318,"h":442}, "sourceSize": {"w":318,"h":442} }, "buttonDisabled.png": { "frame": {"x":321,"y":340,"w":30,"h":30}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":30,"h":30}, "sourceSize": {"w":30,"h":30} }, "buttonDown.png": { "frame": {"x":353,"y":344,"w":30,"h":30}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":30,"h":30}, "sourceSize": {"w":30,"h":30} }, "buttonSmallDisabled.png": { "frame": {"x":395,"y":224,"w":22,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":22,"h":22}, "sourceSize": {"w":22,"h":22} }, "buttonSmallDown.png": { "frame": {"x":395,"y":248,"w":22,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":22,"h":22}, "sourceSize": {"w":22,"h":22} }, "buttonSmallUp.png": { "frame": {"x":395,"y":272,"w":22,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":22,"h":22}, "sourceSize": {"w":22,"h":22} }, "buttonUp.png": { "frame": {"x":321,"y":372,"w":30,"h":30}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":30,"h":30}, "sourceSize": {"w":30,"h":30} }, "coin.png": { "frame": {"x":368,"y":311,"w":31,"h":33}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":31,"h":33}, "sourceSize": {"w":31,"h":33} }, "logo.png": { "frame": {"x":321,"y":213,"w":125,"h":45}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":125,"h":45}, "sourceSize": {"w":125,"h":45} }, "meter_big.png": { "frame": {"x":321,"y":100,"w":92,"h":47}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":92,"h":47}, "sourceSize": {"w":92,"h":47} }, "meter_small.png": { "frame": {"x":368,"y":213,"w":43,"h":25}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":43,"h":25}, "sourceSize": {"w":43,"h":25} }, "meterDisplay.png": { "frame": {"x":321,"y":149,"w":89,"h":49}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":89,"h":49}, "sourceSize": {"w":89,"h":49} }, "meterDisplayBig.png": { "frame": {"x":321,"y":1,"w":97,"h":97}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":97,"h":97}, "sourceSize": {"w":97,"h":97} }, "meterMinus.png": { "frame": {"x":368,"y":258,"w":25,"h":25}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":25,"h":25}, "sourceSize": {"w":25,"h":25} }, "meterPlus.png": { "frame": {"x":368,"y":285,"w":24,"h":24}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":24,"h":24}, "sourceSize": {"w":24,"h":24} }, "peg.png": { "frame": {"x":399,"y":200,"w":11,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":11,"h":22}, "sourceSize": {"w":11,"h":22} }, "target_guide.png": { "frame": {"x":321,"y":200,"w":11,"h":76}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":11,"h":76}, "sourceSize": {"w":11,"h":76} }}, "meta": { "app": "https://www.codeandweb.com/texturepacker", "version": "1.0", "image": "cheenko.png", "format": "RGBA8888", "size": {"w":419,"h":444}, "scale": "1", "smartupdate": "$TexturePacker:SmartUpdate:507f67780e7f85c65d491493063f25f9:181b9d624fffd3a88b16c67d21e19ad7:3dbd62212b1a89304e8d06008f40f33d$" } } Code Sandbox link https://codesandbox.io/s/empty-hooks-9g8j6?file=/src/index.ts

Hello everyone, I have struggled all day long to create a simple filled circle using Shaders. I succeed creating triangle and square thanks to Pixi example. My approach is the following one : Creating a square and hide some pixels using discard in fragment. const geometry = new PIXI.Geometry().addAttribute("aVertexPosition", [100, 100, -100, 100, -100, -100, 100, -100, 200, 200], 2).addIndex([0, 1, 2, 0, 2, 3]); const shader = PIXI.Shader.from(` precision mediump float; attribute vec2 aVertexPosition; uniform mat3 translationMatrix; uniform mat3 projectionMatrix; void main() { gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); } `, ` precision mediump float; uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; void main() { vec2 coord = gl_FragCoord.xy; // vec2 st = gl_FragCoord.xy/u_resolution; // float pct = 0.0; // a. The DISTANCE from the pixel to the center // pct = distance(st,vec2(0.5,0.5)); // if (pct > RADIUS) discard; gl_FragColor = vec4(coord.x, coord.y, 1, 1); } `); const circle = new PIXI.Mesh(geometry, shader); circle.position.set(400, 300); app.stage.addChild(circle); Issues : - In my example, i'm just trying to display my square with differents colored depending on position => Why the square is still white ? coord.x seems to be very high (around 100000000000) leading the color to be always vec4(1, 1, 1, 1). - When calculating the distance, what is the center of the circle ? If someone already face this issue, a little help would be really appreciated. Thank you in advance. Have a good day.

Hello I have an application where i need to display approximately 1000 elements (with 5 main shapes and dynamic colors). I have think at several different approach : - Using only Graphics but as it is says in the documentation (Using 300 or more graphics objects can be slow, in this instance use sprites, if you can create a texture to share between them.) - Using Sprites from Textures from Graphic (the problem of this approach it that i have elements colored dynamically, and i'm not able to generate a Texture from a Graphic => I don't want to use either @pixi/canvas-graphics) - Using Shaders I don't have any overview regarding shaders performances. Is it better than Sprites ? than Graphics ? I would like to make the right decision in terms of performances and good practices. Thank you in advance. Have a good day !