-SOLVED- Movement Buttons?

I want my game to have two buttons on the screen. I want to have an arrow facing left, and an arrow facing right. I know how to display them, but not tell them to move my game character to the left or right. Does anyone have any code they’re willing to share? [import]uid: 103624 topic_id: 17762 reply_id: 317762[/import]

You have a few options

  1. increment the x ie… player.x = player.x + 1
  2. use transitions
  3. if your using physics you could use setLinearVelocity

Hope that helps :slight_smile: [import]uid: 84637 topic_id: 17762 reply_id: 67751[/import]

I’m going to go with option 1. What would the code look like?

Also, I want my sprite to turn into it’s animating.gif form when it’s walking. As soon as it stops, I want it to turn back into it’s standing form. Can I use two images for this and mirror them for the other side, or do I need four images? [import]uid: 103624 topic_id: 17762 reply_id: 67763[/import]

It would look like this (and yeah you can use two and mirror)

[code]

local player = display.newImage(“player.png”)

–Table to hold our move buttons
local buttons = {}

–Table to hold the properties for the move buttons
local buttonProperties = {
{img = “walkButtonRight.png”, x = 100, y = 100, myWalkType = “Right”},
{img = “walkButtonLeft.png”, x = 200, y = 100, myWalkType = “Left”}
}

–Function to make the player move/walk
local function walk(event)
local phase = event.phase
local target = event.target

if phase == “began” then
if target.myWalkType == “Right” then
player.xScale = 1 --Flip player image ( I assume its facing right to begin with)
player.x = player.x + 1
elseif target.myWalkType == “Left” then
player.xScale = -1 --Flip player image ( I assume its facing right to begin with)
player.x = player.x - 1
end
end

return true
end
–Load up buttons, set properties and add listeners
for i = 1, #buttonProperties do
buttons[i] = display.newImage(buttonProperties[i].img)
buttons[i].x = buttonProperties[i].x
buttons[i].y = buttonProperties[i].y
buttons[i].myWalkType = buttonProperties[i].myWalkType

buttons[i]:addEventListener(“touch”, walk)
end
[/code] [import]uid: 84637 topic_id: 17762 reply_id: 67765[/import]

I believe it’s better practice to use

[lua]player:translate(-1,0)[/lua]

instead of

[lua]player.x = player.x - 1[/lua]

as the former doesn’t need to read the value first. It may not make a noticeable difference in performance, but it’s a good habit to get into.

also it looks like line 22 should actually read

[lua]player.xScale = -1 --Flip player image ( I assume its facing right to begin with)[/lua]

(instead of yScale) [import]uid: 49447 topic_id: 17762 reply_id: 67766[/import]

You were correct about line 22, i modified my post. Thanks for pointing that out [import]uid: 84637 topic_id: 17762 reply_id: 67768[/import]

Would like to thank you Danny.

Your sample code surely help me out learning about character`s movement as well.

Regards,
Rodrigo. [import]uid: 89165 topic_id: 17762 reply_id: 67821[/import]

Hmm… also, my buttons are responding. I put a print statement when they were pressed, but nothing happens. [import]uid: 103624 topic_id: 17762 reply_id: 67855[/import]

Also, I think my buttons’ placement point (for lack of a better word) is centered, which makes things problematic when placing them on the screen. All of my other images have placement points at the top left corner of their image region, but not the buttons. Is this something that has to do with the code? Or could it be because it’s not in the gameGroup? [import]uid: 103624 topic_id: 17762 reply_id: 67826[/import]

I want the main character to transform into it’s animating.gif when it’s moving, and back to it’s stationary when it’s stopped. What do you guys suggest?

This is what I currently have.

[lua]function createButtons()
local buttons = {}
local buttonProperties =
{
{img = “visuals/game_buttonRight.png”, x = 200, y = 100, direction = “Right”},
{img = “visuals/game_buttonLeft.png”, x = 100, y = 100, direction = “Left”},
}
local function walk(event)
local phase = event.phase
local target = event.target
if phase == “began” then
if target.direction == “Right” then
pig.xScale = 1
pig.x = pig.x + 1
elseif target.direction == “Left” then
pig.xScale = -1
pig.x = pig.x - 1
end
end
return true
end
for i = 1, #buttonProperties do
buttons[i] = display.newImage(buttonProperties[i].img)
buttons[i].x = buttonProperties[i].x
buttons[i].y = buttonProperties[i].y
buttons[i].directon = buttonProperties[i].direction
buttons[i]:addEventListener(“touch”, walk)
end
end[/lua] [import]uid: 103624 topic_id: 17762 reply_id: 67822[/import]

IKinx - we don’t support animated GIFs, we use spritesheets.

To give you an idea of moving a character with directional buttons AND playing an animation (that stops when the character does) please take a look at this tutorial; http://techority.com/2011/05/01/using-sprites-in-your-corona-iphone-application/

That should help get you started.

Peach :slight_smile: [import]uid: 52491 topic_id: 17762 reply_id: 67883[/import]

I screwed up somewhere. :stuck_out_tongue:

Error:
[lua]Windows simulator build date: Jul 27 2011 @ 06:45:53

Copyright © 2009-2011 A n s c a , I n c .
Version: 2.0.0
Build: 2011.591
WARNING: Failed to find image(game_pig.png)
Runtime error
…rs\Kyle\Documents\Coding\Corona\Makin’ Bank\main.lua:26: bad argument
#1 to ‘newSpriteSet’ (sprite.SpriteSheet expected, got nil)
stack traceback:
[C]: ?
[C]: in function ‘newSpriteSet’
…rs\Kyle\Documents\Coding\Corona\Makin’ Bank\mRuntime error: …rs\Kyl
e\Documents\Coding\Corona\Makin’ Bank\main.lua:26: bad argument #1 to ‘newSprite
Set’ (sprite.SpriteSheet expected, got nil)
stack traceback:
[C]: ?
[C]: in function ‘newSpriteSet’
…rs\Kyle\Documents\Coding\Corona\Makin’ Bank\main.lua:26: in[/lua]

main.lua
[lua]function createPig()
pig = display.newImage(“visuals/game_pig.png”, 376, 397)
local pigsheet = sprite.newSpriteSheet(“game_pig.png”, 48, 48)
local pigset = sprite.newSpriteSet(pigsheet, 1, 8)
sprite.add (pigset, “pigsleft”, 4, 4, 0, 0)
sprite.add (pigset, “pigmleft”, 1, 3, 300, 0)
sprite.add (pigset, “pigsright”, 8, 8, 0, 0)
sprite.add (pigset, “pigmright”, 5, 7, 300, 0)
pig = sprite.newSprite(pigset, 376, 397)
pig:prepare(“pigsleft”)
end

function createButtons()
local motionX = 0
local speed = 4
local leftButton = display.newImage(“visuals/game_buttonLeft.png”, 40, 440)
local rightButton = display.newImage(“visuals/game_buttonRight.png”, 760, 440)
local function stopPig (event)
if event.phase ==“ended” then
motionx = 0
motiony = 0
pig:prepare(“pigsleft”)
end
end
Runtime:addEventListener(“touch”, stopPig)
local function movePig (event)
pig.x = pig.x + motionX
end
timer = timer.performWithDelay(1, movePig, 0)
function touchLeft (event)
motionx = -speed
pig:prepare(“pigmleft”)
pig:play(“pigmleft”)
end
leftButton:addEventListener(“touch”, touchLeft)
function touchRight (event)
motionx = speed
pig:prepare(“pigmright”)
pig:play(“pigmright”)
end
right:addEventListener(“touch”, touchright)
end[/lua] [import]uid: 103624 topic_id: 17762 reply_id: 68036[/import]

Your error says your image can’t be found - so check the name and location of the file :slight_smile: (Careful with caps, too.)

Peach :slight_smile: [import]uid: 52491 topic_id: 17762 reply_id: 68077[/import]

I made a lot of progress, but now I have an annoying thing. :confused:

The spriteSheet made the X placement point in the center of the image region. Because of this, my code isn’t the same and it sort of causes me to get confused.

Could someone confirm that the placement point or w/e is in the center (Ex: On my 48x48 sprite, the x center is put on 24, instead of 0.)? And if I’m right, how can I change it? [import]uid: 103624 topic_id: 17762 reply_id: 68104[/import]

Hey IKinx,

To change the Reference Point of the object (yes, youre right, the default reference point of objects is the Center so to change that you use this API below):

[lua]yourObject:setReferencePoint(referencePoint)[/lua]

The 'referencePoint"can be one of those below:

display.CenterReferencePoint
display.TopLeftReferencePoint
display.TopCenterReferencePoint
display.TopRightReferencePoint
display.CenterRightReferencePoint
display.BottomRightReferencePoint
display.BottomCenterReferencePoint
display.BottomLeftReferencePoint
display.CenterLeftReferencePoint

And so you can change using this API the reference point of your image or wahtever else. :slight_smile:

For more details about the API - Check it out here:
http://developer.anscamobile.com/reference/index/objectsetreferencepoint
Regards,
Rodrigo.
[import]uid: 89165 topic_id: 17762 reply_id: 68107[/import]

Rodrigo is spot on for simplifying this - make it the top left corner and you should be good to go.

Peach :slight_smile: [import]uid: 52491 topic_id: 17762 reply_id: 68117[/import]

Anyone know? [import]uid: 103624 topic_id: 17762 reply_id: 68245[/import]

Make sure your spritesheet is the correct dimensions and each frame is 48x48.

Is there any transparency around the edge of your sheet making it larger?

Peach :slight_smile: [import]uid: 52491 topic_id: 17762 reply_id: 68321[/import]

There is not. :confused:

It’s just weird how when I move to the right it sometimes displays an invisible scene while other times (after a restart) it displays 48x96 part of my image. Even then, that part is a merge between two of the other stages in the animation.

Edit: It only happens when I move the sprite to the right, not left. Did I do something wrong when I prepared and played the sprites? [import]uid: 103624 topic_id: 17762 reply_id: 68393[/import]

Alright, now I solved that problem, but my animation to the right is acting a little weird. Sometimes, it plays an invisible texture for a second and then plays the correct one that is next in the animation. I’m sure this is happening because I can actually stop the sprite in it’s invisible state.
[lua]function createPig()
local pigsheet = sprite.newSpriteSheet(“visuals/game_pig.png”, 96, 96)
local pigset = sprite.newSpriteSet(pigsheet, 1, 6)
sprite.add (pigset, “pigmleft”, 1, 3, 250, 0)
sprite.add (pigset, “pigmright”, 4, 6, 250, 0)
pig = sprite.newSprite(pigset)
pig:setReferencePoint(display.TopLeftReferencePoint);
pig.x = display.contentWidth / 2 - 48
pig.y = 349
end

function createButtons()
local motionX = 0
local speed = 6
local leftButton = display.newImage(“visuals/game_buttonLeft.png”, 18, 390)
local rightButton = display.newImage(“visuals/game_buttonRight.png”, 710, 390)
function touchLeft (event)
motionX = -speed
pig:prepare(“pigmleft”)
pig:play(“pigmleft”)
end
function touchRight (event)
motionX = speed
pig:prepare(“pigmright”)
pig:play(“pigmright”)
end
local function movePig(event)
pig.x = pig.x + motionX
if(pig.x < 0) then
pig.x = 704
end
if(pig.x > 704) then
pig.x = 0
end
end
local function stopPig (event)
if event.phase ==“ended” then
motionX = 0
pig:pause()
end
end
leftButton:addEventListener(“touch”, touchLeft)
rightButton:addEventListener(“touch”, touchRight)
timer.performWithDelay(1, movePig, 0)
Runtime:addEventListener(“touch”, stopPig)
end[/lua] [import]uid: 103624 topic_id: 17762 reply_id: 68168[/import]