Hello, guys! Who could help me with that issue? I want to update canvas background texture with a new image capturing full canvas with all elements trough reguestainmationframe on mousedown (bake canvas to image and replace the old texture with new bake canvas texture every time) achieve some kind of "smudge tool" like in Photoshop. But when I trying to call fromCanvas method I get an only black rectangle. I'm a little confused I mixed up something, but don't know what. Thank you!
I have a PIXI Container with several enemies inside it. Like space invaders the enemies move as a whole and I position the container to move them
The problem is: as enemies inside the container "die", the parent container is changing shape and position. It seems to be resizing itself to fit how many children it has. I do not want this to happen.
I've tried:
1) destroy()
2) alpha = 0
3) visible = false
The alpha solution is the only one where the container does not resize but it only works sporadically. What I mean is sometimes I set alpha=0 and an enemy is still displayed.
So we start out like this with the container at x=180:
As soon as the left most enemy dies the container resizes and the other enemies appear to jump to the left.
Hello everyone!
I've been release my own atlas packer for pixijs.
It's fast and easy to use command line tool. You can try it and send me your beedback.
Main features:
- scaling for multiple dimenstions
- alpha trimming
- multisheet textures if not all sprites could be allocated into a single texture
- png, jpg - texture format
- texture size limit
- sprites border to avoid render artefacts
Platforms: MacOS, Windows
Download from: https://github.com/Gaikov/GameTools/tree/master/SpritePackerConsole
I have to start a project with pixi, I wondered if it already works with the newest standard for module import.
https://jakearchibald.com/2017/es-modules-in-browsers/
I guess not because I don't see the built pixi.js export structured like in the article.
Hi there!
I'm converting a game of mine from as3 Starling to PIXI js and i'm wondering if i can convert the following flow to js:
create a web worker (different thread)
load a png in my worker
manipulate pixels within the loaded png
send png data back to the main thread
turn the loaded and maipulated png image into a texture atlas along with a loade json file.
Is there a way to do this with pixi?
Thanks!
Hi,
The code is available here https://jsbin.com/hazogar/edit?html,js,output
What I do not understand is that initial behavior is not correct, past the first zoom, it will jump/jag then be proper to zoom to a point of the object.
I am zooming content inside container, so what am I missing ?
var initZoom = function(app, objectDocument) {
var inZoomMode = true;
var content = objectDocument.view;
var container = objectDocument.board;
var scale = { x: content.scale.x, y: content.scale.y };
var zoom = function(x, y, isZoomIn) {
var globalPosition = app.renderer.plugins.interaction.eventData.data.global;
if (!globalPosition) {
return;
}
var containerPosition = container.toLocal(globalPosition, app.stage);
var contentPosition = content.toLocal(containerPosition, container);
var direction = isZoomIn ? 1 : -1;
var factor = (1 + direction * 0.01);
var nextScaleX = content.scale.x * factor;
var nextScaleY = content.scale.y * factor;
var p = contentPosition;
console.debug('>> P', p.x, p.y);
var mat = new PIXI.Matrix();
mat.translate(-p.x, -p.y);
mat.scale(nextScaleX, nextScaleY);
mat.translate(p.x, p.y);
content.transform.setFromMatrix(mat);
content.updateTransform();
};
documentView.on('mousewheel', function(e, delta) {
if (!inZoomMode) {
return;
}
zoom(e.clientX, e.clientY, delta > 0);
});
};
Thank you!
Hello everyone !
I'm pretty new in PixiJS and i can't figure out how to do this :
Have a texture passed to a shader through uniforms and resize its sprite without "jumps" :
https://jsfiddle.net/spiraloops/zohpru02/
(try to resize it...)
What i want to have :
https://jsfiddle.net/spiraloops/k5wfmqu1/1/
My final intention is to perform video masking with resize. So I need the two textures (video and mask) to resize the same way...
I want to make the camera follow my sprite around. (so my sprite is always in the center of the screen)
What's the best way to go about this? Does Pixi have built-in camera functions? I thought about just moving everything else relative to my sprite, but I thought this wouldn't be the best way.
I googled around a bit, but with no luck.
Any tips or resources would be much appreciated. 
Thanks.
I want to make a puzzle game, where the user can zoom and pan on a grid. Some square has text which should be zoomable. First i have tried svg. It looked very nice, the zoomed text was very crisp, but the performance wasnt the best on mobile. I took a look on some benchmark test, and WebGL was so much faster then canvas (or SVG of course), so i want to take a shot. There is eaven a project http://iewebgl.com/ which makes IE capable for WebGL.
I read some good review on pixie.js (performancewise too), so i hope its the right framework for my needs.
- Is this the official Pixi.js forum? I saw Mat Groves is a moderator...
- How do i know if PIXI.autoDetectRenderer uses WebGL or Canvas?
- I tried to scale a text but it looks very blurry:
// create an new instance of a pixi stagevar stage = new PIXI.Stage(0x66FF99);// create a renderer instancevar renderer = PIXI.autoDetectRenderer(620, 380, null, false, true);// add the renderer view element to the DOMdocument.body.appendChild(renderer.view);// create a text object with a nice strokevar text = new PIXI.Text("I'm fun!", {font: "36px Arial", fill: "#cc00ff", align: "center", stroke: "#FFFFFF", strokeThickness: 6});text.position.x = 0;text.position.y = 0;text.scale.x = 10;text.scale.y = 10;stage.addChild(text);// render the stage renderer.render(stage);thanks
I have a situation in which I want text to fit into a certain size box. If that text is larger then that box, then it will set the fontSize to one pixel lower until it fits within the bounds.
a very simple example where I'm just arbitrarily setting the text box to a final size of 30:
let app = new PIXI.Application({width:1920,height:1080,antialias:true});
document.body.appendChild(app.view);
let container = new PIXI.Container();
let myLongText = "some really really long text would go here";
let gText = new PIXI.Text(mylongText,{
fill:0x000000,
fontFamily:"Arial",
fontSize: 60,
wordWrap:true,
wordWrapWidth:400
});
//for this simple example just lower the fontSize to 30.
//in real world it would be based on if the calculateBonds height/width are within my height/width I //want
for(var i = 0; i < 30; i++){
txt.style.fontSize = txt.style.fontSize - 1;
txt.calculateBounds();
}
//add it to a blank container which would be added to the stage
container.addChild(gText);
app.stage.addChild(container);
The problem is, the GPU is significantly higher when doing that loop then if I just did this:
let app = new PIXI.Application({width:1920,height:1080,antialias:true});
document.body.appendChild(app.view);
let container = new PIXI.Container();
//just set the font to 30 which was the final size in our example above
let gText = new PIXI.Text(mylongText,{
fill:0x000000,
fontFamily:"Arial",
fontSize: 30,
wordWrap:true,
wordWrapWidth:400
});
container.addChild(gText);
app.stage.addChild(container);
(the mylongText is 285 characters long)
For the Loop, I am seeing 135,350K for the GPU in Chrome Per Tab Task Manager. When doing the second where I just set the final size right away, I'm seeing 95,500K for GPU memory in Chrome Per Tab Task Manager
My assumption is that the loop through is some how causing it to maintain some textures or something else in memory that should have been discarded?
Does anyone have any suggestions on how to eliminate that overhead? I tried marking the font as dirty at the end but that didn't seem to release any memory.
I have a WebGL texture that has been rendered to by another (plain) WebGL program in my pipeline. Is there a relatively trivial way of taking this texture and rendering it as a sprite? I'm aware that sprites (in the WebGL renderer) are backed by GL textures, but I'm not really sure how one would go about setting this manually. Any ideas/thoughts?
I created a very early, very alpha React renderer for PIXI. There's some other projects out there but I wanted to start from scratch.
You can get it at https://github.com/dakom/react-pixi-renderer
However, be warned, performance kindof sucks if you use it for lots of nodes. See this test/demo I wrote that tries to figure out where the bottleneck is: https://dakom.github.io/react-renderer-test/
Turns out that the bottleneck is basically React itself and the size of the tree. The React-pixi-renderer could be really useful for declaratively describing a few of a small number of items - I get a solid framerate for like <4000 bunnies on desktop.
If performance is an issue for lots of items, you can squeeze more juice out of it by constructing the architecture so that the edge nodes render null rather than proper elements, though that means ditching the inherent pipeline and managing your own objects. That technique can work with any renderer and using ReactDOM vs. this custom renderer, so there's no real point in using this renderer if you go that route.
Have fun!
Is it possible with or without pixi.js to calculate the number of transparent or solid pixels for a given x/y position? My use case is that I have random trees and I want to calculate the width of their trunk at the base of the tree.
Hello guys, please, does anybody have working example of Pixi and Hammer.js (gestures) integration? I was not able to find anything useful neither here in the forum, nor using google...thanks in advance...
Hi Everyone!
In v3.0, ParticleContainers had only a limited number of properties you could set: x, y, height, width, scale, pivot and visible.
However, the current docs state that ParticleContainer extends Container:
http://pixijs.download/release/docs/PIXI.particles.ParticleContainer.html
Does that mean it how has access to all ordinary Container properties?
I have pixi combined with vuejs, all works fine except the hot reload, when i update one component then is each of my sprites doubled on the screen. How can a reload the whole renderer?
Thanks for help
Is there any possibility, how to achieve scrolling or zooming of whole HTML body by making a swipe on canvas on Android (Chrome)? The only thing I was able to find when searching over internet and Pixi docs is using a property "autoPreventDefault()". But even when I set it to false, it does not work.
What Am I missing here? Is there any simple code example of autoPreventDefault?
I set up simple example here (open in Android Chrome):
Its blank grey 800x600 px canvas. When you try to zoom-in the page outside the canvas and then move over it (canvas fill whole view port) - you are now in a trap, because there is no way how to move the canvas or zoom-out back.
source of this example:
var renderer = autoDetectRenderer(800, 500,{antialias: true, transparent: false, resolution: 1});
renderer.plugins.interaction.autoPreventDefault = false;
renderer.view.style.border = "1px dashed black";
renderer.backgroundColor = 0xDDDDDD;
renderer.autoResize = true;
document.body.appendChild(renderer.view);
renderer.render(stage);
Hi,
I have a pixi.js application that creates and deletes geometry frequently. I basically do some form of this (very simplified example):
var stage = new PIXI.Stage();var my_container = new PIXI.DisplayObjectContainer();stage.addChild(my_container);function foo() { if (my_container.children.length != 0) { my_container.removeChildren(); } obj = new PIXI.Graphics(); obj.drawRect(); my_container.add_child(obj);}Where foo() is called a lot. Everything renders correctly, but I can see Chrome's GPU memory usage skyrocketing over time. Does the removeChildren() call on a DisplayObjectContainer not doing a complete cleanup on the GPU side? I also thought this might be related to garbage collection not happening (on a global my_container object) so tried refactoring so that the containers were within a function closure instead, but still have the same issue.
Any help on what I might be missing would be much appreciated. Thanks!
I need to make whole stage scrollable with scrollbar.
Can I just make a huge renderer on page (bigger than browser window) and scroll using browser scrollbar? Or this is a bad idea and I need to make my own scrollbar inside renderer using pixi.js?
In both cases I would make offscreen sprites not renderable for optimisation.
Hi all
I was wondering if Pixi has a method for creating the appropriate sized text when within a scaled container.
In my case, I scale the main container so that its height is 1080.
In this container, I would create a Pixi.Text object with height 20px.
From what I understand, this creates a 20px text object, which is then scaled down when placed in the container.
This results in text which is slightly blurry.
I'm planning on creating a method which would calculate the true pixel height required, which would then be scaled to the size needed.
Is this something which Pixi itself supports, or would I need to build this myself?