Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Classic Chat / Render Target mathematics

Author
Message
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 9th Aug 2015 18:19 Edited at: 13th Aug 2015 11:54
[EDIT] The solution to this post is here (link to post further down this thread)

I'm struggling to get my head around the maths (In the UK, we have more than one math ) of Drawing on render targets, and then displaying the at the right dimensions and proportions.

In my first attempt, I had a square render target that was the height and width of getVirtualWidth(). I ended up with distorted images, so I made life simple for myself and made the render target the same size. I also made my Windows window the same as the virtual size, and this solved all of my problems.

But now I have started to test on a mobile device. Once again I have the distortion problem because my dimensions are not the same ratio as the Windows screen. If I draw a circle, it is shorter and wider.

What I would like in a perfect world is the square render target, that is the same width and height as my virtual width. Then, I need to be able to draw to it in the right place and at the right dimensions. I need to be able to convert a click on the screen 25% left and 10%, to the same spot on the render target.

Is there a simple formula to do this? I have been playing with getDeviceHeight/Width, but ending up with mode obscure ellipses and centrepoints

Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt
Markus
Valued Member
20
Years of Service
User Offline
Joined: 10th Apr 2004
Location: Germany
Posted: 9th Aug 2015 20:41 Edited at: 9th Aug 2015 21:07
i made some tests but render to image did not work at android.
it looks different from pc, means the outer area is missing.




AGK (Steam) V2 Beta .. : Windows 10 Pro, 8.1 Pro 64 Bit : AMD (15.7.1) Radeon R7 265 : Mac mini OS X 10.10 (Yosemite)
Cor
AGK Developer
13
Years of Service
User Offline
Joined: 19th Dec 2010
Location: Its a trap!
Posted: 9th Aug 2015 20:52
Are you using the virtual resolution or the percentage system? I used to use the virtual resolution for everything but then my last project (jimmys escape) I decided to use the percentage system.....it is sooo much better in my opinion. You will have to specify the size of everything but for one of the axis you can specify -1 which makes your images proportional. The game runs full screen and looks the same on every device. Sorry if I am not much help I'm away from my computer right now .
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 9th Aug 2015 22:16 Edited at: 9th Aug 2015 22:17
I'm using virtual resolution, and I won't be able to change now for this project.

@Markus, your demonstration illustrates my problem. On Android, even if your rendertarget is the same ratio size as the virtual dimensions, you don't get a round circle. I can't work out how to draw a perfect circle on a render target, exactly in the centre.

(The outer area is missing because Android is adding 24 pixels on to the height! It reports 1104, not 1080 on my HD tablet)

Edit: Why do you use SetDisplayAspect after SetVirtualResolution? I don't think this was relevant to virtual resolution?

Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt
Matty H
15
Years of Service
User Offline
Joined: 7th Oct 2008
Location: England
Posted: 9th Aug 2015 22:23
Quote: "What I would like in a perfect world is the square render target, that is the same width and height as my virtual width. Then, I need to be able to draw to it in the right place and at the right dimensions. I need to be able to convert a click on the screen 25% left and 10%, to the same spot on the render target."


I think the key is storing the ratio between the screen width and the render target width, and same with height.

For instance, make your render target always larger than the screen. If your screen is 1600 x 900 make your render target 2048x1024, some android devices require this power of 2, other devices may do too, I'm not sure.

Your conversion ratios are:
Width: 1600/2048 = 0.781
Height: 900 /1024 = 0.879

This means that when you have a point on your screen, multiply it by the above ratios for width(x) and height(y) and it will give you the point on your render target. If your render target is a sprite placed at (0,0) then this is all you need I think.

Since you are using percentage system I would think the conversion ratios would simply be:
Width: 100 / 2048
Height: 100 / 1024
You would need to know device height and width to decide how large to make your render image. The above presumes 1600x900.

If you want smaller render images then you just half it's size and take that into account when you calculate your ratios.

Hope that helps, I am going on holiday very soon so can't respond again, hope I never made a mistake

Markus
Valued Member
20
Years of Service
User Offline
Joined: 10th Apr 2004
Location: Germany
Posted: 9th Aug 2015 23:48 Edited at: 9th Aug 2015 23:50
i think this render to image have a bug at android.
the screen i see, should appear inside my render image.

if u use SetDisplayAspect 1 the
VirtualResolution appear as a square.
i believe SetVirtualResolution set this Aspect,
means this command is optional.

AGK (Steam) V2 Beta .. : Windows 10 Pro, 8.1 Pro 64 Bit : AMD (15.7.1) Radeon R7 265 : Mac mini OS X 10.10 (Yosemite)
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 10th Aug 2015 10:45
Thanks Matty, I will try this shortly.

Markus, I think you are right about the bug. maybe the difference in height is because it has added the size of the system bar at the bottom of the screen (back button etc) instead of subtracting it.

Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt
Markus
Valued Member
20
Years of Service
User Offline
Joined: 10th Apr 2004
Location: Germany
Posted: 10th Aug 2015 13:59
about what you said,
i believe we have different results at different android devices.

AGK (Steam) V2 Beta .. : Windows 10 Pro, 8.1 Pro 64 Bit : AMD (15.7.1) Radeon R7 265 : Mac mini OS X 10.10 (Yosemite)
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 10th Aug 2015 19:01 Edited at: 10th Aug 2015 19:02
I'm missing something really obvious. This is ONLY Windows at the moment,and the code is simplified. I want a perfect circle. Here is my result, the purple square is my render image, on a square sprite that is the virtual width. I have included the full window



I start by making a square render image to the power of 2, and drawing the circle:



Then, I create a sprite from this image, and resize it to VirtualWidth



Why is this so difficult?!?!?

Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt

Attachments

Login to view attachments
Markus
Valued Member
20
Years of Service
User Offline
Joined: 10th Apr 2004
Location: Germany
Posted: 10th Aug 2015 19:36
i think all drawings belongs the virtual resolution and this
will copied scaled into your render image.

AGK (Steam) V2 Beta .. : Windows 10 Pro, 8.1 Pro 64 Bit : AMD (15.7.1) Radeon R7 265 : Mac mini OS X 10.10 (Yosemite)
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 10th Aug 2015 20:24 Edited at: 10th Aug 2015 20:28


Okay, so I have my screen - virtual width/height = 600/960
I have a render target - 1024/1024

When I click at 450, 150 on the screen, I want to draw a circle at the same relative point on the render image (e.g . 768, 256). This is then used on the screen sprite so that the circle appears where I clicked.



I have tried to implement like this...



This is perfect when MyX# is half virtual width and MyY# is half virtual width, but the further I go from the centre of the screen, the more incorrect it becomes. For example (numbers are made up)
ScreenX 50% = RenderImage 50%.
ScreenX 75% = RenderImageX 80%
ScreenX 25% = RenderImageX 20%

Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt

Attachments

Login to view attachments
Scraggle
Moderator
21
Years of Service
User Offline
Joined: 10th Jul 2003
Location: Yorkshire
Posted: 10th Aug 2015 21:36
If I understand this correctly then you want to use relative positions with a virtual resolution.

This will convert a percentage based co-ordinate to a virtual one:


... and if you want to go the other way:


AGK V2 user - Tier 1 (mostly)
Markus
Valued Member
20
Years of Service
User Offline
Joined: 10th Apr 2004
Location: Germany
Posted: 10th Aug 2015 21:39 Edited at: 10th Aug 2015 21:41
(MyX# / vw# * 1024)
mouse 600 / 600 width = 1
1 * 1024

i believe so + .0 because float
(MyX# / vw#) * 1024.0

AGK (Steam) V2 Beta .. : Windows 10 Pro, 8.1 Pro 64 Bit : AMD (15.7.1) Radeon R7 265 : Mac mini OS X 10.10 (Yosemite)
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 11th Aug 2015 10:57 Edited at: 11th Aug 2015 11:00
Thanks again
It turns out my last attempt was correct, apart from one thing. In all of the confusion, I had forgotten to reduce my onscreen sprite to the screen width, it was still 1024.

I don't think it is possible to use render images for anything at an angle. In this image below, the same sprite is rotated and pasted around the circle.

At the top and bottom of the circle it looks correct.
At the sides, it is shortened (this could be fixed)
At an angle the sprites are distorted.



The only solution I think is to make the render image the same dimensions as the screen. But this might not work on all devices that need power of 2 images.

Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt

Attachments

Login to view attachments
haliop_New
User Banned
Posted: 11th Aug 2015 15:38
hi what if the positions needs to be in 3d ?

where you display the renderimage on a 3d object

and i send a 3draycast with my mouse pointer towards the 3d virtual world

???
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 11th Aug 2015 21:42
I can't take any more!

I discovered that you can change the virtual resolution while drawing to the render image. So I could set it to 1024,1024, and get all of my sprites in the right perspective, no distortion.

However, it still doesn't work! If I have a virtual resolution of 1024x1024, and a render image of 1024x1024, it should be a 1:1 relationship. This isn't the case, it still draws erratic.
And...it displays differently on Windows and Android. I think this functionality is not suitable for production.

If anyone knows how to make this work, and work the same on all devices, please step forward!

I also tried the demo on the help page for SetRenderToImage, and this doesn't work consistently either.

Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 12th Aug 2015 00:58
I have created a test program for anyone that can help resolve this.
You can add as many combinations as you like to options.txt. It sets up the device size (for Windows), virtual dimensions and render image dimensions

The result needs to be 5 circles (not ovals) on both Windows and mobile devices.

Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt

Attachments

Login to view attachments
JLMoondog
Moderator
15
Years of Service
User Offline
Joined: 18th Jan 2009
Location: Paradox
Posted: 12th Aug 2015 16:47
..I don't see a problem with the example program. :/ I get perfect circles in every iteration and platform test...

BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 12th Aug 2015 17:27 Edited at: 12th Aug 2015 17:28
Here is option 3, on my desktop (top) and 1920*1200 tablet (bottom)
Definitely distorted!



Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt

Attachments

Login to view attachments
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 12th Aug 2015 17:37 Edited at: 12th Aug 2015 17:38
This is the 2 overlaid. The yellow circles are the tablet circles, all compressed in the physically shorter axis. I say this rather than Y, because in experiments in portrait mode they are compressed in the x-axis (still the shorter axis).

The other axis is not compressed in any way.



Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt

Attachments

Login to view attachments
xCept
21
Years of Service
User Offline
Joined: 15th Dec 2002
Location:
Posted: 13th Aug 2015 04:02
I don't really know how to help but have found AGK's implementation of render images to be very quirky under many circumstances and a far cry from how it is implemented in some other engines. Sorry hope you can solve it!
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 13th Aug 2015 11:03
I fixed my problem, can a mod delete this thread please.

I'm joking...I'm a mod, I can delete it myself.

No really, I'm joking!!

I will update the thread later today (after work) with my solution, I am just posting now to make sure nobody wastes any time before I post again. It's working pixel perfect in Windows and Android, with the same results in both.

Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt
haliop_New
User Banned
Posted: 13th Aug 2015 11:30
Come on BAT show us !!
CJB
Valued Member
20
Years of Service
User Offline
Joined: 10th Feb 2004
Location: Essex, UK
Posted: 13th Aug 2015 11:35
Such a tease!

V2 T1 (Mostly)
Phone Tap!
Uzmadesign
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 13th Aug 2015 11:50
There is a working example here (which I found this morning ), but to summarise these are the factors that you need to take into account...

1. Render Images are based on the screen buffer
2. If your screen has borders (doesn't fit the device screen exactly), your render image will have borders.
3. Only powers of 2 work
4. You must work in screen virtual coordinates. If your render image is 1024x1024 and your virtual screen is 1920x1080, then the centre of the 1024x1024 render image is 960,540.
5. You must double-buffer

Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt
haliop_New
User Banned
Posted: 13th Aug 2015 12:39
Bat i still dont see how that helps me
can you please take a look at the following code and maybe help out ?



the idea as the same like here but only that the correct positions should be transformed into 3D then back into 2D screen coords
it should only paint when the mouse cursor is on the 3d plane and in the exact position as the 3d raycast x,y,z that hits the 3d plane.

im trying to work it out but without succes so far..
if you can share any thoughts please do.

haliop.

p.s maybe TGC should consider adding extra features to RenderToImage such as FixXYtoRenderToImage before the drawSprite calls or something i dont know... just so it would work automatic without the use of extra code which will make users lose more battery then needed....

i think TGC should consider making RenderToImage ever simplier to handle since RenderToImage is the feature that will make AppGameKit be able to Get as far to AAA games and apps cause honestly you cant do whatever you want on mobiles since of limitations however using Sprites/Planes with a decent rendered image will make our games look much much better.
haliop_New
User Banned
Posted: 13th Aug 2015 12:42
and what about the command FixDeviceScreen(1) so it will work like a FixSpriteToScreen in some sorth ...
a command like this should lock everything to work the same on all devices no matter what. i have no idea how something like this should work.. but maybe it is possible after all .. maybe not.. please consider.
SpecTre
Developer
21
Years of Service
User Offline
Joined: 24th Feb 2003
Location: UK
Posted: 13th Aug 2015 15:45
Also if you look at the end of the thread I was having issues with, I still haven't solved Render Images as they are more problems coming up with them, mainly on Android and sometimes on Windows randomly. Bleeding colours was just one issue.

Unless you have solved these too Batvink, I would be very interested with solutions as I can only release Doodle Draw on IOS

The Amiga and Amos were great!
My website LEAP - Download Paint Pot here!
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 14th Aug 2015 00:46
Quote: "Unless you have solved these too Batvink, I would be very interested with solutions as I can only release Doodle Draw on IOS"


For the problem of leaving the app and then resuming, I thought I had a crude but effective method. At the appropriate moment (when the user stops making any actions) I did a getImage() and then restored this image on GetResumed().

On Windows it is seamless
But on Android this takes about a second, so the app freezes

If I can find a way to save the render image without freezing the app, I will be a happy man.

Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 14th Aug 2015 01:09
I tried a couple more things...

1. Saving the image to a file. Bizarrely this was quicker than getImage()!
But it is still too slow and causes a momentary freeze.

Then I tried CreateImageFromMemblock(). This is really fast, and barely noticeable. On Windows it works well once you get past the peculiarities of render images. When you restore it, you have to expand it out to the size of the screen and just take the bit you need...even though you only saved the bit you need!
But again on Android it fails. It restores a blank image. I will save it to a file later and see if it even grabbed the image in the first place.

Quidquid latine dictum sit, altum sonatur
TutCity is being rebuilt
SpecTre
Developer
21
Years of Service
User Offline
Joined: 24th Feb 2003
Location: UK
Posted: 14th Aug 2015 01:32
Yes it's a bit of a headache

If you look here:
http://forum.thegamecreators.com/?m=forum_view&t=214331&b=41

You will also see there are some issues with CreateImageFromMemblock(), mainly the speed in a loop is quite slow and also how it seems to eat away at memory or something over time reducing the FPS of an app on android again.
I also used CreateImageFromMemblock() in the early versions of Paint Pot and after constant playing of the app it eventually crashed and shut down on Android.

I really like the idea of Render Images and memblocks suiting my style of coding however they drove me crazy with problems so after Doodle Draw is out I am totally rethinking how I code with mainly sprites which seems to be the way to go with AppGameKit as they work well.

I have found that this method to be good doing the retro demo.

The Amiga and Amos were great!
My website LEAP - Download Paint Pot here!

Login to post a reply

Server time is: 2024-09-29 03:27:55
Your offset time is: 2024-09-29 03:27:55