I'm working on an iOS game that uses a Cocos2d TMXTiledMap to read isometric maps produced in the Tiled Application.
In Tiled you can add properties to each image in a tileset (ie. the images displayed in the lower right corner of the screen)
It makes sense to me to use these properties to help determine whether or not this tile type is traversable by the game character.
For instance, if tile 3,5 is using an image of grass then land-based characters can walk there.
Conversely, if tile 4,8 is using an image of water then land-based characters cannot walk there.
I had hoped to accomplish this by creating a property on the grass and water tiles called terrain_type that would be 0 for land and 1 for water. Then (I had hoped) I could access tile 3,5 at runtime and somehow know that tile 3,5 used the grass image with the property of terrain_type=0
Now, I realize that there are other techniques available to accomplish the same thing (Object Layers come to mind) but this seems like the best way to go about it. Especially when you add multiple tile layers and you want to know that say tile 3,5 has both grass AND a wall on it.
My questions: Is this possible? And how would I go about it. Or, am I misunderstanding something about how Tiled and TMXTiledMap are supposed to work?
Much appreciated...
Amazing. I spent a lot of time trying to get this to work before I posted the question and, of course, I figured it out a few hours later. The key is to use the CCTMXMapInfo class.
Anyway, here's the solution since I think this could be useful to others:
In the Tiled application create a map that has a tile layer named
"bottom"
Add a property to each tile image in the section called
"Tilesets" (bottom right corner) by right clicking on each image and
selecting "Tile Properties"
Name the property "terrain_type" and set the value to whatever you like (e.g. terrain_type = 0 for land or terrain_type = 1 for water)
Use these images to paint your tilemap and save
Use this code to read the properties for a single tile at location 3,5:
//read the tile map
TMXTiledMap *tileMap = [CCTMXTiledMap tiledMapWithTMXFile:#"sample_map.tmx"];
//get the bottom layer from the tileMap
CCTMXLayer *bottomLayer = [tileMap layerNamed:#"bottom"];
//get CCTMXMapInfo object -- TMXTiledMap DOES NOT Contain the tile image properties
CCTMXMapInfo * mapInfo = [CCTMXMapInfo formatWithTMXFile: #"sample_map.tmx"];
//get tile id of the tile image used at this coordinate (3, 5) in this layer
int tileID = [bottomLayer tileGIDAt: ccp(3, 5)];
//get the properties for that tile image
NSDictionary *properties = [mapInfo.tileProperties objectForKey:[NSNumber numberWithInt:tileID] ];
//get the terrain_type property
NSString *terrainType = [properties objectForKey:#"terrain_type"];
Related
I want to add a 3d marker for showing cars on map with rotation like Uber does but I can't find any information on adding 3d objects on Google Maps SDK for iOS.
Would appreciate any help.
Apparently no one is seeing what OP and I are seeing so here's a video of a Uber car turning 90 degrees. Play it frame by frame and you'll notice that it's not a simple image rotation. Either Uber went through the trouble of doing ~360 angles of each vehicles, or it really is a 3D model. Doing 360 images of every car seems foolish to me.
From what I can tell, they are not using 3D objects. They are also not animating between 400 images of a car at a different angle. They're doing a mix of rotating image assets and animating between ~50-70 images of a car at different angles. The illusion is perfect because it really does look like they used 3D car models !
Look at this GIF of a Uber car turning a corner (Dropbox link):
We can clearly see that that the shadow and the car's view angle doesn't update as often as the car's rotation.
Here I overlaid 2 images of the car at different angles, but using the same car image:
We can see that the map is rotated ~5 degrees but the car image is perfectly clear because it hasn't changed, it was simply rotated.
Uber just released a blog post documenting this.
It looks like the vehicles were modeled in 3D software and then image assets depicting different angles were exported for the app. Depending on where the vehicle is on the map and its heading then a different asset is used.
First, they are NOT 3D Objects if that's what you referring to (It's possible to create one though, but waste of time) They are simply 3D image created in Photoshop or Illustrator (Mostly) that have 3D perspective (It's also retina optimized, that's why it looks very clear).
The reason you see that the car is rotated its because the UIImageView that the image is being held into is rotated (using CABasicAnimation mostly) using calculation base off of 3D device position (Same technology use for running apps to track your location etc), which you can use Core Location to retrieve that data.
It's a proccess, but very doable. Good Luck!
Thanks All answers are valid.
if you want you can see the video running, how it works
You can generate sprite sheet ( around 60 ) tiles
How i implement it and tools you need
3d source car model.
blender, animate camera using path animation elipse.
camera rotate around of car from top to bottom view
render 3d marker using sprite generated with blender, for angles use bearing change on location updates.
Your vehicle needs to be rendered to support most screens, so the base size for each tile was 64 px and I was scaling according to the dpi of the screens
Result implementation:
https://twitter.com/ronfravi/status/1133226618024022016?s=09
I believe a pair of marker images, one is the real marker, and another one is a darker blurry shadow can do the trick in a cheaper way. Putting the shadow marker beneath the marker, shifting X & Y axis to an amount where you feel the shadow would be put appropriately, and finally moving them as well as rotating them (on web version, you may need separate rotated images) at the same time should be able to [re]create the illusion.
As #Felix Lapalme already explained it beyond any easier, am not diving any deeper into explaning it.
check out my repo
I used a dea model and turned it according to the heading variable
https://github.com/hilalalhakani/HHMarker
I achieved this in Xamarin by rendering three.js in a webview then sending the image buffer directly to the marker instead of drawing it to the screen. It only took a couple of days, and for my use case it was needed because I want the drivers to be able to change the color and kind of car, but if this is not the functionality you need you're better of just using a sequence of rendered images.
If you want to Rotated your image as the marker. Want to show a moving object you can use .git image. It would be help full for you.
Swift 3
let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
//Rotate a marker
let degrees = 90.0
let london = GMSMarker(position: position)
london.title = "London"
//Customize the marker image
london.icon = UIImage(named: "YourGifImageName")
london.groundAnchor = CGPoint(x: 0.5, y: 0.5)
london.rotation = degrees
london.map = mapView
For more info Please check here
I want to have a vector layer with 16 tiles - 4 by 4 and fill every tile with image.
I have problem with coordinates - as image is flat - I don’t know how to calculate them from 0,0 (top left corner) to for example 1023,1023 (bottom right corner)
This is first step to displaying images in hight-resolutions. I have also backend that can serve small pieces of image (almost 1 GiB total size), but I have problem with coordinates for each tile.
I’m appreciate for any suggestions how to split this task to few small steps.
Open Layer version: 3.5
Sounds like you want a tile vector layer - something that OL supports natively. I wouldn't go managing the tiles myself, just use the inbuilt functions already provided.
Have a look at this example and see how the tile map server url is formatted. You should be able to do something similar for yourself.
http://openlayers.org/en/v3.5.0/examples/tile-vector.html
I you have image tiles you don't need a vector layer. You don't manually have to calculate the coordinates of a tile, create a geometry for each tile and then load the image. This is not how it should work. :)
If you tell OpenLayers your tiling schema/grid, it will automatically detect which tiles are required for the current view extent, load the tiles and display them at the right position. Take a look at the following examples, which show different techniques to use custom image tiles:
http://openlayers.org/en/master/examples/xyz.html
http://openlayers.org/en/master/examples/xyz-esri-4326-512.html
http://openlayers.org/en/master/examples/xyz-retina.html
I'm not quite sure if the captioned is my problem. I will explain the challenge first and then probably you can advise whether I'm doing something fundamentally wrong.
I'm creating an iOS application which will let users drag and drop floor and wall tiles on a room (pre-selected room images only) and can see how that tile will look when laid on the room. I have the tile images and the room image and I've defined hotspots (where tile need to be replaced) relative to the room image.
On my room simulator view, I have a UIImageView which holds the room image and certain parts of that image are made transparent. I also have smaller UIImageViews which I have put on top of the room image.
When the user drags and drops the tile image on the smaller image views, I'm creating an UIImage using the method
[sourceImage resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeTile];
which gives me a tiled image and that image is then set as the source of the smaller image view.
This logic is working but I'm not getting the desired effect. If the user is dropping the tile on the floor, the final image looks like the floor and the walls are on different planes. Please checkout the image below
The view on the right has 2 images, the room images with transparency and a smaller image where you see the floor tile now.
So my question is, can I tile images with some sort of 3D perspective ? I'm afraid I'm not that good in 3D transformations and the 3d matrices looks greek to me.
I guess the problem is mostly because of the angle in which we are viewing the resultant image and the floor tile images should be tiled with that in mind. Or in other words, the size of the tile on the back side of the room should be smaller than the size of the tile in the front side. I may be wrong.
Any help would be greatly appreciated.
A bit late, but what you need is "CIPerspectiveTile":
https://developer.apple.com/library/mac/documentation/graphicsimaging/reference/CoreImageFilterReference/Reference/reference.html#//apple_ref/doc/filter/ci/CIPerspectiveTile
You'll need to create a CIFilter, set the input values (5 - image, 4 perspective points), then create a CIImage, then draw that image out. There are various ways to do so. You can do something as simple as:
CIContext *context = [CIContext contextWithOptions:nil];
CGImageRef tiledImage = [context createCGImageFromCIImage:myCIImageWithPerspective fromRect:boundingRect];
Hey all, I am creating a 2D tile based XNA game. Basically the character can move any direction one tile at a time. I am using the Tiled map editor: http://www.mapeditor.org/ to create my map. I have not found any good tutorials or documentation on this yet.
Here is my issue:
I am attempting to load a very large world map into my game. Each gridspace is 32x32 pixels. The map itself is 1000x1000 gridspaces. At a first glimpse, this seems bad because of the size. When I loaded this WorldMap into my game XNA threw an out of memory error because the image was too large. I feel like I am approaching this from the wrong angle. Does anyone know a better way to handle a large world map? It would be nice to only load in what the character can see, that would be way more efficient however, that does not solve my problem of loading this huge image. Another idea would be a smaller image for each area but I am not sure how to do that since it's a world. Any ideas, tips, tutorials, I am sure this is a common issue that has been solved several times using several different solutions. Thank you!
When I was creating 2d XNA game I did:
My own format of binary map file. This file contains map name, map width and height in tiles etc and map array. It was simply byte array (byte[]) where each value corresponds to tile type.
Tile type. It's just simple class with some properties: movement cost (-1 if player can't move over this tile), which types of creatures can live in this tile, tile images etc.
Tile types db. It's just xml file contains tile types.
So, when game loads a level:
Load map and find in tile type db tiles which used in this map.
Load appropriate images for this tiles. Only once. It can be reused for different tiles with same type.
Draw only visible (for player) tiles with some reserve. As example draw only screen_width/tile_size_y*2 in width and screen_height/tile_size_y*2 in height. When player moves recalc visible tiles.
I am using XNA for a 2D project. I have a problem and I don't know which way to solve it. I have a texture (an image) that is drawn to the screen for example:
|+++|+++|
|---|---|
|+++|+++|
Now I want to be able to destroy part of that structure/image so that it looks like:
|+++|
|---|---|
|+++|+++|
so that collision now will work as well for the new image.
Which way would be better to solve this problem:
Swap the whole texture with another texture, that is transparent in the places where it is destroyed.
Use some trickery with spriteBatch.Draw(sourceRectangle, destinationRectangle) to get the desired rectangles drawn, and also do collision checking with this somehow.
Split the texture into 4 smaller textures each of which will be responsible for it's own drawing/collision detection.
Use some other smart-ass way I don't know about.
Any help would be appreciated. Let me know if you need more clarification/examples.
EDIT: To clarify I'll provide an example of usage for this.
Imagine a 4x4 piece of wall that when shot at, a little 1x1 part of it is destroyed.
I'll take the third option:
3 - Split the texture into 4 smaller
textures each of which will be
responsible for it's own
drawing/collision detection.
It's not hard do to. Basically it's just the same of TileSet struct. However, you'll need to change your code to fit this approach.
Read a little about Tiles on: http://www-cs-students.stanford.edu/~amitp/gameprog.html#tiles
Many sites and book said about Tiles and how to use it to build game worlds. But you can use this logic to everything which the whole is compost from little parts.
Let me quick note the other options:
1 - Swap the whole texture with
another texture, that is transparent
in the places where it is destroyed.
No.. have a different image to every different position is bad. If you need to change de texture? Will you remake every image again?
2- Use some trickery with
spriteBatch.Draw(sourceRectangle,
destinationRectangle) to get the
desired rectangles drawn, and also do
collision checking with this somehow.
Unfortunately it's don't work because spriteBatch.Draw only works with Rectangles :(
4 Use some other smart-ass way I don't
know about.
I can't imagine any magic to this. Maybe, you can use another image to make masks. But it's extremely processing-expensive.
Check out this article at Ziggyware. It is about Deformable Terrain, and might be what you are looking for. Essentially, the technique involves settings the pixels you want to hide to transparent.
Option #3 will work.
A more robust system (if you don't want to be limited to boxes) would use per-pixel collision detection. The process basically works as follows:
Calculate a bounding box (or circle) for each object
Check to see if two objects overlap
For each overlap, blit the sprites onto a hidden surface, comparing pixel values as you go. If a pixel is already set when you try to draw the pixel from the second sprite, you have a collision.
Here's a good XNA example (another Ziggyware article, actually): 2D Per Pixel Collision Detection
Some more links:
Can someone explain per-pixel collision detection
XNA 2-d per-pixel collision
I ended up choosing option 3.
Basically I have a Tile class that contains a texture and dimention. Dimention n means that there are n*n subtiles within that tile. I also have an array that keeps track of which tiles are destroyed or not. My class looks like this in pseudo code:
class Tile
texture
dimention
int [,] subtiles; //0 or 1 for each subtile
public Tile() // constructor
subtiles = new int[dimention, dimention];
intialize_subtiles_to(1);
public Draw() // this is how we know which one to draw
//iterate over subtiles
for(int i..
for(int j ...)
if(subtiles[i,j] == 1)
Vector2 draw_pos = Vector2(i*tilewidth,
j*tileheight)
spritebatch.Draw(texture, draw_pos)
In a similar fashion I have a collision method that will check for collision:
public bool collides(Rectangle rect)
//iterate over subtiles
for i...
for j..
if(subtiles[i,j]==0) continue;
subtile_rect = //figure out the rect for this subtile
if(subtile_rect.intersects(rect))
return true;
return false;
And so on. You can imagine how to "destroy" certain subtiles by setting their respective value to 0, and how to check if the whole tile is destroyed.
Granted with this technique, the subtiles will all have the same texture. So far I can't think of a simpler solution.