Introducing Lime - A module to import 2D tilemaps in your game.

[GrahamRanson]

Lime is a Lua module that allows you to use maps created in Tiled in your Corona games.

You can download the latest version (currently 0.6) from my site here.

It is quite easy to use, however there are some limitations which can be read on my site.

  
local lime = require("lime")  
  
local map = lime.loadMap("map.tmx")  
  
map:prepare()  
  

The original post for this can be found here.

There are more things you can do with it (multiple layers, object layers and properties) which I will explain properly soon, I just want to get as much feedback as possible so that I can get it to version 1.0. [import]uid: 5833 topic_id: 3598 reply_id: 303598[/import]

[J_A_Whye]

Hey, that looks cool. I just grabbed it and ran the demo and will play around with it in the next couple days.

Jay
[import]uid: 9440 topic_id: 3598 reply_id: 11022[/import]

[GrahamRanson]

It’s still very early in development but it shows that it can be done. I’m thinking of stripping back Lime to the complete basics in that all it will do is import all the data from the Tiled map. It will not create any Corona displayObjects etc at all that way if people want to implement there own stuff to draw it how they like (such as for isometric maps) they can or they can use the other part of the project which I’ve yet to start - http://www.grahamranson.co.uk/project-coconut.php [import]uid: 5833 topic_id: 3598 reply_id: 11044[/import]

[infusedreams]

Hi Graham.

First of all great work with lime, it’s so helpful.

Question…

When using tiled to try and create my tilemap, it wont let me add a png image to use as my tileset? I have tried loads of different things but can’t seem to add it at all ? [import]uid: 6981 topic_id: 3598 reply_id: 11104[/import]

[GrahamRanson]

Hmm, does it give you any kind of error? I’m using pngs for my tilesets so it might be something specific to do with your one. Could you send me yours so I can see if I have any problems with it?

Also, as you’ve been using Lime do you think it should itself create all the display groups and sprites for the map etc or should that be done in a separate module? Basically would you (or anyone) prefer to be in control of the actual create and just let Lime import all the data? [import]uid: 5833 topic_id: 3598 reply_id: 11106[/import]

[jmp909]

that’s a good question graham.

it depends how far you want to take Lime & Coconut.

in the end what we’d all like overall is the sort of routines that come with Cocos2D… Tilemaps, Parallax Layers, Scrolling etc. This is of course a big undertaking. And of course if a number of people were going to work on these, it would be better to work to a common API/goal, where everything will talk to other modules.

I guess we need to start at the end requirement and work backwards, but then we don’t know what ansca has got up its sleeve!

Currently I’m looking into performance of various methods eg
http://developer.anscamobile.com/forum/2010/11/13/performance-tip-setting-isvisiblefalse-slow-reading-display-object-xy-slow

Not sure if this is the thread to start the discussion, but what are the end goals exactly? Presumably the ultimate setup would be:

an “endless”, parallax, smooth scrolling multi-layered map with physics

(although there are some variations on this obviously ie a finite map using just a single display group)

Therefore I think the more modular the better, even if a lot of those modules are Lime/Coconut modules! (as suggest in my other comments)

[import]uid: 6645 topic_id: 3598 reply_id: 11113[/import]

[GrahamRanson]

I agree that splitting it up into modules is the way to go which is why I think version .7 (and higher) will be just for importing all the data from the Tiled map.

I think I will then start work on Coconut as the drawing part so that you could do something like this:

  
local map = lime.loadMap("map.tmx")  
  
-- Put the lime in the coconut and build it all up.  
coconut.build(map)  
  

With this all running nicely it would create 2 parts of your desired result in that it would be “endless” and multi-layered

I think then maybe the the parallax and smooth scrolling could be another module (lemon?) and then the physics part would be yet another module (banana?) so that you could then do:

[code]

local map = lime.load(“map.tmx”)

– Put the lime in the coconut and build it all up.
local visual = coconut.build(map)

– Have a banana (maybe pass in the map, visual or a single physics map image generated from a different tool?)
local physical = banana.build(map)

– Add some lemon
lemon.fadeTo(500, 250)

– Another lemon
lemon.zoomIn(2)

– And yet another
lemon.scrollTo(200, 300)

[/code] [import]uid: 5833 topic_id: 3598 reply_id: 11123[/import]

[infusedreams]

Hi Graham. Yeah I think it should do everything really.

Having it in two seperate modules for those that want to control it themselves would be good. I for one would like for lime to handle everything so i can just do… moveMap(left) or whatever. It would save a lot of time.

Do you plan on supporting animated tiles and event tiles (like say if you are next to a fire tile and you press a button it changes the tile or does an event etc)

What email can i send my tileset to Graham?

Thanks so much for making this, i was about to create something like this but you have saved me a lot of time ! [import]uid: 6981 topic_id: 3598 reply_id: 11127[/import]

[jmp909]

once the sprites are in place you should presumably be able to swap them out for an animated spriteset. i would make that part of another module though… I was going to say “Sprite” but better avoid drink brand names [import]uid: 6645 topic_id: 3598 reply_id: 11129[/import]

[GrahamRanson]

Right, I’ve decided. I will do as I said in the previous post and split up the functionality into 4 projects all named with with some nice alliteration:

Lime - Will be used for the l oading of maps created in Tiled.
Coconut - Will be used for the c reation of the visual objects of the map.
Banana - Will be used for the b uilding of the physical representation of the map.
Mango - Will be used for the m oving of both the visual and physical representation of the map.

I will then write a wrapper module that can be used to perform all these things (or a user could swap out one of the modules for their own version assuming it uses the same interface) which will be called (unless I or anyone else can think of something better), Bounty.

I have added all these to my site however they are all (apart from Lime) in planning stages - www.grahamranson.co.uk/portfolio.php

I will be away from my Mac (and possibly all computers) for a couple of days so will be spending time thinking about how these should be implemented. [import]uid: 5833 topic_id: 3598 reply_id: 11181[/import]

[jmp909]

hi graham,

sounding good!

just to clarify. i wouldn’t always want an “endless” map. sometimes it would want to be finite (ie just one big display group that moves… or eg 3 display groups if it’s parallax). but other times, yes, it should be as big as i want, and use the sprite swapping technique to scroll it.

actually these are better as 2 separate modules (since i dont need to include both in the same map) but should have common function names/interface properties that other modules call (eg moveTo(), scrollTo(), setPos, parallaxScrollRatio etc)

do note though, that I have asked Ansca in another thread to clarify what they mean by "[
also you might want to think about how maps can be loaded/displayed on a screen by screen basis (eg Atic Atac!) rather than scrolling

j [import]uid: 6645 topic_id: 3598 reply_id: 11187[/import] ](http://developer.anscamobile.com/forum/2010/02/21/displaynewimage-resizes-images-larger-screen-dimensions>tiling%20support)

[jlolofie]

Can someone share an example of how to move the map around using touch events so that it looks like your finger is grabbing the ground?

Also, will ansca hire GrahamRanson so that this tile stuff will be built in and officially supported?

[import]uid: 9562 topic_id: 3598 reply_id: 11192[/import]

[jmp909]

[lua]display.setStatusBar( display.HiddenStatusBar )

local lime = require(“lime”)
local tmap = lime.loadMap(“map.tmx”)
tmap:prepare()
local map = tmap.world

local touchX, touchY

local function onTouch(event)

if(event.phase==“began”) then

touchX=event.x - map.x
touchY=event.y - map.y

elseif(event.phase==“moved”) then

map.x = event.x-touchX
map.y = event.y-touchY

end

end

Runtime:addEventListener(“touch”, onTouch)[/lua] [import]uid: 6645 topic_id: 3598 reply_id: 11195[/import]

[GrahamRanson]

@jmp

I think parallax could be done by using the Layer support of Tiled, however having never coded parallax scrolling before it will be an interesting experiment/challenge for me.

If AM do go ahead and decide to add in tiled map support then at least by then we will have an example to hold up and say “this is what we want” (or don’t want depending on the success of everything)

Displaying maps on a screen by screen basis would be very cool and I guess something that would go in Mango, as well as all the parallax stuff I think (or maybe yet another one, Papaya?, as it’s not really related to moving the map. I’ll give that a think. )

@jtal

Haha, if AM wanted to hire me I wouldn’t say no but I doubt I’d be of much help and I’m sure they could do something better than me anyway

• Edit -

I also just thought of another use of Tiled, you could make a GUI using an Object Layer that have Objects with properties for things like what UI element type it is and what functions it should call for onPress, onRelease etc as well as Object Layer properties for background images and screen names. I can’t think of many fruit that begin with “I” but this would do http://en.wikipedia.org/wiki/Iyokan [import]uid: 5833 topic_id: 3598 reply_id: 11209[/import]

[GrahamRanson]

@infuseddreams

I think what I will do is have it split up into smaller modules but then as jmp909 said in the other post have a sort of parent module that you could include that would include all the other modules and act as like a wrapper over all of them. Best of both worlds then

For things like animated tiles we can have a property set on the tile (through Tiled) which would specify it as animatble and another one that would specify which spritesheet to use etc. The Corona module (be it Lime or a seperate one however we decide) would then see it and create the animated sprite.

For Events you would do the same thing but use the Object Layer feature of Tiled where you can create single point Objects (for instance a pickup or whatever) or give them a size so it would work more like a Zone in an RPG or something. Again the Corona module would then pick that up and deal with it accordingly. (Or you could deal with it yourself)

You can send it to - graham DOT ranson AT monkeydeadstudios DOT com - and I will see what I can do, hopefully it is just a simple thing

@jmp

Hehe yea calling it Sprite may be cutting it a bit close [import]uid: 5833 topic_id: 3598 reply_id: 11160[/import]

[jmp909]

if you look at this parallax sample on the forum it seems relatively simple. you’re just moving the layers at a proportionate speed and clamping the values to stop it scrolling beyond the limits.

should be some useful examples of Cocos2D / XNA etc to study too if you google around

The only thing to note is that the background would need to be bigger so if you’re compositing it in Tiled it might offsort your coordinates a bit for the front layer. Again Cocos2D is probably a good place to look as they may have example resources at the same dimensions required for a phone project etc

http://www.youtube.com/watch?v=GnqlHAE2hrI [import]uid: 6645 topic_id: 3598 reply_id: 11217[/import]

[jlolofie]

1. How are people handling animation of a character between tiles?
2. Does anyone have any logic to translate display coords to/from tile-world coords?

I dont think it’d be difficult to whip up but if other people are doing it a certain way… you know. [import]uid: 9562 topic_id: 3598 reply_id: 11328[/import]

[GrahamRanson]

As stated I’m away from my computer so am doing this from memory, but in “lime.lua” you should find a function called newTile() and within that there should be one called self:createSprite(tileIndex), in the second function is the code that actually sets the position of the tile. There is an x and y in there as well as local values for row and column.

If you change the “local row” and “local col” to “self.row” and “self.col” then you should be able to get access to their grid positions easily.

This will be a lot simpler in the next version. [import]uid: 5833 topic_id: 3598 reply_id: 11355[/import]

[GrahamRanson]

I just uploaded version 0.7 of Lime, the main difference is that it no longer creates the Corona display objects for you. Lime is now just for importing data from your .tmx files.

I have added in the code that originally created the display objects into the main.lua file just so you can see what it was doing and still continue to use Lime for the time being.

I will soon be uploading the first (and very basic version) of Coconut which will handle the creation of the display objects for you. At first it will most likely just be the code from earlier, but it will advance on.

Any bugs, comments, feedback etc just post here or email me. [import]uid: 5833 topic_id: 3598 reply_id: 11449[/import]

[GrahamRanson]

Version 0.1 of Coconut is now up - www.grahamranson.co.uk/project-coconut.php

Very basic so far, will complete the whole map in separate groups for each layer and then place them all in the map.world group.

[code]
local lime = require(“lime”)
local coconut = require(“coconut”)

local map = lime.load(“map.tmx”)
local visual = lime.create(map)
[/code] [import]uid: 5833 topic_id: 3598 reply_id: 11486[/import]