Home > xna > Rendering tiles on 3/4 perspective

Rendering tiles on 3/4 perspective

September 23Hits:1

Using a 3/4th perspective, I'm trying to create a way to render cliffs where nothing is overlapped, and it creates an accurate representation of the elevation. This is a rough mockup of how it might look in-game:

Rendering tiles on 3/4 perspective

The way the tile data is organized is by layer. Each elevation has a layer class which holds all of the ground data for that specific layer, and all unoccupied space is simply null in the array. I can't seem to come up with a way to render the data so it would look something like this. I've thought about rendering from highest to lowest elevation, the other way around, etc. All entailed a situation where something is getting overlapped that shouldn't be.

What's the best way to do this?


I suggest that you draw the top rows [on the screen] first, and build up from the ground, overwriting the higher rows as you draw those tiles (you'll have to traverse the upper layers as you do this, but that should be easy as the X and Y will remain unchanged), and do so until all rows are completely drawn for you.

You can even loop beyond the bottom and just draw other things that are higher up even though their corresponding ground tiles are off the screen (creating a sense of even more depth for your scenes as your players navigate in any direction).

Additionally, if alpha-blending (transparency) mode is support, and if your character is always positioned in the centre of the screen (e.g., because the background scrolls when the player's character moves), you could also use transparency effects (with alpha-blending) when drawing the tiles that would block the view of the character (so the player can see what's going on), and gradually reduce this transparency effect with each tile that is further away from the character (80% transparency for the blocking tile, 60% for the next ones, 40% for the ones outside of that, then 20% outside of that, and finally 0% for all the rest).

I don't know if it's important to how your game works to actually make the tile have depth information or just APPEAR to have depth. If appearing to have depth is ok, then here's the way I addressed this in my tile engine:

Each map has a two-dimensional array of MapCell objects. A MapCell can be thought of as a "tile slot" in that it represents an area on the map where a tile would be drawn.

Now, each MapCell has two (it could be more, but I only use two) MapCellLayer objects. The first MapCellLayer object is always defined, but the second one is optional (i.e. often == null).

A MapCellLayer can have up to five Tile objects. Tile objects represent the actual tiles being drawn to the screen and hold a reference to the tile index from the tilesheet. The reason there are five Tile objects is because of how they're drawn and used. They're set up like this:

  1. Ground - This is the base tile, it's drawn on the screen first and appears below all other tiles in the MapCell and the players.
  2. Mask 1 - This tile is drawn second (if it exists) and provides a way to add tiles with alpha transparency over top of the ground tile. It's drawn below the player.
  3. Mask 2 - This is exactly the same as the Mask 1 tile except it's drawn after to allow for even more control of the map by overlaying more tiles.
  4. Fringe 1 - This tile is drawn after Mask 2 and is effectively the same as Mask 1 with the only exception being that it is drawn OVER the player. Players get drawn between Mask 2 and Fringe 1.
  5. Fringe 2 - You may have guessed it already, but this is the same as Fringe 1, but drawn over it.

My draw call works like this:

Loop through all the MapCells within the camera's view.
   Loop through all MapCellLayers for the current MapCell
      If the layer exists
         Draw the Ground tile if it exists
         Draw the Mask 1 tile if it exists
         Draw the Mask 2 tile if it exists
         Draw the Player on the tile if any
         Draw the Fringe 1 tile if it exists
         Draw the Fringe 2 tile if it exists
      End if layer exists
   End MapCellLayer loop
End MapCell loop

A few notes:

  • If you you build your maps with this system, you can create some advanced looking terrain features with the right tileset. See my example pictures below.
  • The point of the MapCellLayer is so that I can have areas where two players occupy the same cell but one is above another one such as on bridges or inside houses (i.e. first and second floor, although inside houses I only draw the MapCellLayer that the player is on).
  • I don't actually draw the players in the tile loop, I just wanted to make it simple. I actually make use of SpriteSortMode.FrontToBack so that each layer has it's own values and gets drawn in the correct order. The player/npc loop is then done separately. I recommend this method especially if your players/npcs are larger than a single tile.

Here's some example pictures from one of the maps in my game. I've taken screenshots working up from drawing only Ground tiles to all tiles up to Fringe 2. The player is stationary.

Ground Rendering tiles on 3/4 perspective

+ Mask 1 (Note the use of transparency on the bushes and tree roots.) Rendering tiles on 3/4 perspective

+ Mask 2 (Note the ladder being drawn over the rock wall from Mask 1.) Rendering tiles on 3/4 perspective

+ Fringe 1 (Note that the player is being drawn behind the tree.) Rendering tiles on 3/4 perspective

+ Fringe 2 (Note how the branches of the pink tree on the right now overlap the ones from the tree on the left.) Rendering tiles on 3/4 perspective

I hope this helps you. Let me know if you have any questions.

I would calculate the visible portion when rendering each block so that you only ever render each screen block once.

I would implement it something like this:

TileImage GetTileImage(int screenx, int screeny)
  for(int height = layers.count - 1; height >= 0; height--)
    //translate height down the screen to get the correct block
    TileImage image = layers[height].GetTile(screenx,screeny-height);
    if(image != NULL)
      return image;
  //If we got here no tile makes up this screen tile, handle accordingly

So what this code does, is start off at the max height layer, and looks for a tile at X: ScreenX Y: ScreenY - Height

As the block that shows at screen position 5,5 at height 3 is actually at word position 5,2

So the loop will search from the top height until it finds a block for that screen coord.

Hope this makes sense.

So in your rendering loop you would loop over x and y in screen coords and call GetTileImage() once per image square.

Tags:xna, tiles

Related Articles

  • Rendering tiles on 3/4 perspective

    Rendering tiles on 3/4 perspectiveSeptember 23

    Using a 3/4th perspective, I'm trying to create a way to render cliffs where nothing is overlapped, and it creates an accurate representation of the elevation. This is a rough mockup of how it might look in-game: The way the tile data is organized is

  • Rendered tiles look stretched

    Rendered tiles look stretchedMarch 12

    I've setup a tile rendering system based on Mapnik + PostGIS. When I open the data with QGis directly from PostGIS it looks fine; but when I attempt to generate tiles with Mapnik they look stretched (notice that this issue only appears when the rende

  • Java libgdx Game Screens and rendering tile map April 29

    I'm working on a 2D tiled game with Java and libGDX. I'm having problems implementing gamescreens. I'm trying to set the screen to gameScreen and start rendering tiles, but I'm getting a nullpointer exception on my camera and my renderer. I think wha

  • How can I determine the first visible tile in an isometric perspective?

    How can I determine the first visible tile in an isometric perspective?October 11

    I am trying to render the visible portion of a diamond-shaped isometric map. The "world" coordinate system is a 2D Cartesian system, with the coordinates increasing diagonally (in terms of the view coordinate system) along the axes. The "vi

  • how can i use openlayers to use my locally rendered tilesFebruary 6

    I've been stuck on how to use my local tiles which i rendered with mapnik's generate_tiles.py and all the data is on postgresql. I'm kinda confused on what i should do to "feed" the tiles to openlayers. The map would be used in django btw. hopin

  • Rendering tile maps for mobile devicesOctober 6

    Hitting a bit of a roadblock with my game's development and I'm just looking for some outside advice. I'm trying to render a tilemap for my mobile game (Android) and I'm using LibGDX. Now, here's the issue. Using my simplified version of LibGDX's own

  • How do I convert OSM XML to rendered tiles for offline use?September 27

    I'm new to OpenStreetMap and I'm trying to figure out how to process an OSM XML file and create map tiles for offline use. I already have the OSM XML file downloaded; I just don't know what to do next. Once I have the tiles, I'll be displaying them i

  • OpenStreetMaps Local Server: Mapnik not Rendering Tiles

    OpenStreetMaps Local Server: Mapnik not Rendering TilesJuly 22

    Introduction: I've built a local OSM server following this guide https://switch2osm.org/serving-tiles/manually-building-a-tile-server-14-04/. I've gotten through the guide just fine, and the server appears to be rendering because when I type: <my ser

  • Self rendered tiles don't look the same as on the OSM website

    Self rendered tiles don't look the same as on the OSM websiteNovember 30

    I have generated my own tiles for part of the Great Britain using the osm.pbf file from here [1] and the style sheets from here [2]. I'm using Mapnik version 3.0.9 and generating the tiles using the polytiles.py script from [3] As I understand it the

  • Duplicated place names when rendering tiles with mapnik and mod_tile

    Duplicated place names when rendering tiles with mapnik and mod_tileJanuary 14

    So I am trying to render all the tiles for the state of Florida with the file generate_tiles.py that came with mapnik. The tiles are rendering, but erroneously including multiple city names (see below). Does anyone know how to fix this? -------------

  • Calculate bounding box + buffer for rendering a map tile with mapnik library

    Calculate bounding box + buffer for rendering a map tile with mapnik libraryAugust 2

    Mapnik library has a Projection object (I'm using Python bindings): spherical_mercator = '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m [email protected] +no_defs +over' p = mapnik.Projection(spherical_mercator

  • Tile server with dynamic mapnik rendering, caching, and pre-emptive renderingSeptember 9

    I've been making some pretty (but computationally expensive) tiles with TileMill and I'd like to serve them up. First, I served them straight from TileMill. Every tile gets rendered dynamically, which is simple, but slow. Next, I exported a region as

  • Map tiles rendering from local map server to diskDecember 4

    I am looking for a solution for following use-case: I need to run a local map server using OpenStreetMap (OSM) data Map server needs to be able to render a set of map tiles to local directory on disk(TMS scheme) Input parameters for tile rendering sh

  • How to cache and server pre-rendered vector tiles in pbf format?December 11

    I want to serve vector tiles server in pbf format. For that I used Mapnik-vector-tiles which is bundled by avecado. Using avecado_server i can render pbf tiles on the fly using ./avecado_server -b 2 test/xml/vector_imposm_nocollect.xml 7789 But the f

  • DPI Dependent OSM Tile Rendering

    DPI Dependent OSM Tile RenderingJanuary 20

    We have built an OSM Tile Server following the instructions at http://switch2osm.org/serving-tiles/building-a-tile-server-from-packages/ The tile server is rendering tiles, but the street names on the tiles are not readable on high DPI devices, e.g.

  • QGIS imported geotiff rendered as perspective view, how to change to topJuly 28

    I've created a GeoTiff that should have GPS coordinates in it using AgiSoft. When I load it into QGIS, it renders the image in a perspective and I want to always see the image from the "top" down. When I split the GeoTiff into bands, I get a top

  • How to build tile server from Openstreetmap data for beginner?February 6

    I am a beginner at GIS and I am developing a Java Application which needs a map. (The map would specifically be of just one city in the Philippines.) I have researched on different ways to do this and I have found that I will need a tile server to pu

  • How does the new iPad's A5X graphics processor affect PDF rendering speed?March 11

    How much, if any, has the new iPad has gained in PDF rendering speed with the A5X processor (quad-core graphics)? --------------Solutions------------- I care a lot about PDFs because as a lawyer I have to review a lot of scanned documents. The perfor

  • Drawing lots of tiles with OpenGL, the modern wayJune 9

    I'm working on a small tile/sprite-based PC game with a team of people, and we're running into performance issues. The last time I used OpenGL was around 2004, so I've been teaching myself how to use the core profile, and I'm finding myself a little

  • How to add a "metro" looking tile for a desktop application?

    How to add a "metro" looking tile for a desktop application?October 26

    Desktop applications pinned to the new Windows 8 start menu have the icon centered inside the tile and a default background color (like in the left image). Is there any way to make a "metro" looking tile (like in the right image) for a desktop a

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.491 s.