I'm using corona simulator. I displayed display.contentWidth and display.contentHeight .The width is 320 and height is 480. I've also made a text saying "Hello", and played with positioning.
I've noticed the x values looked pretty accurate, I would set x value of text to 0 and the center of it would be half covered and half revealed. Same results for x value of 320, but on the other side of the phone simulator.
When I set y value to 0 it sits right under the Carrier and fake signal strength symbol, fully revealed. When I set the y value to 480 the heights max, it would have about an inch gap from the bottom of the phone. -- My thoughts are that it should be half covered vertically both ways :-S
In corona simulator i'm viewing it in Iphone5 , and notice when I change to Iphone it would reveal as I would expect. With Iphone 5, droid, and some other view it would give me these results.
* My question is would my program look the same on all devices, or is corona simulator accurate displaying what it would look like. If it displays different on variety of devices, Why?
width = display.newText (display.contentWidth .. "px is Width", 200, 200, nil, 30)
height = display.newText (display.contentHeight .. "px is Height", 150,300, nil, 30)
text = display.newText ("Hello", 0, 480, nil, 30)
The resolution of the iPhone 5 is different to the iPhone 4 (obviously), but rather than receiving different display.content* values, Corona handles it using something called display.screenOrigin. This is the difference between the display being used and the standard display (iPhone/iPhone 4). If you print these values, for example:
print("Origin x = "..tostring(display.screenOriginX))
print("Origin y = "..tostring(display.screenOriginY))
Then you will see that one of them, depending on your simulator's orientation, will be "-44". This is the difference in pixels. In your example for what I assume is the portrait orientation, you would need to position Y for top and bottom like so:
--For positioning at 'true 0'
obj.y = 0 + (display.screenOriginY)
--Or, for positioning at "true bottom"
obj.y = 0 - (display.screenOriginY)
Hope this helps. For more on display.screenOrigin, see the Corona documentation for X and the Corona documentation for Y
Cush
Every object has a rectangular boundary as in figure 1 below. Here there is a text object with boundary indicated with black colour.
The red dot at the top is that objects default anchor point.
If you are not specifying the text's x and y positions as (obj.x=... & obj.y=...), then corona will position the object according to the points in the display object creation line (i.e.., display.newText(""......)). For example, if you have a code like:
local text = display.newText ("myText", 0, 0, nil, 30)
then the text will be placed such that the red dot is at (0,0). It is why you saw it under the status bar.
General object placement in corona is as below:
Underlined myText indicates the different positioning of the text object according to points in object creation line. i.e.;
local text = display.newText("myText",x,y,nil,30)
_w ==> display.contentWidth
_h ==> display.contentHeight
Keep Coding.................. :)
Related
the problem I'm facing is more a matter of logic and algorithm than a specific language functionalities, i'm coding it in lua, but i believe it could be replicated in other languages with no major problems.
First of all, I'm going to show you some properties and default settings that i'm having to use to come up with a solution.
1. I have a general function that displays an image on the screen, given the X, Y position and W, H dimension, to facilitate understanding, this function is drawImage(x, y, w, h)
2. All values and calculation will be based on a default resolution and aspect ratio, which in this case is the developer's. These variables will be these: DEV_SCREEN_W = 1366, DEV_SCREE_H = 768, (aspect ratio is 16:9)
3. So far, we have a function that displays an image on the screen, and default screen values to which the X, Y position and W, H dimensions of a given image will be set.
4. Now, we have the CLIENT, which can be anyone, with any resolution and aspect ratio, this client will run the code on his computer.
5. Knowing this, we need to make an algorithm, so that the positions and dimensions of the image stay relatively the same regardless of the screen being used to show it.
Knowing these properties and definitions we can proceed with the problem. Let's assume that me as a developer, having a screen whose values are DEV_SCREEN_W = 1366, DEV_SCREE_H = 768 i want to set an image at position X = 352, Y = 243 with W = 900, H = 300. So At the developer screen, i'll have this:
Okay, now let's add one more image, with position and dimension X = 352, Y = 458, W = 193, H = 69
Okay, now we need to write an algorithm that keeps the same dimension and position on the screen regardless of size, as W and H are different for each resolution, we can't use pixel points to define, my solution was to define the position between 0 and 1, so the position would represent a certain percentage of the screen, the same for the W and H.
Let's suppose i get the screen information from the client and I get CLIENT_SCREEN_W = 1280, CLIENT_SCREEN_H = 720.
Since it's the same aspect ratio, I could apply this concept to both position and dimension as it would remain perfectly proportional to the screen, so i would have:
Getting the percentage based on the DEV screen for BOTH images would be like:
X = 352/DEV_SCREEN_W * CLIENT_SCREEN_W,
Y = 243/DEV_SCREEN_H * CLIENT_SCREEN_H,
W = 900/DEV_SCREEN_W * CLIENT_SCREEN_W,
H = 300/DEV_SCREEN_H * CLIENT_SCREEN_H,
Basically, for those who didn't understand what is happening, i get the data of how many % position in pixels represents from the developer's screen (X = 352/DEV_SCREEN_W) that is (X = 352/1366 = 0.2576) and multiply this result by the W of the client screen: 0.2576 * CLIENT_SCREEN_W, that is 0.2576 * 1280 = 329. Thus, we concluded that 329 and 352 are relatively the same position in different resolutions.
Following this concept, no matter what resolution the client uses, the images are always in the same proportion, both in position and in dimension, ONLY IF IT IS IN RATIO 16:9 (the same as the developer)
And this is where the problem arises, applying this same concept to any ratio, on a 4:3 screen the both image would be stretched:
despite keeping the same X and Y relative to the screen, the W and H had to be altered out of proportion to fit the screen, obtaining the result seen above, which cannot happen.
To avoid this, i set a proportion rate, which i get by dividing the client's screen by the dev's, thus getting how much of one represents the other, and i multiply that by W and H of both images so that both are proportionately resized to their original dimension, instead of multiplying by a relative value between 0 - 1 arbitrarily.
Getting the proportion would be like:
PROPORTION_RATE = CLIENT_SCREEN_W/DEV_SCREEN_W
Applying it:
W = 900*PROPORTION_RATE, H = 300*PROPORTION_RATE
Basically, this multiplication for aspect ratio, makes the image stay in the exact proportion of the screen resizing it, however, applying this, the images lose their relative position, as seen in the image below:
As you can see, despite keeping the same proportion in W and H, the image lost its structural organization in relation to the original position defined on the developer's screen.
I've been in this problem for a while
The closest I got was to add on the Y and X axis how much a certain image has decreased, however, if i do that both images will be corrected, but they would still be out of relative position between them, as shown in the image below:
[]
This problem of logic and algorithm is a little beyond my applicable knowledge, alone I can't find a solution, so I sincerely ask for help, or direction to the way where I can solve it.
Based on your comments, you want to scale both axes by the same amount, and you want to handle ratio mismatch by adding empty stripes at window edges as needed.
First you compute the scale: scale = min(w2/w1, h2/h1), where w1,h1 is the source size, and w2,h2 is the target size.
Next, assuming 0,0 is in the center of the screen, you can just do x2 = x1*scale, y2 = y1*scale, where x1,y1 are source coordinates and x2,y2 are converted coordinates.
But if 0,0 is in a corner of the screen for you (which is more probable), you have to do something like:
offset_x = (w2 - w1 * scale) / 2
offset_y = (h2 - h1 * scale) / 2
Then:
x2 = x1 * scale + offset_x
y2 = y1 * scale + offset_y
How to indicate the sizes of objects and their coordinates when developing a mobile game. For buttons, I tried to indicate a percentage of the screen size (local scrPercentW = display.actualContentWidth / 100) or division of a constant display.contentCenterX (display.contentCenterY). But in the simulator on some devices it’s right, but at some intervals and sizes it’s wrong.
For example, I have four buttons on the menu that I need to arrange at the same distance from each other and from the edges of the screen. How should I do it?
I see that you resolved the problem of display.contentWidth, while for the size of a text you just need this:
local someText = display.newText( "here goes your text", 20, 80 )
someText.size = 30
I'm currently trying to place text in the four corners of the screen but the thing I came across was that in some screen resolutions(e.g. 1080*1920) the anchor points aren't right in the corner. the x values for some reason are the same, but the y changes, and is not close to the corner of the screen. Here is an example of me placing some text in the top right corner:
local myText = display.newText( "RIGHT", 0, 0, native.systemFont, 16 )
myText:setFillColor( 0, 0, 0 )
myText.anchorX = 1
myText.anchorY = 0
myText.x = display.contentWidth
myText.y = 0
I can't understand why this doesn't work for all screen resolutions.
Will this work for you:
-- Top
myText.y = display.screenOriginY;
-- Bottom
myText.y = display.contentHeight - display.screenOriginY;
-- Right
myText.x = display.contentWidth - display.screenOriginX;
-- Left
myText.x = display.screenOriginX;
Tha anchor points of display objects don't change.
The coordinate system of screen change depends on scaling mode. So top-left point not always will be (0, 0). For example in letterbox mode top-left point would be (display.screenOriginX, display.screenOriginY).
From Corona documentation
"letterbox" — scales the content area to fill the screen while preserving the same aspect ratio. The entire content area will reside on the screen, but this might result in "black bars" on devices with aspect ratios that differ from your content aspect ratio. Note, however, that you can still utilize this "blank" area and fill it with visual elements by positioning them or extending them outside the content area bounds. Essentially, "letterbox" is an ideal scale mode if you want to ensure that everything in your content area appears within the screen bounds on all devices.
"zoomEven" — scales the content area to fill the screen while preserving the same aspect ratio. Some content may "bleed" off the screen edges on devices with aspect ratios that differ from your content aspect ratio. Basically, "zoomEven" is a good option to ensure that the entire screen is filled by the content area on all devices (and content clipping near the outer edges is acceptable).
Letterbox
zoomEven
Read more about Content Scaling.
I'm brand new to corona SDK and following tutorials. I notice that when I'm positioning elements theyre not appearing as they do in the tutorials. For example:
local testRect = display.newRect( 0, 0, 50, 50 )
testRect:setFillColor( 0.5,0,0 )
In the tutorial it looks like this:
I would guess the anchor point on the rectangle would be 0.5, 0.5 and I'd have to position it 50% to the right, and 50% from the top of the upper left corner. It looks like in their example the rectangle has an anchor point of 0, 0 and is stuck to the edge of the screen by default.
Why is there a difference? i notice this tutorial is using an iphone 4.. but should that matter?
A couple of years ago, Corona SDK went to their Graphics 2.0 standard. Part of this move was to get all display.* objects to behave the same when creating them. Before Graphics 2.0, some objects the X and Y values meant top left, for others it meant center. With Graphics 2.0, all X and Y values when creating an object are the center of the object now.
If you have an older tutorial, it may be assuming that the x, y is top left. In your example you are creating the object at 0, 0 which is the top left corner of the content area. Since you're on a screen that's wider than it's defined content area, 0, 0 isn't always the top left corner of the screen.
I'm guessing your config.lua is setting the width to 320 and the height to 480 (always listed as if the device was in portrait mode). But you're using an iPhone 5 screen, which means the top left corner is -44, 0. This explains why the image isn't all the way to the left edge.
I am sure the anchor points they using are 0.5,0.5.
I suggest you check your build.settings file .. I tried the code and got the same result they had ..
Again CHECK your build.settings file
I'm learning Corona SDK and am new to lua as well (i mainly do ruby and some javascript).
I have a bar that i want to fill up as the user does stuff. I've set it up as follows:
--outer rectangle
powerBar = display.newRect(210, 6, 24, 9)
powerBar.strokeWidth = 1
powerBar:setStrokeColor(254,203,50)
powerBar:setFillColor(0,0,0,0)
--inner rectangle which fills up
powerBarFill = display.newRect(211,7,0,7)
powerBarFill:setFillColor(234,183,30)
When the "stuff" happens, i add 1 to powerBarFill.width, which i thought would make it grow from left to right. But, it's actually growing out from the centre, ie its x is in the centre and the width extends either side from that.
Whats the best way to keep the left side static and grow the right side? Can i set it so that it's x position is actually on the left hand side rather than in the middle? Seems like that might do it.
cheers in advance
I've run into this problem as well when creating a progress bar. The problem is with the rect's reference point. The default reference point is in the center of an object, as you've noticed. You can use object:setReferencePoint() to change it. I believe you want to use the display.BottomLeftReferencePoint value:
powerBar:setReferencePoint(display.BottomLeftReferencePoint)
Keep in mind that you have to set this value before you set your x,y values. So in your case you'll need to set the reference point after creating the rectangle, and then assign values to x,y again (even though you already did this in the newRect constructor):
powerBar = display.newRect(210, 6, 24, 9)
powerBar:setReferencePoint(display.BottomLeftReferencePoint)
powerBar.x, powerBar.y = 210, 6
If it's width is from the X position on both sides:
1) It should start at:
Centre - (Width when it's full / 2)
2) Every frame, add:
incrs = 1 --Amount to increase by
width = width + incrs
x = x + incrs / 2