Preferred way of making Isometric view.

[LoudSilence]

First of all, I'd like to say Hi for everyone as it is my first post here and also thank @ivan.popelyshev for great support on this forum!

Back to the topic, I'm making an isometric game with build an island. I'm using my own ECS typescript engine and Pixi.js for renderering.

Also for speeding up development i chose pixi-viewport as a camera and user interaction plugin.

I read some info about isometric view but can't tell if one approach is better than the other for making it in pixi.js

I observed the first one is the most popular, just scaling by half Y axis at the viewport container
 

this.CoreEngine = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  resolution: 1,
  resizeTo: window,
  antialias: true
});

this.Viewport = new Viewport({
  screenWidth: window.innerWidth,
  screenHeight: window.innerHeight,
  worldWidth: 2000,
  worldHeight: 2000,
  interaction: this.CoreEngine.renderer.plugins.interaction,
  noTicker: true,
  ticker: this.CoreEngine.ticker
});

this.Viewport.setTransform(0, 0, 1, 0.5);

And then when making some sprites / graphics rotate them by 45deg.

But the same result i can make doing Viewport transformation by creating custom matrix.

this.CoreEngine = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  resolution: 1,
  resizeTo: window,
  antialias: true
});

this.Viewport = new Viewport({
  screenWidth: window.innerWidth,
  screenHeight: window.innerHeight,
  worldWidth: 2000,
  worldHeight: 2000,
  interaction: this.CoreEngine.renderer.plugins.interaction,
  noTicker: true,
  ticker: this.CoreEngine.ticker
});

const Mat = new PIXI.Matrix();

Mat.rotate(Math.PI / 4).scale(1, 0.63);

this.Viewport.transform.setFromMatrix(Mat);

This way i dont need to rotate sprites and graphics because as i understand the whole system is changed from cartezian to somewhat izometric in the viewport container.
With additional sprites it looks like this:

 

My question is, which approach is preferred which one is more optimized? 
I can predict that Viewport functionality can be changed when i trasforming its matrix (camera can be crazy), so maybe i should do this on PIXI.stage instead of Viewport container?

[ivan.popelyshev]

Thank you!

> My question is, which approach is preferred which one is more optimized? 

Same speed.

There's no such thing as "PIXI.stage". Stage exists only for pixi-layers plugin in case you need special capabilities regarding layers.

The real problem is number of tiles that you draw , and there are many tilemap-related discussions in this subforum.

Personally, I favor y/=2 approach, the one you mentioned.

Edited September 23, 2020 by ivan.popelyshev

[LoudSilence]

Thanks a lot for speed of light fast answer! 

For performance with big numbers of tiles I want to use quadtree algo with addition to my ECS, and make sprites visible=false when they are not on the screen. But in that topic i will read some more information first! 

[ivan.popelyshev]

 

https://github.com/pixijs/pixi-tilemap/issues/86

https://github.com/pixijs/pixi-tilemap/issues/82