Hi! I have a jigsaw puzzle, each piece is created with bezier curve mask. When the puzzle is complete there are tiny gaps between the pieces. How to avoid that behavior? Antialias is set to true.
↧
Tiny gaps between jigsaw puzzle pieces
↧
How to clear PIXI.Application?
I have implemented PIXI application with more containers like containers inside another container. I am adding PIXI.Texture for video and PIXI.Sprite for Image view. Everything working fine for the first time. Whenever I try playing video again by closing and opening page, I can see blank and throwing Uncaught TypeError: Cannot read property 'updateTransform' of null
I found somewhere that I need to clear the containers and PIXI.Applications. I am doing like below but could not get it done.
try{
if (this.appRenderer != null || this.appRenderer.stage != null) {
if(this.ticker.started){
this.ticker.stop();
this.ticker.remove(this.tickSlideRight);
this.ticker.destroy(true);
}
this.mainContainer.children.map((item) =>{ //it contains another container in which video and image functionalities implemented
item.destroy(true);
})
this.mainContainer.destroy(true);
this.imageSlideElementHolder.removeChild(this.appRenderer.view);
this.appRenderer.stage.destroy(true);
this.appRenderer = null;
}
}catch(ex){
console.log("Component Unmount, Pixi release ",ex.message) //TO-DO
}
↧
↧
Something strange with PIXI.Graphics / .geometry.points
Hi all!
I have something like this
let spline = new PIXI.Graphics()
.lineStyle(1, 0xaaaaaa, 1)
.moveTo(100, 100)
.lineTo(200, 200)
.lineTo(100, 500);
And I want to get all points like this
let points = spline.geometry.points;
let values = [];
for (let i = 0; i < points.length; i += 2) {
values.push({ x: points[i], y: points[i + 1] });
}
But cycle doesn't work, because of this
points.length
Then I decided display points and points.length
console.log("points: ");
console.log(points);
console.log("points.length = " + points.length);
and what I see
Then I tried to get just one (first element)
console.log("first element");
console.log(points[0]);
and....
I really don't understand what is it and how it works.
Someone know, what it can be?
↧
Window resizing and texture updating
When a user resizes the window, the render area can become bigger or smaller. This potentially has a visual effect in that if the window started off small and then was increased, the textures could look bad if the render area is simply scaled to fit the canvas bounds. Going from larger to smaller is less of an issue, though one could make the argument that it's doing more work than is needed.
How are most people handling this? For example, if you get a resize event and the canvas say doubles in size, do you simple increase the canvas size but leave the renderer area the same? Or do both? If it is the latter then this would possible require newer textures.
For my setup, I have a defined game area which is currently defined as 480x640. I then support different multiples of this. The plan is to do layout at 480x640 right now (though I may use a higher res multiple later). When the game starts, it will best match which multiple fits the canvas and it will use that.
I'm trying to determine if I should just choose the size of everything at start only and if the user changes the window size, they are stuck with that or if I should add support to find the best matching supported dimensions and then use that. If I decide to support better fitting which multiple works, it also implies I would need to have a method to change textures on the fly. I would imagine something like this would use a multi-pass system where I destroy/dispose of the active textures, load the newer ones, and then apply those new textures to the existing PIXI.Sprites. Obviously any other draw element would need to be updated as well. This seems like a lot of work, so seeing what people's experience is regarding this and if it's worth the effort.
↧
Pixi 5.0 Canvas Support
Hi, my game is supposed to have support for canvas, and so I added the pixijs-legacy when we upgraded to 5.0.4. However, it seems it won't recognize the fallback support and I still get this error. I can see the pixi-js legacy being loaded, though. I'm not too familiar with the whole workflow yet, so I'm finding it hard to figure out. Do you guys hav e any idea how to fix it? Thank you so much,
↧
↧
Coordinates of a sprite in pixi and in the browser's dom
I am using pixi version 4.8.5 and I am trying to access the coordinates of a Sprite when I click on it through its event like this:
e.data.global.x
e.data.global.y
I have also tried like this:
e.data.originalEvent.layerX
e.data.originalEvent.layerY
I want these coordinates to show just above that sprite in the browser an element that I have hidden in my html, but the coordinates that it is giving me from the event do not appear at the same point where I click.
Does Pixi have any better way to indicate the coordinates of the browser's DOM and not the container where the sprite is? I think that is my problem.
I have also tried:
mySprite.getGlobalPosition()
In order to obtain the coordinates but he does not give them to me precisely for the DOM.
Thanks
↧
Does a Camera/Viewport go beyond the scope of PIXI?
Will we get a camera or projection class native to PIXI at any point in the future, or is the PIXI team satisfied with that being an addon?
↧
Viewing number of draw calls webgl
Hello everyone!
I found many old topics (around 2015-2016), saying that with Mozilla browser i can view number of draw calls, but today Mozilla no longer offer this kind of tool.
So my question is, are there any other tools ?
↧
Create holes in the graphics
Hello. How to cut shapes in a rectangle as in the example?
https://www.pixiplayground.com/#/edit/0lLp139ZI9bp8WxbxZdww
The shapes must necessarily overlap each other, forming one hole.
↧
↧
Problem with beginTextureFill using spritesheet's sprite
beginTextureFill works perfectly when using a single sprite, but as soon as I use a sprite from a spritesheet, it doesn't work correctly anymore (it shows the rest of the spritesheet, instead of only repeating the frame).
Is this a bug or a limitation?
↧
PIXI 5 beginTextureFill vs PIXI 4 Texture Mesh
Hi,
In my game I'm using Pixi 4 using this method (https://www.html5gamedevs.com/topic/39049-drawing-huge-objects/?tab=comments#comment-223277) to create textured polygons. I do it by dividing the polygons in triangles, then creating meshes with DRAW_MODES.TRIANGLES. It works on both WebGL and Canvas.
In Pixi 5 we can just create a Graphics object and draw the textured polygon with beginTextureFill and drawPolygon.
What is the most performant way? Does Pixi 5 method work in Canvas too?
Thanks in advance.
↧
Grid effect after zoom pixi-tilemap / pixi-viewport
Hiya guys,
I know this issue crops up a lot but I've just added both pixi-tilemap and pixi-viewport to my game and I've been struggling quite a bit, getting help with this one issue might relieve the stress a bit.
So I have a tileset that when zoomed causes the grid effect normally caused by floating point textures. Since i'm using pixi-tilemap and pixi-viewport... my question is which one should I be looking at to resolve the issue?
I can't seem to find a way to quickly tell either to not use floating points on anything, and the standard PIXI resolution/pixel rounding/scale_mode is set at the top of the code.
Maybe the answer is to code my own zooming code and pass that to pixi-viewport as pixel values using viewport.zoom() but if I can avoid that then bonus.
Any helps/tips much appreciated 
Also thanks for the libraries, great performance/usability gains since adding them.
↧
Applying Depth Map to DIVs in a Carousel
Hello, forum! I am currently struggling to rework my photography website after having purchased a template several months ago. I did not get the time to do much but now I am little free. In a nutshell, I have 5 Bootstrap-like carousel divs on the first page, representing different types of photography. Of course, each of them has a background image. I would post the website but I do not want to risk "promoting" myself, so I will post (hopefully I get permission by the moderator) the original template: https://theme.madsparrow.me/emilynolan/ . I am not associated with their website. As you can see, the user can scroll through some divs, with its own images. I have managed to use Pixi.js to apply a DepthMap to one of the divs, but I have no idea how I can do for 4 other divs which are supposed to translate into view when the user scrolls, presses RIGHT key or presses next.
The code is:
<script>
let type = "WebGL"
if(!PIXI.utils.isWebGLSupported()){
type = "canvas"
}
PIXI.utils.sayHello(type);
let app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight});
document.body.appendChild(app.view);
let img = new PIXI.Sprite.from("assets/images/albums/portraits/fatacucatel.jpg");
img.width = window.innerWidth;
img.height = window.innerHeight;
app.stage.addChild(img);
depthMap = new PIXI.Sprite.from("assets/images/albums/portraits/fatacucatel-map.jpg");
app.stage.addChild(depthMap);
displacementFilter = new PIXI.filters.DisplacementFilter(depthMap);
app.stage.filters = [displacementFilter];
app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.autoResize = true;
app.renderer.resize(window.innerWidth, window.innerHeight);
window.onmousemove = function(e) {
displacementFilter.scale.x = (window.innerWidth / 2 - e.clientX) / 40;
displacementFilter.scale.x = (window.innerHeight / 2 - e.clientY) / 10;
};
</script> -->
Needless to say, it is not perfect and has lots of issues, for example the window does NOT autoresize at all and also the animation is horrible, not smooth at all. But at least I would like to be able to append several images to multiple divs. Is this possible in any way, please? I did not work much with JS in my life and I am new to Pixi.
↧
↧
mouseover works but mouseout don't? can't retrieve event.target
Hi all.
New to PixiJS, I'm working on a divination card game.
I just want to add a basic animation on card mouseover/mouseout: just change the z position +/-10.
In my code mouseover works, but mouseout don't:
card.interactive = true;
card.on('mouseover', onMouseOver);
card.on('mouseout', onMouseOut);
function onMouseOver(event) {
event.target.position3d.y += 10;
}
function onMouseOut(event) {
console.log(event.target); // Fire null
event.target.position3d.y -= 10;
}
I also tried mouseleave: same result.
Any idea?
↧
Masking an image with multiple blurred circles
Dear Community,
I am trying to mask an image with multiple, animated, blurred circles. So there is a fullscreen image and only parts of it are shown, exactly like in this example: https://pixijs.io/examples/#/masks/filter.js
It is important that is actual masking, because you need to see the background behind it. At the end, this is the output: https://recordit.co/jc1yLQwomH so you can see I want to only show parts of image. To start, I thought of multiple circles moving around, all those circles together should be the mask for the image.
1. I can add a moving, blurry circle as mask like in the example above - no problem.
2. As soon as I try to add two circles to a container and add the container as mask: The blur filters disappear.
3. Is there another, better way to add multiple elements in a mask? And keep filters? I tried things with "RenderTexture" or something, but didn't quite made it.
Thanks for your help.
↧
video visible size is empty
Hi
I am getting empty screen saying an error that (INVALID_VALUE: tex(Sub)Image2D: video visible size is empty) while playing video in chrome V77.038 but playing as many times without any issue in firefox V 69.02.
↧
Most performant way to make a gradient alpha mask
So I'm building this map editor: https://mapmaker.deeeep.io/map/mrbirdyflee_cartography
As you see, the separation between sky objects is too rough, I'd like to soften it. Each sky is a graphic object with textureFill and drawPolygon (because they are polygons)
So what I did is create an aditional graphic per side, draw an extension of the sky on each. After that I use a 1x300 texture of a white to black gradient, create a sprite with it, enlarge it and apply it as a mask to each graphic:
The problem is, when many of these objects are present on screen, the performance goes down, presumably because of the mask.
Does anyone know of a better way to do this?
Thanks!
↧
↧
Looking for a bit of help testing game
Hi guys,
Hope you're all well.
I posted my last game here a year or so back Arcade Builder - I've been working on the engine on and off ever since and I'm really trying to nail every bug.
I feel closer now to a solid game now but I don't have many friends and family with iPads/Androids/Macs to test on so some feedback on those devices would also be greatly appreciated!
Could you please help me and check it out and cause any issues you can?
If you're feeling daring try the "Hell pit" level and tell me how badly or how well it runs.
https://ajamdonut.github.io/ABV2/allbuilds/v.2.2.4/
The major changes since the last version are:
Changed tile system to pixi-tilemap
Changed viewport to pixi-viewport
Added tablet controls
Added fixes for Safari
Re-coded AI
Added browser compatibility checks
All feedback and suggestions really appreciated. Even if its bad news
Thanks, Jammy.
↧
Image is not loaded on Playground
Hello,
I want to load an image on playground. My code works locally but when I load on Playground it does not work. And I do not see errors in console.
This message is strange:
Quote
%c %c %c PixiJS 5.0.4 - ✰ WebGL 1 ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥background: #ff66a5; padding:5px 0; background: #ff66a5; padding:5px 0; color: #ff66a5; background: #030307; padding:5px 0; background: #ff66a5; padding:5px 0; background: #ffc3dc; padding:5px 0; background: #ff66a5; padding:5px 0; color: #ff2424; background: #fff; padding:5px 0; color: #ff2424; background: #fff; padding:5px 0; color: #ff2424; background: #fff; padding:5px 0;
↧
PIXI.utils.TextureCache[texture].destroy
Hello,
Where can I find the information why this code does not work:
//If you ever need to, here's how you can clean out WebGL's GPU
//memory manually
Object.keys(PIXI.utils.TextureCache).forEach((texture) =>
{
PIXI.utils.TextureCache[texture].destroy(true);
});
↧