Handling destroy of generated textures from canvas

April 25, 2018, 6:11 am

≫ Next: Video with video mask

≪ Previous: Why the ticker is not redrawing the stage?

$

0

0

I need to generate some textures on the fly, bassicaly when map is loaded I generate several dozens simple gradient textures.

I found here: https://github.com/pixijs/pixi.js/issues/3806 (last comments) that this is possible to use just one helper canvas to do this but after reading some other sources I am a little confused how to handle destroy of this textures.
At the moment I have some helperCanvas with 2D context to generate my textures and then I do:

// This create texture from helper canvas as I understand
var texture1 = new PIXI.Texture(new PIXI.BaseTexture(helperCanvas));

// This one "save" texture in GPU memory if I understood correctly.
renderer.textureManager.updateTexture(texture1.baseTexture);

// Create new sprite from this texture
var sprite = new Sprite( texture1 );

I do this in loop to create all needed sprites but I am not sure what should I do when map is unloaded, when I don't need these textures.
Is any action needed or GC can handle this? Should I remove them manually from textureManager by some method or call destroy on sprite?

---

Video with video mask

April 29, 2018, 3:25 am

≫ Next: Scaling rectangle from center and transform Origin

≪ Previous: Handling destroy of generated textures from canvas

$

0

0

I'm trying to place an animated video mask over a video, which should be synced. I manage to start them at the same time, but unfortunately the playing speed is not in sync. I did some googlin' and doodlin', but only answer I got, that it's pretty much impossible to sync videos in JS. What's Pixi' take on this? Since this is all drawn to canvas, is there a way to sync mask and video?

Scaling rectangle from center and transform Origin

April 29, 2018, 1:22 am

≫ Next: Fog of War

≪ Previous: Video with video mask

$

0

0

Hi,

I was just getting started with PIXI js and had couple of questions regarding transform origin. Both questions are related to transform origin and positioning so I thought I will ask them in same question.

 

In first example I want to scale rectangle from center but when I scale it it scales from top left corner. As I was writing this question I realized that the graphics object is getting scaled and it makes sense that rectangle gets scaled to top left corner. In demo I have code commented out where my approach is to transform graphics object to center so scaling will be from the center. Is there another approach to scale shapes from center?

Basically I want to animate multiple rectangles and I would rather create single graphics object to scale all rectangles from their center instead of using one graphics object per rectangle. (that is if my commented approach is correct);

https://codepen.io/Sahil89/pen/rvjwwP?editors=0010

 

In second example, I wanted to give my text object a fixed position and translate it using mouse coordinates. But it seems like there isn't a way to give a fixed position to sprites and translate them from that position. So lets say I have multiple sprites I have to do additional calculation to translate them relative to their original position.

https://codepen.io/Sahil89/pen/QrdgBx?editors=0010

If I had to do it using 2d Canvas I would have created my object with left and top property as following example,

https://codepen.io/Sahil89/pen/OZWjPZ?editors=1010

can I do something similar with PIXI sprites?

Fog of War

April 29, 2018, 6:15 am

≫ Next: Mask using container or its pixels?

≪ Previous: Scaling rectangle from center and transform Origin

$

0

0

Hello, anyone has any example about a fog of war around a specific point?

thanks.

Mask using container or its pixels?

April 29, 2018, 1:55 pm

≫ Next: developer needed to finish an app

≪ Previous: Fog of War

$

0

0

Hi Again,

I have been working on something using PIXI for the first time, I have got everything to work as intended with one final piece of puzzle left.

I was playing with masks and was able to use Graphics shapes as masks and sprites as masks but it seems like text can't be used as a mask. (not that important but was wondering if I am doing something wrong for it to not work)

Coming back to my main question, I would like to use entire container as a mask. Is that possible? I tried using container as mask but it doesn't work. Maybe I can use filters to achieve mask using entire container?

https://codepen.io/Sahil89/pen/XqpBQv?editors=1010

developer needed to finish an app

April 30, 2018, 3:29 am

≫ Next: Creating vector square diamond frames

≪ Previous: Mask using container or its pixels?

$

0

0

A code rockstar is needed! Send me a PM if you would like to work on a cool project.

It's a multi-touch educational game app developed in pixiJS / Javascript. The code is not very clean (aprox., 1200 lines) but it is fully functional.

I need someone to finish this web and android mobile app:

Store data (stage/score, etc) locally

Add vector graphics instead of the raster images I used initially

Cleanup code / put some comments Put sound (webview seems to have issues with that)

I will spend some time explaining what I have done. Very good experience in PixiJS is a must.

Please contact if you are prepared to give some technical overview of the strategy you will follow. I am not a project manager, I am an engineer and you might have done some excellent jobs in the past. However, every project is different. I will need some specific answers on:

- Storing data (stages, score) of user locally

- no external db will be used.

- Raster to vector images / sprites through the project.

- One soundclip in webview restriction. Solutions like howler.js work well on browser, still no luck on Andoid webview. You know how to override it? (if you have experience in cordova to deploy it, I have no problem with that)

- Need some cool maths to smoothen the animation / use deltaTime, etc (for a example a ball that rolls)

- Cleanup code.

I guarantee you will like this project. 

Creating vector square diamond frames

April 30, 2018, 4:42 am

≫ Next: Sprite Spacing Problem

≪ Previous: developer needed to finish an app

$

0

0

So I'm having a bit of a rough time doing something that seems kinda basic. I've tried doing a lot of research, but I'm really kinda stuck on the higherarchy pixi uses to create vector images. I'm creating vector based UI for my game, and to do this, I need to make a square frame (like a picture frame with the center open); and then rotate said square 90 degrees so it's standing on one of its points like a diamond. Basically, my UI is going to be composed of a bunch of these square diamond icons.

Thanks

Sprite Spacing Problem

April 30, 2018, 6:50 am

≫ Next: PIXI.interaction in RPG Maker MV

≪ Previous: Creating vector square diamond frames

$

0

0

Hello, there is any consideration to draw a sprite after another?. I'm having a hard time trying to make them fit perfectly.

I'm starting to think that is something about decimals or something because most of the sprites have a line/space between them , and in mobiles is even worst.

I have a big spritesheet with tiles, and I extract them with:

new PIXI.Texture(texture, new PIXI.Rectangle(col * tileSize, row * tileSize, tileSize, tileSize))

where col and row indicate the position of the tile.

Could be a problem related with this method? the spritesheet is fine because it works perfect in Tiled.

---

PIXI.interaction in RPG Maker MV

April 30, 2018, 8:33 am

≫ Next: Custom renderer plugin - render at lower resolution

≪ Previous: Sprite Spacing Problem

$

0

0

(I've seen many threads about PIXI in MV before, but not about this subject, so I make a new one. If someone already made one, I would be grateful if you link it below)

A group of people I'm collaborating with is using RPG Maker MV. I don't have much experience with this engine before, but IMHO, the engine performance is ... erm, not very good, and it also lacks many pointer/touch related events that I need.

I managed to convert the bitmap system to pure PIXI sprites. But,

sprite.interactive = true;
sprite.on('pointerdown', foo)

is still not working. I thought that maybe MV overrided PIXI somehow, so I take out all input classes of MV, 

TouchInput.init();
Input.init();
TouchInput.update();
Input.update();

still failed. Also tried manually updating plugins.interaction in the game loop. Same result.

So what is it that I am missing? Did MV override PIXI interaction with something else that I hadn't taken out, or do I need to update other certain PIXI classes in order to solve this problem?

Custom renderer plugin - render at lower resolution

May 2, 2018, 12:23 am

≫ Next: How to apply PIXI.Filter on polygon PIXI.Graphics.

≪ Previous: PIXI.interaction in RPG Maker MV

$

0

0

I have a custom renderer plugin (based off https://github.com/pixijs/pixi-plugin-example) that employs a very expensive fragment shader. The sprite it applies to (a map) often covers the entire screen. I'd like to be able to optionally render at a lower resolution and then scale up the result so that the fragment shader doesn't need to apply to every single screen pixel.

I understand that setting PIXI.settings.resolution will work here, but I don't want to change the resolution of the entire scene - just this object.

How to apply PIXI.Filter on polygon PIXI.Graphics.

May 2, 2018, 3:49 am

≫ Next: Creating an Animated Cardiograph line

≪ Previous: Custom renderer plugin - render at lower resolution

$

0

0

Is there a way to apply PIXI.Filter on PIXI.Graphics Polygon.?   When I applied a gradient filter on area chart (PIXI.Graphics Polygon),  that filter was applied on some rectangular space, not on polygon shape.

before applying gradient filter (Polygon is colored in blue color):-

 

after applying gradient filter:-

Would like to hear any advice on the subject.

Thanks in advance!

 

 

Creating an Animated Cardiograph line

May 2, 2018, 11:46 am

≫ Next: When do I need to call renderer.render(stage)?

≪ Previous: How to apply PIXI.Filter on polygon PIXI.Graphics.

$

0

0

I'm looking to create an effect like this:

https://codepen.io/allusis/pen/bJyud

With CSS and HTML5, it looks like he was able to somehow able to animate the change in opacity of his vector line. I'm not really sure how I would achieve this same effect with PixiJS. Any suggestions?

When do I need to call renderer.render(stage)?

May 2, 2018, 8:36 am

≫ Next: Scaling sprites at default height and width

≪ Previous: Creating an Animated Cardiograph line

$

0

0

It seems like if you simply update a sprite or primitives properties directly, either with setTimeout or requestAnimationFrame or some other tweening library, the objects will move. Is this new with using PIXI.Application? Older docs or forum posts show needing to rerender the stage constantly.

I would just expect simply moving the properties by just changing x, y, scale, etc. wouldnt work but it does.

Scaling sprites at default height and width

May 2, 2018, 9:01 am

≫ Next: sprite bounds with rotation (collision)

≪ Previous: When do I need to call renderer.render(stage)?

$

0

0

Hi,

I was working on some effect using rectangles using graphics object. @OSUblake Suggested me that using Sprites with tint would give me be better performance. So I decided to replace my graphics object with sprites. Though scaling them and positioning them to scale from center gives me some strange behavior which is because I guess that sprites are calculated based on canvas dimensions.

Then I removed the height and width from sprite and they defaulted to 10x10 rectangle that ignores the dimension of canvas. So I can work with it and avoid doing calculations to position all the sprites.

https://codepen.io/Sahil89/pen/PemgeO?editors=0010

Following are my questions

1. Is it safe to assume that in all browser environments sprites will default to 10x10 dimensions?

2. How much difference does it make in performance to use sprites instead of graphics object while am using 1000-1500 rectangles? is it significant?

sprite bounds with rotation (collision)

May 3, 2018, 6:15 am

≫ Next: Welcome to the Pixi.js forum

≪ Previous: Scaling sprites at default height and width

$

0

0

hi, Existe a way to compute bounds with rotation ? Because am trying use a little collision system with mouse and also other sprite, but i not sure how proceed for compute correctly the rotation of a sprite.
Example this is a hitCheck for 2 sprite

function hitCheck(a, b){

var ab = a._boundsMap._pad

var bb = b._boundsMap

return ab.x + ab.width > bb.x && ab.x < bb.x + bb.width && ab.y + ab.height > bb.y && ab.y < bb.y + bb.height;

};

And this is how i check if my mouse are inside the bounds

        let isIN;
        for (let i = 0, l=list.length; i < l; i++) {
            const e = list[i];
            //if(e.source.type === "light"){continue}; // bypass light TODO:
            if(e._boundsMap._pad.contains(x, y)) {
                isIN = e;
                if(e.source.spineData){
                    for (let i = 0, l = e.list_d.length; i < l; i++) {
                        e.list_d[i]._filters = [$PME.filters[2]];
                    };
                }else{
                    e.children[0]._filters = [$PME.filters[2]];
                };
                subList = list.concat();
                subList.splice(i, 1);
                e.debugElements.cirOrigin.renderable = true;
                e.debugElements.linePivot.renderable = true;
                break;
            };
        };

 

This is how i compute the bounds, This is the only way how i can get the bounds working fine.

 const mapX = Cage_Mouse.x;

 const mapY = Cage_Mouse.y;

 var _boundsMap =  objSprite._d.getBounds(true).clone();

_boundsMap._pad = _boundsMap.clone()

_boundsMap._pad.pad(-_boundsMap.width/3,-_boundsMap.height/3);

the console.log for _boundsMap stored something like this.

_boundsMap:

1. Rectangle {x: 553, y: 293, width: 206, height: 267, type: 1, …}
   1. height:267
   2. type:1
   3. width:206
   4. x:553
   5. y:293
   6. _pad:Rectangle
      1. height:89
      2. type:1
      3. width:68.66666666666666
      4. x:621.6666666666666
      5. y:382
      6. bottom:(...)
      7. left:(...)
      8. right:(...)
      9. top:(...)
      10. __proto__:Object
   7. bottom:(...)
   8. left:(...)
   9. right:(...)
   10. top:(...)
   11. __proto__:Object

Maybe I do it wrong? or if a good math guy can give me the math algorithm for  setup the x,ywidth,heigth correctly with rotation ?

Thank a lot for any suggestion or  new approach.

 

that picture can show my issue and maybe help to more understand. , in red is bounds without rotation, in green it the bounds with rotation that i need to get.

---

Welcome to the Pixi.js forum

May 3, 2013, 4:37 am

≫ Next: Graphic circle positioning

≪ Previous: sprite bounds with rotation (collision)

$

0

0

Hi everyone and welcome to the PIXI.js forum!

 

First off, big thanks to @photonstorm for providing a place for people to talk Pixi, very kind of you sir!

 

If you dont know what pixi.js is then let me give ya the low down: Pixi.js a fast, lightweight, open source 2D library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of webGL. It's the fastest HTML5 renderer in town! 

 

The idea behind pixi.js is that it can be used as the rendering component in your game engine (or any other type of project!) rather than as a game engine itself.

 

Questions / bug reports / amazing feature ideas, or anything at all Pixi, then this is the place to discuss it!

 

I will also be posting updates here as the engine grows and evolves.

 

Pixi.js can be found here along with lots of examples: https://github.com/GoodBoyDigital/pixi.js

 

To find out more about Pixi and read our beginners tutorial, check out our blog over on Goodboy

Graphic circle positioning

May 4, 2018, 8:54 am

≫ Next: Please help me with the memory leak bug

≪ Previous: Welcome to the Pixi.js forum

$

0

0

Hi all! New member here!

A few minutes ago, I was working on my game's prototype, when I realized something that kinda ticked me off 😅

So, I created two seperate graphics, both of them at the same position, containing each one circle (x = 0, y = 0), one of the circles with a fixed radius, and the other one with an increasing radius. Weirdly, these circles did not seem to be centered at the same spot, since the left side of the bigger circle is closer to the left side of the smaller circle, that the right side of the bigger circle to the right side of the smaller circle. Here are a few pics to show what I mean, as well as the code I used:
Circles: 

Code: 

 

Edit: Btw, the radius is augment every time by 0.02, so it's not a full number.

Please help me with the memory leak bug

May 4, 2018, 4:10 am

≫ Next: best libs for camera and easing ?

≪ Previous: Graphic circle positioning

$

0

0

I have implemented a music visualizer here:
https://codesandbox.io/s/qz22m03nw4

I created a cool trail effect in "circle.js". But after a while, the memory leak so bad. Can you point out what wrong with my solution?

best libs for camera and easing ?

May 5, 2018, 7:52 am

≫ Next: Texture.fromFrame weird Firefox behavior

≪ Previous: Please help me with the memory leak bug

$

0

0

hi everybody!
What your recomandation libs for a camera system also for a easing library in js.
I need one for pixi.js.

My criteria are performance at the expense of complexity.
What your recommend?
For now i take look on those one, but hard to choose and maybe you have some good suggest.
My project use pure pixi obj on app nwjs, no graphics html or css element.
For now TweenMax hold all my attention!
thank

 

pixi-ease
pixi.js animation library using easing functions
https://github.com/davidfig/pixi-ease

Kute.js
sterling animation engine that delivers excellent performance
http://thednp.github.io/kute.js/
 

TweenMax
TweenLite is an extremely fast, lightweight, and flexible animation tool
https://greensock.com/tweenlite
 

pixi-viewport
A highly configurable viewport/2D camera designed to work with pixi.js.
https://github.com/davidfig/pixi-viewport

 

Iavra Animate Everything (+ Easing Library)
Provides a generic way to animate every float property on every obj based on Robert Penner's easing work
https://forums.rpgmakerweb.com/index.php?threads/iavra-animate-everything-easing-library.46826/

PIXICAM
A world container which can be viewed through an accompanying camera.
https://github.com/georgiee/lab-pixicam

Texture.fromFrame weird Firefox behavior

May 7, 2018, 9:39 am

≫ Next: ParticleContainer Color Glitch

≪ Previous: best libs for camera and easing ?

$

0

0

Hello,

I am trying to build an AnimatedSprite by loading a .json exported from Flash CS6 and using the following code:

var t1frames = [];

 for (var i = 0; i < 120; i++)
        {
            var val = i;
            if (i < 100) val = '0' + i;
            if (i < 10) val = '00' + i;
            t1frames.push(PIXI.Texture.fromFrame('tracker10' + val));
        }

var tracker1 = new PIXI.extras.AnimatedSprite(t1frames);

as you can understand the json frame ids are 'tracker10000' up to 'tracker10119'

The above code works fine in Chrome, Edge, IE11 and Opera, but in Firefox throws 'Error: The frameId "tracker10000" does not exist in the texture cache'

By checking the debugger I found the following:

message : "Error trying to parse loaded json: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data"  which drives me crazy.

I am attaching the .json here in case someone has any ideas.

 

Thank you!

 

 

 

 

tracker1.json