Top down scrolling car game, the right approach regarding camera, prerender and layers

[piranha]

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

[ivan.popelyshev]

Read the thread directly below yours, then use search for "camera" on this subforum.
1. No, its not recommended. For old devices you can of course use multiple canvases but not whole size of the map, only a "window" of 1.5x may be. But in general, dont do it. I used it in https://github.com/ivanpopelyshev/railways/ but I knew what im doing.
2.Read https://github.com/pixijs/pixi-display/wiki and https://github.com/pixijs/pixi-display/
3. There's no camera in pixi. Learn how position&pivot works, there were many threads there where I recommended position&pivot approach for camera, please use search.
4. Application is used in examples instead of creating renderer,ticker,loader and other things. https://github.com/pixijs/pixi.js/blob/dev/src/core/Application.js , usually people just make their own Application class with the game loop that they control.