I've tried calling the resize method on the canvas renderer but it is not working (probably I am doing something silly, or not doing something I should). What are folks doing to handle resizing in the browser or an orientation change event on a mobile device? Is there some technique to use in conjunction with resize or perhaps it is ok just to destroy and recreate the renderer?
↧
Resizing
↧
Game Map from SVG File
Hello, I'm trying to create a map based on a single SVG file (I don't want tiles). The idea is to create a map from Inkscape or Illustrator and then split the XML (svg).
Since SVG it's just a XML file, I can extract each "g" nodes to create a PIXI Graphic but the "g" nodes are strings and I don't know how to create a graphic from a SVG xml string.
If you have a better idea to create maps (no tiles) please let me know!, otherwise how can I create a graphic from a SVGXML String.
Thanks!
↧
↧
Pixi Particles Emitter - How to make it move from point to point
Hi everyone,
so i have a question about how i can make my particles emitter to move from point to point and is it possible to do this.
I have an exact example of what i need. 
Can someone give me a simple code example ? Thanks.
↧
RenderTexture to PIXI.mesh.Rope
Hi all, been trying to see if I could get a rope going with an animated RenderTexture, but had no luck so far with the texture not showing. The RenderTextures work fine with sprites. I've also tried casting to a PIXI.Texture first eg.
var ropeTexture = new PIXI.Texture(renderTexture);
and then passing that texture to the rope creation, but neither seem to work.
Any help greatly appreciated!
↧
Show fps on screen
Is there a simple way to show fps in PIXI.js?
↧
↧
Virtual Container
Container and DisplayObject do not have their own size, its depends of its children, so If you add a Child and use anchor property and others properties related with size it will not work.
What would be the best practice to do a simple layout like HEAD, BODY and FOOT? where I can define and limit the size of each "area" and all their children?
I thinking in create a new class that inherit Container and overwrite the width and height properties to be static but I'm not sure it will be considered in the anchor logic.
Any advice?, here an example how it does not work https://jsfiddle.net/fyt7zhvm/1/
↧
Control resolution of pixi texture
Hi,
I am using pixi to display a texture that consists of alternating black and white rows of pixels. Unfortunately, pixi doesn't show these as black and white, but rather shows grey wave-like patterns that look like there is a lot of aliasing happening. That would make sense if the size of the texture did not match the size of the pixi view on which it is shown. Yet in both cases, width and height are 256. An alternative explanation for this could also be that pixi is attempting some form of pixel interpolation, yet my application is created with roundPixels=true and resolution=1. Where am I going wrong here?
Thank you,
ifru
↧
WebGL resize stage blinking on iOS
Hello,
On my iOS devices (iPhone 4S, iPad Mini) when I resize the WebGL renderer, the elements of my stage are briefly scaled with the new size of the stage before being re-render with their original size. I just want to resize the drawing zone without changing the size of the children. The behaviour only occur on iOS with the WebGL renderer.
I've made a jsFiddle to show the problem : http://jsfiddle.net/ntvLas1x/1/embedded/result/ . To reproduce, just click several times on the resize button from an iOS device and you will see the red square changing size.
Thanks in advance,
Louis
↧
Container background color without graphics?
Hello,
Is it possible to color the background of a container without using graphics of any sort? Some kind of 'native' background color property or so?
Thank you.
Kind regards,
Fennek
↧
↧
blendModesCanvas list not always being set correctly
Hello! I am working on a Phaser project (however, the issue is PIXI related). I was having issues with blend modes not always being set correctly when reloading my page. After a couple of days me and my colleague found that the PIXI.blendModesCanvas was being set to something like ["source-over", "lighter", "source-over", "source-over", "source-over", "source-over"] etc. I don't know if other people have ran in to this bug, but I thought I would document this here at least, and if it still exists in newer versions of Phaser/PIXI, that is what is causing it. To fix it we just set the PIXI.blendModesCanvas to a correct list when we start loading the game.
We are using Phaser 2.6.2 at the moment, and the correct list is:
["source-over", "lighter", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"]
↧
Progressive texture upload
Hi,
I am building a media installation (with Pixi.js v4) which requires to load my textures while the system is running (ideally with a constant 60fps). Therefore I am using createImageBitmap in a Webworker instance and then transfer the ImageBitmap via transferable object to the "main thread". In the main thread I am using this approach to pass the ImageBitmap to Pixi's Texture Loader which then ultimately uploads the texture to the GPU via gl.textImage2d. This all works fine as long as I am using small textures but now I wanna load bigger textures (1920x6000px) and the texture upload starts to take a decent amount of time (70ms).
Now to my question: Has anybody created a progressive texture upload for pixi.js similar to this threejs library? If not, what would be the best approach to tackle this?
Basically I have similar requirements as the poster in this thread (again unfortunately wrong framework 
Thanks,
Andreas
p.s.: I've started to look into pixi.js v5 ... seems like createImageBitmap is coming, yeah!!!
↧
Capturing very large stage as image
I'm trying to capture the map of my game as a png image. The map is composed of 32x32 tiles, has a width of 1500 tiles and a height of 1140 tiles (48000x36480 pixels in total).
I don't actually display it in full, but by "chunks". Each chunk has a dimension of 30x20 tiles, and consists in a PIXI.Container object storing one sprite for each tile of the chunk (in multiple layers). There are 2850 chunks in total.
The map is quite big, and displaying all chunks simultaneously makes the browser crash. In any case, capturing the whole map at once wouldn't be possible I think because its dimensions would exceed WebGl MAX_TEXTURE_SIZE parameter. So my goal instead is to display batches of a few hundred chunks, one batch at a time, and capture them in pictures. I don't mind having my world map split in multiple pictures, on the contrary.
So the process consists in the following steps (slightly simplified):
for(var i = 0; i < last_batch; i++){
removeAll(); // removes currently displayed chunks, if any
displayBatch(i); // displays 200 chunks of interest
captureScene(); // captures the scene as an image
}
Here is my captureScene() method:
captureScene(){
Engine.renderer.extract.canvas(Engine.stage).toBlob(function(b){
var a = document.createElement('a');
document.body.append(a);
a.download = 'map.png';
a.href = URL.createObjectURL(b);
a.click();
a.remove();
}, 'image/png');
};
It works, except that (in both the latest Chrome and Firefox quantum), after a few batches it eventually crashes ("WebGl has lost context") so that I never manage to capture everything. Even with batches of 25 chunks instead of 200, it eventually crashes.
I was wondering if any of you might have ideas to improve this process, or an altogether different solution, based on your experience and knowledge of Pixi. Maybe there is a more efficient way to capture the scene? Alternatively, any tips that could help me diagnose better why it is crashing are also welcome.
In case you are wondering, here are the steps I perform when removing a chunk:
chunk.destroy({
children: true,
texture: false,
baseTexture: false
});
Engine.stage.removeChild(chunk);
I destroy the objects but preserve the textures son they can be reused for subsequent batches. Again, let me know if you see any improvements on this front (in terms of memory management for example).
I'm interested in any comments!
↧
Spin a wheel and land on specific segment
Hi All
I'm quite new to Pixi (as in this is day #2), I have a simple circle divided into segments (Wheel of Fortune style).
What I want to do is spin it, wait for a few seconds, slow down and stop on a specific segment, with a bit of bounce-back.
By the looks of things rotation itself is fairly straightforward, but how would I go about doing this?
Many Thanks
↧
↧
Visual Studio Code Intellisense code completion
Hi,
I'm quite new to web development, so I'm quite lost regarding to make VS Code Intellisense work for PixiJS. I'm currently using Webpack 2 and I'm able to run PixiJS examples, but only because I've included this in my index.html file:
<script type="text/javascript" src="libs/pixi.min.js"></script>
So, my code works, but I don't get any autocomplete in VS Code because I don't know how to import Pixi classes and methods into my .js project files. Can someone give me pointers or a small tutorial about that?
Thanks a lot
↧
CORS issue in WebGL, not Canvas
Hi! I've been having CORS issues with AWS using the WebGL renderer, so we've fallen back to Canvas renderer and things are working fine. There's one place in my games that I'm using the blur filter on WebGL, and it's not a huge issue, but I was wondering if anyone had insight to my issue so I can get that blur back 
Thanks!
↧
Pixi hitArea for whole stage
I have on stage special "workspace" pixi container - I use it to allow user to draw on it. It works perfect if I set hitArea dimensions to renderer width and height but the problem is that user can move this layer or zoom in/out.
I think result is obvious, after move/zoom it is not possible to draw on canvas because hitArea "run" out from the screen or it is too small.
My question is what is the best actual solution for this (pixi v4)?
I was thinking about setting Infinite hitArea but this is not possible. I could set hitArea Rectangle to be like 999999px so it should not be possible to go out of drawing area but is it ok? Can setting very big hitArea slow down interaction manager?
Also another option was to replace hitArea (make it bigger) after move/zoom but this is proably not the best idea. Is there any elegant solution to cover this case easly?
↧
Smooth Follow Cursor
Hi, Pixrs
I'm new to PixiJS and would like to ask a question about how to do a delay on mouse move using Pixi (on the element that has the Displacement filter), I removed a part of the example code that is on the official PixiJS website. I created a div (#follow) to show how effect I wish.
Anyway, I would like the element to follow the mouse in a smooth way.
Code is in Codepen:
Thanks
↧
↧
Simple sprite movement choppy on Android
Hi all - hopefully this isn't too noobish of me, but I've done a fair amount of searching the forums and can't seem to find a reliable answer on this issue.
I'm loving Pixi when I test it on my laptop's browser, but when I port it over to Android (version 7.0 on a Galaxy S7) via Phonegap Build, things get super slow. I kept removing portions of my game to see if that fixed things until I figured it'd be quicker to just start from the most basic setup - moving a sprite created from an image across the stage. This runs about the same as my game, and it's of course a ton simpler. Even if it happens to reach 60 FPS for a few seconds there are jumps in the movement. Here's the code:
The image, dude.png, is 32-bit, 1024x512 with transparency. Anyone else having this issue or know what could be causing it? I'm using the 4.6.2 version of Pixi.
Thanks for taking a look!
var dude,app,screenW=window.innerWidth,screenH=window.innerHeight;
//Create a Pixi Application
app = new PIXI.Application({
antialias: true,
transparent: true,
resolution: window.devicePixelRatio,
interactive:true
}
);
app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.autoResize = true;
app.renderer.resize(screenW,screenH);
document.body.appendChild(app.view);
PIXI.loader
.add(['images/dude.png'])
.load(setup);
function setup(){
dude = new PIXI.Sprite(PIXI.loader.resources["images/dude.png"].texture);
dude.position.set(20,20);
dude.scale.set(.5,.5);
app.stage.addChild(dude);
state=play;
app.ticker.add(delta => gameLoop(delta));
window.setInterval(gameLogic,500);
}
function gameLogic(){
if(dude.x > screenW){
dude.x = -1 * dude.width;
}
}
function gameLoop(delta){
//Update the current game state:
state(delta);
}
function play(delta) {
dude.x += 5;
}
↧
Any tween library that can use shared ticker with PIXI?
As title.
I'm finding a tween library which can use shared ticker with PIXI.
But haven't find a proper one yet...
I checked TweenLite, TweenJS, but it seems cannot use PIXI ticker.
Anyone have good recommendation ?
↧
PIXIJSV5
When can we expect pixijs V5? And how different from the current version will it be? I have an engine (I posted about this previously) that relies on pixijs 4.2 and adapting it to the current pixijs version is a lot of work so I don't want to do it if the version 5 is also gonna require the same adaptation work on my part. So if I adapt my engine to the current pixi version will I have to do it again for v 5?
↧