Black vertical lines and little bounce on collision between player and wall

AAAle · March 13, 2016, 6:10pm

Hi everyone, first post for me in the Corona forums, hope to find some help from you

I’m playing around with Corona sdk from maybe two months trying to develope some sort of top view rpg and i’m having these couple of problems:

I’m using Dusk to generate a map with Tiled, when i move the player around i see some random black vertical lines that i want to avoid.
When the player collides with a wall it stops to move but there’s always a little bounce back after the collision. What i want is just to stop the player.

Here’s a video that explains what happens: (problem one from 00:00 to 00:12 and problem two from 00:12 to 00:22)

[media]https://vimeo.com/158822169[/media]

And here is the code i used:

[lua]

display.setStatusBar( display.HiddenStatusBar )

display.setDefault(“minTextureFilter”, “nearest”)

display.setDefault(“magTextureFilter”, “nearest”)

display.setDefault( “background”, .216, .251, .443)

local physics = require “physics”

physics.start()

– physics.setDrawMode(‘hybrid’)

physics.setGravity( 0, 0 )

local dusk = require(“Dusk.Dusk”)

local map = dusk.buildMap(“levels/test.json”)

– create hero on display and add Physics to that sprite

local player = display.newImageRect(“img/player.png”, 8, 8)

physics.addBody( player, “dynamic”, {radius = player.width * 0.50})

player.name = ‘player’

player.x = 60

player.y = 30

map.layer[1]:insert(player)

map.setCameraFocus(player)

local speed = 1.2

local StickLib = require(“lib_analog_stick”)

MyStick = StickLib.NewStick( {

x = 15,

y = 55,

thumbSize = 11,

borderSize = 11,

snapBackSpeed = 0,

R = 255,

G = 255,

B = 255

} )

function moveHero()

MyStick:move(player, speed, false)

map.updateView()

end

Runtime:addEventListener( “enterFrame”, moveHero )

[/lua]

bjsorrentino · March 14, 2016, 8:22pm

Hello,

What does your image sheet look like which you’re pulling tiles from? Can you post an example of it here?

For the bouncing part, physics objects (by default) have a little bounce factor applied to them. You can set it to 0 by adding “bounce=0” to the same table where you’ve set “radius” in the “physics.addBody()” call.

Best regards,

Brent

AAAle · March 14, 2016, 9:36pm

Hi Brent, thanks for the answer.

You can find the image sheet i’m using attached to this post.

Here is the config.lua if it helps:

[lua]

application =

{

content =

{

width = 80,

height = 120,

scale = “letterBox”,

fps = 30,

–[[

imageSuffix =

{

["@2x"] = 2,

},

–]]

},

–[[

– Push notifications

notification =

{

iphone =

{

types =

{

“badge”, “sound”, “alert”, “newsstand”

}

},

–]]

}

[/lua]

i changed the line to

[lua]

physics.addBody( player, “dynamic”, { bounce=0, radius = player.width * 0.50})

[/lua]

But the problem isn’t solved, there’s always a little bounce back.

bjsorrentino · March 15, 2016, 3:00am

Hi again,

I’m moving this thread to the Dusk sub-forum, since I think somebody with more direct expertise with Dusk can help you with the “black vertical lines” issue. I notice those lines aren’t actually black, but instead they are the color you’ve set for the background (dark blue). This means that, in some camera scroll positions, you can “see through” the space where tiles join. I’m not sure what the best solution is for this in Dusk.

As for the bouncing, did you also set the walls to have 0 bounce? Both the player and whatever it contacts should have 0 bounce.

Best regards,

Brent

AAAle · March 15, 2016, 9:37pm

Yes Brent you’re right about the lines color

For the record this happens without Dusk too, here’s another example using the perspective camera lib:

Map exported to .csv format

[lua]

-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1

-1,-1,-1,-1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,-1,-1,-1,-1,-1,-1

-1,-1,-1,-1,3,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,5,-1,-1,-1,-1,-1,-1

-1,-1,-1,-1,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,-1,-1,-1,-1,-1,-1

-1,-1,-1,-1,6,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,8,-1,-1,-1,-1,-1,-1

-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1

[/lua]

main.lua code

[lua]

display.setStatusBar( display.HiddenStatusBar )

display.setDefault(“minTextureFilter”, “nearest”)

display.setDefault(“magTextureFilter”, “nearest”)

display.setDefault( “background”, .216, .251, .443)

local physics = require “physics”

physics.start()

physics.setGravity( 0, 0 )

local require = require

local perspective = require(“perspective”)

local camera = perspective.createView()

– ****** FUNCTION FOUND SOMEWHERE IN THE FORUMS ******

function string:split( inSplitPattern, outResults )

if not outResults then

outResults = {}

end

local theStart = 1

local theSplitStart, theSplitEnd = string.find( self, inSplitPattern, theStart )

while theSplitStart do

table.insert( outResults, string.sub( self, theStart, theSplitStart-1 ) )

theStart = theSplitEnd + 1

theSplitStart, theSplitEnd = string.find( self, inSplitPattern, theStart )

end

table.insert( outResults, string.sub( self, theStart ) )

return outResults

end

local options =

{

width = 8,

height = 8,

numFrames = 10

}

local sheet = graphics.newImageSheet( “img/environment_copy.png”, options )

– **********************************************************************************************************************

– DISPLAY LEVEL

– **********************************************************************************************************************

local environmentGroup = display.newGroup()

local path = system.pathForFile( “levels/test_environment.csv” )

local tileX = 0

local tileY = 0

for line in io.lines( path ) do

local myTable = line:split(",")

for i = 1,#myTable do

if i ~= 1 then

tileX = tileX + 8

end

if (myTable[i] ~= ‘-1’) then

myTable[i] = myTable[i] + 1

local environment = display.newImage( sheet, myTable[i], tileX, tileY )

environment.name = ‘environment’

environmentGroup:insert(environment)

camera:add(environment, 1)

if (myTable[i] ~= 5) then

physics.addBody(environment, “static”, { bounce=0 })

end

tileY = tileY + 8;

tileX = 0;

end

local player = display.newImageRect(“img/player.png”, 8, 8)

physics.addBody( player, “dynamic”, {bounce=0, radius = player.width * 0.50})

player.name = ‘player’

player.x = 60

player.y = 80

camera:add(player, 1)

local speed = 1.2

local StickLib = require(“lib_analog_stick”)

MyStick = StickLib.NewStick( {

x = 15,

y = 55,

thumbSize = 11,

borderSize = 11,

snapBackSpeed = 0,

R = 255,

G = 255,

B = 255

} )

function moveHero()

MyStick:move(player, speed, false)

end

Runtime:addEventListener( “enterFrame”, moveHero )

camera:setFocus(player)

camera:track()

[/lua]

imageset and player image attached to this post
same config.lua posted on my previous message.
Video

[media]https://vimeo.com/159127677[/media]

I set bounce=0 in both the player and walls but nothing changed.

bendikr5 · March 16, 2016, 7:19am

It does not look like its bouncing back on collision with the wall, but moving back when the joystick is being released. So when you release the joystick and it flings back to its center position, the player moves with the fling.

AAAle · March 16, 2016, 8:40am

Hi Bendikr5, i had the same thought in the first place but this happens even if you move the player with keyboard controls instead of touch.

[media]https://vimeo.com/159180444[/media]

[lua]

display.setStatusBar( display.HiddenStatusBar )

display.setDefault(“minTextureFilter”, “nearest”)

display.setDefault(“magTextureFilter”, “nearest”)

display.setDefault( “background”, .216, .251, .443)

local physics = require “physics”

physics.start()

physics.setGravity( 0, 0 )

local require = require

local perspective = require(“perspective”)

local camera = perspective.createView()

function string:split( inSplitPattern, outResults )

if not outResults then

outResults = {}

end

local theStart = 1

local theSplitStart, theSplitEnd = string.find( self, inSplitPattern, theStart )

while theSplitStart do

table.insert( outResults, string.sub( self, theStart, theSplitStart-1 ) )

theStart = theSplitEnd + 1

theSplitStart, theSplitEnd = string.find( self, inSplitPattern, theStart )

end

table.insert( outResults, string.sub( self, theStart ) )

return outResults

end

local options =

{

width = 8,

height = 8,

numFrames = 10

}

local sheet = graphics.newImageSheet( “img/environment_copy.png”, options )

– **********************************************************************************************************************

– DISPLAY LEVEL

– **********************************************************************************************************************

local environmentGroup = display.newGroup()

local path = system.pathForFile( “levels/test_environment.csv” )

local tileX = 0

local tileY = 0

for line in io.lines( path ) do

local myTable = line:split(",")

for i = 1,#myTable do

if i ~= 1 then

tileX = tileX + 8

end

if (myTable[i] ~= ‘-1’) then

myTable[i] = myTable[i] + 1

local environment = display.newImage( sheet, myTable[i], tileX, tileY )

environment.name = ‘environment’

environmentGroup:insert(environment)

camera:add(environment, 1)

if (myTable[i] ~= 5) then

physics.addBody(environment, “static”, { bounce=0 })

end

tileY = tileY + 8;

tileX = 0;

end

local player = display.newImageRect(“img/player.png”, 8, 8)

physics.addBody( player, “dynamic”, {bounce=0, radius = player.width * 0.50})

player.name = ‘player’

player.x = 60

player.y = 80

camera:add(player, 1)

local speed = 1.2

local function onKey( event )

print('Key ’ … event.keyName … ’ is ’ … event.phase)

if event.keyName == “up” then

if event.phase == “down” then

player.isMovingUp = true

else

player.isMovingUp = false

end

return true

elseif event.keyName == “down” then

if event.phase == “down” then

player.isMovingDown = true

else

player.isMovingDown = false

end

return true

elseif event.keyName == “left” then

if event.phase == “down” then

player.isMovingLeft = true

else

player.isMovingLeft = false

end

return true

elseif event.keyName == “right” then

if event.phase == “down” then

player.isMovingRight = true

else

player.isMovingRight = false

end

return true

end

return false

end

Runtime:addEventListener( “key”, onKey )

function moveplayer()

if player.isMovingUp then

player.y = player.y - speed

elseif player.isMovingDown then

player.y = player.y + speed

end

if player.isMovingLeft then

player.x = player.x - speed

elseif player.isMovingRight then

player.x = player.x + speed

end

Runtime:addEventListener( “enterFrame”, moveplayer )

camera:setFocus(player)

camera:track()

[/lua]

BTW in the first video i posted you can see i release the touch at around 00:12 and the player doesn’t go back following the joystick.

bendikr5 · March 16, 2016, 1:30pm

I checked the original video and you are correct! I must confess I did not read your code or check any of the other videos before commenting:)

But after reading your code, the issue might be that you are setting your players x and y explicit, and not using forces. Setting x and y does not work good with physics object, so either if that is the case or not, do not do that…

Play around with player:applyForce(xForce, yForce, player.x, player.y) and see if that solves anything.

As an example: Not tested, so adjust the force…

 if player.isMovingUp then player:applyForce(0, -50, player.x, player.y) elseif player.isMovingDown then . . .

AAAle · March 16, 2016, 2:23pm

OH YES bendikr5, with your code problem 2) is solved.

BTW i’m thinking that using physics wasn’t a good idea for the kind of game i’m trying to develope have to try with non physics collisions.

Problem 1) is still unresolved, help is really appreciated.

bendikr5 · March 16, 2016, 2:39pm

Have you testet your game on a device? The lines should be less there.

Some solutions to the flickering lines can be found here: https://forums.coronalabs.com/topic/54068-tips-for-drawing-tilesets/

redninjacat · March 17, 2016, 6:39pm

@AAAle I just saw this idea on another forum that you might want to try to get rid of the lines.

display.setDefault( “isImageSheetSampledInsideFrame”, true )

This will likely fix most of your tile gap problems. Set it before you load any tile images and / or make sprite sheets from tiles (and don’t forget to reset it afterwards).

Here are the Corona docs on this attribute: https://docs.coronalabs.com/api/library/display/setDefault.html

“isImageSheetSampledInsideFrame” — Affects how image sheet frames are sampled. If set to true, sampling is intruded by half of the source texture pixel size to avoid border artifacts. Default is false.

I found this info on this forum: https://forums.coronalabs.com/topic/61724-how-to-create-a-platformer/?p=322280

Kudos go to rakoonic.

bendikr5 · March 18, 2016, 7:29am

Wow, just testet it and that seems to work! Thanks for sharing!

AAAle · March 18, 2016, 10:05pm

You guys are awesome!! everything solved! Thanks for you support

bjsorrentino · March 14, 2016, 8:22pm

Hello,

What does your image sheet look like which you’re pulling tiles from? Can you post an example of it here?

For the bouncing part, physics objects (by default) have a little bounce factor applied to them. You can set it to 0 by adding “bounce=0” to the same table where you’ve set “radius” in the “physics.addBody()” call.

Best regards,

Brent

AAAle · March 14, 2016, 9:36pm

Hi Brent, thanks for the answer.

You can find the image sheet i’m using attached to this post.

Here is the config.lua if it helps:

[lua]

application =

{

content =

{

width = 80,

height = 120,

scale = “letterBox”,

fps = 30,

–[[

imageSuffix =

{

["@2x"] = 2,

},

–]]

},

–[[

– Push notifications

notification =

{

iphone =

{

types =

{

“badge”, “sound”, “alert”, “newsstand”

}

},

–]]

}

[/lua]

i changed the line to

[lua]

physics.addBody( player, “dynamic”, { bounce=0, radius = player.width * 0.50})

[/lua]

But the problem isn’t solved, there’s always a little bounce back.

bjsorrentino · March 15, 2016, 3:00am

Hi again,

I’m moving this thread to the Dusk sub-forum, since I think somebody with more direct expertise with Dusk can help you with the “black vertical lines” issue. I notice those lines aren’t actually black, but instead they are the color you’ve set for the background (dark blue). This means that, in some camera scroll positions, you can “see through” the space where tiles join. I’m not sure what the best solution is for this in Dusk.

As for the bouncing, did you also set the walls to have 0 bounce? Both the player and whatever it contacts should have 0 bounce.

Best regards,

Brent

AAAle · March 15, 2016, 9:37pm

Yes Brent you’re right about the lines color

For the record this happens without Dusk too, here’s another example using the perspective camera lib:

Map exported to .csv format

[lua]

-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1

-1,-1,-1,-1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,-1,-1,-1,-1,-1,-1

-1,-1,-1,-1,3,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,5,-1,-1,-1,-1,-1,-1

-1,-1,-1,-1,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,-1,-1,-1,-1,-1,-1

-1,-1,-1,-1,6,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,8,-1,-1,-1,-1,-1,-1

-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1

[/lua]

main.lua code

[lua]

display.setStatusBar( display.HiddenStatusBar )

display.setDefault(“minTextureFilter”, “nearest”)

display.setDefault(“magTextureFilter”, “nearest”)

display.setDefault( “background”, .216, .251, .443)

local physics = require “physics”

physics.start()

physics.setGravity( 0, 0 )

local require = require

local perspective = require(“perspective”)

local camera = perspective.createView()

– ****** FUNCTION FOUND SOMEWHERE IN THE FORUMS ******

function string:split( inSplitPattern, outResults )

if not outResults then

outResults = {}

end

local theStart = 1

local theSplitStart, theSplitEnd = string.find( self, inSplitPattern, theStart )

while theSplitStart do

table.insert( outResults, string.sub( self, theStart, theSplitStart-1 ) )

theStart = theSplitEnd + 1

theSplitStart, theSplitEnd = string.find( self, inSplitPattern, theStart )

end

table.insert( outResults, string.sub( self, theStart ) )

return outResults

end

local options =

{

width = 8,

height = 8,

numFrames = 10

}

local sheet = graphics.newImageSheet( “img/environment_copy.png”, options )

– **********************************************************************************************************************

– DISPLAY LEVEL

– **********************************************************************************************************************

local environmentGroup = display.newGroup()

local path = system.pathForFile( “levels/test_environment.csv” )

local tileX = 0

local tileY = 0

for line in io.lines( path ) do

local myTable = line:split(",")

for i = 1,#myTable do

if i ~= 1 then

tileX = tileX + 8

end

if (myTable[i] ~= ‘-1’) then

myTable[i] = myTable[i] + 1

local environment = display.newImage( sheet, myTable[i], tileX, tileY )

environment.name = ‘environment’

environmentGroup:insert(environment)

camera:add(environment, 1)

if (myTable[i] ~= 5) then

physics.addBody(environment, “static”, { bounce=0 })

end

tileY = tileY + 8;

tileX = 0;

end

local player = display.newImageRect(“img/player.png”, 8, 8)

physics.addBody( player, “dynamic”, {bounce=0, radius = player.width * 0.50})

player.name = ‘player’

player.x = 60

player.y = 80

camera:add(player, 1)

local speed = 1.2

local StickLib = require(“lib_analog_stick”)

MyStick = StickLib.NewStick( {

x = 15,

y = 55,

thumbSize = 11,

borderSize = 11,

snapBackSpeed = 0,

R = 255,

G = 255,

B = 255

} )

function moveHero()

MyStick:move(player, speed, false)

end

Runtime:addEventListener( “enterFrame”, moveHero )

camera:setFocus(player)

camera:track()

[/lua]

imageset and player image attached to this post
same config.lua posted on my previous message.
Video

[media]https://vimeo.com/159127677[/media]

I set bounce=0 in both the player and walls but nothing changed.

bendikr5 · March 16, 2016, 7:19am

It does not look like its bouncing back on collision with the wall, but moving back when the joystick is being released. So when you release the joystick and it flings back to its center position, the player moves with the fling.

AAAle · March 16, 2016, 8:40am

Hi Bendikr5, i had the same thought in the first place but this happens even if you move the player with keyboard controls instead of touch.

[media]https://vimeo.com/159180444[/media]

[lua]

display.setStatusBar( display.HiddenStatusBar )

display.setDefault(“minTextureFilter”, “nearest”)

display.setDefault(“magTextureFilter”, “nearest”)

display.setDefault( “background”, .216, .251, .443)

local physics = require “physics”

physics.start()

physics.setGravity( 0, 0 )

local require = require

local perspective = require(“perspective”)

local camera = perspective.createView()

function string:split( inSplitPattern, outResults )

if not outResults then

outResults = {}

end

local theStart = 1

local theSplitStart, theSplitEnd = string.find( self, inSplitPattern, theStart )

while theSplitStart do

table.insert( outResults, string.sub( self, theStart, theSplitStart-1 ) )

theStart = theSplitEnd + 1

theSplitStart, theSplitEnd = string.find( self, inSplitPattern, theStart )

end

table.insert( outResults, string.sub( self, theStart ) )

return outResults

end

local options =

{

width = 8,

height = 8,

numFrames = 10

}

local sheet = graphics.newImageSheet( “img/environment_copy.png”, options )

– **********************************************************************************************************************

– DISPLAY LEVEL

– **********************************************************************************************************************

local environmentGroup = display.newGroup()

local path = system.pathForFile( “levels/test_environment.csv” )

local tileX = 0

local tileY = 0

for line in io.lines( path ) do

local myTable = line:split(",")

for i = 1,#myTable do

if i ~= 1 then

tileX = tileX + 8

end

if (myTable[i] ~= ‘-1’) then

myTable[i] = myTable[i] + 1

local environment = display.newImage( sheet, myTable[i], tileX, tileY )

environment.name = ‘environment’

environmentGroup:insert(environment)

camera:add(environment, 1)

if (myTable[i] ~= 5) then

physics.addBody(environment, “static”, { bounce=0 })

end

tileY = tileY + 8;

tileX = 0;

end

local player = display.newImageRect(“img/player.png”, 8, 8)

physics.addBody( player, “dynamic”, {bounce=0, radius = player.width * 0.50})

player.name = ‘player’

player.x = 60

player.y = 80

camera:add(player, 1)

local speed = 1.2

local function onKey( event )

print('Key ’ … event.keyName … ’ is ’ … event.phase)

if event.keyName == “up” then

if event.phase == “down” then

player.isMovingUp = true

else

player.isMovingUp = false

end

return true

elseif event.keyName == “down” then

if event.phase == “down” then

player.isMovingDown = true

else

player.isMovingDown = false

end

return true

elseif event.keyName == “left” then

if event.phase == “down” then

player.isMovingLeft = true

else

player.isMovingLeft = false

end

return true

elseif event.keyName == “right” then

if event.phase == “down” then

player.isMovingRight = true

else

player.isMovingRight = false

end

return true

end

return false

end

Runtime:addEventListener( “key”, onKey )

function moveplayer()

if player.isMovingUp then

player.y = player.y - speed

elseif player.isMovingDown then

player.y = player.y + speed

end

if player.isMovingLeft then

player.x = player.x - speed

elseif player.isMovingRight then

player.x = player.x + speed

end

Runtime:addEventListener( “enterFrame”, moveplayer )

camera:setFocus(player)

camera:track()

[/lua]

BTW in the first video i posted you can see i release the touch at around 00:12 and the player doesn’t go back following the joystick.

bendikr5 · March 16, 2016, 1:30pm

I checked the original video and you are correct! I must confess I did not read your code or check any of the other videos before commenting:)

But after reading your code, the issue might be that you are setting your players x and y explicit, and not using forces. Setting x and y does not work good with physics object, so either if that is the case or not, do not do that…

Play around with player:applyForce(xForce, yForce, player.x, player.y) and see if that solves anything.

As an example: Not tested, so adjust the force…

 if player.isMovingUp then player:applyForce(0, -50, player.x, player.y) elseif player.isMovingDown then . . .