Corona SDK - group with image rect, wrong reference point - coronasdk

I'm inserting a group of object into a parent group with image rect, and as far as I can understand, the excepted result should be that the outer group will start from top left point of the screen (0 ,0) and the group inside will refer to the top left point of the parent group, actually it is like I describe without having image rect in the outer group, the issue is when the outer group has an image rect inside so the outer group center point is at the top left point of the screen and the inner group is in the center of the parent group?
what is going on? please help...
local checkinContent = display.newGroup();
local BG= display.newImageRect(checkinContent,"images/magen-david_backgound.png",display.contentWidth, 0.45822 * display.contentHeight);
checkinContent:setReferencePoint(display.TopLeftReferencePoint);
checkinContent.y = display.contentHeight - checkinContent.height;
checkinContent.x = 0;
local circlesGroup = display.newGroup();
circlesGroup:setReferencePoint(display.TopCenterReferencePoint);
circleTable[0] = display.newImageRect(circlesGroup,"images/circle.png",0.0265 * display.contentWidth, 0.0265 * display.contentWidth);
circleTable[1] = display.newImageRect(circlesGroup,"images/circle.png",0.0265 * display.contentWidth, 0.0265 * display.contentWidth);
circleTable[2] = display.newImageRect(circlesGroup,"images/circleCurrent.png",0.0265 * display.contentWidth, 0.0265 * display.contentWidth);
circlesGroup.y = 0;
checkinContent:insert(circlesGroup);

Alright, sometimes corona is like walking in the dark...
here is a video with the answer..
the key sentence in the video is:
" The weird thing is, as soon is this is created, and put in position, it's changes the reference point to the center... why?! I have no freaky idea.. "

Update these lines of code:
local circlesGroup = display.newGroup();
circleTable[0] = display.newImageRect(circlesGroup,"images/circle.png",0.0265 * display.contentWidth, 0.0265 * display.contentWidth);
circleTable[1] = display.newImageRect(circlesGroup,"images/circle.png",0.0265 * display.contentWidth, 0.0265 * display.contentWidth);
circleTable[2] = display.newImageRect(circlesGroup,"images/circleCurrent.png",0.0265 * display.contentWidth, 0.0265 * display.contentWidth);
checkinContent:insert(circlesGroup);
circlesGroup:setReferencePoint(display.TopCenterReferencePoint);
circlesGroup.y = 0;

Related

Lua Corona: unable to center image and have it fill the full screen

So I tried everything an can't seem to get the image to take up the full screen and be centered. I have attached the image, and how it looks when I run on corona.
I tried this and got what I attached:
local background = display.newImageRect( "bg.png",
display.contentCenterX, display.contentCenterY)
Thanks in advance for the help!
background image
how it looks on corona
example your config.lua is like below
application = {
content = {
width = 640,
height = 960,
scale = "letterBox",
fps = 30,
},
}
then use like below to display image in fullscreen
local background = display.newImageRect( "bg.png",
640 , 960 )
// then center it like below
background.x = display.contentCenterX
background.y = display.contentCenterY
According to documentation you need to pass width and height, not x and y. Try this:
--take screen width and height, so image can take whole screen
local width = display.contentWidth
local height = display.contentHeight
local background = display.newImageRect( "bg.png", width, height)
--setting coordinates to center
background.x = display.contentCenterX
background.y = display.contentCenterY
Edit: If you are using letterbox scaling mode you should ajust width and height
width = display.contentWidth - 2 * display.screenOriginX
height = display.contentHeight - 2 * display.screenOriginY
If you want preserve aspect ratio of image try
local _CX = display.contentCenterX
local _CY = display.contentCenterY
local imgW = 440 -- width of image
local imgH = 623-- height of image
local imgR = imgH / imgW
local screenW = display.contentWidth - 2 * display.screenOriginX
local screenH = display.contentHeight - 2 * display.screenOriginY
local screenR = screenH / screenW
local factor = imgR > screenR and screenW / imgW or screenH / imgH
local background = display.newImageRect( 'bg.jpg', imgW * factor, imgH * factor )
background .x, background .y = _CX, _CY
I tested code against letterbox mode.
Other solution from Corona forum How to make an image full screen?:
if you want to fill the screen with an image, it's better to make the
image larger than any potential screen aspect ratio, then accept some
amount of clipping on certain screens when the image goes beyond the
edges.

Corona Vertices of a Hexagon

Ok, so I'm trying to create hexagons for my game. The first option I had is to have several images of hexagon, but I'm having problems with clickable area since these images are positioned side-by-side.
So i guess my only option is to create objects using polygons. Here is a code from corona sdk's website:
local halfW = display.contentWidth * 0.5
local halfH = display.contentHeight * 0.5
local vertices = { 0,-110, 27,-35, 105,-35, 43,16, 65,90, 0,45, -65,90, -43,15, -105,-35, -27,-35, }
local o = display.newPolygon( halfW, halfH, vertices )
o.fill = { type="image", filename="mountains.png" }
o.strokeWidth = 10
o:setStrokeColor( 1, 0, 0 )
That code is for creating a star. But I don't know how to create a hexagon using vertices.
Try this to create the vertices array:
local R = 45
local N = 6
local vertices = {}
local i = 0
for t = 0, 2*math.pi, 2*math.pi/N do
i=i+1; vertices[i]= R*math.cos(t)
i=i+1; vertices[i]= R*math.sin(t)
end
And this to draw the hexagon:
local halfW = display.contentWidth * 0.5
local halfH = display.contentHeight * 0.5
local hexagon = display.newPolygon( halfW, halfH, vertices )
hexagon.fill = { type="image", filename="mountains.png" }
hexagon.strokeWidth = 10
hexagon:setStrokeColor( 1, 0, 0 )
I chose R=45 to produce a polygon of the same size of your star.
You could always use a graphics.newMask() to apply a mask to each image hex that would make the outside area not touchable.

Equilateral triangle - corona

I made a equilateral triangle:
local W = 540
local H = 700
local r = 150
local r_x = math.sqrt(math.pow(r,2)-math.pow((r/2),2))
local vertices = { 0,-r, r_x , r/2 , -r_x , r/2 }
local block = display.newPolygon( W, H, vertices )
physics.addBody( block )
physics.setGravity(0,0)
block.angularVelocity= 100
I want the triangle to rotate on its axis but it does not happen. why?
I thinks it related to the object's anchor but I dont know how to fix this.
Try yourself if you don't understand what I mean.
Just take all the objects and insert them into a group. Then just rotate the group using the rotate API.

scale a taken photo to screen size

I can take a photo using this code :
local centerX = display.contentCenterX
local centerY = display.contentCenterY
local isXcodeSimulator = "iPhone Simulator" == system.getInfo("model")
if (isXcodeSimulator) then
local alert = native.showAlert( "Information", "Camera API not available on iOS Simulator.", { "OK"})
end
local sessionComplete = function(event)
local image = event.target
if image then
image.x = centerX
image.y = centerY
local w = image.width
local h = image.height
end
end
local listener = function( event )
if media.hasSource( media.Camera ) then
media.capturePhoto( { listener = sessionComplete } )
else
native.showAlert("Corona", "Camera not found.")
end
return true
end
trigger:addEventListener( "tap", listener )
But if the picture is to big it doesn't zoom out or scale down, i have tried local w =display.contentWidth but nothing's happening. How can i scale the photo to the exact screen size, probably need to scale in the Y axis to fill the screen
If you simply wish to scale the picture down there are two ways you can do that.
1: Use scale on the display object (http://docs.coronalabs.com/api/type/DisplayObject/scale.html)
object:scale(xScale, yScale)
or the second solution which I suspect is what you are looking for
2: Set the image size directly.
Set the image width/height using object.width and object.height and setting the respective contentWidth and ContentHeight of your display object.
Change the sessionComplete function to the following
local sessionComplete = function(event)
local image = event.target
if image then
image.x = centerX
image.y = centerY
image.width = display.contentWidth
image.height = display.contentHeight
end
end
Solved the problem by using this equation
image.contentWidth / image.contentHeight * display.contentHeight
local sessionComplete = function(event)
local image = event.target
if image then
imgWidth = image.contentWidth / image.contentHeight * display.contentHeight
image.x = centerX
image.y = centerY
image.width = imgWidth
image.height = display.contentHeight
end
end

How do I draw a segment of a circle in Lua in Corona?

long time ago is last time I needed that :)
I simple like to create a circle with a segment and a different filling or transparent.
So i just have like a stopwatch filling up the circle by time (60 seconds).
function kind a > showsegment (xcircle,ycircle,radius, seconds) :}#
any short lines leading to that solution, are welcome.
The code needs to work within the Corona Framework, in Lua.
I don't think you can. Using image with alpha and tint is not an option?
Yes, you'll have to create 60 objects, one for every tick, but images are cached anyway, so you only loading it and allocating memory for it once. Every next instance is cheap.
I am not sure if this is what you're looking for, but seeing the question it made me curious, so I messed around with it and figured this (if it's what you're looking for):
tick = 0;
ticks = {};
cr = 250; -- Circle radius
hr = 0.9; -- hand radius
hw = 10; -- hand width
mr = 0.25; -- middle radius (fg)
bg = display.newCircle(cr, cr, cr); -- background
for i=1,360 do
local w = hr * (cr * 2);
local x = (w/2)+(((cr*2) - w)/2);
local t = display.newRect(x,x,hw,w);
t:rotate(i-1);
t:setFillColor(0,0, 0);
table.insert(ticks, t);
end
function drawTick(e)
print("tick "..tick);
local dg = display.newGroup();
local w = hr * (cr * 2);
local x = (w/2)+(((cr*2) - w)/2);
local t = display.newRect(dg, 0, -w/4, 10, w/2);
dg.x = x;
dg.y = x;
t:setFillColor(0, 1, 0);
dg:rotate(tick-1);
table.insert(ticks, t);
fg = display.newCircle(cr,cr,mr*cr);
if tick < 361 then
tick = tick + 1
timer.performWithDelay(50, drawTick);
end
end
timer.performWithDelay(0, drawTick);
EDIT: I cleaned up the code a bit.

Resources