Search Results

Search found 130 results on 6 pages for 'isometric'.

Page 1/6 | 1 2 3 4 5 6  | Next Page >

  • Isometric - precise screen coordinates to isometric

    - by Rawrz
    I'm trying to translate mouse coords to precise isometric coords (I can already find the tile the mouse is over, but I want it to be more precise). I've tried several different methods but I seem to keep falling short. For drawing I use: batch.draw( texture, (y * tileWidth / 2) + (x * tileWidth / 2), (x * tileHeight / 2) - (y * tileHeight / 2)) This is what I currently use for figuring out a tile position: float xt = x + camPosition.x - (ScreenWidth/2) ; float yt = (ScreenHeight) - y + camPosition.y - (ScreenHeight/2); int tileY = Math.round((((xt) / tileWidth) - ((yt) / tileHeight))); int tileX = Math.round((((xt) / tileWidth) + ((yt) / tileHeight))- 1); I'm just wondering how I could update these to allow for more precise coordinates, instead of tile only. EDIT: Following what ccxvii said below, and removing the -1 from tileX, the object follows my mouse just like I had wanted. Just going to re-examine the math and figure out if that change will result in other messes =o

    Read the article

  • Isometric drawing "Not Tile Stuff" on isometric map?

    - by Icebone1000
    So I got my isometric renderer working, it can draw diamond or jagged maps...Then I want to move on...How do I draw characters/objects on it in a optimal way? What Im doing now, as one can imagine, is traversing my grid(map) and drawing the tiles in a order so alpha blending works correctly. So, anything I draw in this map must be drawed at the same time the map is being drawn, with sucks a lot, screws your very modular map drawer, because now everything on the game (but the HUD) must be included on the drawer.. I was thinking whats the best approach to do this, comparing the position of all objects(not tile stuff) on the grid against the current tile being draw seems stupid, would it be better to add an id ON the grid(map)? this also seems terrible, because objects can move freely, not per tile steps (it can occupies 2 tiles if its between them, etc.) Dont know if matters, but my grid is 3D, so its not a plane with objects poping out, its a bunch of pilled cubes.

    Read the article

  • HTML5 canvas screen to isometric coordinate conversion

    - by ovhqe
    I am trying to create an isometric game using HTML5 canvas, but don't know how to convert HTML5 canvas screen coordinates to isometric coordinates. My code now is: var mouseX = 0; var mouseY = 0; function mouseCheck(event) { mouseX = event.pageX; mouseY = event.pageY; } which gives me canvas coordinates. But how do I convert these coordinates to isometric coordinates? I am using 16x16 tiles.

    Read the article

  • Checking if an object is inside bounds of an isometric chunk

    - by gopgop
    How would I check if an object is inside the bounds of an isometric chunk? for example I have a player and I want to check if its inside the bounds of this isometric chunk. I draw the isometric chunk's tiles using OpenGL Quads. My first try was checking in a square pattern kind of thing: e = object; this = isometric chunk; if (e.getLocation().getX() < this.getLocation().getX()+World.CHUNK_WIDTH*World.TILE_WIDTH && e.getLocation().getX() > this.getLocation().getX()) { if (e.getLocation().getY() > this.getLocation().getY() && e.getLocation().getY() < this.getLocation().getY()+World.CHUNK_HEIGHT*World.TILE_HEIGHT) { return true; } } return false; What happens here is that it checks in a SQUARE around the chunk so not the real isometric bounds. Image example: (THE RED IS WHERE THE PROGRAM CHECKS THE BOUNDS) What I have now: Desired check: Ultimately I want to do the same for each tile in the chunk. EXTRA INFO: Till now what I had in my game is you could only move tile by tile but now I want them to move freely but I still need them to have a tile location so no matter where they are on the tile their tile location will be that certain tile. then when they are inside a different tile's bounding box then their tile location becomes the new tile. Same thing goes with chunks. the player does have an area but the area does not matter in this case. and as long as the X and Y are inside the bounding box then it should return true. they don't have to be completely on the tile.

    Read the article

  • How do I do random isometric paths?

    - by user406470
    I'm working on an Isometric city generator, and I am looking for a little push in the right direction. I'm looking to randomly generate roads on a isometric plane. I have never done pathfinding before, and I've googled it and didn't find any articles relating to what I am trying to do. Basically, my program generates a random isometric city and, I am hoping to add roads to that. Any help is appreciated!

    Read the article

  • Getting isometric grid coordinates from standard X,Y coordinates

    - by RoryHarvey
    I'm currently trying to add sprites to an isometric Tiled TMX map using Objects in cocos2d. The problem is the X and Y metadata from TMX object are in standard 2d format (pixels x, pixels y), instead of isometric grid X and Y format. Usually you would just divide them by the tile size, but isometric needs some sort of transform. For example on a 64x32 isometric tilemap of size 40 tiles by 40 tiles an object at (20,21)'s coordinates come out as (640,584) So the question really is what formula gets (20,21) from (640,584)?

    Read the article

  • HTML5 Canvas Converting between cartesian and isometric coordinates

    - by Amir
    I'm having issues wrapping my head around the Cartesian to Isometric coordinate conversion in HTML5 canvas. As I understand it, the process is two fold: (1) Scale down the y-axis by 0.5, i.e. ctx.scale(1,0.5); or ctx.setTransform(1,0,0,0.5,0,0); This supposedly produces the following matrix: [x; y] x [1, 0; 0, 0.5] (2) Rotate the context by 45 degrees, i.e. ctx.rotate(Math.PI/4); This should produce the following matrix: [x; y] x [cos(45), -sin(45); sin(45), cos(45)] This (somehow) results in the final matrix of ctx.setTransform(2,-1,1,0.5,0,0); which I cannot seem to understand... How is this matrix derived? I cannot seem to produce this matrix by multiplying the scaling and rotation matrices produced earlier... Also, if I write out the equation for the final transformation matrix, I get: newX = 2x + y newY = -x + y/2 But this doesn't seem to be correct. For example, the following code draws an isometric tile at cartesian coordinates (500, 100). ctx.setTransform(2,-1,1,0.5,0,0); ctx.fillRect(500, 100, width*2, height); When I check the result on the screen, the actual coordinates are (285, 215) which do not satisfy the equations I produced earlier... So what is going on here? I would be very grateful if you could: (1) Help me understand how the final isometric transformation matrix is derived; (2) Help me produce the correct equation for finding the on-screen coordinates of an isometric projection. Many thanks and kind regards

    Read the article

  • Detecting tile with height in isometric game

    - by Carlos Navarro
    I'm trying to create an isometric tile-based game (for iPhone) and I'm having trouble with height in tiles. What I currently do (without heights) is apply some mathematic transformations to my 2D-matrix (which represent the tiles) so that I know where in the screen (x,y) should I place the isometric tile. Then, when the user clicks somewhere in the screen, I take that values and pass them through a function (kind of f^-1) to get which tile it belongs to. This works perfectly. My problem is: imagine that I want some tiles to have a different height from others. In order to draw the tile itself its pretty simple, since the z-coordinate has no transformation in the isometric approach used in games (z'=z). BUT what if I want to calculate the tile coordinate (defined by X-tile and Y-tile) from the touch coordinates (x,y)? Any guess?

    Read the article

  • Isometric displaying two different images in different positions

    - by Canvas
    I'm creating a simple Isometric game using HTML5 and Javascript, but I can't seem to get the display to work, at the moment i have 9 tiles that have X and Y positions and the player has a X and Y position, the players X and Y properties are set to 100, and the tiles are as shown tiles[0] = new Array(3); tiles[1] = new Array(3); tiles[2] = new Array(3); tiles[0][0] = new point2D( 100, 100); tiles[0][1] = new point2D( 160, 100); tiles[0][2] = new point2D( 220, 100); tiles[1][0] = new point2D( 100, 160); tiles[1][1] = new point2D( 160, 160); tiles[1][2] = new point2D( 220, 160); tiles[2][0] = new point2D( 100, 220); tiles[2][1] = new point2D( 160, 220); tiles[2][2] = new point2D( 220, 220); Now I use this method to work out the isometric position function twoDToIso( point ) { var cords = point2D; cords.x = point.x - point.y; cords.y = (point.x + point.y) / 2; return cords; } point2D is function point2D( x, y) { this.x = x; this.y = y; } Now this i'm sure does work out the correct positioning, but here is the output Isometric view I just need to move my player position a tiny bit, but is that the best way to display my player position in the right position? Canvas P.S. the tile width is 120 and height is 60 and the player is width 30 by height 15

    Read the article

  • Isometric projection bad coordonate

    - by Christophe Debove
    I have a 2D map, for each element I apply this isometric projection to place my Sprite //Element e; float[] f= projection(e.getX(), e.getY() ,z); // x and y represent Sprite Coordonate (tile_width and height depend of my // camera size and the number of elements in x and in y float x = f[0]*tile_width; float y = f[1]*tile_height; public float[] projection(float x, float y, float z) { return new float[]{ (( x )-(y) ) , ((x/2) + (y/2) - z )}; } the sprite for one element : The result of my projection : The problem is I need to add an offset of tile_height/2 to the y and tile_width/2 to the x to have something like this (in the red rectangle I drawed with paint what I want) : Where did I make wrong? (I found the projection method in How should I sort images in an isometric game so that they appear in the correct order? )

    Read the article

  • Javascript Isometric draw optimization

    - by hustlerinc
    I'm having trouble with isometric tiles drawing. At the moment I got an array with the tiles i want to draw. And it all works fine until i increase the size of the array. Since I draw ALL tiles on the map it really affects the game performance (obviously) :D. My problem is I'm no genius when it comes to javascript and I haven't managed to just draw what is in viewport. Should be fairly simple for an expert though because its fixed sizes etc. Canvas is 960x480 pixels, each tile 64x32. This gives 16 tiles on first row, 15 on the next etc. for a total of 16 rows. Tile 0,0 is in the top-right corner. And draws X up to down and Y right to left. Going through the tiles on the first row from left to right as +X -Y. Here is the relevant part of my drawMap() function drawMap(){ var tileW = 64; // Tile Width var tileH = 32; // Tile Height var mapX = 960-32; var mapY = -16; for(i=0;i<map.length;i++){ for(j=0;j<map[i].length;j++){ var drawTile = map[i][j]; var drawObj = objectMap[i][j]; var xpos = (i-j)*tileH + mapX; var ypos = (i+j)*tileH/2 + mapY; // Place the tiles isometric. ctx.drawImage(tileImg[drawTile],xpos,ypos); if(drawObj){ ctx.drawImage(objectImg[drawObj-1],xpos,ypos-(objectImg[drawObj- 1])); } } } } Could anyone please help me how to translate this to just draw the relevant tiles? It would be deeply appreciated.

    Read the article

  • Smooth drag scrolling of an Isometric map - Html5

    - by user881920
    I have implemented a basic Isometric tile engine that can be explored by dragging the map with the mouse. Please see the fiddle below and drag away: http://jsfiddle.net/kHydg/14/ The code broken down is (CoffeeScript): The draw function draw = -> requestAnimFrame draw canvas.width = canvas.width for row in [0..width] for col in [0..height] xpos = (row - col) * tileHeight + width xpos += (canvas.width / 2) - (tileWidth / 2) + scrollPosition.x ypos = (row + col) * (tileHeight / 2) + height + scrollPosition.y context.drawImage(defaultTile, Math.round(xpos), Math.round(ypos), tileWidth, tileHeight) Mouse drag-scrolling control scrollPosition = x: 0 y: 0 dragHelper = active: false x: 0 y: 0 window.addEventListener 'mousedown', (e) => handleMouseDown(e) , false window.addEventListener 'mousemove', (e) => handleDrag(e) , false window.addEventListener 'mouseup', (e) => handleMouseUp(e) , false handleDrag = (e) => e.preventDefault() if dragHelper.active x = e.clientX y = e.clientY scrollPosition.x -= Math.round((dragHelper.x - x) / 28) scrollPosition.y -= Math.round((dragHelper.y - y) / 28) handleMouseUp = (e) => e.preventDefault() dragHelper.active = false handleMouseDown = (e) => e.preventDefault() x = e.clientX y = e.clientY dragHelper.active = true dragHelper.x = x dragHelper.y = y The Problem As you can see from the fiddle the dragging action is ok but not perfect. How would I change the code to make the dragging action more smooth? What I would like is the point of the map you click on to stay under the mouse point whilst you drag; the same as they have done here: http://craftyjs.com/demos/isometric/

    Read the article

  • Algorithm to find all tiles within a given radius on staggered isometric map

    - by kasztelan
    Given staggered isometric map and a start tile what would be the best way to get all surrounding tiles within given radius(middle to middle)? I can get all neighbours of a given tile and distance between each of them without any problems but I'm not sure what path to take after that. This feature will be used quite often (along with A*) so I'd like to avoid unecessary calculations. If it makes any difference I'm using XNA and each tile is 64x32 pixels.

    Read the article

  • Issue with distinguishing levels in isometric game

    - by Konrad
    I'm working on an isometric game however I am having trouble visually distinguishing between levels in the game. Take the example below, the first image shows concrete blocks at ground level and the following images show an attempt to build a few blocks a level above. As you can see the level above is visually swallowed the one below. I've tried shading to make lower levels darker with respect to camera, but this doesn't work that well.. any ideas?

    Read the article

  • Isometric tile selection

    - by Dylan Lundy
    I'm not all that good with Maths. I'm trying to make a function to convert mouse coordinates into a particular tile in an isometric view. All of the algorithms I have seen so far work with the X & Y axes going diagonal, my game is currently set up like this, and I would like to keep it so. Is there an algorithm so that if the mouse was at the red dot, it would return the coordinates of the tile that it is sitting on? (6,2)

    Read the article

  • Good, free isometric game engine?

    - by posfan12
    Any recommendations for a good isometric game engine that is also free? Should be possible to develop entirely using freely available tools (meaning: no Flash, and no I don't want to learn haXe...) Works-in-a-browser is a plus, but not required. Support for 32-bit images is required! Good performance. Excellent documentation. I have looked at FIFE but it is still too unfinished, and the documentation sucks! Thanks!

    Read the article

  • 2D isometric: screen to tile coordinates

    - by Dr_Asik
    I'm writing an isometric 2D game and I'm having difficulty figuring precisely on which tile the cursor is. Here's a drawing: where xs and ys are screen coordinates (pixels), xt and yt are tile coordinates, W and H are tile width and tile height in pixels, respectively. My notation for coordinates is (y, x) which may be confusing, sorry about that. The best I could figure out so far is this: int xtemp = xs / (W / 2); int ytemp = ys / (H / 2); int xt = (xs - ys) / 2; int yt = ytemp + xt; This seems almost correct but is giving me a very imprecise result, making it hard to select certain tiles, or sometimes it selects a tile next to the one I'm trying to click on. I don't understand why and I'd like if someone could help me understand the logic behind this. Thanks!

    Read the article

  • Isometric algorithm producing tiles in wrong draw order

    - by David
    I've been toying with isometric and I just cant get the tiles to be in the right order. I'm probably missing something obvious and I just can't see it. Even at the risk of looking stupid, here's my code: for (int i = 0; i < Tile.MapSize; i++) { for (int j = 0; j < Tile.MapSize; j++) { spriteBatch.Draw( Tile.TileSetTexture, new Rectangle( (-j * Tile.TileWidth / 2) + (i * Tile.TileWidth / 2), (i * (Tile.TileHeight - 9) / 2) - (-j * (Tile.TileHeight - 9) / 2), Tile.TileWidth, Tile.TileHeight), Tile.GetSourceRectangle(tileID), Color.White, 0.0f, new Vector2(-350, -60), SpriteEffects.None, 1.0f); } } And here's what I end up with: messed up map Yep, bit of an issue. If anyone could help, I'd appreciate it.

    Read the article

  • Isometric algorithm [fixed]

    - by David
    so i've been toying with isometric and i just cant get the tiles to be in the right order. im probably missing something obvious and i just cant see it... but even at the risk of looking stupid, heres my code. for (int i = 0; i < Tile.MapSize; i++) { for (int j = 0; j < Tile.MapSize; j++) { spriteBatch.Draw( Tile.TileSetTexture, new Rectangle( (-j * Tile.TileWidth / 2) + (i * Tile.TileWidth / 2), (i * (Tile.TileHeight - 9) / 2) - (-j * (Tile.TileHeight - 9) / 2), Tile.TileWidth, Tile.TileHeight), Tile.GetSourceRectangle(tileID), Color.White, 0.0f, new Vector2(-350, -60), SpriteEffects.None, 1.0f); } } and heres what i end up with delicious messed up map yep, bit of an issue. so if anyone could help, i'd appreciate it. edit* works now <_<

    Read the article

  • Getting Started on Isometric Board Game port

    - by Jehosephat
    I have developed a (off-line) board game that I would like to translate to an online/social game in an isometric grid perspective. My background is in .NET web development, so I'm very comfortable with C#, HTML, jQuery/javascript. Still getting my feet wet with HTML5. I have familiarity with Flash, but I haven't worked with it in years. I'm also interested in working with Azure for hosting the back-end. Ultimately I'd like this game to have persistent leaderboard/achievements and therefore be able to log in through FB and Kong and the like. Obviously, I'm not looking for 'here's exactly how to do all of this'. But I would love some opinions on where to start, particularly given my background and goals. Would be happy to share more details if it makes answering easier! Thanks!

    Read the article

  • Any 3D, Isometric, RPG oriented engines?

    - by Don Quixote
    I was wondering if there are any game engines out there that are oriented towards isometric, 3D RPGs such as Diablo 3, Torchlight, Magika, etc.. Most engines I found so far are either oriented towards FPS, such as Cry Engine and UDK, or are far too generic, such as the Irrlicht engine, which will add what I think is unnecessary work on the engine instead of the game. Any chance there are any engines out there that are crafted to be more suitable for RPGs? I would prefer they be in Java, since it's more my forte, but beggars can't be choosers, so C++ is great as well! Thank you.

    Read the article

  • Isometric smooth fog

    - by marcg11
    I'm working on a simple 2d game with direct3d 9. It's a isometric game with diamond tiles and a staggered map. This is what I have: As you se I have some king of fog which is acomplished by having a fog matrix which is true (clear terrain) or false (obscure terran). But the result is very chunky. The fog moves as the player moves by tiles but not by pixels. Basically I check for every tile if there is fog, if so I just change the color of that tile: if(scene->fog[i+mapx][j+mapy] == FOG_NONE) { tile_color = 0x666666FF; } I also would like the fog to be smoother, for that I followed this "tutorial" but I haven't managed to work it it out. http://www.appsizematters.com/2010/07/how-to-implement-a-fog-of-war-part-2-smooth/

    Read the article

  • Z axis in isometric tilemap

    - by gyhgowvi
    I'm experimenting with isometric tile maps in JavaScript and HTML5 Canvas. I'm storing tile map data in JavaScript 2D array. // 0 - Grass // 1 - Dirt // ... var mapData = [ [0, 0, 0, 0, 0], [0, 0, 1, 0, 0, ... ] and draw for(var i = 0; i < mapData.length; i++) { for(var j = 0; j < mapData[i].length; j++) { var p = iso2screen(i, j, 0); // X, Y, Z context.drawImage(tileArray[mapData[i][j]], p.x, p.y); } } but this function mean's all tile Z axis is equal to zero. var p = iso2screen(i, j, 0); Maybe anyone have idea and how to do something like mapData[0][0] Z axis equal to 3 mapData[5][5] Z axis equal to 5? I have idea: Write function for grass, dirt and store this function to 2D array and draw and later mapData[0][0].setZ(3); But it is good idea to write functions for each tiles?

    Read the article

  • XNA - Finding boundaries in isometric tilemap

    - by Yheeky
    I have an issue with my 2D isometric engine. I'm using my own 2D camera class which works with matrices and need to find the tilemaps boundaries so the user always sees the map. Currently my map size is 100x100 (with 128x128 tiles) so the calculation (e.g. for the right boundary) is: var maxX = (TileMap.MapWidth + 1) * (TileMap.TileWidth / 2) - ViewSize.X; var maxX = (100 + 1) * (128 / 2) - 1360; // = 5104 pixels. This works fine while having scale factor of 1.0f but not for any other zoom factor. When I zoom out to 0.9f the right border should be at approx. 4954. I´m using the following code for transformation but I always get a wrong value: var maxXVector = new Vector2(maxX, 0); var maxXTransformed = Vector2.Transform(maxXVector, tempTransform).X; The result is 4593. Does anyone of you have an idea what I´m during wrong? Thanks for your help! Yheeky

    Read the article

  • How can I cull non-visible isometric tiles?

    - by james
    I have a problem which I am struggling to solve. I have a large map of around 100x100 tiles which form an isometric map. The user is able to move the map around by dragging the mouse. I am trying to optimize my game only to draw the visible tiles. So far my code is like this. It appears to be ok in the x direction, but as soon as one tile goes completely above the top of the screen, the entire column disappears. I am not sure how to detect that all of the tiles in a particular column are outside the visible region. double maxTilesX = widthOfScreen/ halfTileWidth + 4; double maxTilesY = heightOfScreen/ halfTileHeight + 4; int rowStart = Math.max(0,( -xOffset / halfTileWidth)) ; int colStart = Math.max(0,( -yOffset / halfTileHeight)); rowEnd = (int) Math.min(mapSize, rowStart + maxTilesX); colEnd = (int) Math.min(mapSize, colStart + maxTilesY); EDIT - I think I have solved my problem, but perhaps not in a very efficient way. I have taken the center of the screen coordinates, determined which tile this corresponds to by converting the coordinates into cartesian format. I then update the entire box around the screen.

    Read the article

1 2 3 4 5 6  | Next Page >