How to reduce drawcall

March 2, 2016, 9:34 pm

≫ Next: CacheAsBitamp bug?

≪ Previous: Wrong Drawing Sprite that Packed Image

$

0

0

hi. 

how can i reduce drawcall..

first. i packed images.

    effect 2 image

    ui       1 image

    map   object 1image

                     bg 49 image( doing culling)

   char   main - 1packed

             monster - one by one

 

but my game draw call is not low  

normally 30-100 and hardly 100-1000(200 same monster use two skill(2 effect by spine))

and. i'm using pixi-particle and this is using high drawcall T-T

 

is drawcall up if container layer is complicated like following example?

for example iconObject(Container) has like following

                         - icon image - sprite

                         - count         - bitmaptext 

                         - name         - bitmaptext

                        - special button - sprite

                       - bg                    - sprite

 

how can i reduce drawcall?

please give me tips..

 

---

CacheAsBitamp bug?

March 17, 2016, 7:55 am

≫ Next: How important is not redrawing graphics?

≪ Previous: How to reduce drawcall

$

0

0

hi.


Create Sprite1 (size:100, 100), (position:x:0y:0and set CacheAsBitmap = true

Create Sprite2 (size:50, 50) and set CacheAsBitmap = true;;

add Sprite2 on Sprite1 and set position(x:30, 30);

Create Sprite3 (size::10, 10) 

add Sprite3 on Sprite2 and set position(x:0, -30);

Sprite2 Position position will be (30, 60);

is this normal?

 

if Sprite2 set CacheAsBitmap = false;, it is not happened;

 

 

How important is not redrawing graphics?

March 17, 2016, 7:27 am

≫ Next: Crunch compression and Pixi

≪ Previous: CacheAsBitamp bug?

$

0

0

Hi all.  I'm just learning pixi and I'm trying to adapt a canvas app to pixi.  In my canvas app, I had one method, drawAll().  It would loop through my data structure and draw everything to the context, even if it was exactly the same as the frame before.  I'm wondering how important it is performance-wise to reduce this sort of behavior. 
Can I clear/redraw a single PIXI.Graphics every frame and get the same 60fps?  Or should I restructure my application to keep track of a couple hundred separate PIXI.Graphics objects so that I can ignore recalculating the coordinates of all my shapes?  This would obviously be more of a pain in the ass.

 

Hope this makes sense without an example since my application is three thousand lines long.

Crunch compression and Pixi

February 5, 2016, 4:08 am

≫ Next: Best typography with WebGL renderer

≪ Previous: How important is not redrawing graphics?

$

0

0

Anyone using Crunch to squash compressed texture file size (https://github.com/richgel999/crunch) in conjunction with Pixi?
Would it be a matter of writing a middleware plugin for the resource loader? Upon decompression what would be the best way to make a Pixi texture?

Best typography with WebGL renderer

March 16, 2016, 3:29 pm

≫ Next: Creating a vertical scrollable/dragging container with buttons

≪ Previous: Crunch compression and Pixi

$

0

0

I am trying to figure out the limitations in text rendering of Pixi (or WebGL). Because I am working on a project for Smart TV, the text needs to be as crispier as possible, but I would really do with 60fps.

I opened an issue on GitHub and discovered some strange behaviours when caching to bitmap and even comparing vanilla canvas with pixi canvas rendering: https://github.com/pixijs/pixi.js/issues/2393

I get that I can't expect in WebGL the same quality of DOM rendering but I still have hope that I could get closer.

Is there some good examples, maybe retina friendly, that I could review?

 

Thanks a lot for any help!

Creating a vertical scrollable/dragging container with buttons

March 18, 2016, 2:52 am

≫ Next: Update arc

≪ Previous: Best typography with WebGL renderer

$

0

0

Hi,

What we would like to do in a game UI is that something like a vertical scrollable/dragging table which lists items e.g. some weapons.

So we create a container, then add a large image as background. And then add some items on top of background. The background image is draggable like the dragging example http://pixijs.github.io/examples/index.html?s=demos&f=dragging.js&title=Dragging and the items are set up with click event.

Thing works great except if you mouse down on a clickable item and try to drag the table. It fails since the mouse down event of the background image is not fired.

Update arc

March 17, 2016, 4:34 pm

≫ Next: performance between scale and texture size

≪ Previous: Creating a vertical scrollable/dragging container with buttons

$

0

0

Hi is it possible to update one of the properties of the arc, in the RequestAnimationFrame draw function. So I would like to update the endAngle of the arc, so that after each frame it looks like the arc is extending, getting longer.

performance between scale and texture size

March 18, 2016, 6:30 am

≫ Next: Need help implementing Quad edge Antialising

≪ Previous: Update arc

$

0

0

hi...

hi i tested with under image

code like this

<<draw 50000's buunys>>

Quote

for(var i = 0; i < 50000; ++i) {
    var spr = PIXI.Sprite.fromImage('assets/bunnys.png');                
    spr.position.set(Math.random()*1200 + 200, Math.random()*400 + 100);
    spr.scale.set(2, 2);
    stage.addChild(spr);

 

<<draw 50000's buunys_big >>

Quote

for(var i = 0; i < 50000; ++i) {
    var spr = PIXI.Sprite.fromImage('assets/bunnys_big.png');
    spr.position.set(Math.random()*1200 + 200, Math.random()*400 + 100);
    stage.addChild(spr);
}

 

this two code has same performance.. T-T

Isn't Texture size related of performance?

is only related by scale of sprite size(of vertex size)?

 

bunnys.png

 

bunnys_big.png

---

Need help implementing Quad edge Antialising

January 25, 2016, 5:20 pm

≫ Next: How can i set button without sprite on Background

≪ Previous: performance between scale and texture size

$

0

0

Within our app we are dealing with sprites that are using non transparent, rectangular power of 2 textures only.  Each texture is essentially a photograph (stretched to ensure it is pow2 in order to enable mipmapping)

Using Webgl Anti-aliasing or FXAA is not an option for us for various reasons.  Therefore in order to ensure that these sprites looks anti-aliased when rotated we render the texture to a canvas first leaving a few px wide transparent border around the edge so that the textures bi-linear filtering takes care of smoothing out the edges of these sprites.  

It works okay, but edges tend to get blurred when the sprites aren't rotated, and this is not ideal.  Therefore I have been investigating other solutions and have come across what looks to be an absolutely perfect technique, which Webkit uses to provide fast edge AA on transformed elements.  

A write up and demo can be found here:

http://abandonedwig.info/blog/2013/02/24/edge-distance-anti-aliasing.html

This is exactly what we need, and it seems fairly simple.  Expand the quad, calculate the coefficients of quad edges, finally pass them into a custom shader, which manipulates the alpha of the edges depending on the distance from the edge.

Looking at the source code for the demo looks reasonably simple and I have no problem implementing the custom shader.  But the problem I am having is with dissecting and understanding PIXI's internals around the following:

1. Where could I extract the required quad points (as can be seen in the demo code).

2. Where and how can I then pass them into the shader?

Basically I am just looking for a few simple pointers for implementing what should be quite a simple technique.  Any help, ideas or advice would be greatly appreciated.

I've also found another write up of what appears to be essentially the same process.  Although they appear to be using smoothstep to adjust the alpha of the edges of each triangle, but it does add further insight as to the process if anyone is interested:

http://codeflow.org/entries/2012/aug/02/easy-wireframe-display-with-barycentric-coordinates/
 

How can i set button without sprite on Background

March 20, 2016, 4:05 am

≫ Next: Questioning whether to use Pixi or not?

≪ Previous: Need help implementing Quad edge Antialising

$

0

0

hi.

PIXI can set button by sprite, many graphics..

 

if set button with no image on background, how can i do this?

 

 

Questioning whether to use Pixi or not?

March 20, 2016, 12:10 pm

≫ Next: Will Pixi support Nine-slicing in the future?

≪ Previous: How can i set button without sprite on Background

$

0

0

questioning whether or not to use Pixi? Just remember that the upper limit of a technology is an interplay of the technology itself and the user. I'm by no means the greatest programmer but with some help from the right people and the right technology, awesome things can be achieved: 

 

The above demo for our next game (Lux) is done 100% in browser with pixi  Better yet, a gamepad is being used to spin the camera! The final product will not be done in html5 (or at least, not only html5), as there would currently be some platform restrictions on it being in html5. Just wanted to share some Pixi eye-candy and hopefully inspiration to thoroughly explore your possibilities (especially as html5 and webgl support becomes more prevalent)

 

 

Will Pixi support Nine-slicing in the future?

March 21, 2016, 5:32 am

≫ Next: pointer.x and pointer.y on mobile

≪ Previous: Questioning whether to use Pixi or not?

$

0

0

It's an incredibly powerful technique, esp. for UI elements.

Will we see it in Pixi?

pointer.x and pointer.y on mobile

March 21, 2016, 11:34 am

≫ Next: pointer.x and pointer.y on mobile

≪ Previous: Will Pixi support Nine-slicing in the future?

$

0

0

Hi.

I'm using the tink plugin for making a small mobile game. 
I'm using the pointer.x and pointer.y properties to check if some squares in an array are hit, and this works perfectly when I test it in my browser on my computer. However, when I test the same thing on my mobile browser I can't succesfully use pointer.x and pointer.y to register where I have tapped. It seems that it registers where I tapped last instead of where I am tapping? 

Does anyone know how to get the x and y coordinates of a finger tap at the moment of the tap?

Hope somebody can help

pointer.x and pointer.y on mobile

March 21, 2016, 11:34 am

≫ Next: Pushing rectangle into array and call it by name

≪ Previous: pointer.x and pointer.y on mobile

$

0

0

Hi.

I'm using the tink plugin for making a small mobile game. 
I'm using the pointer.x and pointer.y properties to check if some squares in an array are hit, and this works perfectly when I test it in my browser on my computer. However, when I test the same thing on my mobile browser I can't succesfully use pointer.x and pointer.y to register where I have tapped. It seems that it registers where I tapped last instead of where I am tapping? 

Does anyone know how to get the x and y coordinates of a finger tap at the moment of the tap?

Hope somebody can help

Pushing rectangle into array and call it by name

March 21, 2016, 9:36 am

≫ Next: Mask on a the line of a primitive

≪ Previous: pointer.x and pointer.y on mobile

$

0

0

I'm stuck trying to get each grid square's properties through an array. My goal is to give each grid square a name location and call it by a name, but stuck at just at trying to call each grid through an array.

I thought I could push rectangle into an array and use a for loop to call each grid by this. Then, start to mess with other properties.

Calling the rectangle with an array does not work, but calling the rectangle graphic does. Having trouble troubleshooting this.

Below is my gridSetUp function.

	function gridSetUp(){
	var row;
	var col;
	var rowArr;
	var colArr;
	var fullGridRowArr = [];
	var fullGridColArr = [];
	var rowLength = 5;
	var colLength = 5;
	
		for(row = 0; row < rowLength; row++){
			for(col = 0; col < colLength; col++){
				var fullGridRect = new PIXI.Graphics();
				fullGridRect.beginFill(0xffffff, 0.25);
				fullGridRect.lineStyle(0.5, 0xFF0000, 1);
				fullGridRect.interactive = true; // new
				fullGridRect.hitArea = new PIXI.Rectangle(0, 0, 30, 30);
				fullGridRect.drawRect(0, 0, 30, 30);
				fullGridRect.endFill();
				fullGridRect.x = (fullGridRect.width + fullGridRect.x) * col;
				fullGridRect.y = (fullGridRect.height + fullGridRect.y) * row;
				fullGridRect.alpha = 0.5;
				stage.addChild(fullGridRect);
				
				fullGridRowArr.push(row);
				fullGridColArr.push(col);

// Works with shape by itself, but not when shape is pushed into array.

				// Make full grid interactive
				fullGridRect.interactive = true;	
				fullGridRowArr.interactive = true;	
				
				fullGridRowArr.click = function(mouseData){
        			//console.log('ROW : MOUSE CLICK SHAPE');
        			console.log(this.fullGridRowArr[row]);
    			};
				
				/* THIS WORKS BUT NOT THE ABOVE
				fullGridRect.click = function(mouseData){
        			console.log('MOUSE CLICK SHAPE');
    			};
				*/	
			}
		}	
	 	//Start the game loop
  		gameLoop();
	}

 

---

Mask on a the line of a primitive

March 21, 2016, 8:01 am

≫ Next: What is the best way to set a rotation center of Container?

≪ Previous: Pushing rectangle into array and call it by name

$

0

0

is it possible to set a mask on the line of a primitive? I can see that it works but only when setting a fill for the primitive. When setting just a thick line, linestyle, I can't see the mask effect.

What is the best way to set a rotation center of Container?

March 21, 2016, 11:08 pm

≫ Next: How do I create this raycast light effect via pixi? A mask maybe?

≪ Previous: Mask on a the line of a primitive

$

0

0

With sprite it's possible to use anchor, but container only has pivot. So I wrote something like this. Is it a correct approach?

The only disadvantage is I need to update it after any bounds changes, is there any simple way to improve it?

 

var px = PIXI;
Object.defineProperty(px.Container.prototype, "pivotAnchor", {
	get: function() {
		var bounds = this.getLocalBounds();
		var x = 0;
		var y = 0;
		if(bounds.width > 0){
			x = this.pivot.x/bounds.width;
		}
		if(bounds.height > 0){
			y = this.pivot.y/bounds.height;
		}
		return new px.Point(x,y);
	},
	set: function(v){
		var bounds = this.getLocalBounds();
		this.pivot.x = bounds.width*v.x;
		this.pivot.y = bounds.height*v.y;
	}});

container.pivotAnchor = new px.Point(0.5, 0.5);

l

 

 

How do I create this raycast light effect via pixi? A mask maybe?

March 21, 2016, 9:33 pm

≫ Next: Make a scrollable field

≪ Previous: What is the best way to set a rotation center of Container?

$

0

0

I'm trying to recreate the feel of this ray cast line of sight demo. I've got the core algo working great, but I'm unsure what the best way would be to render the visible area. Specifically, if you play around with the first demo on that page, you'll see that the light source can be dragged around and reveals the map. This 'revealing of the map' is what I'm trying to do. I know how to do this via canvas composite operations -- the idea here is to turn each triangle from the line of sight algo into an image and then select a composite operation to add/subtract the triangle from the background image. How do I accomplish this effect via PIXI.js?

It sounds possible via an alpha mask -- but an alpha mask is a sprite as far as I know. I could draw all of the triangles to a canvas or texture thus programatically creating the image that represents the mask, but I don't know if this is the type of thing that I can do every frame or if it would be too slow. There may be a much easier approach that hasn't occurred me at all. Any ideas?

Here is an image of an algo I've got where line of sight is calculated from a light source. So far I am using regular pixi graphics to draw and fill yellow triangles that demonstrate the visible region. My end goal is to replace the black background with art, and then have the visible area (shown in yellow) show up more brightly than the out-of-sight area (everything black). This is fundamentally similar but a bit different than what visually occurs in the linked demo above (which fully hides everything outside of the triangles, rather than having a subtle 'fog of war' effect). I would need this effect to be realtime at 60 fps.

thank you!

Make a scrollable field

March 22, 2016, 5:06 am

≫ Next: Graphics hit box

≪ Previous: How do I create this raycast light effect via pixi? A mask maybe?

$

0

0

Hey guys.

For my mobile game I need to make part of the screen scrollable (The marked space in the picture).
Does anyone have an idea on how to do that?

Thanks in advance!

scrollable

Graphics hit box

March 22, 2016, 8:15 am

≫ Next: Marching Ants / Dashed lines

≪ Previous: Make a scrollable field

$

0

0

If I have a graphics object, which is interactive, how do I increase its hit box, aka the area that listens to certain touch/mouse events. If I have a visible 5x5 px rectangle, I would like to make its touch area 50 x 50 px lets say, to make it easier to move it around via touch, without the need to press on it at exact coordinates of 5x5 px.