I have an application built with SceneKit that is currently displaying several nodes. I can figure out which node is pressed and want to use that to make a label appear below the Node that was touched. Now, when I set the label's center the following way...
nameLabel.center = CGPointMake(CGFloat(result.node.position.x), CGFloat(result.node.position.y+20)
…it appears in the upper left corner since the node is on (1, 0). What I figured is that the sceneView's (0, 0) is in the center of the screen while the actual physical display's (0, 0) is in the top left corner.
Is there a way to convert the two different numbers into each other? (I could hardcode since I know where the Node's are or create a separate label for each Node but that is not really a perfect solution.)
Thanks in advance :)
You can use the projectPoint: method:
var projected = view.projectPoint(result.node.position))
//projected is an SCNVector3
//projected.x and y are the node's position in screen coordinates
//projected.z is its depth relative to the near and far clipping planes
nameLabel.center = CGPointMake(CGFloat(projected.x), CGFloat(projected.y+20)
Related
I am making a Breakout Game and the Game generates rows from how ever many bricks I want in that row. But I cannot get the rows to start in the center. How would I achieve this, here is my current code.
I've tried numerous things, but the closest I got was to get them all to be in the middle, but the should spread out from the middle.
What I would like to achieve should look something like this.
If you have the maximum row size available, a simple way is to include an offset when you calculate the x coordinate.
let maxRow = ... // whatever the maximum row size is
let padding = (maxRow - row) / 2 // how many blocks to skip on the left
for i in 1...row {
// your block creation loop
let x = 15 + (i + padding) * Int(brick.size.width)
// make the brick at x, y
}
If things might not divide evenly (e.g., if maxRow is 15 like it seems to be in your pictures, but row could be 4) then you have to decide on what behavior you'd like. The above will keep bricks aligned because the integer division in calculating padding will truncate; the left and right padding won't be the same. If you use floating division and get a padding like 3.5, you'd get perfectly centered rows but odd rows and even rows would have different alignment.
If your problem is that you want things to appear in an animated way (like in your picture), then things are more complicated. Instead of generating based on the sequence 1, 2, ..., row, it's probably easier to think about generating from the sequence 0, +1, -1, +2, -2, ... After generating the center brick, you'd do the generation of additional bricks in pairs. The x coordinates would be calculated as xCenter + i * Int(brick.side.width).
You're adding the bricks into a parent SKNode (using addChild(_:)). Everything added in that parent node is relative to its coordinate space.
Try adding a brick at y: 0 and see where will it be positioned. If your scene has the anchorPoint at 0.5, you will likely see the brick in the center of the screen. From there, you go up or down (positive or negative y values) to show other rows.
To better understand how the coordinate system works, see About SpriteKit Coordinate Systems.
It's the same for the x axis. If your bricks start from left to right, that means the parent node has its origin to the left of the screen.
To start from the middle, you need to know the middle point. One option is to make a container node, position that in the center of the screen, and add all the bricks there. Like that, the bricks can start at (0, 0).
let middle = CGPoint(x: scene!.size.width / 2, y: scene!.size.height / 2)
let container = SKNode()
container.position = middle
// inside makeBricks(), add everything inside container:
container.addChild(brick)
It really depends on how you set up your node hierarchy.
I don't know which numbers do what in the coordinates example here. I imagine they mean things like place the top left corner at this position and the bottom right corner at this position, but I don't know which number corresponds to which position.
I've been trying to fool around with the numbers to get a small green rectangle but keep getting weird results like the following, and don't know which numbers need to be what is order to make the rectangle symmetrical and at the bottom
This is what the rectangle should look like
The height of the rectangle is 50, the height of the screen is 1000, and the width of the screen is 1700.
Here's my draw function
function love.draw()
love.graphics.setColor(0.28, 0.63, 0.05) -- set the drawing color to green for the ground
love.graphics.polygon("fill", objects.ground.body:getWorldPoints(objects.ground.shape:getPoints())) -- draw a "filled in" polygon using the ground's coordinates
-- These are the grounds coordinates. -11650 950 13350 950 13350 1000 -11650 1000
love.graphics.setColor(0.76, 0.18, 0.05) --set the drawing color to red for the ball
love.graphics.circle("fill", objects.ball.body:getX(), objects.ball.body:getY(), objects.ball.shape:getRadius())
love.graphics.setColor(0.20, 0.20, 0.20) -- set the drawing color to grey for the blocks
love.graphics.polygon("fill", objects.block1.body:getWorldPoints(objects.block1.shape:getPoints()))
love.graphics.polygon("fill", objects.block2.body:getWorldPoints(objects.block2.shape:getPoints()))
print(objects.block1.body:getWorldPoints(objects.block1.shape:getPoints()))
end
As described at https://love2d.org/wiki/love.graphics, Löve's coordinate system has (0, 0) at the upper left corner of the screen. X values increase to the right, Y values increase down.
The polygon function expects the drawing mode as it's first parameter, and the the remaining (variable) parameters are the coordinates of the vertices of the polygon you wish to draw. Since you want to draw a rectangle you need four vertices/eight numbers. You do not have to list the upper left corner of the rectangle first, but that's probably the easiest thing to do.
So in your case, you want something like:
love.graphics.polygon('fill', 0, 950, 0, 1000, 1700, 1000, 1700, 950)
I've not worked with the physics system, so I'm not quite sure how it's coordinate system relates to "screen" coordinates. The values you show in the comment in your code listing seem like they should give a rectangle (although x = -11650 wouldn't be on screen). You might try experimenting without the physics system first.
Also, since the physics system in Löve is just a binding to Box2D, you might want to read its documentation (http://box2d.org/about/). Not really sure what you're trying to do with feeding shape:getPoints into body:getWorldPoints.
By default, 0,0 coordinates are in the top, left corner. However, for my scene, it would be very helpful if it was in my bottom, left corner.
Is that even possible? If so, how can I set that?
This is a mathematical approach which I think is a lot easier.
Simply define a function which converts your local Y coordinate to what Corona uses:
function localY ( y )
return 600-y --Assuming your screen size is 600 pixels
end
Then simply use
x, localY(y) instead of x,y
You can do the same for x if decided to change it.
Depending on where the anchorPoint is with UIAttachmentBehavior, the view can be quite rotated, so it's in more of a diamond shape than a square. In these situations, where it's rotated say 90°, how do I find what the lowest or highest point of this UIView is (in relation to the window)?
It's easy enough when the UIView is a (non-rotated) square, as I can just use CGRectGetMaxY (or min) and the x value doesn't matter, and then use convertPoint, but with the rotation the x value seems to have a real importance, as if I choose maxX, it will tell me the bottom right's point, while minX will give me the bottom left's.
I just want the lowest point that exists in the UIView. How do I get this?
EDIT: Here's some code showing how I'm attempting it currently:
CGPoint lowestPoint = CGPointMake(CGRectGetMinX(weakSelf.imageView.bounds), CGRectGetMaxY(weakSelf.imageView.bounds));
CGPoint convertedPoint = [weakSelf.imageView convertPoint:lowestPoint toView:nil];
The tracking of convertedPoint's y value completely changes depending on what I supply for the x value in lowestPoint's CGPointMake.
The view's frame is its bounding box. Normally you should be careful about using the frame of a transformed view, which is precisely what a rotated-by-UIKit-Dynamics view is. But it does give the info you are after.
How do I make a RTS camera so that when the mouse is at the edge of the window, it will move either left/right/up/down. I been trying to create an invisible box at the side of the screen so that when the mouse is at the box it will move the camera, but it still doesn't work. Please help!
Building upon what #Davor Mlinaric said, using the mouses x and y coordinates (which can be gotten from Mouse.GetState()), and testing whether those coordinates come in contact with the top, bottom and sides of the screen.
It would be a good start to set where those boxes will be something along the lines of:
GraphicsDevice.Viewport.Width/Height -/+ offset
Where offset is the amount of distance from the top,bottom or side.
Then test where the mouse position is, with a boolean.
boolean inTheZone = false;
//Bottom Box
if(Mouse.GetState().Y > GraphicsDevice.Viewport.Height - offset)
{
//Move camera in the y axis downwards (+).
inTheZone = true;
}
else
{
inTheZone = false;
}
and then the same for the 4 remaining sides.
Notice ive also used Y here, depending on how you set up the camera this may change to Z.
I hope this helps