# JackParke

Members

14

• Rank
Member
1. ## Fixed Container Size

Good point! I was calculating the position based on the width of the container and that was "shrinking" as the children "died". The problem is: containers have no anchors so I can only position them based on the top left corner by doing: container.x = container.myX - container.width/2; And as width shrinks this shifts the entire container to the left. I could work around it but it's quite complicated with scaling and sprites of different widths. Seems to me it would be nice to have a fixed width "matrix" container which did not resize and reshape itself.
2. ## Fixed Container Size

I have a PIXI Container with several enemies inside it. Like space invaders the enemies move as a whole and I position the container to move them The problem is: as enemies inside the container "die", the parent container is changing shape and position. It seems to be resizing itself to fit how many children it has. I do not want this to happen. I've tried: 1) destroy() 2) alpha = 0 3) visible = false The alpha solution is the only one where the container does not resize but it only works sporadically. What I mean is sometimes I set alpha=0 and an enemy is still displayed. So we start out like this with the container at x=180: As soon as the left most enemy dies the container resizes and the other enemies appear to jump to the left.
3. ## Rotate a Sprite without Craziness

I did 3 years of Math at Uni incl. linear algebra so I understand that the order of transformations is important. ...but sometimes you just want a sprite to be positioned and rotate on it's center. To me that makes the order irrelevant. Sounds like it should be the default. Don't know why it works in a fiddle but not in my game. If I could just understand what I am seeing. Is there no diagram explaining how position, rotation, scale work together with anchor and pivot?
4. ## Collision detection

Code above is incorrect. Should read: 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; Correction is: ab.y + ab.height > bb.y
5. ## Rotate a Sprite without Craziness

I somehow can't reproduce the issues in a fiddle. http://cawoodm.github.io/tie-flighter/ If you look there on line 40647 I have the following line commented out: //this.pivot.set(this.width/2, this.height/2); If I uncomment it my positioning is screwed. It would seem anchor and pivot are interrelated:
6. ## Rotate a Sprite without Craziness

Still confused. This time about positioning and pivot. If I use this.anchor = {x:0.5, y:0.5} then my player object positions according to it's center: However, as soon as I set the pivot: this.anchor = {x:0.5, y:0.5} this.pivot.set(this.width/2, this.height/2); Then everything is weird again and the player is offset from where I position it. Please help understand how to "center" an object for all movement, positioning and rotation.
7. ## Rotate a Sprite without Craziness

OK, it seems that the pivot applies to the position of the object as well as it's rotation. So by default it's 0,0 the top left corner of the sprite. Whenever I set the pivot to the center of the object: this.pivot.set(this.width/2, this.height/2); I was working against my own positioning: this.x = pos.x + this.width/2; this.y = pos.y + this.height/2; By realizing the position applies to the pivot (this is not obvious from the name "pivot" ) I could correct my code: PIXI.Sprite.call(this, g.ui.sprites.bullet); this.size = new Vector(this.width, this.height); this.tag = "bullet"; this.pivot.set(this.width/2, this.height/2); this.x = pos.x; this.y = pos.y; this.dx = g.ui.width/2 - pos.x; this.dy = g.ui.height/2 - pos.y; this.speed = new Vector(this.dx/10, this.dy/10); this.rotation = Math.PI/2+Math.atan2(this.dy,this.dx);
8. ## Rotate a Sprite without Craziness

Sorry for the "craziness" but rotation of a sprite is getting me down. When I rotate my sprite it's changing it's position. I've tried with and without a pivot and there seems to be no logic. Is there any way to just change a sprite which looks like this: | into: / without getting / As you can see below: with no pivot and a varying rotation I get a different position of the bullet even though the laser is always created at the center of the player (pos). The bullet's rotation is calculated to always make it face the bullet's destination which is the center of the screen.
9. ## baseTexture from loader alias

Looks like it's PIXI.loader.resources.sprites.texture.baseTexture
10. ## baseTexture from loader alias

My sprites has no baseTexture: So it's crashing here: PIXI.loader .add("sprites", "sprites.png") .load(function() { g.ui.sprites.base = PIXI.loader.resources.sprites.baseTexture; // Next line fails as g.ui.sprites.base is undefined g.ui.sprites.player = new PIXI.Texture(g.ui.sprites.base, new PIXI.Rectangle(0, 0, 160, 110)); g.restart(); });
11. ## Extending Sprite Class

I think the last line is superfluous: beeSprite.prototype.constructor = beeSprite;
12. ## baseTexture from loader alias

How does one create a base texture from a "named" image referencing the "alias" used in loader. PIXI.loader.add("sprites", "sprites.png") new PIXI.BaseTexture.fromImage("sprites.png", false, PIXI.SCALE_MODES.NEAREST) It seems to me it would make more sense to stick to "sprites" instead of "sprites.png".
13. ## How to draw directly to a PIXI canvas?

OK, thanks for the detailed info. For now I managed now to draw directly to the canvas without the renderer clobbering it.
14. ## How to draw directly to a PIXI canvas?

I want to use PIXI only as the rendering/drawing part of a game (engine) but I also need the possibility to draw directly (for non-sprite graphics). I am able to get access to the canvas a) renderer.render() overwrites what I do (even if clearBeforeRender is false) and 2) I guess there's a better way? What is the correct way make my own renderer / plugin so I can draw directly to the canvas? Something about... PIXI.CanvasRenderer#registerPlugin