content image
I changed a little template from TurtleVshares. I modified the code in the template, but I am going to incorporate physical difficulties when the join. As shown in the image above, after character1 throws, then he will move / replace character 2. can anyone help me?
Like this one:
Before throw 
characer1 ready to throw
After throw 
change to character2
Are you trying to cycle the image? Do you also want to change the x coordinate as well? If so you will probably need to use a spriteSheet and change the current image.
Start by creating an image sheet with both positions of the character in it side by side. If the characters were 200 pixels wide by 400 pixels high, you would make a spritesheet 400 pixels wide by 400 pixels high.
*****************************************************
* * *
* * *
* * *
* * *
* * *
* * *
* * *
* * *
* * *
*****************************************************
– add this code
local widthOfTile = 200 – the width of one of the sprites
local heightOfTile = 400 – the height of the sprites
imageSheet = sprite.newSpriteSheet(“images/nameOfTheSpriteSheet.png”, widthOfTile, heightOfTile)
local tileset1 = sprite.newSpriteSet(imageSheet, 1, 2) – image sheet, start frame, frame count
–
then use this to change the current frame from 1 to 2 which will change your sprite from “pull back” to “release”
tilesprite.currentFrame = 2
If you want to move the character as well, use transition.to
transition.to( tilesprite, { time = 2, x = tilesprite.x + 10, y= tilesprite.y, } )
Great, but i don’t need spritesheet.
. The image below:
No spriteSheet anymore…
– this is as bare-bones as I could make it for you. I would recommend using
– spriteSheets because as you progress, animations will ostensibly
– contain more frames and a spritesheet is far more efficient. That said… the
– below code should work
– START CODE ----------------------------------------------------------------------------------
– start by creating an image. I have two images in the same directory as the
– main.lua file (image1.png and image2.png)
myImage = display.newImage( “image1.png” )
– set the x,y location of the image.
myImage.x = 100; myImage.y = 100
– this function gets called on “touch” and that association is made
– in the function below: Runtime:addEventListener(“touch”,touchScreen)
local function touchScreen(event, self) – “event” is a critical parameter
– there are multiple phases of a touch event, we are going to use “began”,
– the initial part of the event and “ended” the last part of the event.
if event.phase == “began” then
– (THE USER JUST TOUCHED THE MOBILE DEVICE SCREEN)
– remove the active instance of the image
myImage:removeSelf( )
– create a new image (i.e. the throw state)
myImage = display.newImage( “image2.png” )
– move the image slightly to the right as requested
myImage.x = 150; myImage.y = 100
elseif event.phase == “ended” then
– (THE USER JUST RELEASED THE MOBILE DEVICE SCREEN)
– remove the active instance of the image
myImage:removeSelf( )
– create a new image (i.e. the default state)
myImage = display.newImage( “image1.png” )
– move the image back to the original, resting state
myImage.x = 100; myImage.y = 100
end
end
– add a listener so the touchScreen function is called when the user
– touches the screen
Runtime:addEventListener(“touch”,touchScreen)
– END CODE ----------------------------------------------------------------------------------
Are you trying to cycle the image? Do you also want to change the x coordinate as well? If so you will probably need to use a spriteSheet and change the current image.
Start by creating an image sheet with both positions of the character in it side by side. If the characters were 200 pixels wide by 400 pixels high, you would make a spritesheet 400 pixels wide by 400 pixels high.
*****************************************************
* * *
* * *
* * *
* * *
* * *
* * *
* * *
* * *
* * *
*****************************************************
– add this code
local widthOfTile = 200 – the width of one of the sprites
local heightOfTile = 400 – the height of the sprites
imageSheet = sprite.newSpriteSheet(“images/nameOfTheSpriteSheet.png”, widthOfTile, heightOfTile)
local tileset1 = sprite.newSpriteSet(imageSheet, 1, 2) – image sheet, start frame, frame count
–
then use this to change the current frame from 1 to 2 which will change your sprite from “pull back” to “release”
tilesprite.currentFrame = 2
If you want to move the character as well, use transition.to
transition.to( tilesprite, { time = 2, x = tilesprite.x + 10, y= tilesprite.y, } )
Great, but i don’t need spritesheet.
. The image below:
No spriteSheet anymore…
– this is as bare-bones as I could make it for you. I would recommend using
– spriteSheets because as you progress, animations will ostensibly
– contain more frames and a spritesheet is far more efficient. That said… the
– below code should work
– START CODE ----------------------------------------------------------------------------------
– start by creating an image. I have two images in the same directory as the
– main.lua file (image1.png and image2.png)
myImage = display.newImage( “image1.png” )
– set the x,y location of the image.
myImage.x = 100; myImage.y = 100
– this function gets called on “touch” and that association is made
– in the function below: Runtime:addEventListener(“touch”,touchScreen)
local function touchScreen(event, self) – “event” is a critical parameter
– there are multiple phases of a touch event, we are going to use “began”,
– the initial part of the event and “ended” the last part of the event.
if event.phase == “began” then
– (THE USER JUST TOUCHED THE MOBILE DEVICE SCREEN)
– remove the active instance of the image
myImage:removeSelf( )
– create a new image (i.e. the throw state)
myImage = display.newImage( “image2.png” )
– move the image slightly to the right as requested
myImage.x = 150; myImage.y = 100
elseif event.phase == “ended” then
– (THE USER JUST RELEASED THE MOBILE DEVICE SCREEN)
– remove the active instance of the image
myImage:removeSelf( )
– create a new image (i.e. the default state)
myImage = display.newImage( “image1.png” )
– move the image back to the original, resting state
myImage.x = 100; myImage.y = 100
end
end
– add a listener so the touchScreen function is called when the user
– touches the screen
Runtime:addEventListener(“touch”,touchScreen)
– END CODE ----------------------------------------------------------------------------------