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.
Related
I imported an isometric map made in tiled to Corona SDK and am now trying to overlay a grid layer. I've done a lot of reading into isometric grids but it seems they all reference tilesets where the height is half the width. (ex. 128x64px ). I am using a tileset that requires the grid to be 256x149px and I think I have to edit the grid generation function to accommodate the change. Any help would be greatly appreciated!
Screenshot of the issue (Using original Vectors):
Original Vectors: https://image.ibb.co/emXpQR/Screen_Shot_2017_12_18_at_1_35_19_PM.png
Edited Vectors (the ones commented out in code): https://image.ibb.co/ikxOkR/Screen_Shot_2017_12_18_at_1_35_54_PM.png
Grid Generation Code:
function drawGrid()
for row = 0, 16 do
local gridRow = {}
for col = 0, 9 do
-- draw a diamond shaped tile
local vertices = { 0,-16, -64,16, 0,48, 64,16 }
-- MY EDITED VERTICES { 0,-37.25, -128,37.25, 0,111.75, 128,37.25 }
local tile = display.newPolygon(group, 0, 0, vertices )
-- outline the tile and make it transparent
tile.strokeWidth = 1
tile:setStrokeColor( 0, 1, 1 )
tile.alpha = .4
local tileWidth = 256
local tileHeight = 149
-- set the tile's x and y coordinates
local x = col * tileHeight
local y = row * tileHeight
tile.x = (x - y)
tile.y = ((tileHeight/2) + ((x + y)/2))
-- make a tile walkable
gridRow[col] = 0
end
-- add gridRow table to the map table
j_map[row] = gridRow
end
end
As you can see in the screenshots the tiles kind of veer off the side of the map. If anyone knows how to fix it or needs more info on the information let me know!
Try code:
for row = 0, 16 do
local gridRow = {}
for col = 0, 9 do
-- draw a diamond shaped tile
--local vertices = { 0,-16, -64,16, 0,48, 64,16 }
-- MY EDITED VERTICES
local vertices = { 0,-37.25, -128,37.25, 0,111.75, 128,37.25 }
local tile = display.newPolygon( group, 0, 0, vertices )
-- outline the tile and make it transparent
tile.strokeWidth = 1
tile:setStrokeColor( 0, 1, 1 )
tile.alpha = .4
local tileWidth = 256
local tileHeight = 149
tile.x = -(row - col) * tileWidth * 0.5
tile.y = (row + col) * tileHeight * 0.5
-- make a tile walkable
gridRow[col] = 0
end
-- add gridRow table to the map table
--j_map[row] = gridRow
end
I get formula for xand y position of tile from Isometric Tiles Math. Good luck:)
I am trying to create a drag-able square, which changes its transparency the closer it goes to the center of the screen (from being invisible in the sides to being completely visible in the center, like in the pictures below)
you can use alpha and transition to achieve that try below code , It should work .. below code changes square opacity from 0 to 100% over a time period of 1.5 seconds while moving
display.setDefault( "background", 80/255 )
local square = display.newRect( 0, display.contentHeight/2, 100, 100 )
square.anchorChildren = true
square:setFillColor( 255,255,0 )
square.alpha = 0
local w,h = display.contentWidth, display.contentHeight
transition.moveTo( square, { x = w/2, y = h/2, time=1500 , alpha = 1.0} )
I am making a game and I am trying to randomly put a circle in a rectangle. But, it seems that the circle sometimes appear outside of the rectangle. What would I have to do so the circle ALWAYS appears somewhere in the rectangle?
this is my code:
rectangle:
--bottom
local floor = display.newRect(0, display.contentCenterY/.665, display.contentWidth*2, 10)
physics.addBody(floor, "static", {density = 1, friction = 1, bounce = 0})
--top
local floor = display.newRect(0, display.contentCenterY/2, display.contentWidth*2, 10)
physics.addBody(floor, "static", {density = 1, friction = 1, bounce = 0})
--right
local floor = display.newRect(display.contentCenterX*2, display.contentCenterY/1, 10, display.contentHeight/2)
physics.addBody(floor, "static", {density = 1, friction = 1, bounce = 0})
--left
local floor = display.newRect(0, display.contentCenterY/1, 10, display.contentHeight/2)
physics.addBody(floor, "static", {density = 1, friction = 1, bounce = 0})
circle:
--Small sprites--
local randomX = math.random(1,display.contentCenterX*2)
local randomY = math.random(1, display.contentCenterY*2)
local smallSprite = display.newCircle(randomX, randomY, display.contentWidth/100)
smallSprite:setFillColor(1, 1, .3, 1) --This will set the fill color to transparent
smallSprite.strokeWidth = 7 --This is the width of the outline of the circle
smallSprite:setStrokeColor(.1,1,1) --This is the color of the outline
smallSprite = display.newGroup(smallSprite)
That is easy, you know where the sides of rectangle are (call them rigth, left, top and bottom) and the radius of circle, so: randomX will be between left+radius and right-radius, and randomY will be between top+radius and bottom-radius
-- remember to add/substract the width of the walls
local left = 0 + 10
local right = display.contentCenterX * 2 - 10
--Small sprites--
local randomX = math.random(left+radius,right-radius)
local randomY = math.random(top+radius, bottom-radius)
You can generate a random number between any 2 numbers of your choice.
Remember also you can use display.contentHeight and display.contentWidth
As a tip, you can add at the beginning of your file a section with variables like:
-- Variables
local w = display.contentWidth
local h = display.contentHeight
local centerX = display.contentCenterX
local centerY = display.contentCenterY
So you can use only centerX instead of display.contentCenterX
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.
I want to make a moon rotating around a planet, or something along that analogy. So is there something I can call for physics.setGravity(0,0) that changes the position that the gravity pulls towards, particularly assigning that to be a physics body? If not, simply a specific x-y coordinate will be fine.
local moon = display.newImage ("moon.png")
physics.addBody(moon, {bounce=0, density=1.0})
local earth = display.newImage ("earth.png")
physics.addBody(earth, {bounce=0, density=1.0})
Thanks
Instead of playing around with the setGravity option, I think you should just rotate the images using something like this:
local physics = require("physics")
physics.start()
physics.setGravity(0, 0)
display.setStatusBar( display.HiddenStatusBar )
local background = display.newImage( "space.png", true )
background.x = display.contentWidth / 2
background.y = display.contentHeight / 2
local earth = display.newImage( "earth.png" )
earth.x = 100; earth.y = 200
earth.xScale = 0.7
earth.yScale = 0.7
physics.addBody( earth, {radius=40 } )
earth.bodyType = "static"
local moon = display.newImage( "moon.png", 40, 40)
moon.x = earth.x + 80
moon.y = earth.y
moon.xScale = 0.3
moon.yScale = 0.3
moon.rotation = 100
physics.addBody( moon, {radius=10 } )
moon.bodyType = "dynamic"
myJoint = physics.newJoint( "pivot", moon, earth, earth.x, earth.y )
local orbit = function( event )
moon.rotation = moon.rotation + 1.5
end
Notice that I am not really mucking about with setGravity, but the speed of the rotation is defined in the orbit function.
The above code assumes you just have image files to represent your planetary bodies. If so, you will have to play around with the constants above (earth.x and earth.y, scaling values, etc) to make the whole system LOOK right for the images you choose.
Good luck!
No - you can change gravity but it will pull/push only in the direction you have it set to, never to any point. You'd likely use a sensor (invisible) around your earth and apply force to draw things towards it when the collision event between the moon/other and sensor began.