I am trying to load three sounds sprites into my app's Webview (needless to say this works well in Chrome/Firefox etc). The app is in PIXI.

var sound = new Howl({  
     src: ['sound.mp3'],
       sprite: {
       audio: [0,350],
       brush: [350, 16150],
       notep: [16500, 691]
      }
 });

I play the sounds like this:

sound.play('brush');

Instead of hearing the 3 sounds, the whole file is played once. Then if I play the first or the second sound I hear the whole sound file (all 3 sounds). The third one is played correctly after the whole file is played once. Does it have to do with Android's assets? I just use this code in Android Studio, nothing else:

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.loadUrl("file:///android_asset/index.html");

Anyway, is there any working code, any very simple example I may use for this task? I have lost 2 days for just playing with these three sounds. If there is any other workaround I would be happy to try...

Many thanks

Hi,

the following website has a cool click interaction, made, I think, with some GL shader. http://www.anagram.paris/

This website uses React in order to render the DOM structure, but at the end the only thing I see is the canvas element.

Also, everything seems to still have the DOM events (hover and clicks).

With Pixi, i suppose I should take the DOM of my App, apply it to a Sprite (as Texture) and then set a Filter.

Is there any tutorial or at least a suggestion about this?

Thank you

Hi guys,

I want to draw a sprite (sort of a decorative line png, like 5 pixels wide and 200 pixels in height) from one coordinate to the another. 

So it needs to scale and rotate. 

Maybe if I set the pivot or anchor point (whats the difference?) I want something like drawSpriteToCoords(xSource, ySource, xDestination, yDestination)

Thanks!

Hi all,

Has anyone had any success in converting Window coordinate space to Pixi Stage space? For example, if I wanted to have a Sprite that regardless of how wide the window is in relation to the Stage, it would always be at the edge of the window?

Hi all, just after a bit of advice on how best to handle something like the realtime winlines below for a slot game...

https://prnt.sc/hpfo74

I currently have it working with PIXI Graphics line to based on the grid which works fine - but leaves little for styling.  I've used the glow effect from PIXI-Filters, but that only seems to work on iOS and desktop (Android chrome on a Note 8 refuses to render the lines when the filter is enabled).  In previous games I've used simple 9 sliced sprites rotated with different widths to join the sections - but not sure what other methods I could try out here? and which would be the best performance wise too?

Thanks in advance!
 

Made anything cool with pixi.js? Post it up here and share it with the world!

Whether it's a cool game demo, a fully fledged website or some tripped-out crazy experiment, we would all LOVE to see it!

To get the ball rolling, here are some pixi.js projects that exist out on the internets:

games:

http://www.goodboydigital.com/runpixierun/

http://www.theleisuresociety.co.uk/fightforeveryone/

http://flashvhtml.com/

experiments:

http://gametest.mobi/pixi/morph/

http://gametest.mobi/pixi/balls/

http://www.goodboydigital.com/pixijs/bunnymark/

I'm playing around with PIXI and React... I have a basic animation running from within a React component... the function that handles this gets called on componentDidMount()... the parent component passes down a prop called valueIsMatched... does anyone see any way that I can get the animation loop to console.log "value is matched" when the parent state changes to true?
 

Quote

componentDidMount() {
    this.pixiInit();
  }
  pixiInit = () => {
    var VELOCITY = 100;
    const stage = new PIXI.Container();
    const renderer = PIXI.autoDetectRenderer(
      500,
      400,
      {view : this.theCanvas}
    );
    const rectangle = new Rectangle();
    stage.addChild(rectangle);
    let lastTime = new Date().getTime();
    requestAnimationFrame(update);
    function update() {
      const currentTime = new Date().getTime();
      const delta = (currentTime-lastTime)/1000;
      rectangle.position.x -= VELOCITY*delta;
      if (valueIsMatched === true) {
        console.log('value is matched');
      }
      renderer.render(stage);
      requestAnimationFrame(update);
      lastTime = currentTime;
    }
  };

Also, I am aware of React-Pixi, but I was not able to get in running with latest React. 

Some questions have come up, since I recently began developing an isometric MMORPG-esque JS game. I’m running a Node JS server and serving map files to the client. My question is about making the images for the tiles more efficient and how best to serve them to the client.

I considered a tile sheet somehow stored locally on the client machine but I have about 2000 different tiles for just the floor pieces and then a couple thousand or so walls and decorations I can use on a separate layer. So, I didn’t feel that would be as viable considering it would be accessible by mobile devices. 

I also thought perhaps i could run through my image folders with a php script and store each tile as a base64 image code. The as maps are requested I could serve the map file with a json object containing the necessary base64 tile information. However, does a json object have data limits of some kind that I’d reach pretty quick? Can’t imagine each map would have more than, at most, 200-300 different tiles? They might be a kilobyte and a half each.

Am I missing a much better way to make this work? I’m pretty new to this method of application development and would appreciate any advice!

I want to make a filter that uses multiple source textures. Each source texture is the same size (or, will be scaled to the same size).

I've played around with a few different ways of handling this, without much success. I had a look at the guide to create filters in v4 but the documentation for this case leaves a little to be desired.

I've been somewhat successful but there are still certain issues:

• The second texture seems to be slightly scaled up, leading to misalignment and a weird margin.
• Whenever the sprite goes out of bounds, the coordinate systems go out of whack.

You can see the issue in action in this jsfiddle. I need a way to have the source textures line up perfectly, without the misalignment/weird margin. (we can ignore rotation!) 

'autoFit' must be true for my application for performance reasons.

Hey,
I have some problems with drawing the animation using pixi-tween. I want to animate a drawing of a stroke along the bezier path. I am basis on this example -> https://github.com/Nazariglez/pixi-tween/blob/master/examples/easing.html
 but my code still doesn’t work. Any idea where am I wrong?

That's the code:

var app = new PIXI.Application(1200, 800, {antialias: true});
document.body.appendChild(app.view);

var raf;
    function animate(){
      raf = window.requestAnimationFrame(animate);
      app.render(app.stage);
      PIXI.tweenManager.update();
    }
    function stop(){
      window.cancelAnimationFrame(raf);
    }
  
var path = new PIXI.tween.TweenPath();
  path.moveTo(0.4,0.4);
  path.bezierCurveTo(0.4,360.5,292.29,652.4,652.4,652.4);
  path.bezierCurveTo(87.5,65.4,105.9,47,105.9,24.89);
  path.closed = true;
  
var t = new PIXI.Graphics();
app.stage.addChild(t);

var tween = PIXI.tweenManager.createTween(t);
tween.on('update', function(delta){
 tween.path = path;
 tween.time = 13000;
 tween.easing = PIXI.tween.Easing.outBounce();
 tween.loop = true;
 tween.lineStyle(10, 0xff0000);
 tween.drawPath(path);
 tween.start();
});
animate();

Hi, 

First of all, I apologise for any mistakes in my english.

My objective :
I'm making an isometric game and I need to sort elements by Y coordinate.

For instance, the player is moving and there is a tree :
- I want to display the player after the tree when player.y >  tree.y to make illusion that he is going IN FRONT OF the tree
- And I want to display the player before the tree when player.y < tree.y to make illusion that is going BEHIND the tree.

(I hope it's clear)

Setup : Pixi v4.6.1, last pixi-layers.js

Problem : 
I made this before with pixi-display.js and i try to do the same now with pixi-layers.js but I fail to do it (even with the old one).
=> zIndex is not taking into account, only the initial order (insertion order) is used.

// Create the layer
const sortedLayer = new PIXI.display.Layer();

// Player sprite
const player = new PIXI.Sprite(resources["player"].texture);
player.x = ...
player.y = ...
player.parentLayer = sortedLayer;
stage.addChild(player);	

// Tree sprite
const tree = new PIXI.Sprite(resources["tree"].texture);
tree.x = ...
tree.y = ...
tree.parentLayer = sortedLayer;
stage.addChild(tree);

// Try to change his displayOrder (without success)
player.zIndex = 2;
tree.zIndex = 1;
sortedLayer.group.enableSort = true;

// From wiki, but display : "undefined" and in fact i do not see this method in the pixi-layers.js
console.log(sortedLayer.displayChildren);

I use : https://github.com/pixijs/pixi-display to implement this code and there is a bonus question about the 
"layer.displayChildren" that is undefined Is there something missing or the documentation is not updated ?

I try to use Pixi.Display.Group either but no success.

I know there is : http://pixijs.io/examples/#/display/zorder.js and i try to do it but failed  (Because I think I didn't use the "stage.displayList = new PIXI.DisplayList" i just see it right now... maybe there is something like that i missed too in my example ?) 

Thanks for your help !

 

Hi.

I have a newbie question. So I create a new PIXI application, draw a blue square onto it, wait a couple of seconds, and then manually start a function to extract the pixels. The extracted pixels are always black. If anybody could help me find out why this is the case, that would be great.

The blue square is correctly drawn and visible, and the extract function gives me a correct array of data, but all pixel information in it is black. As I execute the extract function right now manually, it's not possible that it's extracted too early or something like that.

Here are the important bits of the code:
 

initPixi() {
  let type = "WebGL";
  if(!PIXI.utils.isWebGLSupported()){
    type = "canvas";
  }

  this.pixi = new PIXI.Application({
        width: 0,
        height: 0,
        antialias: false,
        transparent: false,
        resolution: 1,
        autoResize: true,
        view: $('.imgCurrent')[0]
      }
  );
}

updatePixi() {
  this.pixi.renderer.resize(this.imgWidth, this.imgHeight);
  this.pixiDraw();
}

pixiDraw() {
  let rectangle = new PIXI.Graphics();
  rectangle.beginFill(0x66CCFF);
  rectangle.drawRect(0, 0, 200, 200);
  rectangle.endFill();
  rectangle.x = 0;
  rectangle.y = 0;
  this.pixi.stage.addChild(rectangle);
}

pixiExtract {
  this.pixi.renderer.extract.pixels();
}

Currently using Tiled and my maps have multiple layers : 
 

Something like: 

//Floor: 
let floor = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]

//Trees: just pretend it's filled with different values
let trees = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]

So how I'm going about it is to generate a PIXI.Sprite for every tile and then pushing those into a container, and that container would be the layer:

//an array of PIXI.Textures sliced from the spritesheet for tiles
let tileSpriteResources = [texture, texture, texture]; 

let floorLayer = new PIXI.Container();
let trees = new PIXI.Container();

//something like this: 
function makeLayerSprites(containerLayer,array, width, height){
  let W = width;
  let D = height;
  let shiftY = 0;

   array.map(function(item, index){

    if(index >= W){ //shifts Y downwards when X is passed with width
     shiftY++;
  } 

    if(item === 0){
        let tile = new PIXI.Sprite(tileSpriteResources[0]);
        tile.setTransform(index * 32, shiftY * 32);


        containerLayer.addChild(tile); 
     }

  });

}

I'm going to have like.. 6+ layers and I was wondering if I should just generate 1 layer, and then have the rest of them be the children of every PIXI.Sprite on the first layer. Or is my approach just fine ? 

For culling I'd imagine I would have to loop through all 6 containers children and yeah, I'm not sure how this will strike me in performance. 

Any general advice or recommendations or how you've implemented multi-layered maps in PIXI ?  

 

Hi guys,

I am playing around with PIXI since a few weeks. Unfortunately, I run into some performance problems. What I want to do is drawing many rectangles with text, which are moving through the scene.
Some of them run outside the scene and new ones will appear. A few rectangles have a diagonal brush (implemented through lines).
It is also possible, that the rectangles overlap each other partially and when one rectangle overlaps another rectangle, the text has to be visible partially too.

In my first approach, I had one graphics object, where I draw all primitives and lines. For text I used bitmaptext and added the objects to the stage. With this solution I run into the problem,
that the texts are over the rectangles all the time, even when they overlap.

var graphics = new PIXI.Graphics();
stage.addChild(graphics);

graphics.beginFill(0xFF0000, 1);
graphics.drawRect(0, 0, 100, 20);
graphics.endFill();

var text1 = new PIXI.extras.BitmapText('Some example text', { font: '16px SegoeUI' });
text1.position.x = 0
text1.position.y = 0;
stage.addChild(text1);

graphics.beginFill(0x0000FF, 1);
graphics.drawRect(70, 0, 100, 20);
graphics.endFill();

var text2 = new PIXI.extras.BitmapText('Some example text', { font: '16px SegoeUI' });
text2.position.x = 70;
text2.position.y = 0;
stage.addChild(text2);

In my second approach, I created graphics objects for each rectangle and added the text as child. Now It looks fine with overlapping rectangles, but with this solution I reach only slow fps.

var graphics = new PIXI.Graphics();
stage.addChild(graphics);

graphics.beginFill(0xFF0000, 1);
graphics.drawRect(0, 0, 100, 20);
graphics.endFill();

var text1 = new PIXI.extras.BitmapText('Some example text', { font: '16px SegoeUI' });
text1.position.x = 0
text1.position.y = 0;
stage.addChild(text1);

var graphics2 = new PIXI.Graphics();
stage.addChild(graphics2);
graphics2.beginFill(0x0000FF, 1);
graphics2.drawRect(70, 0, 100, 20);
graphics2.endFill();

var text2 = new PIXI.extras.BitmapText('Some example text', { font: '16px SegoeUI' });
text2.position.x = 70;
text2.position.y = 0;
stage.addChild(text2);

So what can I do to solve this issue? I hope you can help me. Thank you!

Hi Guys.

I'm new of PixiJS and i have 2 problems with Text object.

1) when i set "center" the align property in the textstyle, the content start always from left side.

2) as in actionscript3, there is a way to intercept the changing of the text when i change his content?

Thank you

Hi everyone, I've been working on a pixi.js - typescript boilerplate using webpack that I would like to share just in case someone finds it of any use. It comes with a helper class to manage some "trivial" tasks such as resizing, stage alignment, toggling full-screen and some utilities like fps-meter and a container to display some visual info. It's a bit heavy on dependencies though.

https://github.com/dacaher/pixijs-ts-boilerplate

Any suggestion, bug report or improvement submitted would be very much appreciated. Thanks!

Hi all, been reworking a slot prototype to use offscreen rendering using RenderTexture, so far so good and performance seems a massive improvement, but having problems with Chrome on OSX with constant flickering on the stage. 
Windows and android both seem fine.

Im using the app.renderer to render the textures, (not sure if a second renderer is required here?)  Struggled to find much in the way of information on the best way to set a system up for this.

Also noticed that the containers that are being rendered appear in the chrome pixi inspector extension as soon as they are rendered (but outside the stage) and remain there but not visible, is this the normal behavior?  It almost seems that these are the cause of the flickering on OSX as it seems to be in blocks that match that pattern

Any advice greatly appreciated!

I'm trying to load an atlas created with TexturePacker using:

PIXI.loader
   .add("game", "assets/sprites/game.json")
   .add("ui", "assets/sprites/ui.json")
   .on("progress", loadProgress)
   .load(setup);

But for some reason pixi seems to be indexing the loaded assets by incremental numeric id instead of using the labels contained in the respective json files. Because of this I'm getting index collision when loading more than one atlas. Anyone know why?

Another question, how hard it is to write a custom loader. I'm trying to import animations from ToonBoom which uses a specific xml format. I want to load it automatically as with the TexturePacker atlas.

Hi, as title mentioned, I cant found a website relate to building a website interface with Pixi tutorial, could anyone advice me? Thanks.

Cheers,
Jeff

Does Pixi.js support shaders which can sample from the background and use custom fragment shader code to blend? For example, implementing a Screen blend in a fragment shader. It's a tricky problem and I'd be interested in the implementation details if Pixi supports this, but I haven't been able to find anything on this so far.