Search the Community

Hi! I'm new to this forum. I've searched a lot, but couldn't find a way to fix my issue. What I'm trying to do is to override destroy method of the Sprite class. Here's a code, that I use (TypeScript): const destroySprite = Sprite.prototype.destroy; console.log(PIXI.Sprite.prototype, PIXI.Sprite, Sprite.prototype, Sprite, PIXI); Sprite.prototype.destroy = function (options: any) { // doing some extra logic destroySprite.call(this, options); }; But when I debug the application - I see that I can only step into this overridden method from the derived objects (like Text, TilingSprite etc.). Pixi's version in the package.json is: "pixi.js": "^5.3.8", Also I use webpack 5 for modules bundling. I have some suspicion that it may be the source of problems. And there's a result console.log, that I've added to the code snippet above: I would be very thankful if someone could give me an advise on how that issue can be fixed. Thanks in advance.

Dear Community, Thank you very much for the magnificent project! Currently, I am trying to create a filter which is based on a shader ""Godrays" by alaingalvan", but the one which only lightens a certain area where "lights" exist on a transparent stage. The current version creates dark places ('0x000000') where the "lights" are not shown, but the darkness must not surpass the background ('0x333333' or '0xffffff' as in CSS), so it would look like a transparent filter in the result. This is the incorrect behavior since it creates black background where the "lights" are (it is correct that it affects the background): ~ Is it even possible using this filter/shader? Is it correct that the issue is in the color matrix ("float noise(in vec3 p)")? Would it be correct to somehow base a pixel color on the source and only increase its "gain" instead? I will highly appreciate any suggestion! Best and kind regards

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; } `````

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'm new to Pixi.js and practice to create games. I've created a lot of same Sprites(1,000 numbers of small svg) on a container with viewport so that I can move the container around. I would like to change two colors each Sprites have by using MultiColorReplaceFilter. However, when the filter works, the performance get slower obviously. I've tried several things like autoFit, resolution, and filterArea and it might not work or maybe couldn't manage to do it properly. Is there any thing I can do to make it better/faster to render?

Hi All, I'm a new developer and have been enjoying PIXI so far! I am new to most aspects of game and web dev as well, and I was glad to see an active forum like this one. If I have a game object composed of multiple sprites which all use the same x/y position, can I link the position values of the sprites to the x/y I am tracking in my wrapper object? I'm looking for a way to have the sprite position values reference the same memory location as a global x and y value, such that updating the global value would intrinsically update the position of a number of sprites. It looks like the sprite x and y values are getter/setter functions, so at that point I got stuck determining if this would be possible. For now I wrote a setX and setY function that loop through all the associated sprites and set their position values, and I was wondering if this is an efficient way to solve the problem? I'm trying to be cautious about processing overhead and want to understand best practices for any operations that are going to take place on every update scan. Thanks!

I have an old school RPG I am making and I have two main scenes, the Overworld and Encounter scenens. The overworld is fine when switching to it but the problem is the Encounter, before I switch to it, I reset it so I can recreate it from scratch with a random monster in it. The problem is, every time I switch/restart the Encounter scene, the animation of the creature gets progressively faster. I do remove the animation key so I dont get the warning when I switch back to the Overworld scene. Just curious if I am taking the right approach to this and if so, do I need to clean up the sprite of the monster before hand so it doesn't make the animation speed up?

Hola hola, So I am working on a 2D basketball game. I am using 2 small sprites (with circular physics bodies) on each side of the basket rim for collision detection with the ball. I parented the 2 sprites to the backboard so I could move them all together (as shown in the child sprite example). I turned on the debug draw for the physics bodies and found the 2 bodies were not in the same position as the sprites. //Load net sprite this.net = this.game.add.sprite(this.game.world.centerX, 200, 'net'); this.net.anchor.setTo(0.5); //Add hoop children markers this.leftMarker = this.net.addChild(this.game.make.sprite(-66, 60, 'marker')); this.leftMarker.anchor.setTo(0.5); this.rightMarker = this.net.addChild(this.game.make.sprite(66, 60, 'marker')); this.rightMarker.anchor.setTo(0.5); I parent them like so.. but my physics bodies don't act as if they are parented. They should be at the same position as the sprite, but instead they are (-66, 60) and (66, 60) from the top left corner (0, 0) instead of (-66, 60) and (66, 60) from the parents position (world center x, 200). You can see the attached image as an example. Is there something I am missing? Is this the way it's supposed to be? Can I somehow update the physics bodies to line up with the sprites easily?

Hey guys, So I've just started refactoring my codebase to Phaser 3 today and I've hit a few bumps. Nothing too bad so far, but one I can't get my head around is how to bring sprites/sprite groups to the front of the display in Phaser 3. In Phaser 2 we had game.world.bringToTop(group), but I'm struggling to find the equivalent in Phaser 3. Any help appreciated, nice one thanks. Sam

Hello, I got allot further in my goal to make a ribbon like menubar. But for some reason i had a error saying Sprite.On do not exist, so i had to edit the tsconfig file and add the line: "allowSyntheticDefaultImports": true, to the compiler options so after adding that i was able to use that methode. But here comes the problem: When i hit the Sprite Button -> it go's to the required function and print's in the console the message i provided, But when i want to acces the container from the UIMananger within the onButtonClick -> this.uiContainer i get error saying it's undifiend Anyone have a clue how to fix this? UI Manager Snippit (See: onButtonClick ) export class UiManager { private demoScene: Boolean = false; private uiContainer: Container = new Container; constructor(demo:Boolean) { this.demoScene = demo; this.uiContainer = this.GenerateMenuBar(); } public getUI(): Container{ return this.uiContainer; //Return the ui Correctly } private onButtonClick() :void { console.log("clickt on button"); let btnTest = this.createMenuButton(); // <<-- Error: this.createMenuButton is not a function console.log(this.uiContainer); // <<-- Error: Undefined this.uiContainer //Launch a event to show a sprite... } private GenerateMenuBar(): Container{ this.uiContainer.addChild( this.createMenuBackground(), this.createMenuButton(), this.createWallsnWindow(), ); return this.uiContainer; } private createMenuButton():Sprite{ console.log("Create MenuButton") var tmpSrite = Sprite.from('./src/Engine/assets/ui/btn_NewScematic.png'); tmpSrite.interactive = true; tmpSrite.buttonMode = true; tmpSrite.name = "menuButton"; tmpSrite.position.x = 10; tmpSrite.y = 59; tmpSrite.hitArea = new Polygon([40,0, 100,0, 100,40,40,40]); //Setup Hitbox tmpSrite.on('pointertap', this.onButtonClick); //Interaction... return tmpSrite; } Engine File -> Everything in here renders ok and uses the UIManager export class Engine { public renderer: Renderer; public loader: Loader; public world: Container; public graphics: Graphics; public fpsMax: number; public canvas: HTMLElement; public uiManager: UiManager; private assetsLoaded:boolean; // // constructor constructor(options: IEngineOptions) { this.loader = Loader.shared; this.renderer = new Renderer(options); this.world = new Container(); this.graphics = new Graphics(); this.fpsMax = options.fpsMax; /// * UI Manager * this.uiManager = new UiManager(true); this.canvas = options.containerId ? document.getElementById(options.containerId) || document.body : document.body; this.canvas.appendChild(this.renderer.view); /// /// Loader Setup /// this.loader.onComplete.add(() => { this.assetsLoaded = true; console.log("Assets Loader State:" + this.assetsLoaded); }) this.loader.load(); this.render(); } get view(): HTMLCanvasElement { return this.renderer.view; } public render(){ while (this.assetsLoaded = false) return; console.log(utils.TextureCache); let tmpWorld = new Container(); this.world.addChild( this.uiManager.getUI(), <<-- Render Fine and returns the Ui Container ); } } // Engine

Hello Everyone, I'm primarly a .Net Developer(c# backend), and not so long ago i started a new project. I choise as rendering engine technology pixijs v6.0 (latest version) I'm quite new to pixijs and typescript and stubled upon a stange error. This error is that a sprite/texture not gets loaded/displayed to the screen.. Why this occuers i have no clue... If i create a simple unstructed project i can load textures fine,but in my structerd program nothing gets displated.. If i add a text object for example i have no issues... nor with drawing rectangles. I Really really hope someone can help me, scavanged the internet for a while now to find a sollution. Regards Me #Index Typescript File -> import * as PIXI from 'pixi.js'; import { Engine } from './Engine/Engine'; //Gobal Variale //declare const window: any; declare global { interface Window { app: any; Display: any; } } export class Game extends Engine { static instance: Game; //private _currentScene?: IScene; public lang: string; //public games: { [key: string]: IScene }; _init: boolean; constructor(parent: HTMLElement) { if (!parent) throw new Error("aprent element must be div!"); const aspect = window.innerWidth / window.innerHeight; //l size = { ...Config.ReferenceSize }; //fallback PIXI.settings.PREFER_ENV = PIXI.ENV.WEBGL; super({ autoStart: true, backgroundColor: 0xFF00FF, width: 1200, height: 1200 //...size }); parent.appendChild(this.view); this.render(); // renders the world //@ts-ignore Game.instance = this; PIXI.utils.sayHello; } } //Hooks.. window.Display = () => { const app = (window.app = new Game(document.querySelector("#gameid"))); }; #Engine TypeScript File -> import * as PIXI from "pixi.js"; import { IEngineOptions } from './Classes/Interfaces/IEngineOptions'; import { IEngine } from './Classes/Interfaces/IEngine'; export class Engine extends PIXI.utils.EventEmitter implements IEngine { public renderer: PIXI.Renderer; public ticker: PIXI.Ticker = new PIXI.Ticker(); public loader: PIXI.Loader = PIXI.Loader.shared public world: PIXI.Container = new PIXI.Container(); public init: Function; constructor(options: IEngineOptions) { super(); this.renderer = new PIXI.Renderer(options); // good this.init = () => { }; } get view(): HTMLCanvasElement { return this.renderer.view; } render() { const testGraphic = new PIXI.Graphics(); testGraphic.beginFill(0xFFFF00); testGraphic.lineStyle(5, 0xFF0000); testGraphic.drawRect(0, 0, 300, 200); let x = new PIXI.Text('This is a PixiJS text', { fontFamily: 'Arial', fontSize: 24, fill: 0xFFFFFF, align: 'center' }); x.position.x = 5; x.position.y = 250; <b>// Not Working and asset exist..</b> let background = PIXI.Sprite.from('./Assets/UIElements/ribbonBackground.JPG') background.position.x = 0; background.position.y = 0; this.world.addChild(testGraphic, x, background); this.renderer.render(this.world); } destory(params = { children: false }) { this.world.destroy(params); this.ticker.destroy(); this.renderer.destroy(true); } } //} // Engine

I'am trying to create 5 sprites and combine them into 1 sprite only once. Then i create multiple objects and assign that 1 sprite to each one of those objects. My idea is that each object has 5 properties like name, image etc.. and if i create 5 sprites per object then it will cause alot of draw calls and sometimes fps drops if the objects are too many, so iam trying to combine the 5 sprites into 1 sprite then add that sprite to each object and inside the object i want to be able to change the sprites inside the 1 parent sprite for each object while that 1 sprite is acting as if it was actually only 1 sprite, basically without adding the 5 sprites as children to 1 sprite. 1 - I wanna know if this is possible 2- if it is, I want to know how i would do it because iam kinda new to pixi and i dont know what to do i have tried multiple ideas but all of them failed so i came here.

Hello, how can i convert a PixiJs Sprite to add it to my Canvas stage (fabricJs)? iam getting this error: fabric.min.js:8168 Uncaught TypeError: obj._set is not a function slideBildMesh = PIXI.Sprite.from($jsonDefault.img); $app = new fabric.Canvas('itemcontent1', { backgroundColor: 'lightgrey', width: divWidth, height: divHeight }); $app.add(slideBildMesh); //<--- error

I’m trying to make a game with a rocket ship navigating in a cave. The cave is broken up into 400x400 big tiles that’s combined to form a bigger cave. They all have physics-maps from “PhysicsEditor” that seems to work correctly. My tileclass: export default class Tile extends Phaser.Physics.Matter.Sprite { constructor(scene, x, y, sprite, phymap) { super(scene.matter.world, x, y, sprite, 0, { shape: phymap }); this.setStatic(true); this.setBounce(0.05); scene.add.existing(this); } } And these are added in game.js: tilemap[1][0] = new Tile(this, 0, 0, 'ground', tile_body.ground) tilemap[0][0] = new Tile(this, -400, 0, 'bottom-left', tile_body.bottom_left) tilemap[0][1] = new Tile(this, -400, -400, 'vertical', tile_body.vertical) But the tiles are all over the place, if I set them all on position (0, 0) you can see it more clearly: Any ideas to what I am doing wrong? I thought all would be on top of each other if created at position (0, 0) with the same height and width?

Project `visual ts game engine` Tutorial Basic - Sprite animation (SpriteTextureComponent) Screenshot: SpriteTextureComponent class extends TextureComponent It means that we can easy use tiles on sprite animation. Scales is also interest parameter. Use if you want the textures to be larger/smaller than the physical body. sprite: { xScale: 2, // or smaller 0.2 yScale: 2, // or smaller 0.2 }, Demo code: /** * @description * I use images from add-element folder. * This is demo but for real release this * is bad praticle. */ class DemoSpriteAnimation { public gameName: string = "Demo 1 - Add sprite object"; public version: number = 1.0; public playerCategory = 0x0002; public staticCategory = 0x0004; public starter: Starter; public myFirstGamePlayObject: Matter.Body | any = undefined; constructor(starter: Starter) { this.starter = starter; } public attachAppEvents() { const root = this; console.log("App running ..."); // spriteOptions is just demostration not official engine interface. let spriteOptions = { delay: 1, pos: { x: 100, y: 200, }, tile: { x: 1, y: 1, }, }; root.createMySprite(spriteOptions); spriteOptions = { delay: 10, pos: { x: 400, y: 200, }, tile: { x: 1, y: 1, }, }; root.createMySprite(spriteOptions); spriteOptions = { delay: 30, pos: { x: 700, y: 200, }, tile: { x: 5, y: 5, }, }; root.createMySprite(spriteOptions); root.addGround(); } public addGround() { const newStaticElement: worldElement = Matter.Bodies.rectangle(400, 550, 1000, 90, { isStatic: true, isSleeping: false, label: "ground", collisionFilter: { group: this.staticCategory, } as any, render: { visualComponent: new TextureComponent("imgGround", [require("../add-element/imgs/backgrounds/wall3.png")]), sprite: { olala: true, }, } as any | Matter.IBodyRenderOptions, }); (newStaticElement.render as any).visualComponent.setVerticalTiles(4) // setHorizontalTiles(1); this.starter.AddNewBodies([newStaticElement] as worldElement); } /** * @description How to create sprite * with different options */ public createMySprite(spriteOptions: any) { const playerRadius = 50; // tslint:disable-next-line:prefer-const let myObject = Matter.Bodies.circle( spriteOptions.pos.x, spriteOptions.pos.y, playerRadius, { label: "mySprite", density: 0.0005, friction: 0.01, frictionAir: 0.06, restitution: 0.3, ground: true, jumpCD: 0, portal: -1, collisionFilter: { category: this.playerCategory, } as any, render: { visualComponent: new SpriteTextureComponent( "explosion", require("../add-element/imgs/explosion/explosion.png"), ({ byX: 4, byY: 4 } as any), ), fillStyle: "blue", sprite: { xScale: 1, yScale: 1, }, } as any, } as Matter.IBodyDefinition); myObject.collisionFilter.group = -1; this.starter.AddNewBodies(myObject as worldElement); (myObject as any).render.visualComponent.seqFrameX.setDelay(spriteOptions.delay); (myObject.render as any).visualComponent.setVerticalTiles(spriteOptions.tile.x). setHorizontalTiles(spriteOptions.tile.y); (myObject.render as any).visualComponent.keepAspectRatio = true; console.info("my sprite body created from 'dead'."); } protected destroyGamePlayPlatformer() { this.starter.destroyGamePlay(); this.starter.deattachMatterEvents(); } } export default DemoSpriteAnimation; Project link -> https://github.com/zlatnaspirala/visual-ts-game-engine

I am working on a game that has few background graphics, these are stored in app bundle at big resolutions like 2000x2000 pixels to support bigger devices like iPad pro. Obviously something this big is an overkill for mobile and I wanted to ask if following optimisation assumption is correct: 1. I preload these assets with pixi loader 2. I create sprite for each texture 3. I then resize this sprite to fit device dimensions better i.e. 1000x1000 px for iphone When I inspect my sprites textures I still see them at 2000x2000 pixels even though sprite itself is 1000x1000. I am concerned that I am not optimising this correctly, especially because I use prepare plugin https://pixijs.download/dev/docs/PIXI.Prepare_.html for some of these assets, I upload my sprites not textures, but I still feel like I might be uploading those big 2000x2000 assets alongside which is a problem, as these occupy a lot of GPU memory. Hence this thread to clarify if my approach to this problem is correct. I don't want to create separate asset resolutions i.e. 2x / 3x etc if possible to avoid increasing final app bundle size.

So to preface this, I've already looked through the docs for something that could do what I want but I couldn't find anything too useful. So I'm trying to make a sprite grow cracks over time (think like in minecraft when you mine), except I don't want to have to create a spritesheet of no cracks to cracks and have to loop it for every sprite texture. I'm looking for someway to play a standard opaque animation over each item I want cracks to form on. Is there anyway to do this? The only method I could think of would be to at the time I want the cracks to appear, to spawn a sprite right on top of the current sprite that is just a opaque cracking animation. This would work, but creates the challenge of having to deal with these opaque cracked-animation sprites now, especially in a multiplayer settings when I'm trying to run as efficiently as possible. If it comes to it I'll use this system and figure out a way to handle them but would rather have something that I can tie to the sprite that self destroys like an animation of its texture would. Let me know if I need to be clear, kind of rushed this. Thank you!

Hey guys, i tried to make a soft sprite animation with PIXI.js, i learn about the ticker and i tried to implement, but is a loop, and its no use because is a movimentation player. See the print Is a isometric map, and i need I need the player to walk the floors, i already do that, but not so that the animation is smooth, it goes from point a to b without any animation. I also tried to implement the smoothie library but it was not possible. i stay waiting for responses, sorry for my bad english;

Hi Everyone, I was working on a Phaser based website and as a part of the integration I needed to provide some objects interaction based on the song frequency data. To achieve this I needed to write a new Phaser plugin. This plugin allowed me to create a new extended type of Phaser.Sound object that provide real time sound data analyse. And now I want to share this plugin with all of you . Here you can view the demo http://zarkokaktus.byethost3.com/Phaser/sound_analyser/index.php You can GIT clone/download it from here: https://github.com/KaktusFlame/phaser-sound-analyser In the background, this object uses AnalyserNode from Web Audio API. This node is attached to Phaser main sound context. If Phaser doesn't use context and Web Audio API then you can set this object to provide fake data and still have the visualization effect . Here is some simple explanation for all four new extended objects you will have with this plugin: https://github.com/KaktusFlame/phaser-sound-analyser#about-objects-in-this-plugin In short, this objects are in the following relationship: We need to create Phaser.SoundAnalyse object so we can get sound analyse update on every game thick (only if sound is in play state)We need to have graphical representation of this sound analyse data, and for that we will use Phaser.BitmapDataSoundAnalyze. We need to add this texture to Phaser.SoundAnalyse so on every sound analyse update this texture will be auto updated. We need to set this texture to sprite object so we can make it visible on screenIf we want to have all in one visual representation of the sound, then we can create Phaser.SoundAnalyseSprite that will handle creation and linking of all other sound analyse objects for us This is a simple demo how you can use it: // create new Phaser game var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create }); // function called on game asset preload function preload() { // load SoundAnalyse plugin script file game.load.script('soundAnalysePlugin', 'js/plugin/SoundAnalyse/SoundAnalyse.js'); // load song file game.load.audio('song1', 'audio/All_Time_Low__Time_Bomb.mp3', true); } // function called after all assets are loaded function create() { // create plugin instance var soundAnalyse = game.plugins.add(new Phaser.Plugin.SoundAnalyse(game)); // create new Sprite sound analyse object var soundAnalyseSprite = soundAnalyse.add.soundAnalyseSprite( 20/*x*/, 200/*y*/, 530/*width*/, 200/*height*/, "song1"/*sound key*/, true/*auto play*/, this._onDecodeFinish/*decode finish callback*/, this/*callback context*/); // show frequency domain chart bars (this is only one of eight other visualizations) soundAnalyseSprite.showFrequencyDomainChartBars(true); }What do you thing about this plugin? Some of the ideas you can achieve with this plugin (not included): - You can create water surface that dance by the music played in your game. - You can make sprite object act or do staff at some sound frequency - You can make other type of visualization, bubbles that shrink and squeeze by the sound amplitude data for example - And many more

I'm a newbie on Pixi.js, recently met a problem, I want to show the outline of a sprite by using OutlineFilter, but a part of the outline was cropped by bound. The pixi example page looks same: https://pixijs.io/examples/#/plugin-filters/outline.js But pixi filter demo is good: http://pixijs.io/pixi-filters/tools/demo/ Source Code: https://github.com/pixijs/pixi-filters I wonder what magic is used, Thanks.

I am creating a platformer with Phaser3 and I am using Matter for my physics engine. I have loaded my tilemap/set into the world, however, I don't know if the collisions are working because since I have added in this code, my sprite has disappeared. Why is this? How do I get my sprite to appear again so that I can make sure he collides with the tiles? //Create tilemap const map = this.make.tilemap({key: 'map'}); //Create tileset const tileset = map.addTilesetImage('tiles'); const platforms = map.createDynamicLayer(0, tileset, 0, 0); map.setCollisionByExclusion([-1, 0]); this.matter.world.convertTilemapLayer(platforms); //Update the game at 30Hz this.matter.world.update30Hz(); //Get hitboxes this.shapes = this.cache.json.get('shapes'); //Set boundaries for physics this.matter.world.setBounds(0, 0, game.config.width, 750); //Player this.hero = this.matter.add.sprite(0, 0, 'sheet', 'run_right/0013', {shape: this.shapes.s0013}); //Don't want him rotating in the air this.hero.setFixedRotation(); //Set our variable to do calculations heroSize = this.hero.width;

Hi I am new to game development. I have an issue.. here is the screenshot of my game which I am developing. My screen is scrollable with phaser_kinetic scroller. When I scroll the sheets with numbers it should be masked from the white line and and disappear the part of group sprite which is crossing the line. How can I achieve that. I used graphics to mask. But the graphics also hides the background. I dont want background to be hidden.

https://gyazo.com/4a44909a40952ac6f5182d328f55d754 I've spent more time than I care to admit figuring it all out. I'm calculating a convex hull around a sprite and then slicing it up into matterjs driven little orc pieces. I'm not very happy with one thing yet. Each of these pieces is a separate Sprite and it has it's own Graphics object as a mask. I feel that if I were to have a couple of these going at the same time rendering could get expensive. Teach me to do better I should be learning react or something to get a dev job, but here I am cutting up orcs.

I'm porting a game developed using Phaser to Roku (streaming box) and I needed to change some of the sprite sheets, so I got TexturePacker but was surprised that it does not have an option to read the json file and split back the sheet into all the separate frames. Then I decided to create a quick app to do that, get the json and the png and unpack the frames png files into a folder. It was very useful to me so I decided to open it to the community: https://github.com/lvcabral/PhaserSpriteSheetUnpacker/releases

So today I come asking for help. I'm converting from a Flash Developer over to JavaScript and I'm using CreateJS, I wanted to know if anyone had recommendations on how I could export my sprite sheets so that it's a little easier to assemble in CreateJS. How I make my characters in Flash is I have the main character MovieClip and I have a nested MovieClip for mouths. The main character MovieClip may have animations so on every frame where the character talks I have a nested mouth clip container(I have provided a video clip on how the animations plays without mouth interaction by code: https://youtu.be/TJOAME7MvgI - and how it acts with interaction: https://youtu.be/XCODle6ocvs). Does anyone know the easiest way to export the animation from Flash and the mouths? I was gonna do the animation on a separate SWF and export it to a separate sprite sheet then for each frame do each set of mouths as a sprite sheet and just show them when it gets to that frame in CreateJS. But how I've been making these so far is the mouths are done by frame on the timeline. In flash I did it like this too but also did them on layers, so if the mouths were on layers it be character.mouths.A_mc.visible = true; and set the last one's visibility to false...if I did it by frame I'd just do character.mouths.gotoAndStop("A"); and this is currently the only way I'm doing in in CreateJS. If anyone has been following along so far lol some suggestions would be great on how you would tackle this!