Pixel perfect click

May 30, 2018, 2:47 am

≫ Next: Use PixiJs Spine with transparent background ?

≪ Previous: Deform a sprite by its 'x' axis

$

0

0

Anyone have recommendations for getting a pixel perfect hit (click) detection for some oddly shaped jigsaw puzzle pieces? I've already got non-pixi collision detection via SAT.js rectangles, but as jigsaw pieces are pretty irregular I'd like to use the SAT Box as a broadphase and then do a pixel perfect check.

I have a few ideas but I'm not sure if they are overkill.

One idea, since the jigsaw pieces are cut with bezier curves, is to export the bezier data along with the jigsaw puzzle spritesheets and then recreate the paths in a regular html canvas. Canvas has a isPointInPath function that sounds like it can tell if the mouse is in the bounds of the puzzle piece's bezier path... tho I've never used this on a complex multi-curve object so I'm not certain. I also have quite a bit of pixi-level scaling and zooming going on, so there would be much math. There's no rotation yet (and there might not ever be), but I guess these would hypothetically be reasonable to rotate. It also sounds like the path would need remade frequently, because in this game it is possible to pan/zoom and while the pixi sprites will be fine, these canvas-bound paths won't be coming along for the ride... they'll pretty much need to be re-pathed near where the player clicks if the view has changed at all.

A more pixi-centric idea is to use the SAT Box as a broadphase, and then convert the relative position of the mouse over the jigsaw piece to the coordinate of an exact pixel within the pixi sprite. So for example if the mouse was at 50,50, and the sprite was at 45,45 and was 20x20 pixels big, then some amount of math can deal with the offsets and convert the 2d coordinate to a 1d index and tell which pixel of the sprite is under the mouse.... and then check the alpha...? I'm guessing I should cache the pixel data per sprite. How do I do this in a way that works both with the webgl and canvas renderers?

Are there other good ways?

Just having a non-canvas bezier isPointInPath would fix everything too, if anyone happens to know a lib that does that.

Thanks

---

Use PixiJs Spine with transparent background ?

May 30, 2018, 3:16 am

≫ Next: [Help] How to set color for each vertice of mesh

≪ Previous: Pixel perfect click

$

0

0

Hi Team !

I'm building a new project and I just discovered PixiJs that could match my needs !
But not sure, I need to know if it's do-able :

Can I use PixiJs spine animations (eg : the goblin below) with a transparent background : and display it on my website ?
What I want to do, is that when my users will be on my website (video game website), the goblin comes to the screen and start talking to them, but still with my website in background :)
(The goblin will be like this characters in video games that tell you the story about why you're here, ie prof. Chen in pokemon ;))

Thanks a lot !

https://pixijs.io/examples/#/spine/goblins.js

[Help] How to set color for each vertice of mesh

May 30, 2018, 10:25 pm

≫ Next: How to understand 'fit' method of Rectangle object.

≪ Previous: Use PixiJs Spine with transparent background ?

$

0

0

Hello everyone, i am learning pixi js. How could i set color for each vertice of mesh object beside vertices, uvs and idices? Thanks for you help!

How to understand 'fit' method of Rectangle object.

June 1, 2018, 1:26 am

≫ Next: Improving performance of video used as a mask

≪ Previous: [Help] How to set color for each vertice of mesh

$

0

0

I think it makes one rectangle is wrapped by another one,but not so.

How to understand 'fit' method of Rectangle object?

Improving performance of video used as a mask

June 1, 2018, 2:12 pm

≫ Next: Delta time is ruining my animations

≪ Previous: How to understand 'fit' method of Rectangle object.

$

0

0

I am working on a project where I am trying to create an animation of a watercolor effect to 'paint' in an image. The image is dynamic, so rather than using a simple video, I have created a video to use as an alpha mask to apply to the image via Pixi. The area around the visible image needs to be transparent, so I needed to use an alpha mask rather than just covering the image with white pixels.

I have attached a full example file with all of the code that I have set up for this, but here's a quick summary of what I've done:

• Create a texture from video
• Create a sprite from image
• Add the image sprite to a container
• Set 'mask' property of container to be the video texture

This worked beautifully, but the one concern that I have is of performance, as there will be other things going on on the page at the same time. A performance audit of the page while the animation is running shows that the main thread is being used for scripting for almost 100% of the time of the entire duration of the animation, which is slightly degrading the performance of things such as scrolling on the page while that is happening.

I'm certainly willing to accept that this is simply a very performance intensive animation and that it doesn't get much better than what I've got, however this is my first time using Pixi, so I wanted to seek out some advice about whether I have done this the best way that I can, or if there is anything that I can do to help make this a bit more efficient.

Thanks in advance for any help that anyone can offer! If I need to provide any more information or anything like that, just let me know, and I will do my best

watercolor-test.html

Delta time is ruining my animations

June 1, 2018, 8:32 pm

≫ Next: Coordinates

≪ Previous: Improving performance of video used as a mask

$

0

0

I'm making a game where the game loop's frame rate is controlled and kept consistent with:

renderer.ticker.add(function(delta){
deltaGlobal = delta;
state();
});

However because of this, it causes my sprite animations to skip frames and look extremely choppy and ugly. Does pixi have a built in way to handle this that I'm just not seeing? Or are we still forced to use external scripts like this:

https://github.com/kittykatattack/smoothie

Obviously if there isn't a built in feature for animations to run smoothly while the framerate is being controlled with a delta, then that might be a pretty essential feature that should get added soon.
 

Coordinates

June 2, 2018, 10:10 am

≫ Next: Building a mask from multiple sprites

≪ Previous: Delta time is ruining my animations

$

0

0

Guys, hi,  spent couple hours to figure out how to combine local and global coordinates. 

The issue: I have a stage, there is a gameboadr on this stage, the gameboard holds many elements with coordinates related to this gameboard. Then I add element on game stage. It is animated effect. So when I click on element on the gameboard. It passes itself as parametr to that animation and trigger it. But, animation is displayed in a wrong place (it just need to be on the stage, not on gameboard). What I try to do is simply display that effect on top of the element. The gameboard scale is 0.5, the element is scaled to 0.9, the effect scale is 1, the anchor for all objects is 0.5.  The relation as follows: 

app.view (pixi app/canvas)->> Game.stage (where effect is placed) ->>Gameboard->> Elements

I did as follows: 

Animations.rocketRun = function (elementOnBoard) {

    let frames = [];

    for (let i = 0; i < 25; ++i) {
        frames.push(PIXI.Texture.fromImage(picture_' + i + '.png'));
    }
    let anim = new PIXI.extras.AnimatedSprite(frames);

    //anim is my effect should be put on top of elementOnBoard,so actually cover it, only of X axis
    //anim.x = -319 + CELL_SIZE + SPACE; manual calculation, bad approach
    //anim.x = Game.stage.toGlobal(elementOnBoard.position).x;// wrong
    //anim.x = Game.stage.board.toGlobal(elementOnBoard.position).x;//wrong
    //anim.x = elementOnBoard.parent.toGlobal(elementOnBoard.position).x); //like on tutorial, but got Cannot read property 'toGlobal' of null, on tutorial is says: "And it will work even if you don't know what the cat's parent container currently is."
    anim.x = elementOnBoard.getGlobalPosition().x; // finally supposed to be the best one, but...
   
    Game.stage.addChild(anim);

    anim.anchor.set(0.5);
    anim.animationSpeed = 0.1;
    anim.loop = false;

    anim.play();
};

P.S. I found a solution during making this post. The problem was, I think scale. I simply adjusted the coordinates calculation of my effect as below (multiply on scale, and deducted one of my constant - manual adjusment points). Indeed there is some inaccuracy, not sure why, but I adjusted by adding '19'. Could you explain why? Thanks,

  anim.x = elementOnBoard.getGlobalPosition().x * 0.5 - SPACE-19;

Building a mask from multiple sprites

June 2, 2018, 8:14 am

≫ Next: Spine documentation for PixiJS

≪ Previous: Coordinates

$

0

0

Is it possible? 

For example - I have a sprite I want to add holes to. In this case, it's a blimp. A player can hit the blimp multiple times. Each time the blimp is hit, a hole should be placed in the spot where the hit occurred.  

The base mask sprite:

 

The hole sprite:

 

Some psuedo code:

//full blimp mask

this.mask = new PIXI.Sprite(blimpMask);
this.sprite.addChild(this.mask);
this.sprite.mask = this.mask;



//inside my hit testing methods
//add a child sprite to the mask sprite


var localPos = this.sprite.toLocal({x: pos.x, y: pos.y})

var hole = new PIXI.Sprite.fromImage('/img/blimp-hit.png');
							
this.mask.addChild(hole);

hole.position.x = localPos.x;
hole.position.y = localPos.y;
hole.scale.x = 0.5;
hole.scale.y = 0.5;
hole.anchor.x = 0.5;
hole.anchor.y = 0.5;

 

So, if there were two holes added to the mask sprite, they would be added as children of the main mask:

 

 

I would expect the composite sprite, when set as a mask, to have holes as outlined above, but the children sprites are never accounted for when the parent sprite is set as a mask.

Is there a definitive way to make a dynamic mask that is comprised of multiple sprites?

---

Spine documentation for PixiJS

June 5, 2018, 2:31 am

≫ Next: Get FPS of game

≪ Previous: Building a mask from multiple sprites

$

0

0

Hi everyone,

I'm starting to play with Spin and I was looking for the PixiJS documentation regarding spine, but I can't find it anywhere (like  in here http://pixijs.download/release/docs/index.html)

Does anyone know where I can find such documentation? like references to the properties, methods, events, etc...

 

Many thanks  in advance

Get FPS of game

June 6, 2018, 6:20 am

≫ Next: What is the best way to distribute Pixi.Container in different Divs (html elements)?

≪ Previous: Spine documentation for PixiJS

$

0

0

Hello,

I'm new to Pixi.js and wanted to get the current FPS the game is running at and display it. I know that I will need to use the Ticker class but I'm not too sure on how to do that. Any help would be appreciated.

S.

What is the best way to distribute Pixi.Container in different Divs (html elements)?

June 7, 2018, 7:29 am

≫ Next: Texture between Pixi and THREE

≪ Previous: Get FPS of game

$

0

0

 

Example, I have 6 divs inside my body, and wanted to add a container for each div:
eg.: <div id = "one"> Pixi.Container 1 </ div>, 
<div id = "two"> Pixi.Container 2</ div>,

..... 
<div id = "six"> Pixi.Container 6 </ div>

and so on, is there a way to do this without having to instantiate several Pixi App?

Texture between Pixi and THREE

June 7, 2018, 8:46 am

≫ Next: Adding to container doesn't show sprite

≪ Previous: What is the best way to distribute Pixi.Container in different Divs (html elements)?

$

0

0

I'm trying to merge 2D Pixi graphic into a Threejs scene.
I'm using PIXI.RenderTexture to generate a texture of a Pixi sprite but now i need to pass it as a sampler2D to a Threejs shader.
Is it possible?
How can i extract uSampler from the texture to pass it to the shader?

PS: i don't want to use WebGlExtract to generate canvas, or image, or base64 data fro the new texture, those will kill performances.. 

Thanks to anyone will answer!
Mars

Adding to container doesn't show sprite

June 7, 2018, 1:34 pm

≫ Next: How to get width/height on sprite

≪ Previous: Texture between Pixi and THREE

$

0

0

Currently, I'm using the current html and javascript for a simple menu thing I am making. The problem is, the card sprites are not displaying when I click the button although the button sprites do go away. Furthermore, if I change the code to add the textureNButton sprites in the startCardGame function, it works and they are displayed. Any ideas why this wont work?:

<html>

<head>

<script src="https://pixijs.download/release/pixi.min.js"></script>

</head>

<body>

<script>

let Application = PIXI.Application,

Container = PIXI.Container,

Sprite = PIXI.Sprite;

 

var app = new Application({

width : 540,

height : 720,

backgroundColor : 0x1099bb,

antialias : true,

resolution : 1,

transparent : false

});

 

document.body.appendChild(app.view);

 

var mainMenu = new Container();

var cardGameData = [];

 

app.stage.addChild(mainMenu);

var cardTex = PIXI.Texture.fromImage('required/assets/card.png');

var textureTask1Button = PIXI.Texture.fromImage('required/assets/task1button.png');

var textureTask2Button = PIXI.Texture.fromImage('required/assets/task2button.png');

var textureTask3Button = PIXI.Texture.fromImage('required/assets/task3button.png');

 

var task1Button = new Sprite(textureTask1Button);

task1Button.buttonMode = true;

task1Button.interactive = true;

task1Button.anchor.set(0.5);

task1Button.x = 270;

task1Button.y = 720*.35;

task1Button.on('pointerdown',startCardGame);

 

var task2Button = new Sprite(textureTask2Button);

task2Button.buttonMode = true;

task2Button.anchor.set(0.5);

task2Button.x = 270;

task2Button.y = 720*.5;

 

var task3Button = new Sprite(textureTask1Button);

task3Button.buttonMode = true;

task3Button.anchor.set(0.5);

task3Button.x = 270;

task3Button.y = 720*.65;

 

mainMenu.addChild(task1Button);

mainMenu.addChild(task2Button);

mainMenu.addChild(task3Button);

 

function startCardGame() {

clearMenu();

var sprArr = [];

for (var i = 0; i < 144; i++) {

var cardArr = [];

var card = new Sprite(cardTex);

card.anchor.set(0.5);

card.x = -128;

card.y = 0;

cardArr[0] = card;

cardArr[1] = -1;

mainMenu.addChild(card);

sprArr[i] = cardArr;

}

}

 

function clearMenu() {

mainMenu.removeChild(task1Button);

mainMenu.removeChild(task2Button);

mainMenu.removeChild(task3Button);

}

</script>

</body>

</html>

How to get width/height on sprite

June 9, 2018, 10:57 pm

≫ Next: Any effective way of loading everything before start rendering the canvas?

≪ Previous: Adding to container doesn't show sprite

$

0

0

Hi all. I try to get width/height  properties in pixels with object PIXI.extras.AnimatedSprite but all time it return 1. How i can do that? In the object this properties is true console.log

Any effective way of loading everything before start rendering the canvas?

June 9, 2018, 2:50 pm

≫ Next: How to manually on/off anti-aliasing of PIXI.Graphics object.

≪ Previous: How to get width/height on sprite

$

0

0

Hi everyone,

On a game I'm playing with, I have a couple of things that I'm loading so that I can use them later. In particular, I have:

• images
• sounds (using howlerJS)
• spine animations

Does anyone know of an easy/effective way to load everything before actually rendering the scene? Possibly, a "loading screen" would be displayed while everything is being loaded.

 

Many thanks in advance

- Miguel

 

 

---

How to manually on/off anti-aliasing of PIXI.Graphics object.

June 11, 2018, 12:35 am

≫ Next: Blendmode layer

≪ Previous: Any effective way of loading everything before start rendering the canvas?

$

0

0

Is there a way to on/off anti-aliasing of graphics objects manually? I am writing stock chart on top of PIXI.js and it has several shapes. If I set antialiasing property true when creating a renderer all chart shapes are antialiased (Straight shapes are also applied antialiased). Because of antialiased shapes, the chart becomes blurry. Therefore, if I have a way to on/off antialiasing each PIXI graphics objects manually I think chart will become sharp.   

Candle Chart - No need to be antialiased

 

Line Chart - need to be antialiased

Would like to hear any advice on the subject.

Thanks in advance!

Blendmode layer

June 11, 2018, 1:38 am

≫ Next: ColorMatrixFilter

≪ Previous: How to manually on/off anti-aliasing of PIXI.Graphics object.

$

0

0

Hi,

The title pretty much captures it - there doesn't appear to be a layer blendmode in PIXI? Is it possible to replicate this somehow?

(Blendemode layer is useful for fading down a sprite with separate internal components, as they fade as one, rather than individually.)

I think that cacheAsBitmap does have this effect, but then I'm a little uncertain as to how I update the contents if they've moved?

ColorMatrixFilter

June 10, 2018, 12:59 am

≫ Next: why my shader not work properly?

≪ Previous: Blendmode layer

$

0

0

HI,

I was just looking at the ColorMatrixFIlter and am apparently not able to to get it to apply any effect.

I'm just trying to tint all my sprites black:

for (var i = 0; i < 10; i++)
{
	var s = PIXI.Sprite.fromImage("icon_unlit_bg");
	s.scale.set(0.5);
	s.x = i * 30;
	s.y = i * 20;
	let colorMatrix = new PIXI.filters.ColorMatrixFilter();
	s.filters = [colorMatrix];
	colorMatrix.desaturate();
	colorMatrix.brightness(0, true);
	c.addChild(s);
}

this.addChild(c);

I've also tried applying the matrix on the container sprite, with a similar lack of results.

Can anyone tell me where I'm going wrong?

why my shader not work properly?

June 11, 2018, 6:31 am

≫ Next: [Question] Trigger sprite events manually

≪ Previous: ColorMatrixFilter

$

0

0

see demo:

https://jsfiddle.net/jscqzty0/15/

https://www.shadertoy.com/view/MdVBDh

 

these 2 shader actually has the same code, but PixiJS one does not work properly, what do I miss in the code?

[Question] Trigger sprite events manually

June 11, 2018, 12:31 pm

≫ Next: PIXI current versions in the future ?

≪ Previous: why my shader not work properly?

$

0

0

Hi everyone,

I'm trying to do something that I don't know if it's possible nor what is the best/correct way to do it.

Basically, I have a sprite that has "pointer..." events associated.

Example:

.on('pointerup', doSomething)

 

This sprite is draggable and I can drop it in some other places. However, at some point, the sprite may lose it's "interactivity" (it's on purpose) and I would like the trigger the effect of "pointerup" so that the sprite is handled as if the user triggered that event (otherwise the sprite gets stuck on the locations the pointer was at the moment when the sprite lost its interactivity.

 

So, my question is: Is it possible to trigger an event for a given sprite manually? or is there a better way to achieve what I'm trying to do?

Many thanks in advance,

- Miguel