Hello,

I'm not sure if my approach of an isometric grid for a mobile game, is a good one.
Please have a look at the image.

The 100x100 grid is just for positioning the images on the grid. The background comes from the base tile and is one image and comes in different resolutions for different screen densities.

Is this even possible or a performance killer?

Also, I choosed 1 unit = 1 meter sidelength for a tile in worldspace, because I'm modeling the buildings in Blender also with a 1m reference object, to get a better sense of the dimension they would take in worldspace.

Your thoughts about it?

Thanks in advance!

Additional information:
I'm using libgdx and the default y/x plane is transformed by a transformation matrix to z/x plane. Don't know if this is common, but a blogpost (https://www.badlogicgames.com/wordpress/?p=2032) did so.

Okay, so it seems that I do not understand some tricks, how images work an isometric grid.

If you have a look at

of a finished game, it looks like there are no image tiles for the buildings. Instead, fully 2d images applied on a predefined gridspace at once.The windmill occupies 2x2 gridspace (red lines), but needs much more tiles to display the image? (blue lines)
In the violet circle, the building takes a 3x3 space on the grid. Is the image composed of tiles or one single image? Last guess I would have are 3d objects.

If I'm drawing an image

at my grid, it looks like

But it should be drawn like

Is this a camera issue or am I just to stupid to understand something major about isometric perspective?

Or has this something to do with the source image? All isometric graphics I found on the net of buildings, trees, and so on, are square images and already in isometric perspective, like the gray box. Some are a set to compose a building like seen here https://en.wikipedia.org/wiki/File:Tile_set.png, but the composed ones of that tiles doesn't look as good as for an example, an image like this one (from a 3D game)

That's what I'm trying to achieve. Bake a 2d image in isometric perspective in Blender of a building like that, and get it on the grid as a whole, occupying gridspace depends on the size of the building.

Not possible?

Thanks. I thought of something like this, but had doubts, how things later behave, when I want to select a building to interact with. But with an invisible isometric grid as kind of a logic grid, I can just check which tile is clicked and the building, who occupies it.

I like your approach of simplicity.
What I currently have, is an orthographic camera looking with direction vector (-1,-1,-1) to the origin.
A transform matrix rotates the default Y-X-Plane to Z-X by 90° around the x-axis.
So I'm not sure, if it's a good solution, to give each image of a building a transform matrix as well, to face the camera.
This seems too much, compared to your solution just working on the Y-X.
Do I complicating things?
Even though, I can't figure out the right rotation vector to face the camera as square.

Maybe I should refresh some math?
With

final Matrix4 imageFaceCameraMatrix = new Matrix4();

imageFaceCameraMatrix.setToRotation(new Vector3(0, 1f, 0), 45);

I'll get the following (not square)

I tried chaining the 2 matrices, with no success. Just discovered the multiplication methods of the Matrix4 class. Maybe there is the key to a solution.

Hello and thank you.
Had to look up, what a vertex buffer is and what it does.
I'm guessing an image is like a plane, defined by 4 vertices?
I will build that system what you suggested. It's far easier than my approach. Just want to know, how the square result would be possible with the actual system.

As you mentioned, it looks scewed. But it's the same square image I posted in my second post. So I thought I need to find a vector that displays it and all other images square to the cam.

1 hour ago, Androphin said:

I'm guessing an image is like a plane, defined by 4 vertices?

Yes, that way you can edit the matrix to move, rotate and scale an object.

With 2D games you only need to adjust the matrix to match the viewport; the art is design isometric from the start. So a 2D isometric image often acts like particles in games. With the images pointing at the camera:

I made this image in Blender to demonstrate, as you can see it looks at the camera and you only scale their matrix when you want want it to fit the viewport.

On 6/13/2018 at 11:43 AM, Androphin said:

Is this even possible or a performance killer?

Looking at your planned workflow, nothing is a performance killer there. You will need to batch images at least, some dynamic batching would be perfect.

Overdraw will be a thing with your layer system but can be avoided if you use a grid system. Although with only 3 layers, it will be a minor problem for you.

That's exactly the problem I have with my dummy image. I don't know how to adjust the image's matrix to the viewport's one.

27 minutes ago, Androphin said:

I don't know how to adjust the image's matrix to the viewport's one.

The cube image you are using there, isn't a isometric image; so using it to test your view won't help much. Instead render a cube from a 45 degree angle in Blender; using the orthographic camera.

If you are using a orthographic camera, you don't need to scale the image. So often it's better to just use a orthographic camera from the start. Else you need to project each sprite on their own.

https://github.com/libgdx/libgdx/wiki/Projection,-viewport,-&-camera

Video: https://www.youtube.com/watch?v=mLbbcoLHKqY

Edit: Video and wiki aren't the same; I just added the video, if the wiki doesn't make sense.

Setting up a orthographic camera is easy. This way you don't need to project each and every matrix each time, the camera will adjust the image when you render,

I'm using an orthographic camera. Due to the direction and position of the cam, I needed a rotation-matrix for the isometric perspective. (As described in my 3rd post)
But the image is drawn at the default y/x, because I don't apply the rotation-matrix on it.
The spritebatch's projection matrix is set to the orthographic camera's combined one.

Source code:

package com.androtest.iso;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.InputAdapter;
import com.badlogic.gdx.graphics.*;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.SpriteCache;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer;
import com.badlogic.gdx.math.Intersector;
import com.badlogic.gdx.math.Matrix4;
import com.badlogic.gdx.math.Plane;
import com.badlogic.gdx.math.Vector3;
import com.badlogic.gdx.math.collision.Ray;

public class Init extends ApplicationAdapter {

   public static final int SCREEN_WIDTH = 800;
   public static final int SCREEN_HEIGHT = 480;

   int WORLD_WIDTH = 200;
   int WORLD_HEIGHT = 200;
   float screenAspectRatio;

   Texture terrain;
   Texture squareDummy;
   Texture tex;
   SpriteBatch batch;


   public class OrthoCamController extends InputAdapter {
      final OrthographicCamera camera;
      final Plane xzPlane = new Plane(new Vector3(0, 1, 0), 0);
      final Vector3 intersection = new Vector3();
      Sprite lastSelectedTile = null;
      int zoomLevel = 0;

      public OrthoCamController (OrthographicCamera camera) {
         this.camera = camera;
      }
      final Vector3 curr = new Vector3();
      final Vector3 last = new Vector3(-1, -1, -1);
      final Vector3 delta = new Vector3();
      @Override public boolean touchDragged (int x, int y, int pointer) {
         Ray pickRay = camOrtho.getPickRay(x, y);
         Intersector.intersectRayPlane(pickRay, xzPlane, curr);

         if( !(last.x == -1 && last.y == -1 && last.z == -1) ) {
            pickRay = camOrtho.getPickRay(last.x, last.y);
            Intersector.intersectRayPlane(pickRay, xzPlane, delta);
            delta.sub(curr);
            camOrtho.position.add(delta.x, delta.y, delta.z);
         }
         last.set(x, y, 0);
         return false;
      }

      @Override public boolean touchUp(int x, int y, int pointer, int button) {
         last.set(-1, -1, -1);
         return false;
      }
   }
   OrthographicCamera camOrtho;
   OrthoCamController ctrl;
   final Sprite[][] sprites = new Sprite[3][3];
   final Matrix4 XYtoXZmatrix = new Matrix4();
   final Matrix4 imageFaceCameraMatrix = new Matrix4();

   ShapeRenderer sr;

   static final int LAYERS = 1;
   static final int TILES_X = 20;
   static final int TILES_Z = 20;
   static final int TILE_WIDTH = 30;
   static final int TILE_HEIGHT = 30;
   static final int TILE_HEIGHT_DIAMOND = 28;

   SpriteCache[] caches = new SpriteCache[LAYERS];
   int[] layers = new int[LAYERS];

   @Override
   public void create(){
      terrain = new Texture(Gdx.files.internal("tile_grass.png"));
      squareDummy = new Texture(Gdx.files.internal("b2.png"));
      Pixmap pxm = new Pixmap(2,2, Pixmap.Format.RGBA8888);
      pxm.setColor(0f, 0.5f, 1f, 0.2f);
      pxm.fill();
      tex = new Texture(pxm);

      batch = new SpriteBatch();

      camOrtho = new OrthographicCamera(WORLD_WIDTH, WORLD_HEIGHT*(Gdx.graphics.getWidth()/Gdx.graphics.getHeight()) );
      camOrtho.position.set(WORLD_WIDTH*2, WORLD_HEIGHT, WORLD_WIDTH*2);
      camOrtho.direction.set(-1,-1,-1);
      camOrtho.near = 1;
      camOrtho.far = 10000;
      camOrtho.update();

      ctrl = new OrthoCamController(camOrtho);
      Gdx.input.setInputProcessor(ctrl);

      XYtoXZmatrix.setToRotation(new Vector3(1,0,0), 90);

      //imageFaceCameraMatrix.setToRotation(new Vector3(0, 1f, 0), 45);
      //imageFaceCameraMatrix.setToRotation(new Vector3(1f, 0f, -1f), -45);
      //imageFaceCameraMatrix.setToRotation(new Vector3(1f, 0f, 1f), 30);
      imageFaceCameraMatrix.setToLookAt(new Vector3(1f,1f,1f), new Vector3(0,1,0));


      sr = new ShapeRenderer();

      for(int z = 0; z < 3; z++) {
         for(int x = 0; x < 3; x++) {
            sprites[x][z] = new Sprite(terrain);
            sprites[x][z].setPosition(x,z);
            sprites[x][z].setSize(TILE_WIDTH, TILE_HEIGHT);
            sprites[x][z].flip(false, true);
         }
      }

      for (int i = 0; i < LAYERS; i++) {
         caches[i] = new SpriteCache();
         SpriteCache cache = caches[i];
         cache.beginCache();

         int colX = 0;
         int colZ = 0;
         for (int x = 0; x < TILES_X; x++) {
            for (int z = 0; z < TILES_Z; z++) {
               int tileX = colX + x*TILE_WIDTH;
               int tileZ = colZ + z*TILE_HEIGHT;
               cache.add(tex, tileX*1.1f, tileZ*1.1f, 0, 0, TILE_WIDTH, TILE_HEIGHT);
            }
         }

         layers[i] = cache.endCache();
      }
   }

   @Override
   public void render() {
      Gdx.gl.glClearColor( 0.154f, 0.200f, 0.184f, 1f );
      Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT );
      Gdx.gl.glEnable(GL20.GL_BLEND);
      Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);

      camOrtho.update();

      for (int i = 0; i < LAYERS; i++) {
         SpriteCache cache = caches[i];
         cache.setProjectionMatrix(camOrtho.combined);
         cache.setTransformMatrix(XYtoXZmatrix);
         cache.begin();
         cache.draw(layers[i]);
         cache.end();
      }

      batch.setProjectionMatrix(camOrtho.combined);
      batch.setTransformMatrix(imageFaceCameraMatrix);
      batch.begin();
      batch.draw(squareDummy, 0, 0);
      batch.end();

      sr.setProjectionMatrix(camOrtho.combined);
      sr.setTransformMatrix(XYtoXZmatrix);
      sr.begin(ShapeRenderer.ShapeType.Line);
      sr.setColor(1, 1, 1, 1);
      sr.line(0, 0, 500, 0);
      sr.line(0, 0, 0, 500);

      sr.setTransformMatrix(new Matrix4().setToRotation(new Vector3(1,0,0),0));
      //x
      sr.setColor(Color.RED);
      sr.line(0,0,0, 500,0,0);
      //y
      sr.setColor(Color.GREEN);
      sr.line(0,0,0, 0,500,0);
      //z
      sr.setColor(Color.BLUE);
      sr.line(0,0,0, 0,0,500);

      sr.end();
   }

   @Override
   public void resize(int width, int height) {
      camOrtho.viewportWidth = width;
      camOrtho.viewportHeight = height;
      camOrtho.update();
   }

   @Override
   public void dispose() {
      terrain.dispose();
      building.dispose();
      tex.dispose();
      batch.dispose();
      sr.dispose();
   }
}