Search the Community

import React from "react"; import { useSelector } from "react-redux"; import { imgUploadSelector } from "../redux/imageuploadSlice"; import { Stage, Sprite, withFilters, Container } from "@pixi/react"; import * as PIXI from "pixi.js"; const Pallet = () => { const { uploadedImage } = useSelector(imgUploadSelector); const Filters = withFilters(Container, { blur: PIXI.BlurFilter, matrix: PIXI.ColorMatrixFilter, }); return ( <div className="flex justify-center"> <Stage height={uploadedImage.height} width={uploadedImage.width}> <Filters blur={{ blur: 0 }} matrix={{ enabled: true }} apply={({ matrix }) => { matrix.contrast(2); matrix.brightness(2); }} > <Sprite image={uploadedImage.image} /> </Filters> </Stage> </div> ); }; export default Pallet; I want help why in this only last property brightness is only showing in my screen not contrast. I have tried using Adjustment filter but it has been deprecated. I tried to get answer in stack overflow but not got any answer. Any help in this topic or matter is appreciated. Please contact to me via mail [email protected]. Thankyou

https://letterfall-test.herokuapp.com/ *Made with PixiJS V4.7 and Box2D library* This is a solo project which was initially done to help grow my knowledge (self taught) but has slowly grown into more. I have done pieces in my spare time over the years. I was drawn in by the liquid-fun library/demo and wanted to create a small game with it. So what is this? A daily word game with physics and water! Some basic points (Also found in Help tutorial on site): - Every day a new word is loaded (midnight est) - The word will be incomplete - Top left shows a hint (not always) then below a partial Answer - There’s a pointer under the character space of the Answer to show the next character that needs to be chosen - Each space in Answer is color coordinated: orange being a consonant, green is vowel, and purple is a number. - Clicking on the letters on left or numbers on right will drop it in middle of screen where water is coming down (water helps makes the fall more random … letterFall.. WaterFall.. yea 😅) - The letter or number will hit the diamond shape below near where it falls, which will trigger a color: Red is wrong letter, Green is correct-however, needs to land on platform near bottom of screen - Clicking the directional keys on bottom will ‘nudge’ the last letter falling in given direction - Ultimately, the goal is to get the correct Letter to Fall onto the platform at bottom of screen for 3 seconds… doing so will confirm and then onto next letter until word is complete. - Scores are based on times to complete - I’ve tested on a lot of devices, and layouts should work on most platforms, however it does hammer on battery some until I further optimize… lower battery (sub 20%) will hinder performance unfortunately. Other notes: - This is still very early, pre-alpha!! Changes/features/etc are planned - There are leaderboards for each stage - Your score and attempts are tracked, and can replay stages up to the current day - Each day/word will have a set of RANDOM modifiers that get determined with the Word —then saved so when replay, the modifiers will remain same (so leaderboards are accurate using same modifiers for all) - Can login as a Guest, however, Guest scores will get deleted after two days - Planned for future: a modifier for possible horizontal ‘bullets’ (forewarnings on screen), seasons, and would like to have custom avatars solely based on personal career stats —> score/attempts/etc - It’s completely free now (no ads or slimy monetization) but I did put a lot of work into this so eventually maybe a donation page to keep it free of intrusive monetization will happen Known issues/bugs: - Can sign up with whatever name and password (There is a naughty word filter)… But need to remember (case sensitive) as I do not have a recovery process implemented. I do plan to use email as login credentials eventually. But for now, signing up requires no other info other then your login/pass. I know this is a way to circumnavigate the attempts tracking and will be addressing this in later updates. Also Guests will only be able to see first 5 questions of a season. I don’t want to require a long signup process or requiring personal info, etc. - It’s a pretty heavy game with the physics / water. As mentioned earlier, it will drain battery faster than most lighter apps. I’m constantly learning and improving this - ^^^ The coding is not professional 😐 but continuing to revamp it to be better and optimized. - No news link, plan to add this later so can stay up to date with my plans Phew… that is a lot but it’s a relatively simple web app game ! Hope some will enjoy LetterFall-Daily. Feedback and discussion always welcomed. Cheers

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, first of all I want to clarify that I've already read this post. My problem is very similar but not the same. Also, there isn't a solution in that thread. Wich is my problem? So, I render a bunch of Sprites in the map using a regular PIXI.Container. So far so good, there is no problem there. When I zoom in, the scale of the sprites gets to little and all of those sprites who aren't beeing focused dissapear when zooming out. I would like to be able to zoom in and out without problems and use the scale property the right way I hope I made myself clear. This is my code for the Sprite creation. And this is function is for the zoom wich is called as a callback of the creation of the pixiOverlay (it executes every time there is an event in the map, such as: creation, zoom in, zoom out, etc)

Hi! I am trying to add support for compressed textures in my game. And faced artifacts with semi transparent images that uses blend mode. I am using PIXI v7.1.1, for compressed textures I choose format basis and compressed png to basis with basisu -uastc -uastc_level 3 -uastc_rdo_l .75. How to fix artifacts?

// Bullet if(this.CurrentAnim.name == "bullet_dead") this.CurrentAnim.Animsprite.onComplete = () => { this.IsDead = true; }; // Animation (animation class have member pixijs.animsprite) this.update = function() // update is game loop { if(!this.loop) { this.Animsprite.onComplete = () => { this.stopAnim(); // stop anim delete this; // delete animation obj }; } } // GameScene if(this.arrGameObj[i][j].IsDead) // every loop check dead obj and remove it { delete this.arrGameObj[i][j]; // to null, release in memory this.arrGameObj[i].splice(j); // pop in arrgameobj continue; } // Here's recorded video that help you understand my problem clearly 2022-12-12 16-07-27.mkv

Hi all, I want to put together a little snake game to teach myself PixiJs. What I'm trying to achieve is a smooth gliding effect when moving this block around. (press left/right to start moving). Unfortunately, I simply cannot get rid of the occasional 'stuttering' when rendering - so I'm starting to think I might be going about it the wrong way. Could somebody tell me what I'm doing wrong here? see: fiddle const graphics = new PIXI.Graphics(); const app = new PIXI.Application(); const movementSpeed = 150; const stage = app.stage; const blocks = []; stage.addChild(graphics); class Block { constructor(position=[0, 0], direction=[0, 0]) { this.width = 20; this.position = position; this.prevPosition = position; this.direction = direction; } render (alpha = 0) { let offsetX = (this.position[0] * alpha) + (this.prevPosition[0] * (1 - alpha)); let offsetY = (this.position[1] * alpha) + (this.prevPosition[1] * (1 - alpha)); graphics.drawRect(offsetX, offsetY, this.width, this.width); } update (delta = 0) { this.prevPosition = this.position; this.position = this.calculateNewPosition(delta); } calculateNewPosition (delta) { let movementOffset = movementSpeed * (delta / 1000); return [ this.position[0] + (movementOffset * this.direction[0]), this.position[1] + (movementOffset * this.direction[1]) ]; } }; function render (delta) { graphics.clear(); graphics.beginFill(0xFF0000); blocks.forEach((block) => block.render(delta)); graphics.endFill(); }; function update (delta) { blocks.forEach((block) => block.update(delta)); }; function changeDirection (direction) { blocks.forEach((block) => { block.direction = direction }); } const fps = 30; // Frames per second const frameDuration = 1000 / fps; // Maximum time per frame. const maxFrameDelta = 1000; // Upper limit on how long the frame takes to render. let previousTimestamp = 0; // Last timestamp. let accumulator = 0; // Remainder of time that we could not simulate in our fixed-step physics. (used to smooth out temporal aliasing) function gameLoop(timestamp = 0) { requestAnimationFrame(gameLoop); //Calculate the time that has elapsed since the last frame let frameDelta = timestamp - previousTimestamp; //Optionally correct any unexpected huge gaps in the elapsed time if (frameDelta > maxFrameDelta) elapsed = maxFrameDelta; //Add the elapsed time to the accumulator accumulator += frameDelta; //Update the physics simulation in discrete chunks, and keep whatever remainder is left in the accumulator. while (accumulator >= frameDuration) { //Update the physics simulation update(frameDuration); accumulator -= frameDuration; } // After performing the physics steps, we might have some remaining time in the accumulator. // This causes 'stuttering' (temporal aliasing), so we interpolate where the block should be rendered. // That is: we don't draw the block exactly where the physics simulation has placed it, but where it should be to get the smoothest animation. // (Thank you Glenn Fiedler!) let renderOffset = accumulator / frameDuration; render(renderOffset); previousTimestamp = timestamp; } function initStage() { document.body.appendChild(app.view); blocks.push(new Block()); // Keyboard input. document.addEventListener('keydown', function(event) { if(event.keyCode == 37) { changeDirection([-1, 0]); } else if(event.keyCode == 39) { changeDirection([1, 0]); } }); gameLoop(); }; document.addEventListener("DOMContentLoaded", initStage);

Hello!so i want to detect when the mouse is over a sprite and continue executing some code until the mouse exits the area...with mouseover it executes the code once and thats sadly not enough for me...with mousemove i cant execute code when the mouse just hovers in sprite...any help would be appreciated ty

I am trying to load a sprite sheet for PIXI js. I have a png and json file in one folder, I am pretty sure there are fine on their own. But I can't get it to load. got this from http://pixijs.download/release/docs/PIXI.Spritesheet.html ... PIXI.Loader.shared.add("spritesheet.json").load(this.setup()); ... ... this.sheet = PIXI.Loader.shared.resources["spritesheet.json"].spritesheet; console.log(this.sheet) ... the log will say that the sheet is undefined. I think it either doesn't find the json or png file. Probably neither. I'm not sure what path "spritesheet.json" should be, relative to this file it woulde be "../assets/spritesheet.json". But that also fails. This is my webpack config: const path = require("path"); module.exports = { mode: "development", devtool: "eval-cheap-source-map", entry: "./app/index.js", output: { filename: "bundle.js", path: path.resolve(__dirname, "client"), }, module: { rules: [ { test: /\.(png|svg|jpg|jpeg|gif)$/i, loader: "file-loader", options: { name: '[name].[ext]', }, }, ], }, }; And this is how the bundle looks. spritesheet.png is loaded when I put it as an <img> in the html. So I know it is being received by the client. I also get this if I console.log(this.sheet) with this.sheet = PIXI.Loader.shared.resources["spritesheet.json"]; Looks like it can't find the json file either. So I guess my question is, what are the paths of the json and png file?

I need to display a large number (for example 400) of high resolution textures at the same time, for this I used the ParticleContainer from the example - https://pixijs.io/examples/#/demos-basic/particle-container.js. But in the end, I get FPS = 10-15, the more sprites, the lower the FPS, even if you turn off the animation - there is no difference, the image in idle mode also heavily loads the browser, which is why the page scroll is very freezing. - https://codesandbox.io/s/admiring-lamarr-p8bvyf?file=/index.html I could not find a solution anywhere, so I will be grateful for your help.

I created an app using PixiJS. I set height and width for the PIXI.Application. I added containers which are having the graphics relevant to my application. When I draw those graphics some of them are go beyond the boundary limit of the application. When I render the application it's totally fine. Only the application area get rendered without the graphics which drew beyond the boundary limit of the app. Though when I get an image from the application using the following code, the graphics which drew beyond the boundary limit of the application are also available in that image. this.pixiApp.renderer.plugins.extract.image(this.pixiApp.stage, 'image/jpge', 1) How can I download an image only containing the graphics which are available within the app boundary limit.

I need to improve the smoothness of the curved lines which are drawn using PixiJS. When I set the antialias=true, the rendered application would be handy with the smooth lines. Though when I download the rendered segment it seems that the curved lines are not smooth as the rendered one in the web page. Is there a way to improve the smoothness of curved lines in downloaded image. I use following method to download image this.renderTexture = PIXI.RenderTexture.create( { width: this.pixiApp.screen.width, height: this.pixiApp.screen.height, resolution: this.pixiApp.renderer.resolution }); this.pixiApp.renderer.render(this.pixiApp.stage, this.renderTexture); return this.pixiApp.renderer.plugins.extract.image(this.renderTexture, 'image/jpge', 1);

Hi, i need help to convert a shadertoy filter (https://www.shadertoy.com/view/7tsfWS) to newest pixijs version filter. Somehow my canvas stays black and i dont know what i do wrong. I prepared sth on pixiplayground: https://www.pixiplayground.com/#/edit/av3kcgJuH2ISiPpSmz4uI Thx already in advance for the help ?

Hello everyone, I am a student from Vietnam. I bump into some issues on my very first step into Pixi JS and it was two days that i cannot find a way to make it work. Therefore, i decide to seek for help and it means a lot to me if you guys can give me some advices about my problem. Thank you all in advance. My idea is very simple. I want to load an image and trigger some events when the image start/finish loading, then display it on the canvas. My image path is an URL. My problem is: - the resources doesn't include the texture property (but when i download the image, save it locally and use a local path instead of URL, the texture property appears) - it works when i use Sprite.from(url) but i cant attach events when start/finish loading like using loader Wish you have a nice day sir and stay safe canvas.html

Hey! I have to make some particles to only "run" for like 2 seconds. The problem is that i dont know how to set the duration of it. Do i have to use tickers? Can i have ticker for every particle? And i found out that i can use containners to place particles in a group. Can i still move them one by one? My goal is to do something like this but for like 2 seconds and i cant find out how to make the particles to be up for that period of time :

Hi! Maybe someone could help with a freeze of an animation while we loading/preloading textures. There are background and several big animations. After scene have started to change and transition animation have started, main container is cleared and new background with different big animations are added. This freeze is connected with scene rendering. Does somebody know the way to deal with this problem? ======================= Version pixijs 6.2.2 ======================= Application virtual_h = 2276; virtual_w = 1280; render = PIXI.autoDetectRenderer(virtual_w, virtual_h, { resolution: window.devicePixelRatio, autoResize: true, antialias: false, }); gameContainer.height = virtual_h; gameContainer.width = virtual_w; document.getElementById("game").appendChild(render.view); ======================= Animation let animationRaw = PIXI.Loader.shared.resources["animationRaw"].spritesheet.animations["animationRaw"]; let animation = new PIXI.AnimatedSprite(animationRaw); animation.autoUpdate = true; animation.loop = false; animation.onComplete = function() { animation.stop(); }; gameContainer.addChild(animation); ======================= Preload render.plugins.prepare.upload(gameContainer); ======================= Ticker ticker.add(function() { render.render(gameContainer); }); ======================= Switch a scene gameContainer.removeChildren(0, gameContainer.children.length); let animationRawNew = PIXI.Loader.shared.resources["animationRawNew"].spritesheet.animations["animationRawNew"]; let animationNew = new PIXI.AnimatedSprite(animationRawNew); animationNew.autoUpdate = true; animationNew.loop = false; animationNew.onComplete = function() { animationNew.stop(); }; gameContainer.addChild(animationNew); =======================

Hello friends. I need a little help in my project. I have array of images with id and url. any part of those images can be rendered in different occasions, based on user filtering. I have custom resource manager which saves all downloaded images (or failed downloads) with id and resource returned by PIXI.Loader, and for each new image checks if texture is already available, if not adds id and url to Loader and loads. Now my problem is that image array itself is also user defined, so url's might be incorrect or duplicate. If there's two images (two different IDs) to be displayed and they have same url, I technically dont have them downloaded because I'm checking with id and they have different id, so I'm adding both to the Loader resource and load. I dont know how loader handles that but it throws this warning: BaseTexture added to the cache with an id [image url] that already had an entry Warning itself is not big of a problem, but I think loader still downloads the image twice and then tries to cache it, and then is this warning thrown. so I dont want download to be performed twice when I know that i already have a texture (or will have with different resource I guess). Can anyone please help me. I dont even know what can be the correct fix in this case, let alone how to do that

Hi everyone, Hi Ivan, First of all thanks to Ivan for answering all our questios without loosing your mind . What I have is a sprite (ship) with child container (weapon anchor). Now I want to draw a line (laser) from that container to another sprite (foe). The problem is, I cannot get the global coords of the container, but only the local ones. The workaround with getBounds() seems to return local x/y coordinates as well var anchorWeapon = getByName(sprite.children, 'anchorWeapon'); // get the container for the anchorWeapon var bounds = anchorWeapon.getBounds(); // width and height should be 0 laser.points = [bounds.x, bounds.y, foe.x, foe.y]; // in function call: laser.moveTo(laser.points[0], laser.points[1]); laser.lineTo(laser.points[2], laser.points[3]); I tried to make the line a child of the container itself, but then I cannot use the coords of the foe to line to because we are in local context. What would be the best way to solve this? Thanks a heap! Daniel

Hello, i'm trying to do a color picker with pixijs v6.2.0 It's work almost, but i have a problem when i have a rotating sprite on the ledge of the stage, because that change dinamicaly the width and height stage, but don't change the x and y position of others sprites in the stage. Exemple 1: The mouse down event is set on the stage https://jsfiddle.net/Marodheure/gzytp4hr/94/ If you comment the line 53 (for the sprite rotation) in the javascipt tab, that will work. Exemple 2: The mouse down event is set on a sprite, and the readpixels too, to avoid to have not fixe dimensions, but that does not work too, but i don't know why https://jsfiddle.net/Marodheure/dtLsj0b1/40/ You can click to see in console the resulting: x y, width height, rgba Thank you for reading and helping

Become a part of our unique success story! More than 500 million people have already played our next-gen instant games. Join us and unleash your superpowers to build the future of gaming! SOFTGAMES is looking for a JavaScript Game Developer to help us bring our games to new Instant Game Platforms that will entertain tens of millions of people every month. The JavaScript Game Developer designs, architects, tests and implements features into our live games. Further you'll work on bringing our games to existing and upcoming Instant Game Platforms. You will collaborate with producers, artists and other game developers to share learnings and best practices. The JavaScript Game Developer will ship robust and high-performance code, be passionate, and act as a fount of knowledge when it comes to game development. As part of a small, experienced and dynamic team you will enjoy a creative, challenging and collaborative environment. You can either work REMOTELY or in our central Berlin office surrounded by a great bunch of people! **Qualified applicants will be expected to complete a technical assessment. Your role: Write robust code to be used by millions of users Maintain and optimise features of existing Instant Games Develop and integrate different platform SDKs Independently create complete solutions from scratch Work on schedule, set clear goals Share knowledge and help colleagues Your profile: Great passion for games! 3+ years of professional software engineering experience Strong knowledge and experience with JavaScript (HTML5) Knowledge of TypeScript or another language with static typing Profiling and optimising JavaScript/TypeScript code Node.js CI/CD Experience with build systems (e.g. Webpack or gulp), PixiJS, Phaser Shipped at least 2 mobile/social title, preferably on multiple platforms Ability to quickly get up to speed with existing code Deliver high-quality and well-structured code Open-minded and keen to learn What we offer: We have a flexible working setup - either fully remote or on-site in central Berlin. Your choice! Working and living in Germany has many advantages as e.g. a high job security, great work-life balance and one of the best universal health care systems in the world! Further our Berlin full time employees benefit from: Visa: Our visa assistance service guides you through the whole process and helps with tips and tricks to get the approvals and your visa as fast as possible. Relocation Support: We support your move to Berlin with e.g. flat hunting, paper work like local registration, setting up bank accounts etc. Language classes: We pay your German lessons so you can order food auf deutsch very fast and go right up to perfecting your business vocabulary. Further training: A personal learning budget to spend on learning and development, including books, workshops, etc. Flexible working hours and home office: Productive hours differ individually. That’s why you're welcome to show up in the office whenever you're ready for it. Need to watch the kids or wait for a handicraftsman? No problem - we also offer the opportunity for home office. Office: A super modern office with state of the art tech, based in the center of Berlin, quickly to reach from all destinations thanks to the excellent public transport connections. Equipment: Choose between a MacBook Pro or Windows Laptop. Furthermore our office features the latest projectors, cameras, testing devices, monitors - you name it. Fresh fruits, snacks and drinks: Enjoy fresh fruits, free coffee and a fully stocked fridge with cold Water, Juices, Coke, Club Mate, Beer etc. For the sweet-toothed we have snacks, chocolate and chips of course. Epic company parties: Regular company parties to celebrate, including Summer Party, Oktoberfest, Christmas Party. Team events: We have regular Casual Fridays, Board Game Nights, Pub Quizzes, Team lunches, Company breakfasts and much more … Team spirit: Beyond our amazing parties and company events, the team further organizes activities themselves such as playing soccer together, a cooking group, a Japanese learning group, and much more. About SOFTGAMES With offices in Berlin (HQ) and Toronto, SOFTGAMES is an instant gaming company. We develop casual, truly social games that can be played instantly across all devices. We partner closely with Facebook, Samsung and more to craft the next generation of instant games that billions of people can play together. To-date, more than 500 MM people have played our games on Facebook, including Cookie Land, Solitaire Story Tripeaks, Mahjong Story, Space Invaders, Fish Story, Bubble Shooter or Candy Rain. At SOFTGAMES, we believe that different perspectives and background in our teams contribute to the quality of our work. We value diversity and therefore welcome all applications - regardless of gender, nationality, ethnic and social origin, religion / worldview, disability, age as well as sexual orientation and identity. Have we caught your interest? Then we look forward to your detailed application together with your salary expectations and earliest possible start date.

Hello All, I am having an issue with loading spritesheets. I coded up an example that works great in code sandbox but it does not work in my development environment (code is identical). Both are using recent versions of Pixi but the repo version uses Parcel to host. The repo example has a promise error and cannot find the texture. Just not sure where to go from here. Thank you for your time. sandbox https://codesandbox.io/s/pedantic-surf-0kdci repo https://github.com/420visions/spritesheet_issue npm run dev to build example

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

I am not recruiter. I am 100% dev. location is in Bank, London, UK. full time permanent role 1. At least three years of front-end work experience in game industry. 2. Familiar with PixiJS, Typescript, Javascript, Git, Greensock and NPM 3. Good at team communication and coordination skills, pressure-bearing ability and learning ability Pls feel free to send me message.

Hello friends. My first post here. So, I'm working on a small project with around hundred images on big ViewPort. I have basic drag-and-drop functionality of images and I'm using manual requestAnimationFrame to render stage only during image dragging. Now I need to add drop-shadow on all Images. I have tried @Pixi/filters-drop-shadow package by bigtimebuddy but during dragging it significantly drops frame rate. Can anyone please suggest any other way to make drop-shadows with good performance. (P.S. I have thought of using pieces of shadow as a png and scale and skew them and assembly them in a way to look as real drop-shadow on any size of image on any zoom factor. But, that's kind of ridiculously complicated idea and I'm hoping for better suggestions. ) Thank you in advance.

Hi, I'm working on a web game project made with pixi.js and django. Basically Django process/sends data from backend for Pixi.JS to process and render the game on HTML Canvas. I have seen some references for testing pixiJS, however they're all working with react (mentioned in this post) and none mentions how to test with django. Additionally, I have also considered using chrome plugin to monitor pixijs, another plugin called gstatjs to monitor graphic statistics, and screenshot testing. Ultimately I would love to be able to automate testing of pixi objects on the canvas (i.e. test if the health bar decreases when shooting the wrong objects, etc). I'm rather new with this and would love to hear some advice/suggestions from anybody, thank you!