Quantcast
Channel: Pixi.js Latest Topics
Viewing all 3980 articles
Browse latest View live
↧

Stuggling with some 2D transforms

September 11, 2016, 6:03 am
$
0
0

I have a 2D game world which I'm displaying top-down via an orthographic projection. I have a simple camera object which manages a stage for the viewport (HUD etc) and a stage for the world (Environment, players..)

My world y-axis increases vertically, where as the screen y-axis decreases vertically. In order to translate from world coordinates to screen coordinates I need to reverse all the y position values. I was hoping there's a simple translation I could do for this but I can't figure it out. The only thing I got working kinda like how I want it is to scale y by -1 but that turns everything upside down which is definitely not what I want.

Could anyone tell me what I should be doing?

Thank you!

↧
Search

Large scene performance

September 12, 2016, 2:03 am
$
0
0

Hi, i have a simple scene in fullhd resolution, but only a few parts of the screen has to be interactive so.... Is it better solution render whole scene with pixi in 60fps or divide screen to several canvases (interactive parts) and put it into one div with speicfic css position styles? Has DOM some performance advantage? How would you proceed? thx

↧
↧

PixiJS Container with Transparent Background

September 12, 2016, 8:44 am
$
0
0

How can I create a PIXI.Container with a transparent background which I can render on top of my main stage container?

My goal is it to have 4 layers which contain PIXI.Sprites and PIXI.Texts:

layer 1 should be rendered beneath the player
layer 2 should be rendered above layer 1
layer 3 should be rendered above the player and above layer 1 and layer 2
layer 4 should be rendered above everything else for debug information

In case I can cannot use multiple PIXI.Container then how else could I achieve this effect?

↧

masking part of my transparent stage

August 4, 2016, 1:37 am
$
0
0

Ok, my project is going to be on ships2career.com .  Here is what I am doing:

I use pixijs as an overlay on Google maps. I animate ships as pixi sprites on a transparent stage but I want it to look like the ships pass UNDER a bridge. Currently I use a bitmap editor and create separate images for each bridge and render then in the pixi stage (see pic). Very inefficient and maintenance prone (When google updates satellite imagery).

I much rather specify a polygon outlining the bridge and somehow use a mask so the appropriate part of the pixi sprite ship is not rendered.

I played with masks but what I really need is the inverse of a mask I suppose but I understand that isn't going to happen unless I am prepared to change my local code (Not that I quite know how). Is there anyway I can achieve what is shown in the picture using a masking technique without the need to resort to image overlays?

bridgecrossing.jpg

↧

Precision errors in object position and dimensions

September 13, 2016, 12:16 am
↧
↧

Pixi.JS website tutorials

September 13, 2016, 12:20 pm
$
0
0

Hi guys,

The community need create more advanced websites using Pixi.js, exist any tutorial (free or not) to create websites using the canvas fullscreen with Pixi.js? For example:

- http://flashvhtml.com/

- https://runpixierun.tresensa.com/

I can't find the best way to do that, guys help please!

PD: What do you think about to create a PixiJS Market to find Pixi tools for games? Like http://market.ionic.io/

Regards, Nicholls

↧

Question about PIXI sprites

September 14, 2016, 3:20 am
$
0
0

Example:

https://jsfiddle.net/8du4erv2/2/

Things I don't understand

1) Why is the SUB bunny as big as first, because I haven't added w, h or scale for it?

2) Why is the SUB bunny positioned like that? Basic math tell's me X=200 (bunny pos.)  + X=10.5 (sub bunny), should be 210.5.

From watching in PIXI source, I see the reason is that parent matrix is added to Child. But, this makes really hard to work with nested sprites.

If I want the subBanny with default size, positioned in 10.5 in bunny, I would have to manually calculate dimension and position parameters,

so when matrix is added, it looks right? Shouldn't PIXI add parent matrix to child, only if The child already added to That parent... or something like that?

 

↧

Using ParticleContainer

September 14, 2016, 7:42 am
$
0
0

Recently I've been developing small app for raspberry pi with few sets of sprites. I used PIXI.Container as stage for rendering with MovieClip objects inside of it. And it works fine.

Then I tried to improve perfomances and changed PIXI.Container to PIXI.ParticleContainer(5000, {uvs: true }); It works fine on pc, but on pi i get error "TypeError: null is not an object (evaluating 'this.parent.transform')" which occurs in this part of pixi 

DisplayObject.prototype.updateTransform = function ()
{
   this.transform.updateTransform(this.parent.transform);
    // multiply the alphas..
    this.worldAlpha = this.alpha * this.parent.worldAlpha;

    this._bounds.updateID++;
};
 

I tested this part and it's used by PIXI.ParticleContainer and not PIXI.Container and i was wondering can i somehow avoid using this part of code 

↧
Search

Animating mask that's a Graphics Shape

September 14, 2016, 10:25 am
$
0
0

Hello

I have a sprite object with an image that is using a graphics shape as a mask and I'm trying to animate the width of the mask but nothing is happening. When I check bounds of the mask everything results in (0,0,0,0) however I remove it from being as mask I get the correct bounds. I cannot seem to figure out what's going on. Any ideas? 

var texture = PIXI.Texture.fromImage('_assets/s3/test1.jpg');
var sprite = new PIXI.Sprite(texture);
sprite.width = 500;
sprite.height = 500;
sprite.interactive=true;
sprite.on('mousedown', on_down);
stage.addChild(sprite);

var masker = new PIXI.Graphics();
masker.beginFill(0xFF0000, 1);
masker.drawRect(0, 0, 200, 200);
masker.endFill();
stage.addChild(masker);
sprite.mask=masker;

function on_down(){
console.log( this.mask.getBounds() ); //returns all 0,0,0,0
TweenLite.to( this.mask, {width:500});//does nothing

}
Quote

 

 

↧
↧

Help me with pixi 3.0.11 bounds problem

September 15, 2016, 6:24 am
↧

How to run requestAnimationFrame when tab run in background

September 16, 2016, 5:05 am
$
0
0

I need animation renderer run in background.How to do it except use setTimeout.

↧

How to allow touchstart events to fire from multiple display objects?

September 16, 2016, 3:54 am
$
0
0

Setup:

  1. There are multiple display objects which are at the same level on the scene hierarchy graph.
  2. These display objects have overlapping hit areas (e.g. they are near each other and/or the hit areas are large)
  3. The user touches the area where the hit areas intersect

It seems that pixi will trigger the touchstart event on only one of these display objects. How do I get the event to fire on both?

My Goal:

I have multiple objects which the user can drag around the scene. However, I want to allow the user to be quite inaccurate with their finger, so that if they attempt to drag an object which is near, AND there is no object directly underneath their finger, that object will be picked up successfully. If there are multiple object near the event, then the closest one should be picked up. This is the motivation for the above question.

↧

Any ideas on this rendere.destroy bug

September 16, 2016, 6:43 am
↧
↧

Drag and Pivot question - To simulate Fabric.js

September 16, 2016, 1:06 pm
$
0
0

Hi guys,

Dragging a sprite, the pivot does not change position, How I can update the pivot of other Sprites? http://phaser.io/sandbox/Uwipmwxr/play

if I move the "topLeft" sprite, I want the "topRight" sprite move the same distance upward based on the central point like rectangle

if I move the "topLeft" sprite, I want the "bottomLeft" sprite move the same distance to the left based on the central point like rectangle

PD: I want to simulate Fabric.js with pivots, check my example => http://codepen.io/jdnichollsc/pen/KgdRvV

Can somebody help me? :)

Thanks in advance, Nicholls

↧

how to manage multitouch with Pixi 4.0.1

September 16, 2016, 6:44 am
$
0
0

Hello :)

I am using Haxe with pixi v4, previously v3 (3.1.2).

We can catch a pixi.interaction.EventTarget from a registered touch event listener.

In the previous version, we could identify the touch thanks to the EventTarget::data.identifier property (member of InteractionData).

The identifier property doesn't exist anymore with v4, does it ? Is there an alternative mechanism to distinguish a touch event from another ? (ie player 1, player 2, ...)

I believe I could handle the problem, managing a collection of registered "touchdown" event. If a "touchmove" occures, I can associate it to the nearest registered position. If a "touchup" occures, I can remove the nearest registered position (this is theoric, I now there would be some cases to solve, ie a position disappears without a "touchup")

But, no need to code this if there is a technic, a pattern to use to manage multitouch ... any idea ? thx :)

↧
Search

How do do right click on a Container

September 17, 2016, 10:04 am
$
0
0

Hey folks, first post etc.

I'm trying to make a minesweeper clone, and I want to be able to right click on a tile sprite to 'flag' it, but I can't figure out how to make a right click trigger an actual click event instead of opening the context menu.  I tried adding a custom `contextmenu` handler to the canvas itself to prevent the context menu from opening, but that stiff didn't trigger a click event, as https://github.com/pixijs/pixi.js/issues/36 makes me think it should.  The handler I used was this:

  

function contextmenu_handler(event) {
    console.log('right click!');
    return false;
}

very simple, and that did intercept the right click (no context menu opened), but as I said, no mouseup or mousedown event on the Container object.

I tried googling a bit to find a solution, but I couldn't find anything relevant, aside from the issue I linked earlier.  Is this just not something I can do with pixi (or in a web-based game)? Or am I missing something?

↧

MovieClip frames from multiple textures

September 19, 2016, 4:17 am
$
0
0

function createFrames(data) {

      var frames = [];

      for(var k=0; k<20; k++) {
                    frames.push(new PIXI.Texture(PIXI.loader.resources['image1.png'].texture.baseTexture, 
                    new PIXI.Rectangle(firstFrames[data + k][2], firstFrames[data + k][3], firstFrames[data + k][0], firstFrames[data + k][1])));
       }

}

This is basic way for creating frames for MovieClip from one texture and one spritesheet json. Is there any way to combine two textures to get one frame in which one texture lays on top of the another.

 

↧
↧

Convert Gradient Shader to 4.0.1

September 19, 2016, 2:39 pm
$
0
0

This gradient shader works great on 3.x: 

precision mediump float;

varying vec2 vTextureCoord;
uniform vec3 topColor;
uniform vec3 bottomColor;

void main(void) 
{
	vec3 difference = (topColor.xyz - bottomColor.xyz) * vTextureCoord.y;

	gl_FragColor.r = topColor.x - difference.x;
	gl_FragColor.g = topColor.y - difference.y;
	gl_FragColor.b = topColor.z - difference.z;
	gl_FragColor.a = 1.0;
}

However, on 4.0.1 it colors the sprite black instead of with the desired gradient.

I know that filters were changed in 4.0.1 but I have yet to find any sort of documentation describing how they were changed. As such, I have no idea how to get my gradient shader working again. Any help would be greatly appreciated.

↧

How to use sprite sheet with MovieClips?

September 20, 2016, 3:27 am
$
0
0

Hi,

I'm banging my head against the desk try to get spritesheets working in PixiJS.  When I began the project, v3 was still current so I'm hoping to stick to that version just to get this project out the door.

So, rather than use a JSON file, I'm opting to just loop through creating frames from a single image.  I've already found a few posts here and elsewhere on how to do it, but the end result is not working.  I'm scratching my head as to what I'm missing.  All I get is the first frame.

I'm loading all textures using the PIXI Loader then basically using this script: 

var base = PIXI.utils.TextureCache[ "img/spritesheet.png" ];

var aryTextures = [];

var frameWidth = 525;
var frameHeight = 700;

var i = 0;
var length = 12;

var col;
var row;
var colMax = 12;

for ( i; i < length; i++ ) {

	row = Math.floor( i / colMax );
	col = i - row * colMax;

	var texture = new PIXI.Texture( base );
	var rect = new PIXI.Rectangle( frameWidth * col, frameHeight * row, frameWidth, frameHeight );
	texture.frame = rect;

	aryTextures.push( texture );

}

var mc = new PIXI.extras.MovieClip( aryTextures );
mc.loop = false;
mc.onComplete = function() { /*do stuff*/ };
myStage.addChild( mc );

mc.gotoAndPlay( 0 );

Still on my first project with PixiJS, so sorry for my noobiness!

Thanks!

↧

Positioning MovieClip frames

September 20, 2016, 8:17 am
$
0
0

Is there a way to position every frame with different positions in MovieClip in case where frames are different sizes. As much as I explored, I couldn't find a way, because frames created with new PIXI.Rectangle have only x,y (which is frame position on spritesheet) and width and height.

↧
Viewing all 3980 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>