Rotating Background with Buttons

Games
#1

I’m having a weird glitch whenever I try to rotate my background. When I press either of my rotation buttons, it takes a second for the background to actually start rotating, but when it does, it rotates incredibly fast, and after a while of rotating, it disappears. Here’s the main code, minus what I’m using to rotate the background:

[code]
local physics = require(“physics”)
physics.start()
physics.setGravity( 0, 0 )

display.setStatusBar(display.HiddenStatusBar)
local airSpeedPlayer = 5 – This determines the speed at which the background moves.

local leftTouched = false
local rightTouched = false – These are booleans used to determine whether a function should do something in particular.

local bkgFilter = { categoryBits = 1, maskBits = 0 }
local playerFilter = { categoryBits = 2, maskBits = 0 } – These collision filters prevent the Background from physically pushing or contacting the plane.

local bkg = display.newImage(“bkg.png”, true)
bkg.x = display.contentWidth / 2
bkg.y = display.contentHeight - (625 / 2)
bkg.alpha = 0.5 – Not strictly necessary.
physics.addBody ( bkg, { filter = bkgFilter } ) – This simplifies the matter of moving the background downwards to give the illusion that the plane is moving.

local plane = display.newImage(“plane.png”)
plane.x, plane.y = display.contentWidth / 2, display.contentHeight / 2
physics.addBody ( plane, { filter = playerFilter } )

local rightArrow = display.newImage(“rightArrow.png”) – This arrow is used to turn the background left, giving the impression of the plane turning right.
rightArrow.x = display.contentWidth - 38.5 – You can modify this depending on the graphic you use for the button.
rightArrow.y = display.contentHeight - 38 – You can modify this depending on the graphic you use for the button.

local leftArrow = display.newImage(“leftArrow.png”) – This arrow is used to turn the background right, giving the impression of the plane turning left.
leftArrow.x = 38.5 – You can modify this depending on the graphic you use for the button.
leftArrow.y = rightArrow.y

bkg:setLinearVelocity( 0, airSpeedPlayer ) – This gets the background moving downwards, giving the impression that the plane is moving.[/code]
Here’s the rotation code which comes after the rest:

[code]
local function leftRotate()
if leftTouched == true then
bkg:rotate( bkg.rotation + 0.000001 )
elseif leftTouched == false then return false
end
end

local function leftTouch(event)
if event.phase == “began” then
leftTouched = true
print ( leftTouched )
elseif event.phase == “ended” then
leftTouched = false
end
end

Runtime:addEventListener ( “enterFrame”, leftRotate )
leftArrow:addEventListener ( “touch”, leftTouch )

local function rightRotate()
if rightTouched == true then
bkg:rotate( bkg.rotation - 0.000001 )
elseif rightTouched == false then return false
end
end

local function rightTouch(event)
if event.phase == “began” then
rightTouched = true
elseif event.phase == “ended” then
rightTouched = false
end
end

Runtime:addEventListener ( “enterFrame”, rightRotate )
rightArrow:addEventListener ( “touch”, rightTouch )[/code]
Is there some other way of rotating the object, or better yet, can I modify the current rotation code to stop the glitch? [import]uid: 82408 topic_id: 27709 reply_id: 327709[/import]

#2

Also, I want this rotation to look nice. It needs to kind of accelerate at first, and also, the background should rotate around the center of the screen, not around the center of the background itself. This is so that the visuals are realistic and neat. If it’s impossible to do one or the other, that’s fine, it’s just a preference. I know my first attempt wouldn’t have even remotely done this, but it would help if I knew a way to get these elements to work. [import]uid: 82408 topic_id: 27709 reply_id: 112406[/import]

#3

Line 22 and line 3 in the first block of code try changing 0.000001 to 0.1. The visual effect should look the same to you but there wont be the delay you have now.

For rotating it slowly at first you would want to use a timer rather than a Runtime listener for the way you are currently doing it.

For rotating it around the center of the screen and not the background itself I believe you could insert the background into a group then rotate the group - I haven’t tested it but I think that may do the trick.

Peach :slight_smile: [import]uid: 52491 topic_id: 27709 reply_id: 112503[/import]

#4

The problem with a timer is that it looks jerky and odd, which I don’t want. I need a smooth rotation. Also, I don’t want the rotation to accelerate indefinitely. I need it to stop accelerating when it reaches a certain ‘turn speed’. That speed should probably also be defined by a variable, that way different planes can ‘turn’ (it’s really the background that’s rotating, of course) at different speeds.

The group thing doesn’t actually work. First off, it starts rotating around the top-left corner of the background. Second, once it’s been rotated this way, the background starts moving the wrong direction; I need it to move down in universal coordinates, not relative coordinates.

Sorry if I sound picky about the details; I’m just trying to make something for a real game that I already have mostly designed in my head. [import]uid: 82408 topic_id: 27709 reply_id: 112577[/import]

#5

I made a bunch of changes to the code recently, such as making the background a simple display object instead of a physics object. Here’s the main code:

[code]
local physics = require(“physics”)
physics.start()
physics.setGravity( 0, 0 )

display.setStatusBar(display.HiddenStatusBar)
local airSpeedPlayer = 5 – This determines the speed at which the background moves.

local turnSpeedPlayer = 8 – This determines the speed at which the background turns.

local leftTouched = false
local rightTouched = false – These are booleans used to determine whether a function should do something in particular.

local bkgFilter = { categoryBits = 1, maskBits = 0 }
local playerFilter = { categoryBits = 2, maskBits = 0 } – These collision filters prevent the Background from physically pushing or contacting the plane.

local bkg = display.newImage(“bkg.png”, true)
bkg.x = display.contentWidth / 2
bkg.y = display.contentHeight - (625 / 2) + 36.25
bkg.alpha = 0.5 – Not strictly necessary.

local plane = display.newImage(“plane.png”)
plane.x, plane.y = display.contentWidth / 2, display.contentHeight / 2
physics.addBody ( plane, { filter = playerFilter } )

local rightArrow = display.newImage(“rightArrow.png”) – This arrow is used to turn the background left, giving the impression of the plane turning right.
rightArrow.x = display.contentWidth - 38.5
rightArrow.y = display.contentHeight - 38

local leftArrow = display.newImage(“leftArrow.png”) – This arrow is used to turn the background right, giving the impression of the plane turning left.
leftArrow.x = 38.5
leftArrow.y = rightArrow.y

local function bkgMove( )
transition.to ( bkg, { y=bkg.y + airSpeedPlayer, time=1000 } ) – This moves the background downwards at a predefined speed, and smoothly too.
end

moveTimer1 = timer.performWithDelay ( 0, bkgMove, 1 ) – This makes sure the background is moving at the very start.
moveTimer2 = timer.performWithDelay ( 1000, bkgMove, 0 ) – This continues the motion.[/code]
Here’s my rotation code, which still doesn’t quite work:

[code]
local function setXRefPoint( )
if bkg.xReference < (display.contentWidth / 2) then
bkg.xReference = (display.contentWidth / 2) - bkg.x – This should, hopefully, set the background’s reference point (the point that it rotates around) to the center of the screen in x coordinates.
end
end

timer.performWithDelay ( 25, setXRefPoint, 0 )

local function setYRefPoint( )
if bkg.yReference < (display.contentHeight / 2) then
bkg.yReference = (display.contentHeight / 2) - bkg.y – This should, hopefully, set the background’s reference point (the point that it rotates around) to the center of the screen in y coordinates.
end
end

timer.performWithDelay ( 25, setYRefPoint, 0 )

local function leftRotate()
if leftTouched == true then
bkg:rotate( bkg.rotation + 0.0001 )
elseif leftTouched == false then return false
end
end

local function leftTouch(event)
if event.phase == “began” then
leftTouched = true
elseif event.phase == “ended” then
leftTouched = false
end
end

timer.performWithDelay ( 25, leftRotate, 0 )
leftArrow:addEventListener ( “touch”, leftTouch )

local function rightRotate()
if rightTouched == true then
bkg:rotate( bkg.rotation - 0.0001 )
elseif rightTouched == false then return false
end
end

local function rightTouch(event)
if event.phase == “began” then
rightTouched = true
elseif event.phase == “ended” then
rightTouched = false
end
end

timer.performWithDelay ( 25, rightRotate, 0 )
rightArrow:addEventListener ( “touch”, rightTouch )[/code]
The background still accelerates rapidly when I try to get it to rotate. Also, I don’t think that the current reference point for the background (the point that the background rotates around) is set quite right. It should be at the very center of the screen, but it doesn’t seem to be doing that. It’s hard to tell though, because it rotates so fast. The first thing is to get it rotating smoothly and at a decent speed, then I can worry about reference points. [import]uid: 82408 topic_id: 27709 reply_id: 112581[/import]