dynamic size of sprite

Getting Started Newbie Questions
#1

How does one have a sprite resize automatically to a certain size no matter what the sizes on the imageSheet are?

I know how to do it with an image:

Using display.newImageRect( [parent,] filename, [baseDir,] width, height ), one gives the width and the height. So whatever image (filename) size is used, it is resized automatically to the correct size.

But:

Using display.newSprite( [parent,] imageSheet, sequenceData ), I have not found how to do the same thing. The actual size of the images on the imageSheet is displayed no matter what I try.

#2

I’m not 100% sure I understand what you mean. Also, you accidentally created two threads for this topic.

With newSprite, the sprite receives its width and height from the associated image sheet’s configuration table. You can read about it in the documentation: https://docs.coronalabs.com/api/library/graphics/newImageSheet.html.

If you want to resize the sprite, then you need to either insert a different sized image in the image sheet, or scale the sprite using scale() or xScale and yScale.

 

#3

I removed the duplicate thread.

Rob

#4

Great. Thank you and sorry about the duplicate thread.

#5

Still having trouble with this. The board I am using can be resized depending on the chosen number of rows and columns. So images and imageSheet need to be automatically scaled.

On line 410, I xScale the imageSheet. It works.

Then I use a touch event, and on line 430 (phase "began), I xScale it again (otherwise it goes back to original size when touched). As long as the piece is touched, it works.

Then when phase is “moved”, I have to xScale it again on line 437.

However when I let go, the piece goes to the imageSheet size which I do not want. I have not found how to change that.

 function board:newSprite(r,c,id) if board.piece == nil then board.piece = {} end local pieces = board.piece local nextPiece = #pieces+1 -- imageSheet options local options = { width = 82, height = 82, numFrames = 10, --optional parameters; used for scaled content support sheetContentWidth = 820, -- width of original 1x size of entire sheet sheetContentHeight = 82, -- height of original 1x size of entire sheet } local blueBallSheet = graphics.newImageSheet( subDirSprite .. sprites[1], options ) local sequenceData = { name="firing", start=1, -- optional, not needed if starts from 1 count=10, -- optional, not needed if goes to the end of the sprite sheet time=1500, loopCount = 3, -- Optional ; default is 0 (loop indefinitely) loopDirection = "bounce" -- Optional ; values include "forward" or "bounce" } pieces[nextPiece] = display.newSprite(self, blueBallSheet, sequenceData ) -- piece position pieces[nextPiece].x, pieces[nextPiece].y = c\*width, r\*height pieces[nextPiece].xScale = 3 -- local copy of piece just created local currentPiece = pieces[nextPiece] currentPiece.id = nextPiece currentPiece.r,currentPiece.c = r,c function currentPiece:touch( event ) if not self.moving and board.status == "idle" and event.phase == "began" then -- first we set the focus on the object (currentPiece) display.getCurrentStage():setFocus( self, event.id ) -- Moves the target object to the visual front of its parent group (object.parent). self:toFront() self.isFocus = true self.isMoving = true -- then we store the original x and y position of currentPiece self.markX = self.x self.markY = self.y self.xScale = 3 self:play() elseif self.isFocus then if event.phase == "moved" then self.xScale = 3

            – dx is the distance from the touch x to let go of x (from xStart to x)

            local dx, dy = abs(event.x - event.xStart), abs(event.y - event.yStart)

            – declaration left-right, up-down

            local lr, ud = false, false

            – check if moved more left-right (lr) or up-down (ud) and keep that one.

            if dx > 16 or dy > 16 then

              if dx > dy then lr = true end

              if dy > dx then ud = true end

            end

            – get the new coordinates while moving, continuous new x is original x (markX) + distance moved

            self.x = event.x - event.xStart + self.markX

            self.y = event.y - event.yStart + self.markY

            – depending if ud or lr, do not change x or y (move only in one direction)

            if ud then self.x = self.markX end

            if lr then self.y = self.markY end

            – only allow moving a single space

            if self.x < self.markX - width then self.x = self.markX - width end

            if self.x > self.markX + width then self.x = self.markX + width end

            if self.y < self.markY - height then self.y = self.markY - height end

            if self.y > self.markY + height then self.y = self.markY + height end

          elseif event.phase == “ended” or event.phase == “cancelled” then

            – is there a new piece under where we let go?

            local lx = (self.contentBounds.xMin + self.contentBounds.xMax) * 0.5

            local ly = (self.contentBounds.yMin + self.contentBounds.yMax) * 0.5

            local pieceToSwap = board:findUnderPiece(lx,ly,self.id)

            – keep from double touches (called every time there is a swap)

            local function checkMatches()

              if pieceToSwap then pieceToSwap.moving = false end

              self.moving = false

              board:detectMatch()

            end

            local function noMove()

              self.moving = false

            end

            if pieceToSwap then

              – keep from double touches

              pieceToSwap.moving = true

              – swap row and column

              pieceToSwap.r, self.r = self.r, pieceToSwap.r

              pieceToSwap.c, self.c = self.c, pieceToSwap.c

              – moves the touched piece onto the new square

              transition.to(self, { tag=“board”, time = 250, xScale = 1, yScale = 1, x = pieceToSwap.x, y = pieceToSwap.y, transition = easing.outBounce, onComplete = checkMatches } )

              – moves the under piece to touched piece square

              transition.to(pieceToSwap, { tag=“board”, time = 250, x = self.markX, y = self.markY, transition = easing.outBounce } )

            else

              – if no swap (let go on same square), transition back to same square

              transition.to(self, { tag=“board”, time = 333, xScale = 1, yScale = 1, x = self.markX, y = self.markY, transition = easing.outBounce, onComplete = noMove }  )

            end

            – we end the movement by removing the focus from the object

            display.getCurrentStage():setFocus( self, nil )

            self.isFocus = false

          end

        end

        – return true so Corona knows that the touch event was handled propertly

        return true

      end

      – finally, add an event listener to our piece to allow it to be dragged

      currentPiece:addEventListener( “touch” )

  end

#6

I’m not 100% sure I understand what you mean. Also, you accidentally created two threads for this topic.

With newSprite, the sprite receives its width and height from the associated image sheet’s configuration table. You can read about it in the documentation: https://docs.coronalabs.com/api/library/graphics/newImageSheet.html.

If you want to resize the sprite, then you need to either insert a different sized image in the image sheet, or scale the sprite using scale() or xScale and yScale.

 

#7

I removed the duplicate thread.

Rob

#8

Great. Thank you and sorry about the duplicate thread.

#9

Still having trouble with this. The board I am using can be resized depending on the chosen number of rows and columns. So images and imageSheet need to be automatically scaled.

On line 410, I xScale the imageSheet. It works.

Then I use a touch event, and on line 430 (phase "began), I xScale it again (otherwise it goes back to original size when touched). As long as the piece is touched, it works.

Then when phase is “moved”, I have to xScale it again on line 437.

However when I let go, the piece goes to the imageSheet size which I do not want. I have not found how to change that.

 function board:newSprite(r,c,id) if board.piece == nil then board.piece = {} end local pieces = board.piece local nextPiece = #pieces+1 -- imageSheet options local options = { width = 82, height = 82, numFrames = 10, --optional parameters; used for scaled content support sheetContentWidth = 820, -- width of original 1x size of entire sheet sheetContentHeight = 82, -- height of original 1x size of entire sheet } local blueBallSheet = graphics.newImageSheet( subDirSprite .. sprites[1], options ) local sequenceData = { name="firing", start=1, -- optional, not needed if starts from 1 count=10, -- optional, not needed if goes to the end of the sprite sheet time=1500, loopCount = 3, -- Optional ; default is 0 (loop indefinitely) loopDirection = "bounce" -- Optional ; values include "forward" or "bounce" } pieces[nextPiece] = display.newSprite(self, blueBallSheet, sequenceData ) -- piece position pieces[nextPiece].x, pieces[nextPiece].y = c\*width, r\*height pieces[nextPiece].xScale = 3 -- local copy of piece just created local currentPiece = pieces[nextPiece] currentPiece.id = nextPiece currentPiece.r,currentPiece.c = r,c function currentPiece:touch( event ) if not self.moving and board.status == "idle" and event.phase == "began" then -- first we set the focus on the object (currentPiece) display.getCurrentStage():setFocus( self, event.id ) -- Moves the target object to the visual front of its parent group (object.parent). self:toFront() self.isFocus = true self.isMoving = true -- then we store the original x and y position of currentPiece self.markX = self.x self.markY = self.y self.xScale = 3 self:play() elseif self.isFocus then if event.phase == "moved" then self.xScale = 3

            – dx is the distance from the touch x to let go of x (from xStart to x)

            local dx, dy = abs(event.x - event.xStart), abs(event.y - event.yStart)

            – declaration left-right, up-down

            local lr, ud = false, false

            – check if moved more left-right (lr) or up-down (ud) and keep that one.

            if dx > 16 or dy > 16 then

              if dx > dy then lr = true end

              if dy > dx then ud = true end

            end

            – get the new coordinates while moving, continuous new x is original x (markX) + distance moved

            self.x = event.x - event.xStart + self.markX

            self.y = event.y - event.yStart + self.markY

            – depending if ud or lr, do not change x or y (move only in one direction)

            if ud then self.x = self.markX end

            if lr then self.y = self.markY end

            – only allow moving a single space

            if self.x < self.markX - width then self.x = self.markX - width end

            if self.x > self.markX + width then self.x = self.markX + width end

            if self.y < self.markY - height then self.y = self.markY - height end

            if self.y > self.markY + height then self.y = self.markY + height end

          elseif event.phase == “ended” or event.phase == “cancelled” then

            – is there a new piece under where we let go?

            local lx = (self.contentBounds.xMin + self.contentBounds.xMax) * 0.5

            local ly = (self.contentBounds.yMin + self.contentBounds.yMax) * 0.5

            local pieceToSwap = board:findUnderPiece(lx,ly,self.id)

            – keep from double touches (called every time there is a swap)

            local function checkMatches()

              if pieceToSwap then pieceToSwap.moving = false end

              self.moving = false

              board:detectMatch()

            end

            local function noMove()

              self.moving = false

            end

            if pieceToSwap then

              – keep from double touches

              pieceToSwap.moving = true

              – swap row and column

              pieceToSwap.r, self.r = self.r, pieceToSwap.r

              pieceToSwap.c, self.c = self.c, pieceToSwap.c

              – moves the touched piece onto the new square

              transition.to(self, { tag=“board”, time = 250, xScale = 1, yScale = 1, x = pieceToSwap.x, y = pieceToSwap.y, transition = easing.outBounce, onComplete = checkMatches } )

              – moves the under piece to touched piece square

              transition.to(pieceToSwap, { tag=“board”, time = 250, x = self.markX, y = self.markY, transition = easing.outBounce } )

            else

              – if no swap (let go on same square), transition back to same square

              transition.to(self, { tag=“board”, time = 333, xScale = 1, yScale = 1, x = self.markX, y = self.markY, transition = easing.outBounce, onComplete = noMove }  )

            end

            – we end the movement by removing the focus from the object

            display.getCurrentStage():setFocus( self, nil )

            self.isFocus = false

          end

        end

        – return true so Corona knows that the touch event was handled propertly

        return true

      end

      – finally, add an event listener to our piece to allow it to be dragged

      currentPiece:addEventListener( “touch” )

  end