Probably a silly question, but how do you import pixi-display in TypeScript? I've fairly new to TypeScript, but this works for Pixi.js. 

import { Application, ApplicationOptions, Container, Graphics, Sprite } from "pixi.js";

But this does not for pixi-display.

import { DisplayGroup } from "pixi-display";

Also is pixi-display the preferred way of sorting or is there another way I should be sorting containers? I basically want to be able to add multiple containers to the view and if you click on one behind another it will come to the front and stay there. 

Hi,

Simple question:
Does current PixiJSv4 have function to detect platform?
(like if game is being played on Wndows, Linux, or Android)

I want to fill entire screen only on mobile Android and not on desktops/notebooks...

Let me know, thanks!

JeZxLee

I'd like to make an interactive, full-window diorama (think "pop-up book") made up of dozens of raster and vector graphics (likely around 25–40). They'd animate on mouse over, unique to their depth and reposition appropriately depending on the device/window-size the app is being viewed on. I attempted this with vanilla JS and quickly hit a limit to the number of images I could use before the framerate dropped (~12 images).

PixiJS seems to be a promising option. Would it be able to handle a project like this while also hitting my cross-browser compatibility needs (IE 10 & 11, ever green)?

Thanks for the help!

Hello, Pixi.js experienced developers!

I'm flash developer and I'm here to kindly ask for your help. I'm trying to port my complex project from flash to JS using Pixi, but stacked now...

I have a problem shown on image in attachment: i am playing with a few circle points, which you can move around using drag and drop (mouse), they are connected with lines, which are dynamically redrawn as you move the points around. Everything on the stage is created using PIXI.Graphics class. So far easy. But I need to make not only blue points but also the lines mouse interactive.

Is there any trick or workaround, how to force a Line shape created using Graphics class to fire mouse events (mouseOver/Click)?

It was enough in old flash to put the Line shape into MovieClip or Sprite and then assign event to that movieClip/sprite, but here - this trick does not work at all - still no mouse events fired. Setting a rectangle hitarea for the line segment works, but is not usefull, as the position, angle and also a width of the line segments are changed dynamically at runtime.

Searching in this forum brings no answers to me, so trying it this way...

thanks. 

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):

 Pixi canvas test

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! Please tell me, what is the best practice for loading assets in Pixi? As I understand it, the Loader only supports the direct download of the files as png, img, and so on. If I want to upload everything as a zip archive with encryption, and how best to proceed? In this case, the class Loader I don't need anymore, right? Thank you

When i am drawing any sprite usign pixi its looking blurry on both mobile (android mobile ) and pc (chrome browser)

Then i tried setting (roundPixels: true). Then it becomes sharp on pc but still blurry on mobile devices.

I have looked at forums but could n't get any help. I tried looking on stackOverFlow but  i got nothing which could actually resolve my problem.

I have used below code.

var gs = {width:950,height:640};
var app = new PIXI.Application(gs.width, gs.height, {
    resolution: 1,
    antialias: false,
    forceFXAA: false,
    forceCanvas: false,
    autoResize: true,
    transparent: false,
    backgroundColor: 0x000000,
    clearBeforeRender: true,
    preserveDrawingBuffer: false,
    roundPixels: false
});

var down = PIXI.Sprite.fromImage("images/icon.png");
down.anchor.set(0, 0);
down.position.set(100, 150);
app.stage.addChild(down);

Please help.

How does one create a base texture from a "named" image referencing the "alias" used in loader.

PIXI.loader.add("sprites", "sprites.png")
new PIXI.BaseTexture.fromImage("sprites.png", false, PIXI.SCALE_MODES.NEAREST)

It seems to me it would make more sense to stick to "sprites" instead of "sprites.png".

Hello everyone. I am new to both pixi and creature. I am trying just to add a character with animation but i need it as optimized as it can be and to play on canvas. That is why i am trying to use the creaturePack instead of the json, and to use the js runtime instead of webassembly.
I have been able to load the data but not render them. I am missing something about CreaturePixiJSRenderer.js. Any help would be appreciated
I am posting the code and i will upload it in a repo in about an hour. 
Edit
Could not share the repo so if anyone wants to take a look, the code is here
http://www.dsarmis.gr/games/pixi-cr/p-cr.zip

(PS. A server is needed in order to run)
Edit

 

var loader = PIXI.loader;
	var texture = null;
	var creature_pack = null;
	var creature_rend;
	
	var stage = new PIXI.Container();
	var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.view);
	renderer.backgroundColor = 0xffffaa;
	
	
	loader.add({name:"anim_data", url:"p3_setup_character_data.creature_pack", xhrType:"arraybuffer"});
	texture = PIXI.Texture.fromImage("p3_setup_character_img.png");

	loader.load((loader,resources)=>{
		console.log(resources.anim_data); // Data exists

		creature_pack = new CreaturePackLoader(resources.anim_data.data);
		console.log(creature_pack); // Data exists
		
		creature_rend = new CreaturePackRenderer(creature_pack, texture);
		console.log(creature_rend);  // Data exists
		
		
		creature_rend.pack_renderer.setActiveAnimation("default");													
		creature_rend.scale.set(100.0);
		creature_rend.timeDelta = 1;
		creature_rend.pack_renderer.syncRenderData();
		
		stage.addChild(creature_rend);
		
	});

	renderer.render(stage);
	

p-cr.zip

I'm reading some tutorials about pixi.js and I can't understand the result I got from toLocal. I expect the result to be 100,100 however I got 200,200.

Console output:

bunny1: 100 100
bunny2: 200 200
200 200

Code:

    // create our little bunny friend..S
    var bunny = new PIXI.Sprite(texture);
    bunny.interactive = true;
    bunny.buttonMode = true;
    bunny.anchor.set(0.5);
    bunny.scale.set(1);
    bunny.x = 100;
    bunny.y = 100;

    // create our little bunny friend..S
    var bunny2 = new PIXI.Sprite(texture);
    bunny2.interactive = true;
    bunny2.buttonMode = true;
    bunny2.anchor.set(0.5);
    bunny2.scale.set(1);
    bunny2.x = 200;
    bunny2.y = 200;

    // add it to the stage
    app.stage.addChild(bunny);
    app.stage.addChild(bunny2);

    console.log("bunny1:",bunny.x,bunny.y)
    console.log("bunny2:",bunny2.x,bunny2.y)
    console.log(bunny.toLocal(bunny.position, bunny2).x,bunny.toLocal(bunny.position, bunny2).y)

Hello, I'm new to Pixi JS and I'm kinda stuck. 

So, I have about 5 containers which I can move (drag, drop), now when I drag one over the other, something has to happend.. an alert or whatever. 

How can I detect one container moving over the other?

Ty.

Sorry for the "craziness" but rotation of a sprite is getting me down. When I rotate my sprite it's changing it's position.

I've tried with and without a pivot and there seems to be no logic.

Is there any way to just change a sprite which looks like this:

|

into:

/

without getting

                     /

As you can see below: with no pivot and a varying rotation I get a different position of the bullet even though the laser is always created at the center of the player (pos).

The bullet's rotation is calculated to always make it face the bullet's destination which is the center of the screen.

I have a situation where I have about 200 sprites to which I need to change hues.

Is the best way for this to create a custom renderer with default sprite shader replaced with custom one changing the hue?

Another option would be to use filters, but I think that might be pretty slow?

Canvas support is not needed and I cannot cache those as they have spritesheet animations -> would require lots of memory.

I thought about using TravisoJS (http://www.travisojs.com/) but I haven't seen any games that use it. Does anyone have experience with it?

Hi all, just polishing off another pixi based game.

Another one for mobile, so looking now to see if we can scale back some of the effects when using canvas for the lower end devices.

I'll be dropping out particle effects, and a lot of the animations as it's rendering a bit slow atm, but one issue I've come across is with spine meshes.  To save load time I've designed some assets to be flipped, but have noticed the mesh wireframes are visible on all those that are flipped.

eg. grave.scale.set(-1,1);

This is only visible on canvas (webGL is perfectly fine).
Anyone know if there is a quick fix for this, or reckon I will have to duplicate the spine elements and flip the assets? (Last resort really)



Thanks in advance!

Hi,

I have a huge problem with PIXI.loader. The thing is, I am trying to create an animated sprite, however no loading method I do does any good. The images aren't corrupted and can be opened without any troubles, so the problem is not there...

However, when I try to load the pictures through PIXI.loader, the texture should be created automatically... But it isn't and PIXI.loader.resources [resourcepath].texture throws me undefined (also, if I show the resources in console, it will tell me that isImage = false). If I use PIXI.Texture.fromImage, it returns its' dimensions as 1x1.

The only way I can manage to create some textures is to combine both. So use PIXI.loader, then use PIXI.Texture.fromImage. This throws me double entry warnings (because the resource has already been loaded), creates a 1x1 texture in textureCache, but at least I finally have a valid texture in PIXI.loader. Or an easy fix is to hit Back and Forward in my browser, that will display the animation sprite with no problem.

However, that is both annoying and impractical. I'm fighting with this for two days and still cannot figure out how to tame the pixi textures!

So far this is the only code with which I have succeeded to have some usable texture. If I use only Texture.fromImage, I will get textures 1x1, and if I use only loader, it will not make textures and won't recognize these png as images.

I use PIXI version 4.5.6 btw. And canvas or webGL renderer is not relevant, the problem is the same.

Thank you very much.

Hello,

I'm super new to pixijs and am trying to do a scratch off type game, using the code samples from

https://pixijs.github.io/examples/#/demos/mask-render-texture.js

and

https://pixijs.github.io/examples/#/demos/batch.js

Wherein, there's a bunch of particles on screen, using the particle container, that you're meant to "scratch-off" within a given time limit....I've tapped into

function pointerMove(event) {
			if (dragging) {
				brush.position.copy(event.data.global);
				app.renderer.render(brush, renderTexture, false, null, false);
				
				var hits = 0;
			        var imageData = app.renderer.extract.pixels(renderTexture);

			for (var i = 0, ii = imageData.length; i < ii; i = i + 4) {
				if (imageData[i] == 0 && imageData[i + 1] == 0 && imageData[i + 2] == 0 && imageData[i + 3] == 0)
					hits++;
			}
			scratchOffPercentage = Math.ceil((hits / totalTextureSize) * 100);

			}
		}

from the mask-render-texture.js example, but doing app.renderer.extract.pixels(renderTexture); as the mouse is moving, seems to be quite taxing and makes the particles lag....is there a better way of doing this?

Essentially, with the example  https://pixijs.github.io/examples/#/demos/mask-render-texture.js in mind, can i show how much of the picture underneath is showing/has been drawn by the "brush"?

Thanks for any help!

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!

Hi, I'm just getting started with Pixi.

I made a little sprite that walks around and shoots things. Whenever I bump my sprite into the bad guys, I want him to disappear. So I ran stage.removeChild(mySprite) and he disappeared!

But... He still shoots when I click and he still moves around with WASD. So it just makes the sprite invisible? 

Here's a link: http://www.med.wadholm.com/Kaitlyn/sprites/pixi/bunny/

Hi,

My goal is to create a app where I can add points to an image. During the process I'll need to zoom in/out the image to accuratly place the points. Right now I can move the image(pink grid), zoom in/out, and the bunny maintain it's position on the grid. I can move the bunny clicking on it and it still works great.

I was able to do most of it with the following code. However after add a container, (bunnies) I lost the onDragMove function on the bunny. I tried to set up a jsfiddle without success. When I try to drag the bunny the this.dragging variable is undefined.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
</head>
<body id='pixiCanvas'>
  <script src="pixi.js"></script>
  <script src="https://d3js.org/d3.v4.js"></script>
  <script type="text/javascript">

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

    // create a texture from an image path
    var texture = PIXI.Texture.fromImage('assets/bunny.png');
    var textureGrid = PIXI.Texture.fromImage('grid.png');

    var bunny_x = 100;
    var bunny_y = 100;

    // Scale mode for pixelation
    texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;

    var grid = new PIXI.Sprite(textureGrid);
    app.stage.addChild(grid);

    var zoom_handler = d3.zoom().scaleExtent([1, 8]).on("zoom", zoom_actions);
    
    function zoom_actions() {
        if(bunny.dragging == false){
            console.log("zoom: ",bunny_x,bunny_y)
            grid.scale.set(d3.event.transform.k)
            grid.position.set(d3.event.transform.x,d3.event.transform.y)
            bunnies.scale.set(d3.event.transform.k)
            bunnies.position.set(d3.event.transform.x,d3.event.transform.y)
        }
    }

    var pixiCanvas = d3.select('#pixiCanvas');
    pixiCanvas.call(zoom_handler);

    var bunny = new PIXI.Sprite(texture);
    bunny.interactive = true;
    bunny.buttonMode = true;
    bunny.anchor.set(0.5);
    bunny.scale.set(1);
    bunny.x = bunny_x;
    bunny.y = bunny_y;

    bunny
        .on('pointerdown', onDragStart)
        .on('pointerup', onDragEnd)
        .on('pointerupoutside', onDragEnd)
        .on('pointermove', onDragMove);

    bunny.click = function() {
        console.log("bunny.click");
        this.x += 5;
    }

    var bunnies = new PIXI.Container();
    bunnies.addChild(bunny);
    // add it to the stage
    app.stage.addChild(bunnies);

    function onDragStart(event) {
        console.log("onDragStart: ",bunny_x,bunny_y);
        this.data = event.data;
        this.alpha = 0.5;
        this.dragging = true;
    }

    function onDragEnd() {
        console.log("onDragEnd: ",bunny_x,bunny_y);
        this.alpha = 1;
        this.dragging = false;
        this.data = null;
    }

    function onDragMove() {
        console.log("onDragMove: ",bunny_x,bunny_y);
        if (this.dragging) {
            console.log("dragging: ",bunny_x,bunny_y);
            var newPosition = this.data.getLocalPosition(this.parent);
            this.x = newPosition.x;
            bunny_x = newPosition.x;
            this.y = newPosition.y;
            bunny_y = newPosition.y;
        }
    }

  </script>
</body>
</html>

If you want to help me set up a jsfiddle here are all the links with the images:

var texture = PIXI.Texture.fromImage('https://s26.postimg.org/heslqn655/bunny.png');
var textureGrid = PIXI.Texture.fromImage('https://s26.postimg.org/nr7r0h97d/grid.png');