Search the Community

We have atlas exported with Texture Packer. Run-time every texture is cropped by 1 pixel. This pixel is added to the opposite of the texture. Likewise https://github.com/pixijs/pixi.js/issues/5087.

Hello, I have found another problem after upgrade from PIXI2 to PIXI4 This time it is about mouse interaction, it seems like that I cannot handle both buttons held simultaneously as it worked with PIXI2 I am using right button (with mousemove) to navigate character on the map while left button (with mousemove) is used to move map and it is really usefull to use it both at once. Simply put .. window.stage.mousedown = function(event) { log("LEFT DOWN"); }; window.stage.rightdown = function(event) { log("RIGHT DOWN"); }; If I am HOLDING left button and click with right - no event is fired If I am HOLDING right button and click with left - no event is fired Same problem - and probably even worse - is when I am moving (holding right button down), then I cannot interact with another objects at the same time (because left button doesnt fire any event). I have tried pointerdown instead of mousedown, but then right button fired both events which is also wrong. This is really big issue if that possibility is removed in PIXI4 Someone faced that problem ? Thanx in advance

Hello guys, I am officialy stuck in desperation I have upgraded from Pixi2 to Pixi4 (4-7-3) and RenderTexture causes crashes on Android Chrome (no problem on desktop). I have 2D RPG game with tilebased background map, tiles are rendered to RenderTexture which is then added to the stage - this worked perfectly with Pixi2 (and Pixi3 too) but stopped to work after upgrade to Pixi4. It crashes WebGL after several seconds of walking around. I have tried hour and hours of experiments to figure out what exactly is the cause, but no success. It worked with PIXI2 and PIXI3 which means that I dont have anyhing fundamentally wrong there. Side notes: 1. Working on canvas renderer 2. Working when sprites are rendered directly and not into RenderTexture (but slow on mobiles) 3. Tried textures with power of 2 resolutions - didnt help My approach is like this //Create render texture and sprite that is containing it var mapTexture = PIXI.RenderTexture.create(Data.gameWidth + 252, Data.gameHeight + 252, PIXI.SCALE_MODES.LINEAR, 1); var bgSprite = new PIXI.Sprite(mapTexture); // Place that sprite to the stage window.stage.addChild(bgSprite); .... // Whenever character moves, terrain is rerendered function renderTerrain() { // Container that will be rendered to the texture var mapContainer = new PIXI.Container(); // Array with sprites var sprites = []; // Loop that is taking tile data from array, making sprites based on them for (mapX = startMapX; mapX < startMapX + 32; mapX++) { picY = 0; for (mapY = startMapY; mapY < startMapY + ScreenMgr.viewHeight + 8; mapY++) { var tileId = window.worldmapProcessed[mapX][mapY]; if (tileId == -1) { picY = picY + 42; } else { // Create sprite, position it and push to the array var field = new PIXI.Sprite(window.tiles[tileId]); field.x = picX; field.y = picY; sprites.push(field); picY = picY + 42; } } picX = picX + 42; } // Loop through array and add sprites to the mapCointainer for (var i = 0; i < sprites.length; i++) { mapContainer.addChild(sprites[i]); } // Render container to the texture window.renderer.render(mapContainer, mapTexture); // Empty container mapContainer.removeChildren(); } I will be really glad for some help, this game is my life and I dont want to stay stuck on PIXI2 with it

0down votefavorite I'm trying to build a simple game menu, containing some clickable sprites, which will be used as buttons to navigate around the menu. ( I'm using the latest pixi.js (v4.3.5) ) Structure of my app: loader.module ( makes use of the pixi.loaders.Loader ) events.module (basic event sub/pub module) base.view menu.view ( extends base.view ) game.main How it all works now ? Both all resources and ui elements have to be explicitly defined, before initializing the view. so in the menu.view, the follwoing attributes have to be defined. this.resources = [ { name: 'start', src: 'img/start.png'}, { name: 'start2', src: 'img/start2.png'} ]; this.ui = [{ name: 'start', /// resource name type: 'img', pos: { x: 0, y: 0 } }]; Now I only need to call view.init() to get it all loaded and drawn. On the visual side, evrything works perfectly, however the 'start' sprite (which has it's interactive and buttonMode set to true) is not reacting to any mouse events. The below method is responsible for getting the required resource and returning a new sprite. It also enables the actual interaction functionality as part of this process. But the test function is never triggered for some reason. __getSpriteObject( element ){ let sprite = new PIXI.Sprite( this.loader.loader.resources[ element.name ].texture ); sprite.x = element.pos.x; sprite.y = element.pos.y; sprite.interactive = true; sprite.buttonMode = true; console.log( sprite ) sprite.on('pointerdown', function(){ console.log("what") }) return sprite; } If the above info isn't sufficient , here is also a working example. Also posted this question on SO: http://stackoverflow.com/questions/42272895/not-able-to-make-sprite-interaction-to-work

Recently discovered that there's a v4 of the wonderful PIXI.js. An hour or so of font- & generateTexture-refacturing and I'm in the clear, except for the tweens. The tweening library that I'm using is Tween.js ( https://github.com/tweenjs/tween.js/ ) which has been working great for me so far. Apparently, in v4 there's been some changes to how the position, scale, pivot and probably some more values are being set, rendering most of my tweens unable to ...tween. Tweening the alpha works fine, as it seems to be unchanged. According to the v4 source, the affected values all have this comment in common: * Assignment by value since pixi-v4. ( https://github.com/pixijs/pixi.js/blob/dev/src/core/display/DisplayObject.js ), which is what prompted my current, albeit unsatisfactory, solution. To illustrate I'll show two examples of code, first one that works in v3 but not in v4 and then my current solution. This code example is no longer able to set the x position in v4: new TWEEN.Tween(stage.position) .to({ x: value }, 500) .start(); However, a solution is to use the onUpdate()-function of Tween.js and set the position manually with a temporary object acting as the target. This code example using onUpdate() works with v4: var temporaryObject = { x: stage.position.x }; new TWEEN.Tween(temporaryObject) .to({ x: value }, 500) .onUpdate(function() { stage.position.x = this.x; }) .start(); Which is a relief (been a rough day), but it also means that I have a lot of tweens to refactor in a tedious manner. My question is if there's a better way to refactor these old tweens that requires less change? I'm not super experienced with the high level of code that's in the source.

Hi I am using a displacement map to distort three graphics lines. And since the lines have a speed, I need to move the displacement space at the same speed as the points, which define the lines. I do this, so that the line keeps it shape, and doesn't "wave" around. But it seems like there is an offset in the speeds at which they move, mostly at lower speeds, which makes the line change a bit of its shape. Is there a better way to achieve this effect, or is there some local/global positioning I'm overseeing with Pixi.js? Would It make sense to move the PIXI.Graphics themselves instead? Here is a simplified version of my project: https://jsfiddle.net/adL8wqwv/1/ There is also some jittering, which I'm unsure if is caused by missing antialiasing or something else... If any of you can spot how to smoothen out the graphics I'd be very happy. But the displacment + graphics offset mentioned above is my main priority so far. Feel free to ask any questions, if something needs to be clarified.

After update pixi from v4-rc2 to v4.0, some sprites and moviclips do not shown on screen but exist in the display list... Has any one got any idea?

hi. i'm testing v4. and i create custom shader sprite is created by texture size is using 628x572; and filterArea is set automatically to 1024, 1024; so i can't calculate correct vTextureCoord. because end of vTextureCoord looks like 1024, 1024 if vtextureCoord has (1.0, 1.0); how can i calcaulte or get correct uv. following code is custom shader code function createShaderShadow(x, y, dist) { // smoke shader var uniforms = {}; uniforms.time = { type: '1f', value: 0 }; uniforms.mark= { type: '2f', value: { x: 0.5, y: 0.5 } }; var fragmentSrc = [ "precision mediump float;", "uniform vec4 filterArea;", 'varying vec2 vTextureCoord;', 'uniform sampler2D uSampler;', "uniform float time;", "uniform vec2 mark;", "const float max_dist = 0.2;", "void main() {", "vec2 start = vTextureCoord.xy;", "vec2 end = vec2(0.5, 0.5);", //"float dist = distance(start, end);", "float dist = distance(start, end);", //"if(vTextureCoord.x< max_dist || vTextureCoord.y< max_dist) {", "if(dist < max_dist) {", " vec4 color1 =texture2D(uSampler, vTextureCoord);", " vec4 color2 = vec4(1.0, 1.0, 0.0, 1.0);", " gl_FragColor = mix(color1, color2, 0.5);", "} else {", " gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);", " vec4 color1 =texture2D(uSampler, vTextureCoord);", " vec4 color2 = vec4(1.0, 0.0, 0.0, 1.0);", " gl_FragColor = mix(color1, color2, 0.5);", "}", "}", ]; fragmentSrc = fragmentSrc.join('\r\n'); var coolFilter = new PIXI.Filter(null, fragmentSrc, uniforms); return coolFilter; }; thx

Hi everyone, and happy v4! I am having some problems with my DisplacementFilter, after updating from v3 to v4. In v3 when I moved the displacement sprite, it would loop just like a TilingSprite, when incrementing the x-position: https://jsfiddle.net/ybsyzko9/3/ But in v4 it reaches the "end" and repeats the last pixels: https://jsfiddle.net/oy2evb47/1/ So now I'm unsure whether I've been exploiting a bug... Hope not. But I am looking for ways to reach the v3 effect in v4, and any help is appreciated! All the best.

hi.. following link is example http://jsfiddle.net/gbear/n0kzcjyu/20/ i set mark of uniformsd it has like following code but it look like not have any value in fragmentshader. if change 'float dist = distance(start, makr) to following code, shader is good can you tell me where is wrong?

In PIXI v2, i was using the following fragment filter to convert a texture from rectangular to polar coordinates, as part of a process to create a shadowmap: PIXI.AbstractFilter.call(this, [ '#define PI 3.14', 'precision mediump float;', 'varying vec2 vTextureCoord;', 'uniform sampler2D uSampler;', 'void main(void) {', ' vec2 norm = vTextureCoord * 2.0 - 1.0;', ' float theta = PI + norm.x * PI;', ' float r = (1.0 + norm.y) * 0.5;', ' vec2 coord = vec2(-r * sin(theta), -r * cos(theta)) / 2.0 + 0.5;', ' gl_FragColor = texture2D(uSampler, coord);', '}' ]); The first 2 pictures in this thread show an example of how the filter works: http://www.gmlscripts.com/forums/viewtopic.php?id=1657 However, with PIXI v4 (and maybe v3, i skipped that one), the resulting image looks like this: Furthermore, the result changes, depending on the position of the sprite on the screen, which is something i don't think v2 did. Has anyone tried to do something similar in v4 and can point me in the right direction?

That's mah fork: https://github.com/gameofbombs/ This branch is also known as dev-experimental-geometry and pixi v4.1. It is the bleeding edge, and only about 5% of it was discussed as PRs in main pixi.js (like https://github.com/pixijs/pixi.js/pull/2465 ) Demos: http://gameofbombs.github.io/pixi-bin/ Best demo is outdated, though it will be converted to pixiv4 soon: http://monsterisland.chimeracompanygames.com/lux-demo/index.html (use mouse and QE) Changes: 1. 3d Transforms. We have them now. 2. Static transforms: enabled by default, new Transform2d(true), dont have to recalculate whats already calculated, increases performance for most-static 2d and 3d scenes. 3. Camera: lookPosition, lookRotation and lookEuler - camera looks at specific point 4. Camera: zIndex, zOrder - YES, THE PAIN IS GONE! Regardless of how will you group your sprite into containers, they will be sorted for rendering and interaction 5. Proxies - experimental, special for gameofbombs.com, I dont guarantee their work in other projects yet. Contributions: 1. This fork will have fast iterations, the only relatively stable thing will be API that specified in demos 2. Binaries are stored in pixi-bin and not pixi.js sources3. PR's should be made into 'master' and not some 'dev' nonsence Current projects: 1. gameofbombs.com conversion to pixi 2. Poker game with 3d cards. UPD. Babylon goes 2D according to this: Well, now PIXI strikes back!

Just want to put out our experience. (since there was a post with a different experience). We are developing a browser multiplayer game. and in v3 it was barely playable on regular laptops and office-pc's without "resonable" graphics cards. V4 actually doubled the performance of those lower-end devices, so when they would be running 30-40 fps, they are now pulling 80 fps which is more than the requred 60 to get the soft feel. I read that you improved the performance on mobile devices, and i wished it would have the same effect on lower end pc's. and it did! This is really important to us, because our game is probertly going to be played mostly from school computers, laptops etc. so thank you!. But, there's still alot of bugs, and I will keep reporting them on github, when i find simpler ways to reproduce them.

In short, I've just recently updated the html5 app I'm working on to use the newest version of Pixi (v4) recently. It looked nice & all and it basically didn't break anything. (Well, except for a ColorMatrixFilter because v4 for some reason has a padding attribute set as default to 4.) Anyway, I was really happy with the new promises such as WebGL renderer mobile optimizations and I quickly compiled my project (using Cocoon.io) to an Android apk to test. Well saying that it ran slower is an understatement. Gameplay parts where the previous Pixi v3 provided an estimated 50-60 fps, this struggled to get 20-30. I made some other changes to the code so I wasn't sure if it was the update's fault at first, but I quickly reverted to v3 and regained the old and much better performance. Some info: - I'm probably not using any SpriteBatches - I'm initializing the renderer as this: renderer = new PIXI.WebGLRenderer(window.innerWidth, window.innerHeight); - I'm drawing a lot of Sprites with different sizes at the same time, maybe 100 at max - A lot of the above Sprites are visibility/alpha toggled many times during gameplay, but I do not store them outside the render area - I'm using manual scaling on a lot of Sprites individually, I just rarely scale a container Well, that's all I could think of right now. The strange thing is that v4 actually seemed to run faster on desktop (Firefox).