Does anyone know if pixi.js takes into consideration word wrapping for languages like Japanese where there are no spaces?

Hi everyone, 
I'm new here in the forum and this is my first post.
In my agency we have developed a small project using pixi.js and vue.js



this is the address:
hawa.monofonts.com



The project basically analyzes the emotion of a phrase and combines color and font images.

My problem is that at present, after 3 or 4 iterations, everything slows down, I can not figure out how to fix the problem, 

I think it is related to the videos that are displayed or how to change color within the central bubble.

I tried to analyze everything through chrome profiling but I can not understand it very well.

The colors in the bubble are changed using tweenmax and creating a runtime of a set of canvas from which I then create a texture 
and insert it into the object subjected to pixi.

For videos just once loaded I create textures then check the video item at the right time.


Any suggestion is well accepted
Thank you all

Hello, I'm just starting to learn pixi.js

I want to make a game where the main character is in the middle of the screen all the time, while the map moves behind the character as it is walking.

The problem is, the map is going to be extremely large. I'm going to be zoomed in on a very small portion of it.

The easiest way for me to load the map, is to simply load that whole thing onto the screen. Since the whole map obviously won't fit on the screen, it'll just show a small portion. Then I can just change the x, y coordinates of the map, to make it move.

But, unless pixijs is doing some good memory management I am unaware of, doing it this way will overload the memory.

I'd need to be able to smoothly walk through the whole map without interruptions to load another portion of the map.

Anyone try and do something like this before? What do you do to try and optimize it?

If you have ever played slither.io you know what I mean. When playing on desktop the game will have better graphics quality but on a mobile browser it will fall back to coarse graphics and everything just looks much smaller. How can I do that in PIXI.js? It won't change automatically in PIXI.js, I probably need a condition check.  What is the best way to detect a mobile browser and a desktop browser in PIXI.js?

I want to implement this in my game.

Hi, first post and very new to PIXI!

I'm trying to figure out how positioning works and how to do it properly.
I have a few followup questions which I'll take later.

Goal: Having a centered "mask area" where I can count the "unmasking progress"

But first off; here is a fiddle.
As you can see I have a centerContainer which I add all my sprites and bind all interactivity to. I center all the sprites relative to the app width and height values. I create the renderTexture with the same width and height as onTopOfMask and imageToReveal (400x400). 
The renderTextureSprite is not positioned and it results in only a corner being "unmasked" (clearly visible if I comment out the masking, it's positioned top left). If I position renderTextureSprite (fiddle) the same way as I've done with the sprites it works but then the brush/unmasking has some weird offset.

1. Is that the way to properly center the sprites etc or is it better to center the container instead? (like so: fiddle) or any other way?

2. When positioning, why does the mask have a weird offset? 

Fiddling around but not getting any wiser so help is greatly appriciated!

Hello dear Pixi developers and community,
my goal is to draw a lot (up to 10.000) different text labels at different positions on the stage (each label has a different text and position).

This works pretty sweet for graphics/shapes, because I can batch them all together in one graphics object:

let graphics = new PIXI.Graphics();
loop {
    this.graphics.lineStyle(1, color);
    this.graphics.drawRect(x, y, width, height);    
}
app.stage.addChild(graphics);

But I don't know how to do this with text. I read that BitmapText should be used in terms of performance, but even with the example I don't know how to batch them together.
It looks like I would have to do something like this:

loop {
    let bitmapFontText = new PIXI.extras.BitmapText('bitmap fonts are\n now supported!', { font: '35px Desyrel', align: 'right' });
    bitmapFontText.x = x;
    bitmapFontText.y = y;
    app.stage.addChild(bitmapFontText);
}

which seems bad in terms of batching and object allocation.

I'm new to Pixi, so maybe someone can show me how to do this with a little code example?

I create pixi game. when i change tab it normal. but when i minimize browser. it has "webgl has hit a snag". and my canvas fail. console log has: "webgl: context_lost_webgl: losecontext: context lost". How to fixed it. Thanks

Hey there, I'm really new to Pixijs. I'm planning to develop something which will require text captions displaying over time (think banjo kazooie, spyro, pokemon, etc etc). 

Does pixi already provide some way of doing this? I wouldn't mind doing it but I don't wanna reinvent the wheel.

Thx in advance for the help guys

I created a map/level in JSON with "tiled map editor" which uses a tileset. Fot the JSON file look in the attachment.

Now in code loop through the JSON and try to create the level/map.
Problem is that it renders the same tile and not the different ones.
If I run per layer it's ok (l=1, l<2), If I add the layer loop it renders with only 1 tile...(see attached image, there should be different walls)

I tried several things. 
It looks like pixi does create all sprites with same tile?

Many thanks

Raymond

 // load json
var level = require('../map/level1.json');
var tileHeight = level.tileheight;
var tileWidth = level.tilewidth;
var layers = level.layers;
var height = level.height;
var width = level.width;
var tileset = PIXI.utils.TextureCache["./images/terrain.png"];

        for(var l = 1; l < 5; l++ )
         {

            // Layer
            var data = layers[l].data;

            for(var i = 0; i < data.length; i++)
            {
                // Postition on screen
                var y = i / height | 0;
                var x = i % width | 0;

                // Which tile we should use
                if( data[i] != 0) {

                    var tileRow = (data[i] / 32) | 0;
                    var tileCol = (data[i] - (tileRow * 32))-1 | 0;
                    console.log('texture -> row: ' + tileRow + ' col: ' + tileCol + ' width: '+tileWidth+ 'tileHeight: ' + tileHeight);
                    var rectangle = new PIXI.Rectangle(tileCol*32, tileRow*32, tileWidth, tileHeight); // x, y, w, h
                   
                    tileset.frame = rectangle;
                    var layer = new PIXI.Sprite(tileset);
                    layer.x = x * tileHeight;
                    layer.y = y * tileWidth;
                    this._game.stage.addChild(layer);
                }
            }
        }

level1.json

How to create effect lines line this. I attack images. Line have change position. Thanks

Hi

Been working on a top down car game for quite a while and creating my own render using 2d canvas. Looked at pixiJS and decided to update the render with that to get the benefit from webGL and perhaps other nice useful features that I don't know about yet. 

I create tiles in photoshop, draw the map in many layers in Tiled and then in my game I pre render all background layers and my foreground layers into 2 large canvases stored in memory which I then use to draw what the player sees based on my camera that is tracking the hero.

Now that I'm switching to pixiJS I'm confused about a couple of things. I've been searching, and going through some great tutorials, explanations and documentation but still feel I want to ask for some help here.

My current setup is that I do the same prerender as before and then add my background and foreground as sprites like this:

        this.layers[zLevel] = new pixiJS.Sprite(pixiJS.Texture.fromCanvas(this.offScreenCanvas[zLevel]));
        if (zLevel === 'background') {
            this.layers[zLevel].zOrder = 20;
        } else {
            this.layers[zLevel].zOrder = 10;
        }
 
        this.pixiApp.stage.addChild(this.layers[zLevel]);

Question 1: Is this approach recommended (I know this consumes memory and if the map is too big I'll need to split into smaller chunks) ? I'm also confused about sprite vs texture. I could not get my background to show up unless I turned it into a sprite.

Question 2: How do I control which layer is on top of the other?  I tried in this example to place background above foreground but that didn't work. My cars should be positioned between background and foreground, how do I accomplish that?

In my old version I draw my layers like this:

this.ctx.drawImage(
                this.preRender.offScreenCanvas[zLevel], // image
                camera.x, // source x
                camera.y, // source y
                camera.width, // source width
                camera.height, // source height
                0,  // target x
                0, // target y
                camera.width, // target width
                camera.height // target height
            );

Question 3: How should I approach the camera in pixi? It seems like I should just change x and y of my background sprites to accomplish the same effekt. Is that the right approach? 

Question 4: When looking at the examples in pixijs: http://pixijs.github.io/examples/#/basics/basic.js or kitty kat attack tutorial: https://github.com/kittykatattack/learningPixi#introduction I keep seeing thing things done different all the time. is one of them out of date? For example in kittykatattack they call renderer.render at the end of each example.

/piranha

What i need

I have two sprites with transparent background textures and want to clip one sprite with other, while keeping the color of clipped one.

What i tried

I tried to use DisplayObject.mask property

https://jsfiddle.net/wrfthr8u/5/

var app = new PIXI.Application(600, 480, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

let squareTexture = PIXI.Texture.fromImage(SQUARE_IMAGE_URL);
let circleTexture = PIXI.Texture.fromImage(CIRCLE_IMAGE_URL);

let square = new PIXI.Sprite(squareTexture);
let circle = new PIXI.Sprite(circleTexture);

square.mask = circle;

app.stage.addChild(square);
app.stage.addChild(circle);

But in addition to clipping it also modifies clipped sprite color

So is there any way to clip sprite in Pixi while keeping it's original color without using simple shapes painted with Graphic (i really need to do this with any texture with transparent pixels)?

I'm facing problem in getting screenshot of current state of canvas, which is get rendered dynamically using pixi.js library.

Below written code i'm using to generate canvas and when i use toDataURL() function on dynamically generated canvas it always returned black image.

  /* PIXI Renderer object of the game. */
  var renderer = PIXI.autoDetectRenderer(FIELD_SQUARE_SIZE_PIXELS, FIELD_SQUARE_SIZE_PIXELS, { backgroundColor: 0xF2F2F2 });  

  /* This code i'm using to change color of button on canvas. Which work fine.*/

 var whiteButtonsArr = whiteButtons.graphicsData;

    for (i = 0; i < whiteButtonsArr.length; i++) {
      var button = whiteButtonsArr;

        button.fillColor = WHITE_BUTTON_FILL_COLOR;
        whiteButtons.dirty = true;
        whiteButtons.clearDirty = true;
        return true;

    }

After some analysis i have changed the code to render canvas (added preserveDrawingBuffer attribute )to get current screenshot of canvas. After adding preserveDrawingBuffer attribute i'm able to get the current state of canvas using toDataURL() function. But button's color is not getting changed on UI. Although while debugging button.fillColor pick the color but doesn't reflect on UI.

/* PIXI Renderer object of the game. */
  var renderer = PIXI.autoDetectRenderer(FIELD_SQUARE_SIZE_PIXELS, FIELD_SQUARE_SIZE_PIXELS, { backgroundColor: 0xF2F2F2 }, { preserveDrawingBuffer: true });  

Please let me know if any other approach or way is available to take screenshot. Thanks in advance.

I use a custom filter in pixi.js for blur https://github.com/louisatome/pixi.js/tree/dev-atomeV4/src/filters/triangleblur but when I use the filter on different objects, the texture of my biggest object overlaps on smaller objects.

After some research, I think it's linked to the temporary RenderTarget I use to apply my filter on the 2 axis.

First, it seems that the clear parameter of the function filterManager.getRenderTarget() is ignored when I read the source code of the method. But anyway, even if I manually call the clear() method of the RenderTarget at the end of the filter application the result is the same.

But if my 3 objects have different dimensions (let say 100x100, 200x200 and 400x400) in order to get a different RenderTarget for each, the rendering is OK.

Any idea ?

Thanks

I noticed that in my game the Pixi Application takes lot of CPU resources when it's running. Even when it's in background or is not visible, it consumes the CPU. Two Chrome processes are constantly using 25-30% CPU on my linux box (more on my macOS). It became very troublesome while working from a cafe on my macbook pro without charger. The app drained by battery in no time.

Only way to avoid this is to stop the pixi application ticker when you don't want it to consume resources. For a typical Pixi.js application, i.e. a game, it does make sense for the game to pause when it goes in background. Therefore I wrote this small routine using the `blur` event handler, to pause the Pixi app, whenever the window looses focus. This drops the CPU usage to 6-7% by Chrome processes.

In a browser or electron app, the window.onblur callback will get called whenever the focus switches from the app window to some other application (or even dev console). However in jsfiddle environment, you need to click on the application first and then click somewhere else for testing this functionality. That's because the code runs inside an iframe on jsfiddle page. The simple resume dialog lets you resume the app when you want.

You can try it here: https://jsfiddle.net/jay3sh/ft8am5fr/13/

If you have any other tips, or suggestions to reduce CPU usage, I would love to know.

How do I check if the next file exists or not?

Deeper question: is there a 'best' or a known way to load a bunch of files/textures from a directory?

let app = new PIXI.Application({ autoStart: true, width: 640, height: 480 });

PIXI.loader.resoures.add("./spritesheet.json");



/* creates a Texture using the ENTIRE spirtesheet image instead of reading from json and cropping it to texture atlas */

let testTexture = new PIXI.Texture(PIXI.loader["./spritesheet.json"].textures["player2.png"]);

//work around : new PIXI.Texture(PIXI.loader["./spritesheet.json"].textures["player2.png"],PIXI.loader["./spritesheet.json"].textures["player2.png"].orig); or by using .frame

/* What's the point of passing ["player2.png"], specifying the texture atlas location if it's just going to use the entire image when creating calling new PIXI.Texture . */

let testSprite = new PIXI.Sprite(testTexture);


/* this corrects the sprite with the correct frames though referencing the texture in the loader*/

let testTexture2 = PIXI.loader["./spritesheet.json"].textures["player2.png"].texture;
let testSprite2 = new PIXI.Sprite(testTexture2); //correct crop refferencing texture atlas frame.

I know how to work around this but shouldn't "new PIXI.Texture" reach into the json file and grab the correct location of the image rather than use the entire image of the spritesheet? 

I have a Javascript class that handles Graphics in my game, as such I have some functions dedicated to load images to be used as sprites later on.
I use an asset loader however when I am trying to use Texture.fromImage() there is a Javascript error.

The problem seems to be with the line resources.spriteName.texture
I am trying to load a file "dummy.png" so if I change that to resources.dummy.texture it will work fine, however I need that line to be dynamic based off the contents of spriteName function argument, how could I achieve this?

CreateSprite2D(spriteName, filename) {

		var texture;
		var sprite;
	
		console.log("loading");
		
		var loader = PIXI.loader.add(spriteName, filename);
	
		loader.load((loader, resources) => {
		
			console.log( resources.spriteName.texture );
		
			texture = PIXI.Texture.fromImage(resources.spriteName.texture);
			sprite  = new PIXI.Sprite(texture);
			
			this.sprites2D[spriteName] = sprite;
			this.textures2D[spriteName] = texture;
			
			console.log("loaded");
		});
		
	};

Hi for all. 

I'm trying to create application for mobile devices. I have some troubles with tag <meta name='viewport'>:

1. I have 59-60 fps if i set attribute content like this: content='initial-scale=no,width=device-width,initial-scale=1';  but images looks blured.

2. Images looks great if i set attribute content like this: content='initial-scale=no,width=device-width,initial-scale=' + 1 / window.devicePixelRatio;  but i have 15 fps.

I set options.resolution = window.devicePixelRatio || 1 for both cases;

I'm using GSAP with PIXI and if I want to tween scale and position I have to make specific tweens for each.

Fx.

tl.to(player_1, 0.6, {y:"+=200"}, "label");

tl.to(player_1.scale, 0.6, {y:1}, "label");

This forces me to make needless code, such as adding labels to make the animation sync up.

Is there a chance you'll add scaleX and scaleY instead/along side of scale.x and scale.y?