Polygon Explosion

Polygon transition with Solar2D

Presentation

Here is a small snippet code for the transition between two screens.
The interest here is to produce a texture from a Solar2D rendering and not from a simple image.
I don't know if I will have the opportunity to use this type of transition in the game. It is still being considered.

The polygons have been precomputed. They come from a rendering of a voronoy diagram.

local tPolygone = require('voronoy')

local cntWidth = display.contentWidth -- Virtual screen width
local cntHeight = display.contentHeight -- Virtual screen height
local cntX = display.contentCenterX -- X and Y center of the virtual screen
local cntY = display.contentCenterY

local oBack -- Background picture
local oTexImg -- Texture image
local oSnap -- SnapShot
local oTexture -- Dynamic texture


local nframe = 0 -- Frame counter
local _startAnim = false -- Animation flag
local image1, image2 = "world1.jpg", "world2.jpg" -- The two images

function BuildStaticTexture(texture) -- Create a texture from an image
local paint = {
type = "image",
filename = texture,
}
return paint
end

function BuildDynamicTexture(texture) -- Create a texture from a render
if oTexImg then oTexImg:removeSelf() end -- Here we just have a picture
oTexImg = display.newImage(texture) -- but it could be quite a scene

if oSnap then oSnap:removeSelf() end
oSnap = display.newSnapshot(cntWidth, cntHeight)
oSnap.group:insert(oTexImg)

if oTexture then oTexture:releaseSelf() end
oTexture = graphics.newTexture{ type = "canvas", width = cntWidth, height = cntHeight }
oTexture:draw(oSnap)
oTexture:invalidate()

local paint = {
type = "image",
filename = oTexture.filename,
baseDir = oTexture.baseDir
}
return paint
end

function DisplayBackGound(image) -- Replacing the background image
if oBack then oBack:removeSelf() end -- We remove the existing background if necessary
oBack = display.newImage(image) -- And we recreate one.
oBack.x = cntX
oBack.y = cntY
oBack:toBack()
end

function InitPolygon(paintStruct) -- initialization of polygons
local tPolyObject = {}

for p = 1, #tPolygone do
local oPolygon = tPolygone[p]
local minX = 10000 -- we look for the minimum coordinates of the polygon
local minY = 10000 -- to be able to place the texture in the right place

for v = 1, #oPolygon, 2 do
local x = oPolygon[v]
local y = oPolygon[v + 1]
if x < minX then minX = x end
if y < minY then minY = y end
end


local poly = display.newPolygon(0, 0, oPolygon) -- we create the polygon
poly.x = minX + poly.width * 0.5 -- we put it where it should be since
poly.y = minY + poly.height * 0.5 -- newPolygon recenters the polygon

poly.fill = paintStruct -- we apply the texture
poly.fill.x = -0.5 + ((poly.width / cntWidth) * 0.5) + minX / cntWidth -- we place the texture
poly.fill.y = -0.5 + ((poly.height / cntHeight) * 0.5) + minY / cntHeight
poly.fill.scaleX = cntWidth / poly.width -- and we adapt its size
poly.fill.scaleY = cntHeight / poly.height
poly.rotation = 0 -- no rotation at the start

tPolyObject[p] = { -- we return an object which contains all the information of the polygon
minX = minX,
minY = minX,
x = poly.x,
y = poly.y,
vx = 0,
vy = 0,
a = 0,
o = poly
}
end
return tPolyObject
end


DisplayBackGound(image2)
local paintStruct = BuildDynamicTexture(image1)
local tPolyObject = InitPolygon(paintStruct)

function ResetPolygonTexture(paintStruct) -- updated the texture.
for p = 1, #tPolyObject do -- during the swap
local oPoly = tPolyObject[p] -- we return the polygon to its initial state
local poly = oPoly.o
poly.rotation = 0 -- no rotation
poly.x = oPoly.x -- starting position
poly.y = oPoly.y
poly.fill = paintStruct -- new texture
end
end

function startAnim(event) -- during the OnTap event
for p = 1, #tPolyObject do
local x = event.x -- We will give a speed
local y = event.y -- And a rotation ...
tPolyObject[p].vx = (tPolyObject[p].x - x) / 20 -- Depending on where you click
tPolyObject[p].vy = -20
tPolyObject[p].a = tPolyObject[p].vx
end
_startAnim = true -- Let's go
end

function anim(event) -- animation
local again = false
if _startAnim then
nframe = nframe + 1 -- We increment the frame counter
for p = 1, #tPolyObject do
local oPoly = tPolyObject[p]
local poly = oPoly.o
poly.rotation = nframe * oPoly.a -- Update polygon rotation
poly.x = oPoly.x + nframe * oPoly.vx -- And the position
poly.y = oPoly.y + nframe * tPolyObject[p].vy + nframe * nframe -- nframe * nframe represents gravity
if (poly.y - poly.height * 0.5) < cntHeight then again = true end -- if a polygon is still on the screen we continue
end
end

if _startAnim and not again then -- if all polygons are off screen
image1, image2 = image2, image1 -- inversion of images
DisplayBackGound(image2) -- update background image
local paintStruct = BuildDynamicTexture(image1) -- texture update
ResetPolygonTexture(paintStruct) -- Polygon reset and texture update

_startAnim = false -- Animation completed
nframe = 0
end
end

Runtime:addEventListener( "tap", startAnim )
Runtime:addEventListener( "enterFrame", anim )

Download

You can download the project archive running under Solar2D

Commentaires