Sign in to follow this  
LoudSilence

Preferred way of making Isometric view.

Recommended Posts

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.
719167718_Zrzutekranu2020-09-23145827.png.f833791af6eebee3134b5f47461b2ed1.png


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:

 image.thumb.png.e5ed092805046742dadf1797277edb37.png

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?

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

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! 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.