Isometric bitmap scrolling world

beernathan · January 18, 2013, 10:16pm

I’m looking to create a relatively limited isometric scrolling world (e.g. Clash of Clans, Dragonvale) and I’m looking for advice on the best way to implement in Corona (of if Corona is even the right tool). Each “item” on the map will be a static bitmap (e.g. grass, road, etc) or a short 10-15 frame animation. “Items” will be clickable to change state to selected and will evolve over time (upgrades etc). I need to ensure that the touch event is only triggered for the opaque sections of an “item” as they will overlap with items behind them (i.e. no click for their transparent surrounds - I assume through the use of a mask).

Should I entertain the use of sprites/tiles, is the variable nature of the images and the need for masks going to knock me out? I’ve also read about performance issues with this approach?

Thanks,
Nathan. [import]uid: 27228 topic_id: 35095 reply_id: 335095[/import]

bjsorrentino · January 18, 2013, 10:49pm

Hi Nathan,
This should all be possible with Corona, and if you use image sheets (and sprites from them), you should encounter no performance issues. Masking can be used to control the touch zones on things, or you can just lay other objects over a tile and sense touch on them. Tiles, and your overall world, can be moved as a unified display group. Tile “upgrades” could be done by changing frames of a tile (as a sprite), or to a new animating sequence.

Basically, I say you’re good to go with this concept, and I foresee no hang-ups with your current proposal.

Best regards,
Brent Sorrentino [import]uid: 200026 topic_id: 35095 reply_id: 139545[/import]

Caleb_P · January 19, 2013, 8:01am

To build that sort of thing, you might check out Tiled, which is at www.mapeditor.org. [import]uid: 147322 topic_id: 35095 reply_id: 139575[/import]

bjsorrentino · January 18, 2013, 10:49pm

Hi Nathan,
This should all be possible with Corona, and if you use image sheets (and sprites from them), you should encounter no performance issues. Masking can be used to control the touch zones on things, or you can just lay other objects over a tile and sense touch on them. Tiles, and your overall world, can be moved as a unified display group. Tile “upgrades” could be done by changing frames of a tile (as a sprite), or to a new animating sequence.

Basically, I say you’re good to go with this concept, and I foresee no hang-ups with your current proposal.

Best regards,
Brent Sorrentino [import]uid: 200026 topic_id: 35095 reply_id: 139545[/import]

Caleb_P · January 19, 2013, 8:01am

To build that sort of thing, you might check out Tiled, which is at www.mapeditor.org. [import]uid: 147322 topic_id: 35095 reply_id: 139575[/import]

beernathan · January 31, 2013, 3:15pm

I’ve started to implement this but have run into a problem with masking already. Looking at the forums and feedback on the masking tutorial it looks like it’s a common problem… alpha setting + tap sensing just doesn’t work if you apply a mask but put the image in a group. Is this a known issue? Is it going to be fixed?

Thanks,
Nathan. [import]uid: 27228 topic_id: 35095 reply_id: 141111[/import]

beernathan · January 31, 2013, 3:15pm

I’ve started to implement this but have run into a problem with masking already. Looking at the forums and feedback on the masking tutorial it looks like it’s a common problem… alpha setting + tap sensing just doesn’t work if you apply a mask but put the image in a group. Is this a known issue? Is it going to be fixed?

Thanks,
Nathan. [import]uid: 27228 topic_id: 35095 reply_id: 141111[/import]

bjsorrentino · February 23, 2013, 2:55pm

Hi Nathan,
I was just clearing out my inbox and realized I never responded to this, sorry.

Are you just applying a bitmap mask to an object and then placing it inside a display group? I worked up the following quick test, and everything seems to work as expected: the mask is applied, I can apply an alpha setting to it, and apply the “.isHitTestMasked” property to it. I’m getting tap responses on the visible parts, and not on the masked-out parts, just as expected. Am I missing something? Is your implementation or goal different?

Regards,
Brent

[code]
local group = display.newGroup()
local bkgrad = graphics.newGradient( {242,17,10,200}, {0,0,0,200}, “down” )
local bk = display.newRect( group, 100, 300, 600, 400 ) ; bk:setFillColor( bkgrad )

– Create mask and apply to image
local mask = graphics.newMask( “papermask.png” )
bk:setMask( mask )
bk.isHitTestMasked = true
bk.x = 200
bk.alpha = 0.3

local function maskTap( event )
print(“TAPPED!”)
end
bk:addEventListener(“tap”,maskTap)
[/code] [import]uid: 200026 topic_id: 35095 reply_id: 143957[/import]

bjsorrentino · February 23, 2013, 2:55pm

Hi Nathan,
I was just clearing out my inbox and realized I never responded to this, sorry.

Are you just applying a bitmap mask to an object and then placing it inside a display group? I worked up the following quick test, and everything seems to work as expected: the mask is applied, I can apply an alpha setting to it, and apply the “.isHitTestMasked” property to it. I’m getting tap responses on the visible parts, and not on the masked-out parts, just as expected. Am I missing something? Is your implementation or goal different?

Regards,
Brent

[code]
local group = display.newGroup()
local bkgrad = graphics.newGradient( {242,17,10,200}, {0,0,0,200}, “down” )
local bk = display.newRect( group, 100, 300, 600, 400 ) ; bk:setFillColor( bkgrad )

– Create mask and apply to image
local mask = graphics.newMask( “papermask.png” )
bk:setMask( mask )
bk.isHitTestMasked = true
bk.x = 200
bk.alpha = 0.3

local function maskTap( event )
print(“TAPPED!”)
end
bk:addEventListener(“tap”,maskTap)
[/code] [import]uid: 200026 topic_id: 35095 reply_id: 143957[/import]

bjsorrentino · February 23, 2013, 10:55pm

Hi Nathan,
I was just clearing out my inbox and realized I never responded to this, sorry.

Are you just applying a bitmap mask to an object and then placing it inside a display group? I worked up the following quick test, and everything seems to work as expected: the mask is applied, I can apply an alpha setting to it, and apply the “.isHitTestMasked” property to it. I’m getting tap responses on the visible parts, and not on the masked-out parts, just as expected. Am I missing something? Is your implementation or goal different?

Regards,
Brent

[code]
local group = display.newGroup()
local bkgrad = graphics.newGradient( {242,17,10,200}, {0,0,0,200}, “down” )
local bk = display.newRect( group, 100, 300, 600, 400 ) ; bk:setFillColor( bkgrad )

– Create mask and apply to image
local mask = graphics.newMask( “papermask.png” )
bk:setMask( mask )
bk.isHitTestMasked = true
bk.x = 200
bk.alpha = 0.3

local function maskTap( event )
print(“TAPPED!”)
end
bk:addEventListener(“tap”,maskTap)
[/code] [import]uid: 200026 topic_id: 35095 reply_id: 143957[/import]

bjsorrentino · February 23, 2013, 10:55pm

Hi Nathan,
I was just clearing out my inbox and realized I never responded to this, sorry.

Are you just applying a bitmap mask to an object and then placing it inside a display group? I worked up the following quick test, and everything seems to work as expected: the mask is applied, I can apply an alpha setting to it, and apply the “.isHitTestMasked” property to it. I’m getting tap responses on the visible parts, and not on the masked-out parts, just as expected. Am I missing something? Is your implementation or goal different?

Regards,
Brent

[code]
local group = display.newGroup()
local bkgrad = graphics.newGradient( {242,17,10,200}, {0,0,0,200}, “down” )
local bk = display.newRect( group, 100, 300, 600, 400 ) ; bk:setFillColor( bkgrad )

– Create mask and apply to image
local mask = graphics.newMask( “papermask.png” )
bk:setMask( mask )
bk.isHitTestMasked = true
bk.x = 200
bk.alpha = 0.3

local function maskTap( event )
print(“TAPPED!”)
end
bk:addEventListener(“tap”,maskTap)
[/code] [import]uid: 200026 topic_id: 35095 reply_id: 143957[/import]

beernathan · March 18, 2013, 11:02pm

OK, so that worked, and I now have the masked click working on a sprite in a group (someone really should update this tutorial which says it’s not possible http://www.coronalabs.com/blog/2012/05/29/how-to-use-bitmap-masks/) but it has revealed a couple other problems/questions:

The mask is visually masking my sprite - I want to show the whole sprite, but only mask for clicking - is this possible? Makes using masks on a sprite based animation impossible, as the mask can only ever be a single frame (as far as I can tell).

Once masked the sprite’s ability to change fill colour and alpha (setFillColor(56, 245, 27, 0.5)) seems to go away - the command fires, but does nothing.

Thanks,

Nathan.

bjsorrentino · March 19, 2013, 2:46am

Hi @beernathan,

On #1, since a bitmap mask is inherently meant for visual masking, you won’t be able to use it for only click-masking (with no visual masking). In this case, you might be able to work out a mathematical coordinate sensing formula which determines if the click is inside a certain “boundary” of the overall object.

On #2, these are now both possible, but not with the official Build #971 which you’re likely using as a Trial subscriber. Adjusting mask alpha and fill color post-mask was made possible in a recent Daily Build (I can’t remember the exact build number). I just tested it on my side and it works as expected: both fill color change and alpha adjustment.

Hope this helps. I’d try to implement the #1 solution first, as it would solve both of your needs.

Brent

beernathan · March 18, 2013, 11:02pm

OK, so that worked, and I now have the masked click working on a sprite in a group (someone really should update this tutorial which says it’s not possible http://www.coronalabs.com/blog/2012/05/29/how-to-use-bitmap-masks/) but it has revealed a couple other problems/questions:

The mask is visually masking my sprite - I want to show the whole sprite, but only mask for clicking - is this possible? Makes using masks on a sprite based animation impossible, as the mask can only ever be a single frame (as far as I can tell).

Once masked the sprite’s ability to change fill colour and alpha (setFillColor(56, 245, 27, 0.5)) seems to go away - the command fires, but does nothing.

Thanks,

Nathan.

bjsorrentino · March 19, 2013, 2:46am

Hi @beernathan,

On #1, since a bitmap mask is inherently meant for visual masking, you won’t be able to use it for only click-masking (with no visual masking). In this case, you might be able to work out a mathematical coordinate sensing formula which determines if the click is inside a certain “boundary” of the overall object.

On #2, these are now both possible, but not with the official Build #971 which you’re likely using as a Trial subscriber. Adjusting mask alpha and fill color post-mask was made possible in a recent Daily Build (I can’t remember the exact build number). I just tested it on my side and it works as expected: both fill color change and alpha adjustment.

Hope this helps. I’d try to implement the #1 solution first, as it would solve both of your needs.

Brent

codingcake · May 1, 2013, 10:03am

Hi

Is any good lib to support Isometric bitmap tiles ?

beernathan · May 1, 2013, 10:15am

Nope - had to hand-craft all of it.

d.mach · May 4, 2013, 7:17am

You don’t need to use masks to make sure only the iso tiles are touched. Just use some math and check for the click positions of the finger. This should work for Most of the flat ground tiles.

beernathan · May 4, 2013, 11:02am

Yep -that’s what I ended up doing - mainly because I wanted to use sprites so I could do animation and switch images on the fly. The math is surprisingly simple - found it using Google.

codingcake · May 1, 2013, 10:03am

Hi

Is any good lib to support Isometric bitmap tiles ?