Difficulty in creating objects on different screens

jdsmedeirosbr · July 11, 2018, 12:35pm

Hello, I am creating an app that when playing on some card it is selected and creates a button to send the card to a deck when it is pressed, I have some difficulty in:

1 - Make the cards fill the total width of any device respecting the proportion and the space of 8 pixels.

2 - When playing the card, the button does not appear in the middle of the card

3 - At the touch of the button, I would like the card to transition to the green deck at the top of the screen and the other cards fill the void left by the card selected for the deck.

I’m using Corona 2018.3326 on Windows 7, I’m creating the main base app on iOS, first testing on the iPhone 4S simulator

local composer = require( "composer" ) local widget = require("widget") local scene = composer.newScene() local mFloor = math.floor&nbsp; &nbsp; local myCardsRef, cards = {}, {} local lastTappedCard local navBar&nbsp; local scrollView local deck local sizeDeck = (display.contentHeight \* 45 / 100) - 64 local title local cardDeck1 local cardDeck2 local cardDeck3 local cardDeck4 local cardDeck5 local cardDeck6 local cardDeck7 local cardDeck8 local button function scene:create( event ) &nbsp; &nbsp; local sceneGroup = self.view &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; navBar = display.newRect(sceneGroup,0, 0,display.contentWidth, 64) &nbsp; &nbsp; navBar.anchorX = 0 &nbsp; &nbsp; navBar.anchorY = 0 &nbsp; &nbsp; navBar:setFillColor(1,0,0) &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; deck = display.newRect(sceneGroup,0, navBar.y + navBar.height,display.contentWidth, sizeDeck) &nbsp; &nbsp; deck.anchorX = 0 &nbsp; &nbsp; deck.anchorY = 0 &nbsp; &nbsp; deck:setFillColor(1,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; title = display.newText(sceneGroup,"Home",display.contentCenterX, navBar.y + navBar.height - 20,nil, 17) &nbsp; &nbsp; title:setFillColor(1,1,1) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck1 = display.newRect(sceneGroup, 45,deck.y + 8,50,65) &nbsp; &nbsp; cardDeck1.anchorX = 0 &nbsp; &nbsp; cardDeck1.anchorY = 0 &nbsp; &nbsp; cardDeck1:setFillColor(0,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck2 = display.newRect(sceneGroup, cardDeck1.x + cardDeck1.width + 8,deck.y + 8,50,65) &nbsp; &nbsp; cardDeck2.anchorX = 0 &nbsp; &nbsp; cardDeck2.anchorY = 0 &nbsp; &nbsp; cardDeck2:setFillColor(0,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck3 = display.newRect(sceneGroup, cardDeck2.x + cardDeck2.width + 8,deck.y + 8,50,65) &nbsp; &nbsp; cardDeck3.anchorX = 0 &nbsp; &nbsp; cardDeck3.anchorY = 0 &nbsp; &nbsp; cardDeck3:setFillColor(0,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck4 = display.newRect(sceneGroup, cardDeck3.x + cardDeck3.width + 8,deck.y + 8,50,65) &nbsp; &nbsp; cardDeck4.anchorX = 0 &nbsp; &nbsp; cardDeck4.anchorY = 0 &nbsp; &nbsp; cardDeck4:setFillColor(0,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck5 = display.newRect(sceneGroup, 45,cardDeck1.y + cardDeck1.height + 8,50,65) &nbsp; &nbsp; cardDeck5.anchorX = 0 &nbsp; &nbsp; cardDeck5.anchorY = 0 &nbsp; &nbsp; cardDeck5:setFillColor(0,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck6 = display.newRect(sceneGroup, cardDeck5.x + cardDeck5.width + 8,cardDeck1.y + cardDeck1.height + 8,50,65) &nbsp; &nbsp; cardDeck6.anchorX = 0 &nbsp; &nbsp; cardDeck6.anchorY = 0 &nbsp; &nbsp; cardDeck6:setFillColor(0,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck7 = display.newRect(sceneGroup, cardDeck6.x + cardDeck6.width + 8,cardDeck1.y + cardDeck1.height + 8,50,65) &nbsp; &nbsp; cardDeck7.anchorX = 0 &nbsp; &nbsp; cardDeck7.anchorY = 0 &nbsp; &nbsp; cardDeck7:setFillColor(0,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck8 = display.newRect(sceneGroup, cardDeck7.x + cardDeck7.width + 8,cardDeck1.y + cardDeck1.height + 8,50,65) &nbsp; &nbsp; cardDeck8.anchorX = 0 &nbsp; &nbsp; cardDeck8.anchorY = 0 &nbsp; &nbsp; cardDeck8:setFillColor(0,1,0) scrollView = widget.newScrollView( &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; top = display.contentHeight - display.contentHeight \* 55 / 100, &nbsp; &nbsp; &nbsp; left = 0, &nbsp; &nbsp; &nbsp; width = display.contentWidth, &nbsp; &nbsp; &nbsp; height = display.contentHeight \* 55 / 100, &nbsp; &nbsp; &nbsp; scrollWidth = 600, &nbsp; &nbsp; &nbsp; horizontalScrollDisabled = true, &nbsp; &nbsp; &nbsp; scrollHeight = 1300, &nbsp; &nbsp; &nbsp; listener = scrollListener &nbsp; &nbsp; } &nbsp; )&nbsp; &nbsp;&nbsp; &nbsp; sceneGroup:insert(scrollView) &nbsp;&nbsp; for i=1, 86 do &nbsp; &nbsp; cards[#cards + 1] = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name = 'card'..i..'.png',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x&nbsp; &nbsp; = 8 + ( i - 1 ) % 4 \* 76, &nbsp; &nbsp; &nbsp; &nbsp; y&nbsp; &nbsp; = 8 + ( mFloor( ( i - 0.5 ) / 4 ) \* 98 ), &nbsp; &nbsp; &nbsp; &nbsp; w&nbsp; &nbsp; = (display.contentWidth - 40) / 4, &nbsp; &nbsp; &nbsp; &nbsp; h&nbsp; &nbsp; = 90 &nbsp; &nbsp; }&nbsp;&nbsp; end&nbsp; print((scrollView.width - 40) / 4) local function tap( self, event ) &nbsp; &nbsp; if lastTappedCard then &nbsp; &nbsp; &nbsp; &nbsp; myCardsRef[lastTappedCard].alpha = 1 &nbsp; &nbsp; &nbsp; &nbsp; button:removeSelf() &nbsp; &nbsp; &nbsp; &nbsp; button = nil &nbsp; &nbsp; end&nbsp; &nbsp; &nbsp; myCardsRef[self].alpha = 0.5 &nbsp; &nbsp; button = display.newRect(event.x,event.y, 50, 30) &nbsp; &nbsp; button:setFillColor(0,0,0) &nbsp; &nbsp; lastTappedCard = self end for index = 1, #cards do &nbsp; local card = display.newRect(cards[index].x,cards[index].y,cards[index].w,cards[index].h) &nbsp; card.anchorX = 0 &nbsp; card.anchorY = 0 &nbsp; card:setFillColor( 1, 0, 0 ) &nbsp; card.tap = tap &nbsp; card:addEventListener( "tap" ) &nbsp; scrollView:insert( card ) &nbsp; myCardsRef[card] = card end end&nbsp;

rob · July 13, 2018, 8:02pm

I’m having a bit of trouble understanding what you’re asking. There seem to be multiple questions. Can you find your main point of contention and try to clarify it better?

Rob

jdsmedeirosbr · July 13, 2018, 8:16pm

Yes, even in the meantime I have managed to solve some situations, my question now is just a …

when I touch a card, it disappears, so I would like the others in the queue to make a transition animation to fill in the space left, whatever card is withdrawn.

local composer = require( "composer" ) local widget = require("widget") local scene = composer.newScene() local mFloor = math.floor&nbsp; &nbsp; local myCardsRef, cards = {}, {} local lastTappedCard local navBar&nbsp; local scrollView local deck local sizeDeck = (display.contentHeight \* 45 / 100) - 64 local title local cardDeck1 local cardDeck2 local cardDeck3 local cardDeck4 local cardDeck5 local cardDeck6 local cardDeck7 local cardDeck8 local button local oldButton local card local countCard = 0 function scene:create( event ) &nbsp; &nbsp; local sceneGroup = self.view &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; navBar = display.newRect(sceneGroup,0, 0,display.contentWidth, 64) &nbsp; &nbsp; navBar.anchorX = 0 &nbsp; &nbsp; navBar.anchorY = 0 &nbsp; &nbsp; navBar:setFillColor(1,0,0) &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; deck = display.newRect(sceneGroup,0, navBar.y + navBar.height,display.contentWidth, sizeDeck) &nbsp; &nbsp; deck.anchorX = 0 &nbsp; &nbsp; deck.anchorY = 0 &nbsp; &nbsp; deck:setFillColor(1,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; title = display.newText(sceneGroup,"Home",display.contentCenterX, navBar.y + navBar.height - 20,nil, 17) &nbsp; &nbsp; title:setFillColor(1,1,1) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck1 = display.newRect(sceneGroup, 45,deck.y + 8,50,65) &nbsp; &nbsp; cardDeck1.anchorX = 0 &nbsp; &nbsp; cardDeck1.anchorY = 0 &nbsp; &nbsp; cardDeck1:setFillColor(0,1,0) &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck2 = display.newRect(sceneGroup, cardDeck1.x + cardDeck1.width + 8,deck.y + 8,50,65) &nbsp; &nbsp; cardDeck2.anchorX = 0 &nbsp; &nbsp; cardDeck2.anchorY = 0 &nbsp; &nbsp; cardDeck2:setFillColor(0,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck3 = display.newRect(sceneGroup, cardDeck2.x + cardDeck2.width + 8,deck.y + 8,50,65) &nbsp; &nbsp; cardDeck3.anchorX = 0 &nbsp; &nbsp; cardDeck3.anchorY = 0 &nbsp; &nbsp; cardDeck3:setFillColor(0,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck4 = display.newRect(sceneGroup, cardDeck3.x + cardDeck3.width + 8,deck.y + 8,50,65) &nbsp; &nbsp; cardDeck4.anchorX = 0 &nbsp; &nbsp; cardDeck4.anchorY = 0 &nbsp; &nbsp; cardDeck4:setFillColor(0,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck5 = display.newRect(sceneGroup, 45,cardDeck1.y + cardDeck1.height + 8,50,65) &nbsp; &nbsp; cardDeck5.anchorX = 0 &nbsp; &nbsp; cardDeck5.anchorY = 0 &nbsp; &nbsp; cardDeck5:setFillColor(0,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck6 = display.newRect(sceneGroup, cardDeck5.x + cardDeck5.width + 8,cardDeck1.y + cardDeck1.height + 8,50,65) &nbsp; &nbsp; cardDeck6.anchorX = 0 &nbsp; &nbsp; cardDeck6.anchorY = 0 &nbsp; &nbsp; cardDeck6:setFillColor(0,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck7 = display.newRect(sceneGroup, cardDeck6.x + cardDeck6.width + 8,cardDeck1.y + cardDeck1.height + 8,50,65) &nbsp; &nbsp; cardDeck7.anchorX = 0 &nbsp; &nbsp; cardDeck7.anchorY = 0 &nbsp; &nbsp; cardDeck7:setFillColor(0,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck8 = display.newRect(sceneGroup, cardDeck7.x + cardDeck7.width + 8,cardDeck1.y + cardDeck1.height + 8,50,65) &nbsp; &nbsp; cardDeck8.anchorX = 0 &nbsp; &nbsp; cardDeck8.anchorY = 0 &nbsp; &nbsp; cardDeck8:setFillColor(0,1,0) scrollView = widget.newScrollView( &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; top = display.contentHeight - display.contentHeight \* 55 / 100, &nbsp; &nbsp; &nbsp; left = 0, &nbsp; &nbsp; &nbsp; width = display.contentWidth, &nbsp; &nbsp; &nbsp; height = display.contentHeight \* 55 / 100, &nbsp; &nbsp; &nbsp; scrollWidth = 600, &nbsp; &nbsp; &nbsp; horizontalScrollDisabled = true, &nbsp; &nbsp; &nbsp; scrollHeight = 1300, &nbsp; &nbsp; &nbsp; listener = scrollListener &nbsp; &nbsp; } &nbsp; )&nbsp; &nbsp; &nbsp; sceneGroup:insert(scrollView) &nbsp;&nbsp; for i=1, 86 do &nbsp; &nbsp; cards[#cards + 1] = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name = 'card'..i..'.png',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x&nbsp; &nbsp; = 8 + ( i - 1 ) % 4 \* 76, &nbsp; &nbsp; &nbsp; &nbsp; y&nbsp; &nbsp; = 8 + ( mFloor( ( i - 0.5 ) / 4 ) \* 98 ), &nbsp; &nbsp; &nbsp; &nbsp; w&nbsp; &nbsp; = (display.contentWidth - 40) / 4, &nbsp; &nbsp; &nbsp; &nbsp; h&nbsp; &nbsp; = 90 &nbsp; &nbsp; }&nbsp;&nbsp; end&nbsp; local function anim() &nbsp; &nbsp;&nbsp; &nbsp; lastTappedCard:setFillColor(0.5,0.9,0.3) &nbsp;&nbsp; &nbsp; lastTappedCard:removeSelf() &nbsp; cardDeck1.width = 50 &nbsp; cardDeck1.height = 65&nbsp;&nbsp; &nbsp; end local function cardRemove(self,event)&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; display.remove(self)&nbsp; &nbsp; &nbsp; &nbsp; oldButton = nil &nbsp; &nbsp; button = nil&nbsp; &nbsp; &nbsp; lastTappedCard:removeSelf()&nbsp;&nbsp; &nbsp; &nbsp; countCard = countCard + 1 &nbsp; &nbsp; if countCard == 1 then&nbsp; &nbsp; &nbsp; cardDeck1:setFillColor(.9,.04,.8) &nbsp; &nbsp; elseif countCard == 2 then &nbsp; &nbsp; cardDeck2:setFillColor(.9,.04,.8) &nbsp; &nbsp; elseif countCard == 3 then &nbsp; &nbsp; cardDeck3:setFillColor(.9,.04,.8) &nbsp; &nbsp; elseif countCard == 4 then &nbsp; &nbsp; cardDeck4:setFillColor(.9,.04,.8) &nbsp; &nbsp; elseif countCard == 5 then &nbsp; &nbsp; cardDeck5:setFillColor(.9,.04,.8) &nbsp; &nbsp; elseif countCard == 6 then &nbsp; &nbsp; cardDeck6:setFillColor(.9,.04,.8) &nbsp; &nbsp; elseif countCard == 7 then &nbsp; &nbsp; cardDeck7:setFillColor(.9,.04,.8) &nbsp; &nbsp; elseif countCard == 8 then &nbsp; &nbsp; cardDeck8:setFillColor(.9,.04,.8) &nbsp; &nbsp; end&nbsp; &nbsp; &nbsp; lastTappedCard:removeSelf() &nbsp; &nbsp; lastTappedCard = nil &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; end local function tap( self, event ) &nbsp; &nbsp; if lastTappedCard then &nbsp; &nbsp; &nbsp; &nbsp; myCardsRef[lastTappedCard].alpha = 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if oldButton and oldButton.removeSelf then &nbsp; &nbsp; &nbsp; &nbsp; display.remove( oldButton ) &nbsp; &nbsp; &nbsp; &nbsp; oldButton = nil &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; end &nbsp; &nbsp; end&nbsp; &nbsp; &nbsp; myCardsRef[self].alpha = 0.5&nbsp; &nbsp; &nbsp; &nbsp; myCardsRef[self].isEnabled = false &nbsp; &nbsp; oldButton = display.newRect(sceneGroup,myCardsRef[self].x + myCardsRef[self].width \* .5,myCardsRef[self].y + myCardsRef[self].height \* .5, 60, 30)&nbsp; &nbsp; &nbsp; &nbsp; oldButton:setFillColor(0,0,0) &nbsp; &nbsp; getButton = button &nbsp; &nbsp; scrollView:insert(oldButton)&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; lastTappedCard = self&nbsp; &nbsp; &nbsp; oldButton.tap = cardRemove &nbsp; &nbsp; oldButton:addEventListener("tap")&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; return true end &nbsp; for index = 1, #cards do &nbsp; &nbsp; card = display.newRect(sceneGroup,cards[index].x,cards[index].y,cards[index].w,cards[index].h) &nbsp; &nbsp; card.anchorX = 0 &nbsp; &nbsp; card.anchorY = 0 &nbsp; &nbsp; card:setFillColor( 1, 0, 0 ) &nbsp; &nbsp; card.tap = tap &nbsp; &nbsp; card:addEventListener( "tap" ) &nbsp; &nbsp; scrollView:insert( card ) &nbsp; &nbsp; myCardsRef[card] = card &nbsp; end end&nbsp;

cyberparkstudios · July 14, 2018, 10:22pm

I saw your post and thought maybe this might help answer your last question.

Please keep in mind this is based on not totally understanding the question 100% or exactly what the game is suppose to do… but I think I have a fair idea… so I ‘hacked together a sample’ that hopefully will answer or give you some food for thought on how to get the code where you want it.

Also, keep in mind there is usually many different ways to do most things, so this is not the best way by far, and not the way I would do it for myself. I tired to keep your code close to how you had it, but I had to make some changes just for me to be able to work with it and experiment.

Test this out by making a new project. Cut and paste the code below and see if it does close to what you were looking for.

Keep in mind it needs work still.

I have issues dealing with the widget scrollView, so I substituted that with display group to hold the cards. The group will function similar to a scrollview. I just could not get the scrollview to work with the code as I have the code. I imagine there is a way to make it work - i just don’t use the scrollview much.

main.lua

display.setStatusBar( display.HiddenStatusBar ) local Composer = require ( "composer" ) Composer.removeHidden() Composer.gotoScene("Scenes.gameScene", {time=550, effect="crossFade"})

gameScene.lua

local composer = require( "composer" ) local widget = require("widget") local mFloor = math.floor local myCardsRef, cards = {}, {} local lastTappedCard local navBar local scrollView local sizeDeck = (display.contentHeight \* 45 / 100) - 64 local title local decks\_backGround local deck local cardDecks = {} local deckCursor = 1 local cardCursor = 0 local deckWt = 50 local deckHt = 65 local leftEdge = 45 local topEdge = 45 local horzCur local vertCur local gap = 8 local bg\_cover local effectRect local sg local gameState = "READY" local W = display.contentWidth local H = display.contentHeight local MID\_W = W \* .5 local MID\_H = H \* .5 local scene = composer.newScene() local function updateCursors() deckCursor = deckCursor + 1 if deckCursor \> 8 then deckCursor = 1 end cardCursor = cardCursor + 1 if cardCursor \> #cards then cardCursor = 1 end print(" cards left " .. #cards - cardCursor) -- adjust the topBounds of the scrollGroup as each card is removed topBounds = H - scrollGroup.height gameState = "READY" end local function endEffect() transition.to(effectRect, {time = 750, alpha = 0, onComplete=updateCursors}) end local function tap( self, event ) if gameState == "READY" then if event.target.isSelected == false then myCardsRef[self]:setFillColor(.5, .5, .5) myCardsRef[self].isSelected = true else local x = myCardsRef[self].x local y = myCardsRef[self].y local idx = myCardsRef[self].scrollIdx local prevX = scrollGroup[idx].x local prevY = scrollGroup[idx].y local prevIdx = idx local spotX = scrollGroup[idx].x local spotY = scrollGroup[idx].y gameState = "EFFECT" myCardsRef[self].x = event.x myCardsRef[self].y = event.y transition.to(myCardsRef[self], {time = 500, x = cardDecks[deckCursor].x, y = cardDecks[deckCursor].y, xScale = .75, yScale = .75}) effectRect.x = cardGroup.x + cards[idx].x effectRect.y = cardGroup.y + cards[idx].y transition.to(effectRect, {time = 500, alpha = 1, onComplete=endEffect}) for i = idx + 1, scrollGroup.numChildren do local x = scrollGroup[i].x local y = scrollGroup[i].y local pIdx = scrollGroup[i].scrollIdx scrollGroup[i].x = prevX scrollGroup[i].y = prevY scrollGroup[i].scrollIdx = prevIdx prevX = x prevY = y prevIdx = pIdx end sg:insert(myCardsRef[self]) end end return true end local function onScroll(e) if gameState == "READY" then local t = e.target if "began" == e.phase then t.isFocus = true display.getCurrentStage():setFocus(t, nil) t.x0 = e.x - t.x t.y0 = e.y - t.y yStart = t.y elseif t.isFocus then if "moved" == e.phase then t.y = e.y - t.y0 if t.y \< topBounds then t.y = topBounds elseif t.y \> botBounds then t.y = botBounds end print(" t.y " .. t.y) elseif "ended" == e.phase or "cancelled" == e.phase then display.getCurrentStage():setFocus(t, nil ) t.isFocus = false end end end return true end ------------------------------------------------------------------ -- COMPOSER EVENTS ------------------------------------------------------------------ function scene:create( e ) sg = self.view bg\_cover = display.newRect(sg, MID\_W, MID\_H, W, H \* .5) bg\_cover.y = -(bg\_cover.height \* .5) bg\_cover:setFillColor(0) navBar = display.newRect(sg,0, 0,display.contentWidth, 64) navBar.anchorX = 0 navBar.anchorY = 0 navBar:setFillColor(1,0,0) topEdge = navBar.y + navBar.height + gap horzCur = leftEdge vertCur = topEdge decks\_backGround = display.newRect(sg,0, navBar.y + navBar.height,display.contentWidth, sizeDeck) decks\_backGround.anchorX = 0 decks\_backGround.anchorY = 0 decks\_backGround:setFillColor(1,1,0) title = display.newText(sg,"Home",display.contentCenterX, navBar.y + navBar.height - 20,nil, 17) title:setFillColor(1,1,1) for i = 1, 8 do table.insert(cardDecks, display.newRect(sg, leftEdge, topEdge, deckWt, deckHt) ) cardDecks[i].anchorX = 0 cardDecks[i].anchorY = 0 if i == 5 then horzCur = leftEdge vertCur = topEdge + deckHt + gap end cardDecks[i].x = horzCur cardDecks[i].y = vertCur horzCur = horzCur + deckWt + gap cardDecks[i]:setFillColor(0, 1, 0) end cardGroup = display.newGroup() sg:insert(cardGroup) cardGroup:toBack() scrollGroup = display.newGroup() cardGroup:insert(scrollGroup) cardGroup.x = 0 cardGroup.y = decks\_backGround.y + decks\_backGround.height cardGroup:addEventListener("touch", onScroll) for i= 1, 86 do cards[#cards + 1] = { name = 'card'..i..'.png', x = 8 + ( i - 1 ) % 4 \* 76, y = 8 + ( mFloor( ( i - 0.5 ) / 4 ) \* 98 ), w = (display.contentWidth - 40) / 4, h = 90 } end for index = 1, #cards do card = display.newRect(cards[index].x,cards[index].y,cards[index].w,cards[index].h) card.anchorX = 0 card.anchorY = 0 card:setFillColor( 1, 0, 0 ) card.tap = tap card.isSelected = false card:addEventListener( "tap" ) scrollGroup:insert(card) myCardsRef[card] = card myCardsRef[card].scrollIdx = index end effectRect = display.newRect(cards[1].w, cards[1].h, cards[1].w, cards[1].h) effectRect:setFillColor(0) effectRect.anchorX = 0 effectRect.anchorY = 0 effectRect.alpha = 0 topBounds = H - scrollGroup.height botBounds = decks\_backGround.y + decks\_backGround.height end function scene:show( e ) if ( e.phase == "will" ) then elseif ( e.phase == "did" ) then end end function scene:hide( e ) if ( e.phase == "will" ) then elseif ( e.phase == "did" ) then end end function scene:destroy( e ) end scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) return scene

Hope it helps.

Best of Luck on your game!

Bob

jdsmedeirosbr · July 14, 2018, 11:05pm

cyberparkstudios:

I saw your post and thought maybe this might help answer your last question.

Please keep in mind this is based on not totally understanding the question 100% or exactly what the game is suppose to do… but I think I have a fair idea… so I ‘hacked together a sample’ that hopefully will answer or give you some food for thought on how to get the code where you want it.

Also, keep in mind there is usually many different ways to do most things, so this is not the best way by far, and not the way I would do it for myself. I tired to keep your code close to how you had it, but I had to make some changes just for me to be able to work with it and experiment.

Test this out by making a new project. Cut and paste the code below and see if it does close to what you were looking for.

Keep in mind it needs work still.

I have issues dealing with the widget scrollView, so I substituted that with display group to hold the cards. The group will function similar to a scrollview. I just could not get the scrollview to work with the code as I have the code. I imagine there is a way to make it work - i just don’t use the scrollview much.

main.lua

display.setStatusBar( display.HiddenStatusBar ) local Composer = require ( "composer" ) Composer.removeHidden() Composer.gotoScene("Scenes.gameScene", {time=550, effect="crossFade"})

gameScene.lua

local composer = require( "composer" ) local widget = require("widget") local mFloor = math.floor local myCardsRef, cards = {}, {} local lastTappedCard local navBar local scrollView local sizeDeck = (display.contentHeight \* 45 / 100) - 64 local title local decks\_backGround local deck local cardDecks = {} local deckCursor = 1 local cardCursor = 0 local deckWt = 50 local deckHt = 65 local leftEdge = 45 local topEdge = 45 local horzCur local vertCur local gap = 8 local bg\_cover local effectRect local sg local gameState = "READY" local W = display.contentWidth local H = display.contentHeight local MID\_W = W \* .5 local MID\_H = H \* .5 local scene = composer.newScene() local function updateCursors() deckCursor = deckCursor + 1 if deckCursor \> 8 then deckCursor = 1 end cardCursor = cardCursor + 1 if cardCursor \> #cards then cardCursor = 1 end print(" cards left " .. #cards - cardCursor) -- adjust the topBounds of the scrollGroup as each card is removed topBounds = H - scrollGroup.height gameState = "READY" end local function endEffect() transition.to(effectRect, {time = 750, alpha = 0, onComplete=updateCursors}) end local function tap( self, event ) if gameState == "READY" then if event.target.isSelected == false then myCardsRef[self]:setFillColor(.5, .5, .5) myCardsRef[self].isSelected = true else local x = myCardsRef[self].x local y = myCardsRef[self].y local idx = myCardsRef[self].scrollIdx local prevX = scrollGroup[idx].x local prevY = scrollGroup[idx].y local prevIdx = idx local spotX = scrollGroup[idx].x local spotY = scrollGroup[idx].y gameState = "EFFECT" myCardsRef[self].x = event.x myCardsRef[self].y = event.y transition.to(myCardsRef[self], {time = 500, x = cardDecks[deckCursor].x, y = cardDecks[deckCursor].y, xScale = .75, yScale = .75}) effectRect.x = cardGroup.x + cards[idx].x effectRect.y = cardGroup.y + cards[idx].y transition.to(effectRect, {time = 500, alpha = 1, onComplete=endEffect}) for i = idx + 1, scrollGroup.numChildren do local x = scrollGroup[i].x local y = scrollGroup[i].y local pIdx = scrollGroup[i].scrollIdx scrollGroup[i].x = prevX scrollGroup[i].y = prevY scrollGroup[i].scrollIdx = prevIdx prevX = x prevY = y prevIdx = pIdx end sg:insert(myCardsRef[self]) end end return true end local function onScroll(e) if gameState == "READY" then local t = e.target if "began" == e.phase then t.isFocus = true display.getCurrentStage():setFocus(t, nil) t.x0 = e.x - t.x t.y0 = e.y - t.y yStart = t.y elseif t.isFocus then if "moved" == e.phase then t.y = e.y - t.y0 if t.y \< topBounds then t.y = topBounds elseif t.y \> botBounds then t.y = botBounds end print(" t.y " .. t.y) elseif "ended" == e.phase or "cancelled" == e.phase then display.getCurrentStage():setFocus(t, nil ) t.isFocus = false end end end return true end ------------------------------------------------------------------ -- COMPOSER EVENTS ------------------------------------------------------------------ function scene:create( e ) sg = self.view bg\_cover = display.newRect(sg, MID\_W, MID\_H, W, H \* .5) bg\_cover.y = -(bg\_cover.height \* .5) bg\_cover:setFillColor(0) navBar = display.newRect(sg,0, 0,display.contentWidth, 64) navBar.anchorX = 0 navBar.anchorY = 0 navBar:setFillColor(1,0,0) topEdge = navBar.y + navBar.height + gap horzCur = leftEdge vertCur = topEdge decks\_backGround = display.newRect(sg,0, navBar.y + navBar.height,display.contentWidth, sizeDeck) decks\_backGround.anchorX = 0 decks\_backGround.anchorY = 0 decks\_backGround:setFillColor(1,1,0) title = display.newText(sg,"Home",display.contentCenterX, navBar.y + navBar.height - 20,nil, 17) title:setFillColor(1,1,1) for i = 1, 8 do table.insert(cardDecks, display.newRect(sg, leftEdge, topEdge, deckWt, deckHt) ) cardDecks[i].anchorX = 0 cardDecks[i].anchorY = 0 if i == 5 then horzCur = leftEdge vertCur = topEdge + deckHt + gap end cardDecks[i].x = horzCur cardDecks[i].y = vertCur horzCur = horzCur + deckWt + gap cardDecks[i]:setFillColor(0, 1, 0) end cardGroup = display.newGroup() sg:insert(cardGroup) cardGroup:toBack() scrollGroup = display.newGroup() cardGroup:insert(scrollGroup) cardGroup.x = 0 cardGroup.y = decks\_backGround.y + decks\_backGround.height cardGroup:addEventListener("touch", onScroll) for i= 1, 86 do cards[#cards + 1] = { name = 'card'..i..'.png', x = 8 + ( i - 1 ) % 4 \* 76, y = 8 + ( mFloor( ( i - 0.5 ) / 4 ) \* 98 ), w = (display.contentWidth - 40) / 4, h = 90 } end for index = 1, #cards do card = display.newRect(cards[index].x,cards[index].y,cards[index].w,cards[index].h) card.anchorX = 0 card.anchorY = 0 card:setFillColor( 1, 0, 0 ) card.tap = tap card.isSelected = false card:addEventListener( "tap" ) scrollGroup:insert(card) myCardsRef[card] = card myCardsRef[card].scrollIdx = index end effectRect = display.newRect(cards[1].w, cards[1].h, cards[1].w, cards[1].h) effectRect:setFillColor(0) effectRect.anchorX = 0 effectRect.anchorY = 0 effectRect.alpha = 0 topBounds = H - scrollGroup.height botBounds = decks\_backGround.y + decks\_backGround.height end function scene:show( e ) if ( e.phase == "will" ) then elseif ( e.phase == "did" ) then end end function scene:hide( e ) if ( e.phase == "will" ) then elseif ( e.phase == "did" ) then end end function scene:destroy( e ) end scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) return scene

Hope it helps.

Best of Luck on your game!

Bob

hello cyberparkstudios, thanks for the help in the code, it was nice, but your example still does not do what I want. in this case, when I tap a card to go to the deck, it was to disappear from the scrollview and the other cards move in a transition to take the place of the card that was withdrawn. And the app I want to create is a decks creator for the royale clash. I want to guaradr some deck models to use in the game

cyberparkstudios · July 15, 2018, 12:32am

So, the first part you want does happen… the selected card ‘transitions’ from the scrollview and to one of the 8 decks…and it does disappear from the scrollview (in my case scrollGroup).

The second part you want, I didn’t want to mess with the transitioning, because your question was not clear and I had already spent a lot of time getting it to where it is. So, I decided to just used a simple ‘hack’ for a visual effect for the card as it was removed and simply moved all the cards up through the group to fill that empty slot.

As you probably see how I did that; I simply found the index of the card that was selected and removed that card, and then looped though the rest of the scrollGroup assigning the x and y of a previous card’s spot to the next card in the group… simply moving them all up one spot int he scrollGroup.

To do what you want, you can instead of assigning the x and y, create a transition for each of the cards to ‘transition’ to that x and y position of the card before it.

I thought about doing that for you, but honestly already spent a lot of time on it, and based on your original question was not sure that was what you wanted. I am not sure when I will have time to mess with it more. So play around with it and see if you can code the transitions.

You really only need to transition the 8 to 12 cards that are visible on the display. For the other cards below screen can do as I have it presently; just set their x,y to the previous spot.

If I was making the game for myself I would start from scratch and it a bit different. There are better ways to do this, and would take redoing most all the code. I am not real familiar with that Clash Royal card game to understand the exact action/effect you are looking for, and am not sure what you mean by a deck creator.

See what you can come up with doing transitions for what you need.

I may not have time to even look at this tomorrow, but I will check back to see if you have any success doing the transitions. Check the corona docs for transtition.to

Good luck

Bob

jdsmedeirosbr · July 17, 2018, 12:27pm

cyberparkstudios:

So, the first part you want does happen… the selected card ‘transitions’ from the scrollview and to one of the 8 decks…and it does disappear from the scrollview (in my case scrollGroup).

The second part you want, I didn’t want to mess with the transitioning, because your question was not clear and I had already spent a lot of time getting it to where it is. So, I decided to just used a simple ‘hack’ for a visual effect for the card as it was removed and simply moved all the cards up through the group to fill that empty slot.

As you probably see how I did that; I simply found the index of the card that was selected and removed that card, and then looped though the rest of the scrollGroup assigning the x and y of a previous card’s spot to the next card in the group… simply moving them all up one spot int he scrollGroup.

To do what you want, you can instead of assigning the x and y, create a transition for each of the cards to ‘transition’ to that x and y position of the card before it.

I thought about doing that for you, but honestly already spent a lot of time on it, and based on your original question was not sure that was what you wanted. I am not sure when I will have time to mess with it more. So play around with it and see if you can code the transitions.

You really only need to transition the 8 to 12 cards that are visible on the display. For the other cards below screen can do as I have it presently; just set their x,y to the previous spot.

If I was making the game for myself I would start from scratch and it a bit different. There are better ways to do this, and would take redoing most all the code. I am not real familiar with that Clash Royal card game to understand the exact action/effect you are looking for, and am not sure what you mean by a deck creator.

See what you can come up with doing transitions for what you need.

I may not have time to even look at this tomorrow, but I will check back to see if you have any success doing the transitions. Check the corona docs for transtition.to

Good luck

Bob

thank you very much for your help cyberparkstudios, but I have not been able to remove the card yet and leave the deck with the correct amount after removing one or more cards, I have already looked for the solution a lot and I confess that I am almost giving up this project.

here’s a preview of the app I want: https://play.google.com/store/apps/details?id=com.oryginal.deckit

rob · July 13, 2018, 8:02pm

I’m having a bit of trouble understanding what you’re asking. There seem to be multiple questions. Can you find your main point of contention and try to clarify it better?

Rob

jdsmedeirosbr · July 13, 2018, 8:16pm

Yes, even in the meantime I have managed to solve some situations, my question now is just a …

when I touch a card, it disappears, so I would like the others in the queue to make a transition animation to fill in the space left, whatever card is withdrawn.

local composer = require( "composer" ) local widget = require("widget") local scene = composer.newScene() local mFloor = math.floor&nbsp; &nbsp; local myCardsRef, cards = {}, {} local lastTappedCard local navBar&nbsp; local scrollView local deck local sizeDeck = (display.contentHeight \* 45 / 100) - 64 local title local cardDeck1 local cardDeck2 local cardDeck3 local cardDeck4 local cardDeck5 local cardDeck6 local cardDeck7 local cardDeck8 local button local oldButton local card local countCard = 0 function scene:create( event ) &nbsp; &nbsp; local sceneGroup = self.view &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; navBar = display.newRect(sceneGroup,0, 0,display.contentWidth, 64) &nbsp; &nbsp; navBar.anchorX = 0 &nbsp; &nbsp; navBar.anchorY = 0 &nbsp; &nbsp; navBar:setFillColor(1,0,0) &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; deck = display.newRect(sceneGroup,0, navBar.y + navBar.height,display.contentWidth, sizeDeck) &nbsp; &nbsp; deck.anchorX = 0 &nbsp; &nbsp; deck.anchorY = 0 &nbsp; &nbsp; deck:setFillColor(1,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; title = display.newText(sceneGroup,"Home",display.contentCenterX, navBar.y + navBar.height - 20,nil, 17) &nbsp; &nbsp; title:setFillColor(1,1,1) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck1 = display.newRect(sceneGroup, 45,deck.y + 8,50,65) &nbsp; &nbsp; cardDeck1.anchorX = 0 &nbsp; &nbsp; cardDeck1.anchorY = 0 &nbsp; &nbsp; cardDeck1:setFillColor(0,1,0) &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck2 = display.newRect(sceneGroup, cardDeck1.x + cardDeck1.width + 8,deck.y + 8,50,65) &nbsp; &nbsp; cardDeck2.anchorX = 0 &nbsp; &nbsp; cardDeck2.anchorY = 0 &nbsp; &nbsp; cardDeck2:setFillColor(0,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck3 = display.newRect(sceneGroup, cardDeck2.x + cardDeck2.width + 8,deck.y + 8,50,65) &nbsp; &nbsp; cardDeck3.anchorX = 0 &nbsp; &nbsp; cardDeck3.anchorY = 0 &nbsp; &nbsp; cardDeck3:setFillColor(0,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck4 = display.newRect(sceneGroup, cardDeck3.x + cardDeck3.width + 8,deck.y + 8,50,65) &nbsp; &nbsp; cardDeck4.anchorX = 0 &nbsp; &nbsp; cardDeck4.anchorY = 0 &nbsp; &nbsp; cardDeck4:setFillColor(0,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck5 = display.newRect(sceneGroup, 45,cardDeck1.y + cardDeck1.height + 8,50,65) &nbsp; &nbsp; cardDeck5.anchorX = 0 &nbsp; &nbsp; cardDeck5.anchorY = 0 &nbsp; &nbsp; cardDeck5:setFillColor(0,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck6 = display.newRect(sceneGroup, cardDeck5.x + cardDeck5.width + 8,cardDeck1.y + cardDeck1.height + 8,50,65) &nbsp; &nbsp; cardDeck6.anchorX = 0 &nbsp; &nbsp; cardDeck6.anchorY = 0 &nbsp; &nbsp; cardDeck6:setFillColor(0,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck7 = display.newRect(sceneGroup, cardDeck6.x + cardDeck6.width + 8,cardDeck1.y + cardDeck1.height + 8,50,65) &nbsp; &nbsp; cardDeck7.anchorX = 0 &nbsp; &nbsp; cardDeck7.anchorY = 0 &nbsp; &nbsp; cardDeck7:setFillColor(0,1,0) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; cardDeck8 = display.newRect(sceneGroup, cardDeck7.x + cardDeck7.width + 8,cardDeck1.y + cardDeck1.height + 8,50,65) &nbsp; &nbsp; cardDeck8.anchorX = 0 &nbsp; &nbsp; cardDeck8.anchorY = 0 &nbsp; &nbsp; cardDeck8:setFillColor(0,1,0) scrollView = widget.newScrollView( &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; top = display.contentHeight - display.contentHeight \* 55 / 100, &nbsp; &nbsp; &nbsp; left = 0, &nbsp; &nbsp; &nbsp; width = display.contentWidth, &nbsp; &nbsp; &nbsp; height = display.contentHeight \* 55 / 100, &nbsp; &nbsp; &nbsp; scrollWidth = 600, &nbsp; &nbsp; &nbsp; horizontalScrollDisabled = true, &nbsp; &nbsp; &nbsp; scrollHeight = 1300, &nbsp; &nbsp; &nbsp; listener = scrollListener &nbsp; &nbsp; } &nbsp; )&nbsp; &nbsp; &nbsp; sceneGroup:insert(scrollView) &nbsp;&nbsp; for i=1, 86 do &nbsp; &nbsp; cards[#cards + 1] = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name = 'card'..i..'.png',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x&nbsp; &nbsp; = 8 + ( i - 1 ) % 4 \* 76, &nbsp; &nbsp; &nbsp; &nbsp; y&nbsp; &nbsp; = 8 + ( mFloor( ( i - 0.5 ) / 4 ) \* 98 ), &nbsp; &nbsp; &nbsp; &nbsp; w&nbsp; &nbsp; = (display.contentWidth - 40) / 4, &nbsp; &nbsp; &nbsp; &nbsp; h&nbsp; &nbsp; = 90 &nbsp; &nbsp; }&nbsp;&nbsp; end&nbsp; local function anim() &nbsp; &nbsp;&nbsp; &nbsp; lastTappedCard:setFillColor(0.5,0.9,0.3) &nbsp;&nbsp; &nbsp; lastTappedCard:removeSelf() &nbsp; cardDeck1.width = 50 &nbsp; cardDeck1.height = 65&nbsp;&nbsp; &nbsp; end local function cardRemove(self,event)&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; display.remove(self)&nbsp; &nbsp; &nbsp; &nbsp; oldButton = nil &nbsp; &nbsp; button = nil&nbsp; &nbsp; &nbsp; lastTappedCard:removeSelf()&nbsp;&nbsp; &nbsp; &nbsp; countCard = countCard + 1 &nbsp; &nbsp; if countCard == 1 then&nbsp; &nbsp; &nbsp; cardDeck1:setFillColor(.9,.04,.8) &nbsp; &nbsp; elseif countCard == 2 then &nbsp; &nbsp; cardDeck2:setFillColor(.9,.04,.8) &nbsp; &nbsp; elseif countCard == 3 then &nbsp; &nbsp; cardDeck3:setFillColor(.9,.04,.8) &nbsp; &nbsp; elseif countCard == 4 then &nbsp; &nbsp; cardDeck4:setFillColor(.9,.04,.8) &nbsp; &nbsp; elseif countCard == 5 then &nbsp; &nbsp; cardDeck5:setFillColor(.9,.04,.8) &nbsp; &nbsp; elseif countCard == 6 then &nbsp; &nbsp; cardDeck6:setFillColor(.9,.04,.8) &nbsp; &nbsp; elseif countCard == 7 then &nbsp; &nbsp; cardDeck7:setFillColor(.9,.04,.8) &nbsp; &nbsp; elseif countCard == 8 then &nbsp; &nbsp; cardDeck8:setFillColor(.9,.04,.8) &nbsp; &nbsp; end&nbsp; &nbsp; &nbsp; lastTappedCard:removeSelf() &nbsp; &nbsp; lastTappedCard = nil &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; end local function tap( self, event ) &nbsp; &nbsp; if lastTappedCard then &nbsp; &nbsp; &nbsp; &nbsp; myCardsRef[lastTappedCard].alpha = 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if oldButton and oldButton.removeSelf then &nbsp; &nbsp; &nbsp; &nbsp; display.remove( oldButton ) &nbsp; &nbsp; &nbsp; &nbsp; oldButton = nil &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; end &nbsp; &nbsp; end&nbsp; &nbsp; &nbsp; myCardsRef[self].alpha = 0.5&nbsp; &nbsp; &nbsp; &nbsp; myCardsRef[self].isEnabled = false &nbsp; &nbsp; oldButton = display.newRect(sceneGroup,myCardsRef[self].x + myCardsRef[self].width \* .5,myCardsRef[self].y + myCardsRef[self].height \* .5, 60, 30)&nbsp; &nbsp; &nbsp; &nbsp; oldButton:setFillColor(0,0,0) &nbsp; &nbsp; getButton = button &nbsp; &nbsp; scrollView:insert(oldButton)&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; lastTappedCard = self&nbsp; &nbsp; &nbsp; oldButton.tap = cardRemove &nbsp; &nbsp; oldButton:addEventListener("tap")&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; return true end &nbsp; for index = 1, #cards do &nbsp; &nbsp; card = display.newRect(sceneGroup,cards[index].x,cards[index].y,cards[index].w,cards[index].h) &nbsp; &nbsp; card.anchorX = 0 &nbsp; &nbsp; card.anchorY = 0 &nbsp; &nbsp; card:setFillColor( 1, 0, 0 ) &nbsp; &nbsp; card.tap = tap &nbsp; &nbsp; card:addEventListener( "tap" ) &nbsp; &nbsp; scrollView:insert( card ) &nbsp; &nbsp; myCardsRef[card] = card &nbsp; end end&nbsp;

cyberparkstudios · July 14, 2018, 10:22pm

I saw your post and thought maybe this might help answer your last question.

Please keep in mind this is based on not totally understanding the question 100% or exactly what the game is suppose to do… but I think I have a fair idea… so I ‘hacked together a sample’ that hopefully will answer or give you some food for thought on how to get the code where you want it.

Also, keep in mind there is usually many different ways to do most things, so this is not the best way by far, and not the way I would do it for myself. I tired to keep your code close to how you had it, but I had to make some changes just for me to be able to work with it and experiment.

Test this out by making a new project. Cut and paste the code below and see if it does close to what you were looking for.

Keep in mind it needs work still.

I have issues dealing with the widget scrollView, so I substituted that with display group to hold the cards. The group will function similar to a scrollview. I just could not get the scrollview to work with the code as I have the code. I imagine there is a way to make it work - i just don’t use the scrollview much.

main.lua

display.setStatusBar( display.HiddenStatusBar ) local Composer = require ( "composer" ) Composer.removeHidden() Composer.gotoScene("Scenes.gameScene", {time=550, effect="crossFade"})

gameScene.lua

local composer = require( "composer" ) local widget = require("widget") local mFloor = math.floor local myCardsRef, cards = {}, {} local lastTappedCard local navBar local scrollView local sizeDeck = (display.contentHeight \* 45 / 100) - 64 local title local decks\_backGround local deck local cardDecks = {} local deckCursor = 1 local cardCursor = 0 local deckWt = 50 local deckHt = 65 local leftEdge = 45 local topEdge = 45 local horzCur local vertCur local gap = 8 local bg\_cover local effectRect local sg local gameState = "READY" local W = display.contentWidth local H = display.contentHeight local MID\_W = W \* .5 local MID\_H = H \* .5 local scene = composer.newScene() local function updateCursors() deckCursor = deckCursor + 1 if deckCursor \> 8 then deckCursor = 1 end cardCursor = cardCursor + 1 if cardCursor \> #cards then cardCursor = 1 end print(" cards left " .. #cards - cardCursor) -- adjust the topBounds of the scrollGroup as each card is removed topBounds = H - scrollGroup.height gameState = "READY" end local function endEffect() transition.to(effectRect, {time = 750, alpha = 0, onComplete=updateCursors}) end local function tap( self, event ) if gameState == "READY" then if event.target.isSelected == false then myCardsRef[self]:setFillColor(.5, .5, .5) myCardsRef[self].isSelected = true else local x = myCardsRef[self].x local y = myCardsRef[self].y local idx = myCardsRef[self].scrollIdx local prevX = scrollGroup[idx].x local prevY = scrollGroup[idx].y local prevIdx = idx local spotX = scrollGroup[idx].x local spotY = scrollGroup[idx].y gameState = "EFFECT" myCardsRef[self].x = event.x myCardsRef[self].y = event.y transition.to(myCardsRef[self], {time = 500, x = cardDecks[deckCursor].x, y = cardDecks[deckCursor].y, xScale = .75, yScale = .75}) effectRect.x = cardGroup.x + cards[idx].x effectRect.y = cardGroup.y + cards[idx].y transition.to(effectRect, {time = 500, alpha = 1, onComplete=endEffect}) for i = idx + 1, scrollGroup.numChildren do local x = scrollGroup[i].x local y = scrollGroup[i].y local pIdx = scrollGroup[i].scrollIdx scrollGroup[i].x = prevX scrollGroup[i].y = prevY scrollGroup[i].scrollIdx = prevIdx prevX = x prevY = y prevIdx = pIdx end sg:insert(myCardsRef[self]) end end return true end local function onScroll(e) if gameState == "READY" then local t = e.target if "began" == e.phase then t.isFocus = true display.getCurrentStage():setFocus(t, nil) t.x0 = e.x - t.x t.y0 = e.y - t.y yStart = t.y elseif t.isFocus then if "moved" == e.phase then t.y = e.y - t.y0 if t.y \< topBounds then t.y = topBounds elseif t.y \> botBounds then t.y = botBounds end print(" t.y " .. t.y) elseif "ended" == e.phase or "cancelled" == e.phase then display.getCurrentStage():setFocus(t, nil ) t.isFocus = false end end end return true end ------------------------------------------------------------------ -- COMPOSER EVENTS ------------------------------------------------------------------ function scene:create( e ) sg = self.view bg\_cover = display.newRect(sg, MID\_W, MID\_H, W, H \* .5) bg\_cover.y = -(bg\_cover.height \* .5) bg\_cover:setFillColor(0) navBar = display.newRect(sg,0, 0,display.contentWidth, 64) navBar.anchorX = 0 navBar.anchorY = 0 navBar:setFillColor(1,0,0) topEdge = navBar.y + navBar.height + gap horzCur = leftEdge vertCur = topEdge decks\_backGround = display.newRect(sg,0, navBar.y + navBar.height,display.contentWidth, sizeDeck) decks\_backGround.anchorX = 0 decks\_backGround.anchorY = 0 decks\_backGround:setFillColor(1,1,0) title = display.newText(sg,"Home",display.contentCenterX, navBar.y + navBar.height - 20,nil, 17) title:setFillColor(1,1,1) for i = 1, 8 do table.insert(cardDecks, display.newRect(sg, leftEdge, topEdge, deckWt, deckHt) ) cardDecks[i].anchorX = 0 cardDecks[i].anchorY = 0 if i == 5 then horzCur = leftEdge vertCur = topEdge + deckHt + gap end cardDecks[i].x = horzCur cardDecks[i].y = vertCur horzCur = horzCur + deckWt + gap cardDecks[i]:setFillColor(0, 1, 0) end cardGroup = display.newGroup() sg:insert(cardGroup) cardGroup:toBack() scrollGroup = display.newGroup() cardGroup:insert(scrollGroup) cardGroup.x = 0 cardGroup.y = decks\_backGround.y + decks\_backGround.height cardGroup:addEventListener("touch", onScroll) for i= 1, 86 do cards[#cards + 1] = { name = 'card'..i..'.png', x = 8 + ( i - 1 ) % 4 \* 76, y = 8 + ( mFloor( ( i - 0.5 ) / 4 ) \* 98 ), w = (display.contentWidth - 40) / 4, h = 90 } end for index = 1, #cards do card = display.newRect(cards[index].x,cards[index].y,cards[index].w,cards[index].h) card.anchorX = 0 card.anchorY = 0 card:setFillColor( 1, 0, 0 ) card.tap = tap card.isSelected = false card:addEventListener( "tap" ) scrollGroup:insert(card) myCardsRef[card] = card myCardsRef[card].scrollIdx = index end effectRect = display.newRect(cards[1].w, cards[1].h, cards[1].w, cards[1].h) effectRect:setFillColor(0) effectRect.anchorX = 0 effectRect.anchorY = 0 effectRect.alpha = 0 topBounds = H - scrollGroup.height botBounds = decks\_backGround.y + decks\_backGround.height end function scene:show( e ) if ( e.phase == "will" ) then elseif ( e.phase == "did" ) then end end function scene:hide( e ) if ( e.phase == "will" ) then elseif ( e.phase == "did" ) then end end function scene:destroy( e ) end scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) return scene

Hope it helps.

Best of Luck on your game!

Bob

jdsmedeirosbr · July 14, 2018, 11:05pm

cyberparkstudios:

I saw your post and thought maybe this might help answer your last question.

Please keep in mind this is based on not totally understanding the question 100% or exactly what the game is suppose to do… but I think I have a fair idea… so I ‘hacked together a sample’ that hopefully will answer or give you some food for thought on how to get the code where you want it.

Also, keep in mind there is usually many different ways to do most things, so this is not the best way by far, and not the way I would do it for myself. I tired to keep your code close to how you had it, but I had to make some changes just for me to be able to work with it and experiment.

Test this out by making a new project. Cut and paste the code below and see if it does close to what you were looking for.

Keep in mind it needs work still.

I have issues dealing with the widget scrollView, so I substituted that with display group to hold the cards. The group will function similar to a scrollview. I just could not get the scrollview to work with the code as I have the code. I imagine there is a way to make it work - i just don’t use the scrollview much.

main.lua

display.setStatusBar( display.HiddenStatusBar ) local Composer = require ( "composer" ) Composer.removeHidden() Composer.gotoScene("Scenes.gameScene", {time=550, effect="crossFade"})

gameScene.lua

local composer = require( "composer" ) local widget = require("widget") local mFloor = math.floor local myCardsRef, cards = {}, {} local lastTappedCard local navBar local scrollView local sizeDeck = (display.contentHeight \* 45 / 100) - 64 local title local decks\_backGround local deck local cardDecks = {} local deckCursor = 1 local cardCursor = 0 local deckWt = 50 local deckHt = 65 local leftEdge = 45 local topEdge = 45 local horzCur local vertCur local gap = 8 local bg\_cover local effectRect local sg local gameState = "READY" local W = display.contentWidth local H = display.contentHeight local MID\_W = W \* .5 local MID\_H = H \* .5 local scene = composer.newScene() local function updateCursors() deckCursor = deckCursor + 1 if deckCursor \> 8 then deckCursor = 1 end cardCursor = cardCursor + 1 if cardCursor \> #cards then cardCursor = 1 end print(" cards left " .. #cards - cardCursor) -- adjust the topBounds of the scrollGroup as each card is removed topBounds = H - scrollGroup.height gameState = "READY" end local function endEffect() transition.to(effectRect, {time = 750, alpha = 0, onComplete=updateCursors}) end local function tap( self, event ) if gameState == "READY" then if event.target.isSelected == false then myCardsRef[self]:setFillColor(.5, .5, .5) myCardsRef[self].isSelected = true else local x = myCardsRef[self].x local y = myCardsRef[self].y local idx = myCardsRef[self].scrollIdx local prevX = scrollGroup[idx].x local prevY = scrollGroup[idx].y local prevIdx = idx local spotX = scrollGroup[idx].x local spotY = scrollGroup[idx].y gameState = "EFFECT" myCardsRef[self].x = event.x myCardsRef[self].y = event.y transition.to(myCardsRef[self], {time = 500, x = cardDecks[deckCursor].x, y = cardDecks[deckCursor].y, xScale = .75, yScale = .75}) effectRect.x = cardGroup.x + cards[idx].x effectRect.y = cardGroup.y + cards[idx].y transition.to(effectRect, {time = 500, alpha = 1, onComplete=endEffect}) for i = idx + 1, scrollGroup.numChildren do local x = scrollGroup[i].x local y = scrollGroup[i].y local pIdx = scrollGroup[i].scrollIdx scrollGroup[i].x = prevX scrollGroup[i].y = prevY scrollGroup[i].scrollIdx = prevIdx prevX = x prevY = y prevIdx = pIdx end sg:insert(myCardsRef[self]) end end return true end local function onScroll(e) if gameState == "READY" then local t = e.target if "began" == e.phase then t.isFocus = true display.getCurrentStage():setFocus(t, nil) t.x0 = e.x - t.x t.y0 = e.y - t.y yStart = t.y elseif t.isFocus then if "moved" == e.phase then t.y = e.y - t.y0 if t.y \< topBounds then t.y = topBounds elseif t.y \> botBounds then t.y = botBounds end print(" t.y " .. t.y) elseif "ended" == e.phase or "cancelled" == e.phase then display.getCurrentStage():setFocus(t, nil ) t.isFocus = false end end end return true end ------------------------------------------------------------------ -- COMPOSER EVENTS ------------------------------------------------------------------ function scene:create( e ) sg = self.view bg\_cover = display.newRect(sg, MID\_W, MID\_H, W, H \* .5) bg\_cover.y = -(bg\_cover.height \* .5) bg\_cover:setFillColor(0) navBar = display.newRect(sg,0, 0,display.contentWidth, 64) navBar.anchorX = 0 navBar.anchorY = 0 navBar:setFillColor(1,0,0) topEdge = navBar.y + navBar.height + gap horzCur = leftEdge vertCur = topEdge decks\_backGround = display.newRect(sg,0, navBar.y + navBar.height,display.contentWidth, sizeDeck) decks\_backGround.anchorX = 0 decks\_backGround.anchorY = 0 decks\_backGround:setFillColor(1,1,0) title = display.newText(sg,"Home",display.contentCenterX, navBar.y + navBar.height - 20,nil, 17) title:setFillColor(1,1,1) for i = 1, 8 do table.insert(cardDecks, display.newRect(sg, leftEdge, topEdge, deckWt, deckHt) ) cardDecks[i].anchorX = 0 cardDecks[i].anchorY = 0 if i == 5 then horzCur = leftEdge vertCur = topEdge + deckHt + gap end cardDecks[i].x = horzCur cardDecks[i].y = vertCur horzCur = horzCur + deckWt + gap cardDecks[i]:setFillColor(0, 1, 0) end cardGroup = display.newGroup() sg:insert(cardGroup) cardGroup:toBack() scrollGroup = display.newGroup() cardGroup:insert(scrollGroup) cardGroup.x = 0 cardGroup.y = decks\_backGround.y + decks\_backGround.height cardGroup:addEventListener("touch", onScroll) for i= 1, 86 do cards[#cards + 1] = { name = 'card'..i..'.png', x = 8 + ( i - 1 ) % 4 \* 76, y = 8 + ( mFloor( ( i - 0.5 ) / 4 ) \* 98 ), w = (display.contentWidth - 40) / 4, h = 90 } end for index = 1, #cards do card = display.newRect(cards[index].x,cards[index].y,cards[index].w,cards[index].h) card.anchorX = 0 card.anchorY = 0 card:setFillColor( 1, 0, 0 ) card.tap = tap card.isSelected = false card:addEventListener( "tap" ) scrollGroup:insert(card) myCardsRef[card] = card myCardsRef[card].scrollIdx = index end effectRect = display.newRect(cards[1].w, cards[1].h, cards[1].w, cards[1].h) effectRect:setFillColor(0) effectRect.anchorX = 0 effectRect.anchorY = 0 effectRect.alpha = 0 topBounds = H - scrollGroup.height botBounds = decks\_backGround.y + decks\_backGround.height end function scene:show( e ) if ( e.phase == "will" ) then elseif ( e.phase == "did" ) then end end function scene:hide( e ) if ( e.phase == "will" ) then elseif ( e.phase == "did" ) then end end function scene:destroy( e ) end scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) return scene

Hope it helps.

Best of Luck on your game!

Bob

hello cyberparkstudios, thanks for the help in the code, it was nice, but your example still does not do what I want. in this case, when I tap a card to go to the deck, it was to disappear from the scrollview and the other cards move in a transition to take the place of the card that was withdrawn. And the app I want to create is a decks creator for the royale clash. I want to guaradr some deck models to use in the game

cyberparkstudios · July 15, 2018, 12:32am