Hi
Been working on a top down car game for quite a while and creating my own render using 2d canvas. Looked at pixiJS and decided to update the render with that to get the benefit from webGL and perhaps other nice useful features that I don't know about yet.
I create tiles in photoshop, draw the map in many layers in Tiled and then in my game I pre render all background layers and my foreground layers into 2 large canvases stored in memory which I then use to draw what the player sees based on my camera that is tracking the hero.
Now that I'm switching to pixiJS I'm confused about a couple of things. I've been searching, and going through some great tutorials, explanations and documentation but still feel I want to ask for some help here.
My current setup is that I do the same prerender as before and then add my background and foreground as sprites like this:
this.layers[zLevel] = new pixiJS.Sprite(pixiJS.Texture.fromCanvas(this.offScreenCanvas[zLevel]));
if (zLevel === 'background') {
this.layers[zLevel].zOrder = 20;
} else {
this.layers[zLevel].zOrder = 10;
}
this.pixiApp.stage.addChild(this.layers[zLevel]);
Question 1: Is this approach recommended (I know this consumes memory and if the map is too big I'll need to split into smaller chunks) ? I'm also confused about sprite vs texture. I could not get my background to show up unless I turned it into a sprite.
Question 2: How do I control which layer is on top of the other? I tried in this example to place background above foreground but that didn't work. My cars should be positioned between background and foreground, how do I accomplish that?
In my old version I draw my layers like this:
this.ctx.drawImage(
this.preRender.offScreenCanvas[zLevel], // image
camera.x, // source x
camera.y, // source y
camera.width, // source width
camera.height, // source height
0, // target x
0, // target y
camera.width, // target width
camera.height // target height
);
Question 3: How should I approach the camera in pixi? It seems like I should just change x and y of my background sprites to accomplish the same effekt. Is that the right approach?
Question 4: When looking at the examples in pixijs: http://pixijs.github.io/examples/#/basics/basic.js or kitty kat attack tutorial: https://github.com/kittykatattack/learningPixi#introduction I keep seeing thing things done different all the time. is one of them out of date? For example in kittykatattack they call renderer.render at the end of each example.
/piranha