Virtual Resolution issue? - GameCreators Forum

Author

Message

mindsclay

12

Years of Service

User Offline

Joined: 1st May 2012

Location: Rocklin, CA, USA

Posted: 4th Jan 2014 05:14 Edited at: 4th Jan 2014 06:57

Link

I hadn't noticed this before, so it might be an issue with my code (that I cannot see). The virtual resolution doesn't seem to work for my overlay sprites. I have an image then some sprites on top to show the "click areas". The overlay sprites are oversized even though I am using the size of the original sprite as a reference.

The only time this works correctly is when the device resolution (in setup.agc) matches the virtual resolution.

imgSprite = CreateSprite(LoadImage ("L0_1.jpg"))
    SetSpritePosition(imgSprite,screenWidth/2-GetSpriteWidth(imgSprite)/2,screenHeight/2-GetSpriteHeight(imgSprite)/2)

GLOBAL imageLeft
    GLOBAL imageUpper
    GLOBAL imageLower
    GLOBAL imageRight
    imageLeft=screenWidth/2-GetSpriteWidth(imgSprite)/2
    imageUpper=screenHeight/2-GetSpriteHeight(imgSprite)/2
    imageLower=imageUpper+GetSpriteHeight(imgSprite)
    imageRight=imageLeft+GetSpriteWidth(imgSprite)
    rem 0=LEFT,1=RIGHT ,2=UP ,3=DOWN ,4=CENTER

rem click areas
    perHeight as FLOAT=1.0
    perWidth as FLOAT=0.06

if show_clickArea=1
        leftClick=DrawAreaBox(GetSpriteWidth(imgSprite),GetSpriteHeight(imgSprite),perWidth,perHeight)
        left_clickArea= CreateSprite(leftClick)
        SetSpritePosition(left_clickArea,imageLeft,imageUpper)
    endif
    click[0]._Left=imageLeft
    click[0]._Upper=imageUpper
    click[0]._Right=click[0]._Left+GetSpriteWidth(imgSprite)*perWidth
    click[0]._Lower=click[0]._Upper+GetSpriteHeight(imgSprite)*perHeight

+ Code Snippet

imgSprite = CreateSprite(LoadImage ("L0_1.jpg"))
    SetSpritePosition(imgSprite,screenWidth/2-GetSpriteWidth(imgSprite)/2,screenHeight/2-GetSpriteHeight(imgSprite)/2)

    GLOBAL imageLeft
    GLOBAL imageUpper
    GLOBAL imageLower
    GLOBAL imageRight
    imageLeft=screenWidth/2-GetSpriteWidth(imgSprite)/2
    imageUpper=screenHeight/2-GetSpriteHeight(imgSprite)/2
    imageLower=imageUpper+GetSpriteHeight(imgSprite)
    imageRight=imageLeft+GetSpriteWidth(imgSprite)
    rem 0=LEFT,1=RIGHT ,2=UP ,3=DOWN ,4=CENTER

    rem click areas
    perHeight as FLOAT=1.0
    perWidth as FLOAT=0.06

    if show_clickArea=1
        leftClick=DrawAreaBox(GetSpriteWidth(imgSprite),GetSpriteHeight(imgSprite),perWidth,perHeight)
        left_clickArea= CreateSprite(leftClick)
        SetSpritePosition(left_clickArea,imageLeft,imageUpper)
    endif
    click[0]._Left=imageLeft
    click[0]._Upper=imageUpper
    click[0]._Right=click[0]._Left+GetSpriteWidth(imgSprite)*perWidth
    click[0]._Lower=click[0]._Upper+GetSpriteHeight(imgSprite)*perHeight

DrawAreaBox()

+ Code Snippet

FUNCTION DrawAreaBox(boxWidth,boxHeight,percentWidth as float,percentHeight as float)
    swap()
    xOffset=1
    yOffset=1
    DrawLine( xOffset, yOffset, xOffset, boxHeight*percentHeight, 255, 255, 255 )
    Update(0)
    Render()
    DrawLine( xOffset, boxHeight*percentHeight, boxWidth*percentWidth, boxHeight*percentHeight, 255, 255, 255 )
    Update(0)
    Render()
    DrawLine( boxWidth*percentWidth, boxHeight*percentHeight, boxWidth*percentWidth, yOffset, 255, 255, 255 )
    Update(0)
    Render()
    DrawLine( boxWidth*percentWidth, yOffset, xOffset,yOffset, 255, 255, 255 )
    Update(0)
    Render()
    areaImage=GetImage(0,0,boxWidth+1,boxHeight+1)
ENDFUNCTION areaImage

I am using AppGameKit V108 beta 19. V2 alpha does not work on android yet so I cannot check if that works.

www.mindsclay.com
lucifermagus.mindsclay.com (not working with Firefox)

Back to top

Profile PM Email Website

mindsclay

12

Years of Service

User Offline

Joined: 1st May 2012

Location: Rocklin, CA, USA

Posted: 4th Jan 2014 06:26 Edited at: 4th Jan 2014 06:27

Link

Here are some images to help explain:

What I need (this is when initial res. and virtual res. are the same)

What I get (this is when initial res. and virtual res. are NOT the same)

www.mindsclay.com
lucifermagus.mindsclay.com (not working with Firefox)

Back to top

Profile PM Email Website

Markus

Valued Member

20

Years of Service

User Offline

Joined: 10th Apr 2004

Location: Germany

Posted: 4th Jan 2014 14:50

Link

did u use
GetVirtualHeight()
GetVirtualWidth()

for screenWidth & Height vars?

AGK 108 B19 : Windows 8.1 Pro 64 Bit : AMD Radeon HD 6670

Back to top

Profile PM Email

apocolyp4

14

Years of Service

User Offline

Joined: 10th Jun 2010

Location:

Posted: 4th Jan 2014 15:46

Link

I don't think the issue is with the Virtual Resolution but with the drawing commands themselves. It seems like the drawing commands don't scale with the Virtual Resolution but rather with the size of the games window size.

Back to top

Profile PM

Ancient Lady

Valued Member

20

Years of Service

User Offline

Joined: 17th Mar 2004

Location: Anchorage, Alaska, USA

Posted: 4th Jan 2014 17:59

Link

What are the image sizes, virtual resolutions being used and values in the setup.agc (which only applies to Windows and nothing else at all).

I have had no issues with sizes of things in Virtual Resolution mode.

Cheers,
Ancient Lady
AGK Community Tester and AppGameKit Master

Back to top

Profile PM

mindsclay

12

Years of Service

User Offline

Joined: 1st May 2012

Location: Rocklin, CA, USA

Posted: 5th Jan 2014 03:01

Link

The game's window size IS the virtual resolution. That is how I am centering the image, using the virtual resolution size and the image size (sprite size) as shown in the code snippet above.

The image size is 320x180 (small for short render time and development purposes).

The virtual resolution is stated in the code snippet above (1280x720).

The value of the setup.agc:

+ Code Snippet

rem Specify the initial device width
width=1920

rem Specify the initial device height
height=1080

// Specify whether to use fullscreen mode
fullscreen=0

Those values of 1920x1080 cause the problem. If I change them to 1280x720 then it works correctly (in Windows).

The same calculated values for the 'drawings' are used for the 'click areas'. The click areas are the correct size, only the sprites are the wrong size. Both should cover the same area of the screen since the values used are the same for both.

I was under the impression that sprites are supposed to re-size with the virtual resolution settings. The first sprite with the image sizes correctly, only the sprites with the boxes are incorrect.

Perhaps I need to draw the boxes first and transfer them to sprites before setting the virtual resolution? This is not true for the other sprites that use images.

www.mindsclay.com
lucifermagus.mindsclay.com (not working with Firefox)

Back to top

Profile PM Email Website

BatVink

Moderator

21

Years of Service

User Offline

Joined: 4th Apr 2003

Location: Gods own County, UK

Posted: 5th Jan 2014 10:29

Link

Quote: "Perhaps I need to draw the boxes first and transfer them to sprites before setting the virtual resolution?"

I hope not, this would be a nightmare scenario to deal with

It looks from your PerWidth, PerHeight values that you are using percentage based screen sizes? Is this perhaps the problem? I use normal screen dimensions and don't have this problem.

ten-net consulting limited

Back to top

Profile PM Email

Ancient Lady

Valued Member

20

Years of Service

User Offline

Joined: 17th Mar 2004

Location: Anchorage, Alaska, USA

Posted: 5th Jan 2014 18:19

Link

Unless you have code that explicitly sets the virtual resolution, the app defaults to the percentage system. The two systems do NOT work together.

The setup.agc file is used to tell the Windows version the expected size of the display.

Can you show the code you use to set up the display? Not the sprites, the actual display. If you are using virtual resolution this includes the command SetVirtualResolution. If you want your sprites to fill spaces outside of the defined resolution (overdrawing), you also need to use the command SetScissor(0,0,0,0). Both of these commands need to be called before you load images and create sprites.

Cheers,
Ancient Lady
AGK Community Tester and AppGameKit Master

Back to top

Profile PM

mindsclay

12

Years of Service

User Offline

Joined: 1st May 2012

Location: Rocklin, CA, USA

Posted: 11th Jan 2014 03:36 Edited at: 11th Jan 2014 03:42

Link

I am using the percentage of the image size not the screen size. Thus, GetSpriteWidth(imgSprite),GetSpriteHeight(imgSprite).
That way when the image size changes (later when I go full res) the overlay sprites and centering will adjust accordingly. I have done this before in DBPro and it worked as expected.

Here is the display setup code. Nothing special.

+ Code Snippet

GLOBAL screenWidth as FLOAT=1280.0
GLOBAL screenHeight as FLOAT=720.0
SetVirtualResolution(screenWidth,screenHeight)

Yes. I know what the setup.agc is doing.

And I repeat, the dimensions of the click areas are working correctly using the same values/math, only the sprites are drawing incorrectly. I am using the same values for upper-left and lower-right. The sprites should be outlining the click areas.

It appears that the image(first sprite) is scaling correctly.

I am using this method of overlays because I cannot change the mouse sprite. I would try creating my own mouse sprite later, for now I am trying to develop the game engine and mechanics.

www.mindsclay.com
lucifermagus.mindsclay.com (not working with Firefox)

Back to top

Profile PM Email Website

Marl

13

Years of Service

User Offline

Joined: 19th Nov 2011

Location: Bradford, UK

Posted: 11th Jan 2014 11:38

Link

I've had similar positioning problems in the past - mine was text size.

Calling sync() after setting the virtual res and before changing the size and position of stuff sorted it for me.

It's like the objects were still positioned with the old res until the sync() was called.

Back to top

Profile PM Email

Markus

Valued Member

20

Years of Service

User Offline

Joined: 10th Apr 2004

Location: Germany

Posted: 11th Jan 2014 12:06 Edited at: 11th Jan 2014 12:36

Link

maybe remove this
perHeight as FLOAT=1.0
perWidth as FLOAT=0.06
and use at DrawAreaBox x1#,y1#,x2#,y2#

rem
rem AGK Application 1.08 19
rem

GLOBAL screenWidth#
screenWidth#=1280.0
GLOBAL screenHeight#
screenHeight#=720.0

SetVirtualResolution(screenWidth#,screenHeight#)

imgSprite = CreateSprite(0)
setspritesize(imgSprite,screenWidth#,screenHeight#)
setspritecolor(imgSprite,200,0,0,255)

SetSpritePositionbyoffset(imgSprite,screenWidth#/2.0,screenHeight#/2.0)

xLeft#=0
    xUpper#=0
    xRight#=screenWidth#
    xLower#=screenHeight#

do

DrawBox(xLeft#,xUpper#,xLeft#+64,xLower#) //Left
    DrawBox(xLeft#+64.0,xUpper#,xRight#-64.0,xUpper#+64.0) //Top
    DrawBox(xLeft#+64.0,xLower#-64.0,xRight#-64.0,xLower#) //Bottom
    DrawBox(xRight#-64.0,xUpper#,xRight#,xLower#) //Right

if getpointerpressed()=1
    exit
   endif

sync()

loop
end

FUNCTION DrawBox(x1,y1,x2,y2)
    DrawLine( x1, y1, x2, y1, 255, 255, 255 ) //Top
    DrawLine( x2, y1, x2, y2, 255, 255, 255 )   //Right
    DrawLine( x1, y2, x2, y2, 255, 255, 255 )   //Bottom
    DrawLine( x1, y1, x1, y2, 255, 255, 255 ) //Left
ENDFUNCTION

+ Code Snippet

rem
rem AGK Application 1.08 19
rem

GLOBAL screenWidth#
screenWidth#=1280.0
GLOBAL screenHeight#
screenHeight#=720.0

SetVirtualResolution(screenWidth#,screenHeight#)

imgSprite = CreateSprite(0)
setspritesize(imgSprite,screenWidth#,screenHeight#)
setspritecolor(imgSprite,200,0,0,255)

    SetSpritePositionbyoffset(imgSprite,screenWidth#/2.0,screenHeight#/2.0)

    xLeft#=0
    xUpper#=0
    xRight#=screenWidth#
    xLower#=screenHeight#

do

    DrawBox(xLeft#,xUpper#,xLeft#+64,xLower#) //Left
    DrawBox(xLeft#+64.0,xUpper#,xRight#-64.0,xUpper#+64.0) //Top
    DrawBox(xLeft#+64.0,xLower#-64.0,xRight#-64.0,xLower#) //Bottom
    DrawBox(xRight#-64.0,xUpper#,xRight#,xLower#) //Right

   if getpointerpressed()=1
    exit
   endif

    sync()

loop
end


FUNCTION DrawBox(x1,y1,x2,y2)
    DrawLine( x1, y1, x2, y1, 255, 255, 255 ) //Top
    DrawLine( x2, y1, x2, y2, 255, 255, 255 )   //Right
    DrawLine( x1, y2, x2, y2, 255, 255, 255 )   //Bottom
    DrawLine( x1, y1, x1, y2, 255, 255, 255 ) //Left
ENDFUNCTION

AGK 108 (B)19 : Windows 8.1 Pro 64 Bit : AMD Radeon HD 6670

Back to top

Profile PM Email

mindsclay

12

Years of Service

User Offline

Joined: 1st May 2012

Location: Rocklin, CA, USA

Posted: 16th Jan 2014 03:11

Link

You guys are not understanding what I am doing.

Thanks, Markus, but your code shown does nothing for my issue. The sprite sizes are based on the size of the initial sprite containing the image. NOT the screen size. When I change the image size later on I want the sprites to adjust accordingly.

I am using
perHeight as FLOAT=1.0
perWidth as FLOAT=0.06
to assign the sprite size based on the image size. In otherwords, the height is 100% of the image size and the width is 6% of the image size. That way, when the image is larger, the sprite dimensions will still be 100% and 6% accordingly.

I am not changing the screen size after it is initialized.

I will try the Sync() as mentioned above to see if that helps. Otherwise, there is an issue with the SetVirtualResolution.

The only way this works correctly is when the device size and the virtual size are set the same. I am repeating myself again.

www.mindsclay.com
lucifermagus.mindsclay.com (not working with Firefox)

Back to top

Profile PM Email Website

mindsclay

12

Years of Service

User Offline

Joined: 1st May 2012

Location: Rocklin, CA, USA

Posted: 16th Jan 2014 03:35

Link

I am not sure the proper terminology, but I am writing code that can "evolve", or rather code that is versatile in that when content changes are made I would not have to change the code.

So if I have a function to draw overlay sprites on a 320x240 image, then that function can also draw the sprites on a 1280x720 or 640x480 image without changing any code.

When I have a 320x240 image, one sprite's width is 6% of the image width, or 14 pixels. If I use a 1280x720 image then the sprite width is 43 pixels. So the percentages I am using are necessary.

I wondered in an earlier post if I should be determining the sprite sizes first before the VirtualResolution setting. But the first sprite (the one with the image) is sizing and positioning just fine... apparently. Maybe it is not. It is centered correctly.

I may be merely doing thing out of order.

www.mindsclay.com
lucifermagus.mindsclay.com (not working with Firefox)

Back to top

Profile PM Email Website

Markus

Valued Member

20

Years of Service

User Offline

Joined: 10th Apr 2004

Location: Germany

Posted: 16th Jan 2014 09:25

Link

about sprize size ratio, a image looks best 1:1, you can set
as sprite size -1 for x or y, the sprite fit the screen ratio.
then the sprite is your orientation for x1,y1,x2,y2 and the others
sprites around.

AGK 108 (B)19 : Windows 8.1 Pro 64 Bit : AMD Radeon HD 6670

Back to top

Profile PM Email

Zwarteziel

13

Years of Service

User Offline

Joined: 22nd Jan 2011

Location: Netherlands

Posted: 17th Jan 2014 10:38 Edited at: 17th Jan 2014 10:42

Link

I'm facing a similar issue as mindsclay: I recently wrote some code to generate and show (part of) a minimap. I've implemented this in my game, which has a set virtual resolution of 1920x1080. The minimap is generated using a sprite of 8x8 pixels and spreads 64x64 tiles in width and height. It should thus generate an image of 512x512 pixels.

All of this works fine on my laptop, which has a native resolution of 1920x1080. However, when I test out the game on my desktop with a 1680x1050 resolution, the map turns out to be 448x448 pixels. The sprite that I create to generate the minimap seems to be, in effect, 7x7 pixels instead of 8x8, even though GetSpriteHeight() and -Width() report it to be 8x8. This is pretty obscure in my opinion and might be related to the issue posted here(?). I've tried the -1 tips mentioned in this thread, but to no avail.

Back to top

Profile PM Email

baxslash

Valued Member

Bronze Codemaster

17

Years of Service

User Offline

Joined: 26th Dec 2006

Location: Duffield

Posted: 17th Jan 2014 10:55 Edited at: 17th Jan 2014 10:56

Link

Zerotown, I assume you are using getImage for the 8x8 image? Sounds like you might be getting a smaller image than expected because you are using getImage on an area that is scaling down with the resolution.

Looking quickly at your code in the link posted this seems to be the case. Read this from the description of getImage:

+ Code Snippet

Note that the image produced by this command is not guaranteed to 
have the same width and height as those given to the command, this 
is because the image is created from a portion of the screen which 
has a different size on different devices. For example, with a 
virtual resolution of 480x360, you would get an image of the full 
screen by calling this command with a width of 480 and a height of 
360, but on an iPod this would produce an image of 480x360 pixels, 
whilst on an iPad it would be around 1024x768 pixels. This should 
not effect how you use the image as applying it to a sprite and 
setting the sprite size to the same 480x360 will make the sprite 
fill the screen in both cases. It simply means that on the iPad 
you have a higher quality image to play with.

oct(31) = dec(25)

Back to top

Profile PM Email

Zwarteziel

13

Years of Service

User Offline

Joined: 22nd Jan 2011

Location: Netherlands

Posted: 17th Jan 2014 11:11

Link

ah, baxslash... thank you for pointing that out: that does seem to be it! I never would have suspected that the problem lay with the GetImage()-command.

+ Code Snippet

inc ZerotownsKnowledge, 1
print("Yay!")
sync()

Back to top

Profile PM Email

baxslash

Valued Member

Bronze Codemaster

17

Years of Service

User Offline

Joined: 26th Dec 2006

Location: Duffield

Posted: 17th Jan 2014 11:50

Link

Just a lucky guess

oct(31) = dec(25)

Back to top

Profile PM Email

mindsclay

12

Years of Service

User Offline

Joined: 1st May 2012

Location: Rocklin, CA, USA

Posted: 18th Jan 2014 01:53

Link

So, what I am gathering, we need to calculate the actual displayed size and not use GetImageHeight and GetImageWidth since they don't report the size shown??

www.mindsclay.com
lucifermagus.mindsclay.com (not working with Firefox)

Back to top

Profile PM Email Website

baxslash

Valued Member

Bronze Codemaster

17

Years of Service

User Offline

Joined: 26th Dec 2006

Location: Duffield

Posted: 18th Jan 2014 10:07

Link

Yes, that should work, use getSpriteWidth rather than getImageWidth.

oct(31) = dec(25)

Back to top

Profile PM Email

mindsclay

12

Years of Service

User Offline

Joined: 1st May 2012

Location: Rocklin, CA, USA

Posted: 19th Jan 2014 01:35

Link

Wait... I am using GetSprite

www.mindsclay.com
lucifermagus.mindsclay.com (not working with Firefox)

Back to top

Profile PM Email Website

Zwarteziel

13

Years of Service

User Offline

Joined: 22nd Jan 2011

Location: Netherlands

Posted: 19th Jan 2014 10:32 Edited at: 20th Jan 2014 17:13

Link

Quote: "Wait... I am using GetSprite"

Does AppGameKit report a difference between the width and height of the image you grab and the sprite you then create? (e.g. when you check GetImageWidth() and CheckSpriteWidth() etc.?)

From the screenshots you posted, I think you should be able to calculate the (relative) positions you want to place your sprites at once you know their actual sizes and the virtual resolution of your screen. You could use SetSpriteSize to adjust it, so it fits perfectly over the area you want to be clickable.

Also, are you using floats when placing sprites (for the X and Y-coordinates) or integers? I've noticed that using integers resulted in small but very noticeable differences when placing sprites.

Back to top

Profile PM Email

Sorry your browser is not supported!

AppGameKit Classic Chat / Virtual Resolution issue?