Simple tiled map tmx example please

RussellCollinghamRussellCollingham GBUniversity ✭✭

Hi, My first attempt at using CS. I have created a Windows Phone 8 project using the Xamarin Cocos Sharp Visual Studio templates.

I altered the default ApplicationDidFinishLaunching method as follows

                var scene = new CCScene(mainWindow);
                //var introLayer = new IntroLayer();

                var mi = new CCTileMapInfo("test.tmx");
                var tm = new CCTileMap(mi);


                scene.AddChild(tm);

                mainWindow.RunWithScene(scene);

but the application simply crashes in the App.xaml.cs Application_UnhandledException method with the exception "Cannot access a closed Stream."

My test.tmx file was created with Tiled and is in the Content folder. I have stepped into the code and my mi and tm variables appear to contain the correct information from the tmx file.

Ultimately I want to display a tiled map and move sprites on top of it but baby steps first... if anyone can help that would be brilliant.

Thanks
Russell

Posts

  • kjpou1kjpou1 LUMember, Xamarin Team Xamurai

    Russel

    Can you provide us with a sample of the tmx file and assets.

  • RussellCollinghamRussellCollingham GBUniversity ✭✭

    Thanks, here is test.tmx

    <?xml version="1.0" encoding="UTF-8"?>
    <map version="1.0" orientation="orthogonal" renderorder="right-down" width="10" height="20" tilewidth="32" tileheight="32" nextobjectid="1">
     <tileset firstgid="1" name="grass-tiles-2-small" tilewidth="32" tileheight="32">
      <image source="grass-tiles-2-small.png" width="384" height="192"/>
     </tileset>
     <layer name="Tile Layer 1" width="10" height="20">
      <data encoding="base64" compression="gzip">
       H4sIAAAAAAAAC+NkYGDgJAJLEImJMWvUvFHzhop5AP0nRnwgAwAA
      </data>
     </layer>
    </map>
    

    and the image file it uses is attached. Both are in the Content folder.

    Thanks

  • kjpou1kjpou1 LUMember, Xamarin Team Xamurai

    Thanks will take a look. May be tomorrow before I have anything though. The first thing is that on WP8 you will need to convert you image file .xnb.

    Will let you know more.

  • RussellCollinghamRussellCollingham GBUniversity ✭✭

    Okay, great. What do I use to convert to xnb (Developing on a PC Windows 8 using Visual Studio)
    Thanks

  • kjpou1kjpou1 LUMember, Xamarin Team Xamurai

    Russell

    Also, there is a whole lot of tests and code here.

  • RussellCollinghamRussellCollingham GBUniversity ✭✭
    edited February 2015

    Thanks, I was looking at those yesterday but was finding it difficult to extract from the test code to a simple working example :(

  • DavidBoltonDavidBolton GBMember ✭✭

    Can I add my voice to this. I was trying to do the same on iOS. The lack of complete documentation hinders as well. Plus there's a bit of uncertainty about the tmx file. Mine when I first created it contained the absolute path to the tileset png. (the path on Windows so never going to work!) so before I create the tmx using tiled, am I supposed to have the tileset png in the project Content folder?

  • RussellCollinghamRussellCollingham GBUniversity ✭✭

    David, my tmx file also had the absolute path to the png in it, but once I realised it was a text file I manually changed the tmx file to remove the path and stored the png at the same level in the content folder. Still doesn't work though :(

  • DavidBoltonDavidBolton GBMember ✭✭
    edited February 2015

    I've been looking through the Cocos source code and the tests that Kenneth Pouncey linked to. All the files in the Tilemaps folder are xnb files. See this link for xnb format details! http://xbox.create.msdn.com/en-US/sample/xnb_format

    So perhaps that Cocossharp derives from cocos2d-xna is why it works with xnb not tmx files? Or am I missing something?

  • kjpou1kjpou1 LUMember, Xamarin Team Xamurai

    David and Russel

    .xnb files are what MonoGame uses for content.

    Right now WP8 is the only platform that requires .xnb format for most of it's content assets.

    iOS should have no problem loading raw content files meaning .tmx and .png. I am working on a doc for tilemap loading now.

  • RussellCollinghamRussellCollingham GBUniversity ✭✭

    Thanks, so if I convert the .png file to an .xnb it should work?

    What tool on Windows do I use to do the conversion?

    Thanks again

  • kjpou1kjpou1 LUMember, Xamarin Team Xamurai

    Russel

    Am working on a post for that now ;-)

  • DavidBoltonDavidBolton GBMember ✭✭

    I'm glad to be proved wrong though the Content Importer for tmx doesn't seem to do a lot except read all the file in. in TMXImporter.cs. It looks like a cut n paste of the TextImporter. See https://github.com/mono/CocosSharp/blob/master/CocosSharp.Content.Pipeline.Importers/TMX/TMXImporter.cs

    Clearly it's a work in progress and I'm glad to see you are on it.

  • kjpou1kjpou1 LUMember, Xamarin Team Xamurai

    David

    Well yes and no. What it does is creates an .xnb wrapper that is loadable from the MonoGame content pipeline mostly for Windows Phone 8. Like I said before the other platforms do not really need to be wrapped and can use raw assets.

    Everything is relative to the Content Directory that is created by the templates.

  • kjpou1kjpou1 LUMember, Xamarin Team Xamurai

    This is how we resolve the .png supporting resources for TileMaps and BitmapFonts.

    • If supporting image resource has a directory specified use the directory offset from Content ex. images/helvetica-geneva-32.png will look for the supporting image asset in Content/images

    • If supporting image resource does not have a directory specified then the search for that asset will the same path as the resource file. ex tilemaps/iso-zorder-tests.TMX specifies it's supporting image resource as iso-test.png then when we load this asset it will look in the same directory as the .TMX was loaded from giving Content/tilemaps/iso-test.png.

  • DavidBoltonDavidBolton GBMember ✭✭

    Kenneth, would it be possible to post the simplest possible working code for a small tiled map so I can try it on my iPhone?

  • kjpou1kjpou1 LUMember, Xamarin Team Xamurai
    edited February 2015

    Here is the post.

    http://forums.xamarin.com/discussion/32086/creating-tilemap-xnb-content-for-windows-phone-8?new=1

    David give me a little bit and I will see what I can come up with.

  • RussellCollinghamRussellCollingham GBUniversity ✭✭

    Thanks I will take a look

  • kjpou1kjpou1 LUMember, Xamarin Team Xamurai

    @DavidBolton

    Here is a simple iOS TileMap example using Raw assets. This does not use the .xnb's that are output in the other post. Will create a new one for that using this project.

  • kjpou1kjpou1 LUMember, Xamarin Team Xamurai
    edited February 2015

    Russell

    Here is your test files that you attached yesterday up and running. Followed the same process as outlined in the forum post for creating content.

    image

  • DavidBoltonDavidBolton GBMember ✭✭

    Thanks! That's very fast work.

  • RussellCollinghamRussellCollingham GBUniversity ✭✭

    Works :) Thank you so much.

    My sample tmx was a 20x10 tiled map with each tile being 32px x 32px , yet it appears so small. Is that an issue with my use of Tiled or do I need to set something else in the CCTileMap?

  • RamiTabbaraRamiTabbara AUMember, Xamarin Team Xamurai

    Hi Russell,

    Check out the default design dimensions you've initially setup in your AppDelegate. i.e. CCScene.SetDefaultDesignResolution. This sets the default world dimensions for any layers created, including for any tile maps. So for your particular tmx, if you wanted a tile map that perfectly covers the entire screen you'll need a design dimension of width 20*32 = 640 and height 10x32 = 320.

    Alternatively, if you don't want to affect other layers that you may include in your game, you can set a tile map's new camera to solely change its world focus. e.g.

    
    CCTileMap myTileMap;
    // Load map
    
    // By default new camera is locked on to center of specified dimensions
    myTileMap.Camera = new CCCamera(CCCameraProjection.Projection2D, new CCSize(640f,320f));
    
    
Sign In or Register to comment.