Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Drag and drop
Started by android.masc May 22 2015 03:27 AM

10 replies to this topic
[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

android.masc

[GLOBAL: userInfoPane.html]
android.masc
  • Observer

  • 13 posts
  • Corona SDK

Salve a tutti,

mi chiamo Giuseppe,

da poco mi sono avvicinato a Corona SDK.

Sto cercando di sviluppare un piccolo gioco

da distribuire gratuitamente

per alunni con difficoltà cognitive:

trascinare il cerchio nel cestino dello stesso colore.

Sono giorni che mi sono bloccato

su una situazione:

quando i cerchi sono stati rimossi

perchè hanno colliso col cestino giusto,

questi non riesco a farli "riapparire".

 

questo è tutto il codice:

display.setStatusBar( display.HiddenStatusBar )



local centerX = display.contentCenterX
local centerY = display.contentCenterY
local _W = display.contentWidth
local _H = display.contentHeight


local bkg = display.newImage ("bk.png", centerX, centerY,true)

score = 0





local scoreNumber = display.newText(score, display.contentCenterX + 60, 20, native.systemFontBold, 20)
scoreNumber:setFillColor( 1, 0, 0 )


local function updateScore()
score = score + 1
scoreNumber.text = score
end

local scoreText = display.newImage("score.png", display.contentCenterX, 20)
scoreText.xScale = 1.0
scoreText.yScale = 1.0

local cerchi =
{

	{ x=100, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
	{ x=30,  y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
	
}

local baskets = {} -- table to hold a list of "baskets"


local function checkCollision(event)
 	if event.target then
		local rect = event.target
		for i = 1, #baskets do
			local basket = baskets[i]
			local basketColor = basket.fillColor
			local rectColor = rect.fillColor
			local sameColor = basketColor[1] == rectColor[1] and basketColor[2] == rectColor[2] and basketColor[3] == rectColor[3]
			local distance = math.sqrt((basket.x - rect.x)^2 + (basket.y - rect.y)^2)
			if distance < 20 and sameColor then
			display.remove(rect)

					
				end
			end
		end
	end


local function onTouch( event )
	local t = event.target


	local phase = event.phase
	if "began" == phase then
		-- Make target the top-most object
		local parent = t.parent
		parent:insert( t )
		display.getCurrentStage():setFocus( t )
	t.isFocus = true

	t.x0 = event.x - t.x
	t.y0 = event.y - t.y
elseif t.isFocus then
if "moved" == phase then

			t.x = event.x - t.x0
			t.y = event.y - t.y0
		elseif "ended" == phase or "cancelled" == phase then
			display.getCurrentStage():setFocus( nil )
			t.isFocus = false
		end
	end


	return true
end

--cerchi da spostare
for _,item in ipairs( cerchi ) do
	local button = display.newCircle(item.x, item.y, item.r )                       
	button.fillColor = {item.red, item.green, item.blue}
	button:setFillColor(unpack(button.fillColor))
	button.strokeWidth = 3
	button:setStrokeColor(0)
	-- Make the button instance respond to touch events
	button:addEventListener( "touch", onTouch )
end

-- "cestini"
local basket = display.newCircle(100, 112, 14)
basket.fillColor = {1, 0, 0}
basket:setFillColor(unpack(basket.fillColor))
table.insert(baskets, basket)

local basket = display.newCircle(300, 112, 14)
basket.fillColor = {1, 1, 1}
basket:setFillColor(unpack(basket.fillColor))
table.insert(baskets, basket)


mi potreste aiutare a capire come risolvere questo problema?

 

grazie a tutti



[TOPIC: post.html]
#2

ale

[GLOBAL: userInfoPane.html]
ale
  • Contributor

  • 174 posts
  • Corona SDK

Ciao Giuseppe,

 

ho provato a far girare il tuo codice ma non si comporta come hai descritto.

La funzione checkCollision non viene mai chiamata, almeno nell'esempio postato.

Probabilmente hai dimenticato qualche pezzo di codice!

 

Comunque vedo che nella funzione checkCollision rimuovi l'oggetto con

display.remove(rect)
a quel punto per riavere un nuovo oggetto devi necessariamente ricrearlo, es: 
local button = display.newCircle(item.x, item.y, item.r )

Se invece non intendi ricrearlo basta nasconderlo, es:

rect.alpha = 0 --invece di
display.remove(rect)

Per farlo riapparire:

rect.alpha = 1

 

Ciao,

Ale



[TOPIC: post.html]
#3

android.masc

[GLOBAL: userInfoPane.html]
android.masc
  • Observer

  • 13 posts
  • Corona SDK

Grazie Ale

per la tua risposta,

hai ragione, ho postato male il codice,

questo è il coodice funzionante

display.setStatusBar( display.HiddenStatusBar )



local centerX = display.contentCenterX
local centerY = display.contentCenterY
local _W = display.contentWidth
local _H = display.contentHeight


local bkg = display.newImage ("prato3.png", centerX, centerY,true)


score = 0



local scoreText = display.newText("Score:", display.contentCenterX, 20, native.systemFontBold, 20)
scoreText:setFillColor( 1, 0, 0 )

local scoreNumber = display.newText(score, display.contentCenterX + 60, 20, native.systemFontBold, 20)
scoreNumber:setFillColor( 1, 0, 0 )


local function updateScore()
score = score + 1
scoreNumber.text = score
end



local cerchi =
{

	{ x=100, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
	{ x=30,  y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
	{ x=170, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
	{ x=240, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
	{ x=310, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
	{ x=380, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
	{ x=450, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
}

local baskets = {} 


local function checkCollision(event)
 	if event.target then
		local rect = event.target
		for i = 1, #baskets do
			local basket = baskets[i]
			local basketColor = basket.fillColor
			local rectColor = rect.fillColor
			local sameColor = basketColor[1] == rectColor[1] and basketColor[2] == rectColor[2] and basketColor[3] == rectColor[3]
			local distance = math.sqrt((basket.x - rect.x)^2 + (basket.y - rect.y)^2)
			if distance < 20 and sameColor then
			display.remove(rect)
			updateScore()
					if score == 2 then
					local button = display.newCircle(item.x, item.y, item.r )
					end
				end
			end
		end
	end


local function onTouch( event )
	local t = event.target

	checkCollision(event)

	local phase = event.phase
	if "began" == phase then
		
		local parent = t.parent
		parent:insert( t )
		display.getCurrentStage():setFocus( t )
		t.isFocus = true

		
		t.x0 = event.x - t.x
		t.y0 = event.y - t.y
	elseif t.isFocus then
		if "moved" == phase then

			t.x = event.x - t.x0
			t.y = event.y - t.y0
		elseif "ended" == phase or "cancelled" == phase then
			display.getCurrentStage():setFocus( nil )
			t.isFocus = false
		end
	end


	return true
end


for _,item in ipairs( cerchi ) do
	local button = display.newCircle(item.x, item.y, item.r )                       
	button.fillColor = {item.red, item.green, item.blue}
	button:setFillColor(unpack(button.fillColor))
	button.strokeWidth = 3
	button:setStrokeColor(0)
	button:addEventListener( "touch", onTouch )
end


-- "CESTINI" --
local basket = display.newCircle(100, 112, 14)
basket.fillColor = {1, 0, 0}
basket:setFillColor(unpack(basket.fillColor))
table.insert(baskets, basket)

local basket = display.newCircle(300, 112, 14)
basket.fillColor = {1, 1, 1}
basket:setFillColor(unpack(basket.fillColor))
table.insert(baskets, basket)

local basket = display.newCircle(200, 112, 14)
basket.fillColor = {1, 1, 0}
basket:setFillColor(unpack(basket.fillColor))
table.insert(baskets, basket)

local basket = display.newCircle(400, 112, 14)
basket.fillColor = {1, 0, 1}
basket:setFillColor(unpack(basket.fillColor))
table.insert(baskets, basket)

i cerchi grandi trascinati su quelli piccoli dello stesso colore

danno un punto e sono rimossi dal display.


ho provato con

local button = display.newCircle(item.x, item.y, item.r )

ma l'errore che mi da è sui valori item che sono nil.

 

Il problema è quando tutti i cerchi sono terminati,

io vorrei che apparissire tutti con queste  caratteristiche

local cerchi =
{

    { x=100, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
    { x=30, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
    { x=170, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
    { x=240, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
    { x=310, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
    { x=380, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
    { x=450, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
}

c'è qualche modo per risolvere questo problema?

 

Grazie



[TOPIC: post.html]
#4

ale

[GLOBAL: userInfoPane.html]
ale
  • Contributor

  • 174 posts
  • Corona SDK

Ciao Giuseppe,

 

purtroppo in questo periodo sono un pò preso e non riesco a rispondere tempestivamente.

 

Ho guardato il codice e ho apportato delle modifiche per fare quello che chiedevi.

In pratica adesso i cerchi vengono creati all'inizio, cancellati quando sovrapposti ai cestini e infine ricreati quando la somma dei punti è un multiplo di 7.

 

Per fare ciò ho aggiunto una funzione createCircles per creare i cerchi ogni qualvolta vengano richiesti.

La funzione ha una forward declaration per poter essere chiamata anche prima della dichiarazione/creazione.

Lua è uno scripting language, quindi la sequenza del codice deve tenere conto di questo ed essere contigua dall'alto verso il basso.

Nel caso in cui questo non sia possibile si usano le "forward declarations".

 

-----------------------------------------------------------------------------------------
--
-- main.lua
--
-----------------------------------------------------------------------------------------
display.setStatusBar( display.HiddenStatusBar )
 
local centerX = display.contentCenterX
local centerY = display.contentCenterY
local _W = display.contentWidth
local _H = display.contentHeight

local bkg = display.newImage ("bg3.jpg", centerX, centerY,true)

local createCircles

score = 0

local scoreText = display.newText("Score:", display.contentCenterX, 20, native.systemFontBold, 20)
scoreText:setFillColor( 1, 0, 0 )

local scoreNumber = display.newText(score, display.contentCenterX + 60, 20, native.systemFontBold, 20)
scoreNumber:setFillColor( 1, 0, 0 )


local function updateScore()
score = score + 1
scoreNumber.text = score
end

local cerchi =
{

    { x=30,  y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
    { x=100, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
    { x=170, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
    { x=240, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
    { x=310, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
    { x=380, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
    { x=450, y=300, w=50, h=50, r=20, red=1, green=math.random(0,1), blue=math.random(0,1) },
}

local baskets = {}

local function checkCollision(event)
     if event.target then
        local rect = event.target
        for i = 1, #baskets do
            local basket = baskets[i]
            local basketColor = basket.fillColor
            local rectColor = rect.fillColor
            local sameColor = basketColor[1] == rectColor[1] and basketColor[2] == rectColor[2] and basketColor[3] == rectColor[3]
            local distance = math.sqrt((basket.x - rect.x)^2 + (basket.y - rect.y)^2)
            if distance < 20 and sameColor then
                display.remove(rect)
                updateScore()
                if score  % 7 == 0 then
                    print( "Ricreo i cerchi..." )
                    createCircles()
                end
            end
        end
    end
end


local function onTouch( event )
    local t = event.target

    checkCollision(event)

    local phase = event.phase
    if "began" == phase then
        
        local parent = t.parent
        parent:insert( t )
        display.getCurrentStage():setFocus( t )
        t.isFocus = true

        
        t.x0 = event.x - t.x
        t.y0 = event.y - t.y
    elseif t.isFocus then
        if "moved" == phase then

            t.x = event.x - t.x0
            t.y = event.y - t.y0
        elseif "ended" == phase or "cancelled" == phase then
            display.getCurrentStage():setFocus( nil )
            t.isFocus = false
        end
    end


    return true
end

createCircles =  function ()
    for _,item in ipairs( cerchi ) do
        local button = display.newCircle(item.x, item.y, item.r )                       
        button.fillColor = {item.red, item.green, item.blue}
        button:setFillColor(unpack(button.fillColor))
        button.strokeWidth = 3
        button:setStrokeColor(0)
        button:addEventListener( "touch", onTouch )
    end
end


createCircles()

-- "CESTINI" --
local basket = display.newCircle(100, 112, 14)
basket.fillColor = {1, 0, 0}
basket:setFillColor(unpack(basket.fillColor))
table.insert(baskets, basket)

local basket = display.newCircle(300, 112, 14)
basket.fillColor = {1, 1, 1}
basket:setFillColor(unpack(basket.fillColor))
table.insert(baskets, basket)

local basket = display.newCircle(200, 112, 14)
basket.fillColor = {1, 1, 0}
basket:setFillColor(unpack(basket.fillColor))
table.insert(baskets, basket)

local basket = display.newCircle(400, 112, 14)
basket.fillColor = {1, 0, 1}
basket:setFillColor(unpack(basket.fillColor))
table.insert(baskets, basket)

 

 

Spero ti torni utile.

 

Ciao

Ale



[TOPIC: post.html]
#5

android.masc

[GLOBAL: userInfoPane.html]
android.masc
  • Observer

  • 13 posts
  • Corona SDK

Grazie Ale

per la tua gentilezza e disponibilità ad aiutare

chi come me ha molte difficoltà,

 

grazie ancora.



[TOPIC: post.html]
#6

android.masc

[GLOBAL: userInfoPane.html]
android.masc
  • Observer

  • 13 posts
  • Corona SDK

Se mi è possibile vorrei fare un'altra domanda,

desidero aggiungere un piccolo feedback grafico ogni qual volta

è true

if distance < 20 and sameColor then
                display.remove(rect)
                updateScore()

ovvero far apparre una immagine.

Questa immagine deve apparire però per qualche secondo e poi svanire.

Ho cercato in LUA e credo che la soluzione migliore sia

timer.performWithDelay

allora ho creato la funzione

local function createsmile()
smile = display.newImage ("smile.png", basket.x, basket.y+35,true)
smile:scale( 0.5, 0.5 )
end

e all'interno dell'evento in cui si forma la collisione il Delay

if distance < 20 and sameColor then
                display.remove(rect)
                updateScore()
                smileTimer=timer.performWithDelay(1800,createsmile,0)

ma non accade nulla, nessun errore,

dove sbaglio?

 

Grazie



[TOPIC: post.html]
#7

ale

[GLOBAL: userInfoPane.html]
ale
  • Contributor

  • 174 posts
  • Corona SDK

Ciao Giuseppe,

 

per fare il "giochetto" che vuoi fare, non ti conviene creare un immagine ogni volta che la condizione si soddisfa,

ma creare l'immagine all'avvio una sola volta  con alpha = 0, cioè invisibile, e poi farla apparire ogni qualvolta la tua condizione diventa valida.

 

Per farla scomparire dopo un certo periodo puoi usare una funzione della libreria transition/tween "transition.to"

https://docs.coronalabs.com/guide/media/transitionLib/

indicando con il parametro "delay" il tempo per cui l'immagine deve comparire, e con il parametro "time" il tempo necessario alla scomparsa dell'immagine, in questo modo l'immagine scomparirà con un effetto dissolvenza nel tempo indicato da "time"

 

In pratica:

local smile
 
local function createsmile()
   smile = display.newImage ("smile.png", basket.x, basket.y+35,true)
   smile:scale( 0.5, 0.5 )
   smile.alpha = 0.0
end
 
local function smileHide()
    print("immagine nascosta!")
end


  
createsmile()

if distance < 20 and sameColor then
                display.remove(rect)
                updateScore() 
                smile.alpha = 1.0
                transition.to( smile, { time=800, alpha=0.0, delay=1800, onComplete=smileHide } )

end

Spero che funzioni perchè non l'ho testato !

 

Fammi sapere

 

 

Ciao,

Ale



[TOPIC: post.html]
#8

android.masc

[GLOBAL: userInfoPane.html]
android.masc
  • Observer

  • 13 posts
  • Corona SDK

Ciao Ale,

ancora grazie per l'aiuto,

funziona, ma non correttamente,

l'immagine "smile" appare sempre su uno dei 4 basket,

anche quando collide un cerchio con un altro basket,

 

tieni conto che i basket sono 4

local baskets = {} 

local basket = display.newCircle(80, 162, 14) --rosso
basket.fillColor = {1, 0, 0}
basket:setFillColor(unpack(basket.fillColor))
table.insert(baskets, basket)

local basket = display.newCircle(300, 162, 14) --bianco
basket.fillColor = {1, 1, 1}
basket:setFillColor(unpack(basket.fillColor))
table.insert(baskets, basket)

local basket = display.newCircle(190, 192, 14) --giallo
basket.fillColor = {1, 1, 0}
basket:setFillColor(unpack(basket.fillColor))
table.insert(baskets, basket)

local basket = display.newCircle(410, 192, 14) --viola
basket.fillColor = {1, 0, 1}
basket:setFillColor(unpack(basket.fillColor))
table.insert(baskets, basket)

come posso far apparire l'immagine "smile"

con le coordinate basket.x, basket.y del cerchio

che realmente ha colliso in maniera corretta?

 

ancora grazie



[TOPIC: post.html]
#9

ale

[GLOBAL: userInfoPane.html]
ale
  • Contributor

  • 174 posts
  • Corona SDK

Ciao Giuseppe,

 

 

devi cambiare le coordinate dell'immagine smile ogni qualvolta si verifica la collisione del cerchio.

 

Più o meno così:

 
if distance < 20 and sameColor then
                display.remove(rect)
                updateScore()
                local basket = baskets[2] -- Esempio nel caso del secondo cestino
                smile.x = basket.x
                smile.y = basket.y
                smile.alpha = 1.0
                transition.to( smile, { time=800, alpha=0.0, delay=1800, onComplete=smileHide } )

end
 

Inutile dire che si da per assunto che tu sappia quale sia il cestino/cerchio selezionato che stai muovendo.

Il caso dell'esempio è riferito al cestino numero 2.

 

Oppure se le coordinate devono corrispondere con il cerchio che sparisce:

 
if distance < 20 and sameColor then
                local newX, newY = rect.x, rect.y
                display.remove(rect)
                updateScore()
                smile.x = newX
                smile.y = newY
                smile.alpha = 1.0
                transition.to( smile, { time=800, alpha=0.0, delay=1800, onComplete=smileHide } )
end
 

Spero che tu riesca a terminare il gioco.

 

Ciao.

Ale



[TOPIC: post.html]
#10

android.masc

[GLOBAL: userInfoPane.html]
android.masc
  • Observer

  • 13 posts
  • Corona SDK

Grazie Ale,

ho optato per per far coincidere l'immagine "smile" con i cerchi,

funziona tutto,

grazie ancora!



[TOPIC: post.html]
#11

ale

[GLOBAL: userInfoPane.html]
ale
  • Contributor

  • 174 posts
  • Corona SDK

Meglio cosi :)

 

Ciao,

Ale




[topic_controls]
[/topic_controls]