Fading RenderTexture

March 10, 2016, 1:50 pm

≫ Next: How many memory are you using in your game

$

0

0

Hello,

I'm trying to implement a fading buffer to use for rendering particle "trails". The effect is pretty much what is described here. Specifically the fiddle there makes it clear quickly.

The core idea behind the approach is:

1. Allocate 2 buffers (renderTextures)
2. Render particles to active texture
3. For fading then: clear the alternative texture, render the primary texture to the secondary one with alpha (the fade), swap primary/alt textures.
4. Render active renderTexture to screen (after everything else that goes under it)
5. Loop back to 2 and repeat...

I have this working pretty much, but I am fighting 2 things: performance + weird bug that occurs only on-device (iPad3/4 ios8/9). Due to this I wanted to get some feedback on my approach. 

I'd like to ask 2 things. First, in the setup above, there are 2 options I can image for swapping the textures: either swap the textures on the sprites objects... or swap the sprites associated with them. Since it would be annoying to add/remove the wrapper sprites on each "swap" I choose to instead simply swap the texture references on the sprites. Any red flags around this? Seems ok to me. 

The 2nd question... is my PIXI setup around the high-level approach correct (using 2 renderTextures and 2 wrapper Sprites)? 

And of course, if anyone can think of a more optimal approach I'm all ears. It seems no matter how you slice it the "fade" requires touching each pixel in the buffer and therefore will be an expensive operation. The totally different approach of storing the trail history and rendering it out per frame.... no. 

Sincerely,

Michael Z.

 

 

---

How many memory are you using in your game

February 17, 2016, 1:21 am

≫ Next: Can you set the absolute position of a sprite?

≪ Previous: Fading RenderTexture

$

0

0

hi 

i'm suffering with memory

my game is using 300-400  when start.and mobile version is using 250-350

and memory is grow up if monsters or npcs is appeared .

 

memory is always insufficiet When play by ios like iphone6 or 5

 

how can i reduce memory T-T/

do you have any idea...?

 

 

 

 

 

Can you set the absolute position of a sprite?

March 11, 2016, 7:42 pm

≫ Next: Help - wordpress and pixijs - running examples.

≪ Previous: How many memory are you using in your game

$

0

0

I have a sprite within another sprite. I need to be able to drag the inner sprite, but it's offset by it's parents attributes - is the only fix to offset it again by it's parents position, scale, etc? Or is there another clever way of doing it?

 

Help - wordpress and pixijs - running examples.

March 12, 2016, 5:07 am

≫ Next: PIXI with Howler

≪ Previous: Can you set the absolute position of a sprite?

$

0

0

Hi. I need help with pixijs and wordpress.

I know wordpress has plugins for working with javascript.

But I need a good way to integrate pixijs with wordpress.

This mean to make wordpress post with running examples.

Thnak you. Regards.

PIXI with Howler

March 7, 2016, 6:52 am

≫ Next: Sprite sheet json file

≪ Previous: Help - wordpress and pixijs - running examples.

$

0

0

Hi, Is there a way how I can preload sound files with pixi for howler? I use PIXI.loader as a global preload for my game and for rendering loading bar before starting the game, but Howler use his own loader for sound files. Is there a way how I can merge it? Thanks

Sprite sheet json file

March 13, 2016, 4:59 am

≫ Next: mouse behavior change between 3.0.8 and higher

≪ Previous: PIXI with Howler

$

0

0

I'm trying to create a six frame movie. I'm at a loss for what the related sprite sheet json file should have in it. I keep seeing example code for loading the json file but not a hint for what needs to be in the file. Any good resources/examples about?

mouse behavior change between 3.0.8 and higher

March 13, 2016, 3:47 pm

≫ Next: Trim and Crop in WebGL and Compressed Textures

≪ Previous: Sprite sheet json file

$

0

0

In Pixi 3.0.8, if a Sprite (named "A") has its interactive property to true and has a function listening the "click" event, the sprites that are under "A" (with interactive to true and a function listening to click) don't fire a click event. "A" stops the propagation under it.

In Pixi 3.0.9 and higher, sprites that are under "A", fire the click event.

Is there a behavior change ? is it a bug ?

Thanks in advance

Trim and Crop in WebGL and Compressed Textures

March 8, 2016, 1:22 pm

≫ Next: Drag/drop in fix window/area

≪ Previous: mouse behavior change between 3.0.8 and higher

$

0

0

Hey guys and girls,

we are trying to get WebGL Compressed Textures to work with the texture trim/crop, but get strange effects:

Problems in WebGL:

1. DDS form a horizontally and vertically repeating pattern
2. PVR form a horizontally repeating pattern
3. Not compressed PNGs have the pixels touching the right and bottom border drag on

With CanvasRenderer the PNG gets displayed exactly the way we expected it

 

For our compressed texture conversion we:

1. Take our base image, usually PNG with lots of empty transparent space, and trim off the empty parts to each side
2. Save the trim x, y start position and the original width and height of the full texture
3. Save the width and height of the trimmed image as crop
4. Add a padding to make our texture a Power of Two size (or square for PVR)

 

Any idea what we could try to fight those problems?

See the attached example replicating the errors:

compressed_texture_padding.7z

---

Drag/drop in fix window/area

March 12, 2016, 9:31 am

≫ Next: Pixi + DragonBones

≪ Previous: Trim and Crop in WebGL and Compressed Textures

$

0

0

Hi, I'm developing my first web game and I have small problem.

Uncaught TypeError: this.constrainBackground is not a function .... on line 50

I dont know what I'm doing wrong. Any ideas? Thx

(This is about that the user can drag/drop background image only from left to right in the window (fix size window).

 

Pixi + DragonBones

July 2, 2014, 8:16 am

≫ Next: PIXI.Texture.EMPTY gets destroyed

≪ Previous: Drag/drop in fix window/area

$

0

0

Not sure if this is something that's been done already, but I've put together an adapter to run dragon bones skeleton animations with Pixi content.

 

http://www.alexh.org/pixiDragonBones/

 

The source is here if anybody would like to make use of it

 

http://www.alexh.org/pixiDragonBones/pixiDragonBones.zip

PIXI.Texture.EMPTY gets destroyed

March 14, 2016, 9:43 am

≫ Next: Change texture color

≪ Previous: Pixi + DragonBones

$

0

0

Hi,
This may not be a typical use case, but in my project I have some sprites which are created without a texture (in a sprite pool) and later on, those sprites may get destroyed.
The side effect I experienced, is that the PIXI.Texture.EMPTY property is also destroyed.
This will reproduce the problem:

var s = new PIXI.Sprite();
this.addChild(s);
s.destroy(true);
this.addChild(new PIXI.Sprite()); //rte :(

It's easy enough to work around the problem by checking whether the sprite has a texture before destroying it, but I thought I'd write this down in case anyone else gets tripped up by it!

Change texture color

March 14, 2016, 3:57 pm

≫ Next: pixijs - set script.

≪ Previous: PIXI.Texture.EMPTY gets destroyed

$

0

0

Total pixi noob here. 

I'm loading in a texture from an image file and need to dynamically change its color. The image is basically a flat wave-like shape that I want to be able to make different colors dynamically. I tried tinting a sprite but that only tints and doesn't make the color 100% opaque. 

What's the proper way to do this? Some sort of filter? I figure the answer to this is really simple, but I've poked around the API and am not seeing it. Thanks for any help!

pixijs - set script.

March 14, 2016, 5:57 pm

≫ Next: Adding extra space to texture for fragment shader

≪ Previous: Change texture color

$

0

0

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="pixi.js"></script>
</head>
<body>
   
 <script>
 var stage = new PIXI.Stage(0xFFFFFF);
    var renderer = PIXI.autoDetectRenderer(800, 600);
    document.body.appendChild(renderer.view);
    var texts = [];
    for (var ii = 0; ii < 15; ++ii) {
      
      var text = new PIXI.Text("Hello World", {font: (ii * 10) +"px Arial", fill:"black"});
      text.scale.x = 1 / (1 + ii);
      text.scale.y = 1 / (1 + ii);
      texts.push(text);
    }
      
      var scrollArea = new PIXI.DisplayObjectContainer();
      
      scrollArea.interactive = true;
      scrollArea.buttonMode = true;
      
      
     scrollArea.addChild(text);      
      stage.addChild(scrollArea);
      
      
      scrollArea.mousedown = function(data) {
        data.originalEvent.preventDefault();
        this.data = data;
        this.dragging = true;
      }
      
      scrollArea.mouseup = scrollArea.mouseupoutside = function(data) {
        this.dragging = false;
        this.data = null;
      }
      
      scrollArea.mousemove = function(data) {
        if (this.dragging) {
          var newPos = this.data.getLocalPosition(this.parent);
          this.position.x = newPos.x;
          this.position.y = newPos.y;
        }
      }
      
      text = undefined;
      function animate() {
          var t = Date.now() * 0.001;
          var scale = 1 + 14 * (Math.sin(t) * 0.5 + 0.5);
          if (text) {
              scrollArea.removeChild(text);
          }
          text = texts[Math.floor(scale)];
          scrollArea.addChild(text);
          scrollArea.scale.x = scale;
          scrollArea.scale.y = scale;
          renderer.render(stage);        
          requestAnimFrame(animate);
      }
      
      animate();
      </script>
</body>
</html> 

I put pixi.js into same folder with my source code ( the last version of pixi.js) and the source code not working.

But If I put for example this  <script src="http://cdnjs.cloudflare.com/ajax/libs/pixi.js/1.6.1/pixi.js"></script> It's working well.

Why ?

Adding extra space to texture for fragment shader

March 16, 2016, 12:24 am

≫ Next: Blending of shaders

≪ Previous: pixijs - set script.

$

0

0

Hi guys.

So I'm working on my first shader, which is a glow. Right now it sorta works but the issue is - when I put it on, say, PNG with some shape used as sprite - the shader only works on pixels that included in the PNG so I have to add empty space around shape so my glow doesn't get chopped once it reaches the edge of the texture. How do I allow for more space to be taken by the shader? Like programmatically add empty space around or something like that. I was thinking maybe it's the job for a vertex shader but since I'm a complete noob I can't really think of how to achieve that. I was hoping somebody here can share his knowledge, this seems like a pretty usual task needed for every filter that goes beyond shape's boundaries.

Blending of shaders

February 23, 2016, 1:53 am

≫ Next: Tutorial : Handling game scenes and screen scaling with Pixi

≪ Previous: Adding extra space to texture for fragment shader

$

0

0

Hi guys.

I'm new to WebGL and other related stuff and I'm learning shaders. I haven't used pixi other than creating scene with a sprite and applying my shader to it following basic examples on Pixi site and some codepen I've found. I have created the shader I want to use on the ShaderToy. What it does is it creates some cool pattern out of given color, changing it from black to white through the mentioned color. If I were to apply it to the real scene, I would use Screen blending mode (which is pretty easy when you are writing shader, just invert colors, multiply them and invert back again) - that way black would be fully transparent and white would be fully opaque. Basically, I want to create sophisticated glow with some pattern. My question is, if I don't have the background in my shader, how do I perform blending? Do I blend the sprite I used shader on instead, is it possible with pixi? If I don't want to have my sprite blended, just the glow effect - what would be the best solution? I can only think of making 2 copies of the sprite at the same spot, one fully transparent with the glow blendend in screen mode and one without any glow (my Photoshop experience suggests this  ).

I'm asking here because I plan to use Pixi and learn it, but I just started off with the shader effect since another friend of mine is working on pixi project and I want to help him with visuals.

---

Tutorial : Handling game scenes and screen scaling with Pixi

May 26, 2013, 5:22 am

≫ Next: Mask causing parent to be transparent

≪ Previous: Blending of shaders

$

0

0

This is my little contribution to Pixi : a tutorial about handling game scenes and auto scaling screen size.

 

the tutorial is not about how to make game or draw thing with pixi, it's about how to handle transitions between game screens, how to pause resume the game/scene, and how to seamlessly scale the display to fit screen resolution without handling ratios / proportions directly in your game logic.

 

I'm not a native english, so the tutorial may contain some language mistakes  ... you can help me to fix them

 

http://ezelia.com/2013/05/pixi-tutorial/

 

 

[EDIT]

btw, the tutorial is also available in french (I know there is some French developers on this forum http://ezelia.com/2013/05/tutorial-gestion-des-scenes-dun-jeu-des-transitions-et-de-la-mise-a-lechelle-avec-pixi-js/

Mask causing parent to be transparent

February 26, 2016, 5:21 am

≫ Next: Can i delete canvas code on pixi.js?

≪ Previous: Tutorial : Handling game scenes and screen scaling with Pixi

$

0

0

Hi! I've been working on a canvas game for a while, hit some performance issues I just can't get around, and am hoping Pixi is the answer. So I'm struggling a bit to learn how to implement everything I can do in canvas in Pixi. So here goes my current problem:

I need a "source-atop" replacement. I want to draw some tile, overlay it with a totally opaque red sprite (eventually it'll be transparent, but it's opaque for this proof of concept), and then mask that sprite with the original tile objects which together will form an irregular shape. I wrote some test code and had no issues, but when I bring it into my project I get a very odd behavior: the second sprite suddenly appears transparent.

Here's the code:

		this.container = new PIXI.Container();
		this.container.position.x = this.i * tileSize;

		//base sprite
		var tileTexture = new PIXI.Texture(ssTexture, new PIXI.Rectangle(ssl[0], ssl[1], 16, 16));
		var tileSprite = new PIXI.Sprite(tileTexture);
		this.container.addChild(tileSprite);

		//tile mask generated from sprite
		var tileMask = new PIXI.Sprite(this.container.generateTexture(WebGLRenderer));

		//sunlight
		var sunlightOverlay = new PIXI.Sprite(sunlightTexture);
		this.container.addChild(sunlightOverlay);

		//mask sunlight
		sunlightOverlay.mask = tileMask;
		sunlightOverlay.addChild(tileMask);

		this.level.PixiContainer.children[this.j*2+1].addChild(this.container);

And here's the behavior:

1) Draw just the tile.

2) Draw the overlay. Obviously, it will have a different shape than the first tile which is why I need to mask it.

3) This is the object that will be used as a mask for the overlay. I used generateTexture() before adding the overlay.

4) Now I set the mask to actually be used as a mask. I'm expecting a simple red square. It masks properly, but the overlay is inexplicably made transparent.

I don't know what to try here. There must be something simple I'm misunderstanding. Any thoughts?

Can i delete canvas code on pixi.js?

March 16, 2016, 8:00 am

≫ Next: Constrain drag along a path

≪ Previous: Mask causing parent to be transparent

$

0

0

hi. 

my game can't play on canvas becuase it's too heavy..
 

so code that drawn by canvas,  on pixi.js don't need..

 

so i wanna delete it....

 

can i delete it? and is it  problems?

 

Constrain drag along a path

March 17, 2016, 2:21 am

≫ Next: Wrong Drawing Sprite that Packed Image

≪ Previous: Can i delete canvas code on pixi.js?

$

0

0

Hi, how would I go about having a graphic being draggable but within a constrained area. So lets say I have a triangle and an arc. How would I be able to drag the triangle but without it leaving the bounds of the arc, to make it seem like you can only drag the triangle along the arc line. I found this library (https://github.com/SebastianNette/PIXI.draggable), which seems to do what I want, but it is awfully out of date, and throws a bunch of errors. I tried going through a few of them and update the functions according to the PIXi documentation, but I think there is just too much stuff to change there. Any help is appreciated.

Wrong Drawing Sprite that Packed Image

March 16, 2016, 3:07 am

≫ Next: How to reduce drawcall

≪ Previous: Constrain drag along a path

$

0

0

hi..

i'm creating own ui system. 

and ui background is generated by pieces of image

this is piece of image

this is genereated bg (red box is wrong drawing)

 

it happened by packed image...

hm... what can i do for this?